Git Product home page Git Product logo

token-icons's People

Contributors

0xa3k5 avatar benface avatar dominicf96 avatar evilestvirus7 avatar github-actions[bot] avatar hasparus avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

token-icons's Issues

Website generally slow, freezes on any user action and over time

Hello again!

Summary:

The TokenIcons.io website is experiencing significant performance issues, including general slowness and frequent freezing during user interactions. Icons also stop loading after ~30 rows, website stops responding after ~5 seconds.

Steps to Reproduce:

  1. Navigate to TokenIcons.io.
  2. Attempt any user action, such as attempting to search, switch between Token/Network icons, switch between Mono/Branded icons, etc.
  3. Observe the website's responsiveness.

Expected Result:

The website should respond quickly and smoothly to user actions without any noticeable delays or freezes.

Actual Result:

  • The website loads slowly.
  • Any user action results in the website freezing completely.
  • Sometimes the website becomes completely unresponsive, requiring a page refresh.

Severity:

Low-Moderate; I personally mostly use token-icons as an NPM package, but tokenicons.io is a useful tool to see which icons are available.The Figma Plugin still works great (Congrats on 4.5k installs ๐Ÿ‘€๐Ÿ”ฅ), so there is a workaround.

Browser: Chrome (Version 125.0.6422.76),
Operating System: Windows 11

set up github actions for easier contribution

I've tried to build this myself, but I couldn't succeed.

There is a script add-icons which accepts a string as the second parameter and runs validation checks, finds matching rawdata and updates the relevant metadata.json with the correct object structure.

The github action should be triggered on:

  • pull_request
  • push to main
  • pull_request_target (to enable prs from forks)

and then should:

  • compared the committed changes in packages/core/src/raw-svgs/ with the last commit of main and pass the modified or newly added paths to the add-icons script:
bun run add-icons {{SVG_PATHS}}

afterwards the action should build the packages

bun run build --filter=@token-icons/react --filter=@token-icons/core

write a commit message with the newly added svgs and commit to the trigger (to pull request or directly to the main brach)

the draft version of this action can be found under icon-add.yml

name: icon-add

permissions:
  contents: write
  pull-requests: write

on:
  push:
    branches:
      - main
    paths:
      - 'packages/core/src/raw-svgs/**'
  pull_request:
    branches:
      - main
    paths:
      - 'packages/core/src/raw-svgs/**'

jobs:
  update-and-rebuild:
    runs-on: ubuntu-latest
    steps:
      - name: Setup bun
        uses: oven-sh/setup-bun@v1

      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          fetch-depth: 10

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

      - name: Install dependencies
        run: bun install

      - name: Identify New SVG Files
        id: files
        run: |
          SVG_FILES=$(git diff --name-only HEAD^ HEAD | grep 'packages/core/src/raw-svgs/' | tr '\n' ',')
          echo "SVG_FILES=${SVG_FILES%,}" >> $GITHUB_ENV
          echo "New SVG Files: $SVG_FILES"
          echo "New Token Icons: $newTokenIcons"
          echo "New Network Icons: $newNetworkIcons"

      - name: Update Metadata
        if: env.SVG_FILES
        run: |
          newTokenIcons=$(git diff --name-only HEAD^ HEAD | grep 'packages/core/src/raw-svgs/tokens/' | xargs basename -a | sed 's/.svg//' | sort -u | tr '\n' ', ' | sed 's/, $//')
          newNetworkIcons=$(git diff --name-only HEAD^ HEAD | grep 'packages/core/src/raw-svgs/networks/' | xargs basename -a | sed 's/.svg//' | sort -u | tr '\n' ', ' | sed 's/, $//')
          echo "newTokenIcons=$newTokenIcons" >> $GITHUB_ENV
          echo "newNetworkIcons=$newNetworkIcons" >> $GITHUB_ENV
          bun run ./packages/utils/src/scripts/add-icons.ts ${{ env.SVG_FILES }}

      - name: Build Packages
        run: |
          bun run build --filter=@tknicns/core --filter=@tknicns/react
        
      - name: Commit Changes
        run: |
          git config --global user.name 'github-actions[bot]'
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
          git add .
          commitMessage=""
          description=""

          if [ -n "$newTokenIcons" ] && [ -n "$newNetworkIcons" ]; then
            commitMessage="core: add new token icons & network icons"
            description+="token icons: $newTokenIcons\nnetwork icons: $newNetworkIcons"
          elif [ -n "$newTokenIcons" ]; then
            commitMessage="core: add new token icons"
            description+="token icons: $newTokenIcons"
          elif [ -n "$newNetworkIcons" ]; then
            commitMessage="core: add new network icons"
            description+="network icons: $newNetworkIcons"
          fi

          if [ -n "$description" ]; then
            git commit -m "$commitMessage" -m "$description" || echo "No changes to commit"
          else
            echo "No new icons to commit"
          fi
          git push origin ${GITHUB_HEAD_REF:-${GITHUB_REF}}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.