Extra chains logos

[technophile-04]

Description:

In #109 we allowed users to add more chains(chains which are provided by wagmi) to dropdown, Maybe we could denote somehow that this chains were added by user? Maybe different logo or some extra text? Currently we show same logo(Ethereum mainnet logo) for all the added chains.

[Pabl0cks]

Maybe we could have our ninja with a small pencil or gear on it? Not sure, maybe is better to ask Andrea 😅

[portdeveloper]

Would love to have some custom icons for these + custom chains added by the user!

[Pabl0cks]

Would love to have some custom icons for these + custom chains added by the user!

Do you see a different icon for extra chains and for custom chains? (when we have this feature) Or both could be the same.

Summoning @andrealbiac for help on the icon/icons! 🙌♥

[andrealbiac]

Hello! I made some tests for the icons, for now only one for custom + extra chains, but we can differentiate those if you think it makes more sense.

I liked Pablo's idea about the ninja and a pencil but I think it may be too much detail for such a small icon, the abi ninja logo itself (1st picture) already looks kinda small but I think it's what makes more sense/ more understandable for the user.

Tried with only the head to make it less detailed, and also with the 'edit' type icon - this one also works but maybe it looks like a button?

Let me know your thoughts! Maybe I can try something with a gear too

[Pabl0cks]

I like the light-purple bg ones with the ninja, either the head or the full logo.

The pencil ones may make you think you can edit them, maybe they could fit the "custom-manually added" chains, but some users may expect to edit them clicking the icon probably. Just my opinion!

[portdeveloper]

The little ninja heads look just too cute I'm voting for them! Currently I am using puzzle icon from heroicons

Is there an API or something for chain icons? that would be extremely cool to make use of here

[technophile-04]

Is there an API or something for chain icons? that would be extremely cool to make use of here

https://github.com/0xa3k5/token-icons?tab=readme-ov-file#using-networkicon--from-token-iconsreact

Lol I had this link in my notes from so long, I think we could NetworkIcons form this library ? It seems well maintained but I think it majorly focuses on Token Icons but I see an utility component to get NetworkIcons too

[andrealbiac]

The pencil ones may make you think you can edit them, maybe they could fit the "custom-manually added" chains, but some users may expect to edit them clicking the icon probably. Just my opinion!

Agreed! Let's go with the ninja head then, think it'll be better cause it has less detail. But if we can get the network icon from the library that's even better!

[andrealbiac]

Dropping here the icon in png with background and svg isolated, let me know if we need it in different dimensions or format! Color of the background is #E3D9FF

[portdeveloper]

Just tried how it looks: Light theme, unselected:

Light theme, selected:

Dark theme, unselected:

Dark theme, selected:

Do you think we should use a more neutral color like slate-500 so that it is easily distinguisable in both themes?

[andrealbiac]

A slate-500 is a shade of grey right? I'd keep the purple, but would it make sense to change the selector background color? It feels it's a bit far too contrasted from the regular background color

Otherwise I think it's fine, it's okay if it doesn't pop up so much with the selector imo

[portdeveloper]

but would it make sense to change the selector background color? It feels it's a bit far too contrasted from the regular background color

This makes sense, let me play around with it a little.

https://github.com/BuidlGuidl/abi.ninja/assets/108868128/c70b3974-e3a3-4c78-bfb5-47bf26e72ce5

Looks weird on the dark theme.

Maybe it makes sense to use a lighter svg on the dark mode

[0xa3k5]

https://github.com/0xa3k5/token-icons?tab=readme-ov-file#using-networkicon--from-token-iconsreact

Lol I had this link in my notes from so long, I think we could NetworkIcons form this library ? It seems well maintained but I think it majorly focuses on Token Icons but I see an utility component to get NetworkIcons too

nice suggestion 😅 just dropping in to say, the focus of the project has been shifted from tokens to networks, wallets and some other categories regarding web3 so the project has been renamed to web3icons you can visit the website to see all of the supported networks and ways to include them on your project. Happy to open a PR if you want.

https://github.com/0xa3k5/web3icons?tab=readme-ov-file#networkicon-

[portdeveloper]

@0xa3k5 Hey that is amazing!

But I am getting this error and I couldn't find why :/

I have used yarn add @web3icons/core @web3icons/react and added

<NetworkIcon network="bsc" size={32} variant="branded" /> to the main page.

error - TypeError [ERR_IMPORT_ATTRIBUTE_MISSING]: Module "file:///home/port/repos/production/abi.ninja/node_modules/@web3icons/core/dist/metadata/networks.json" needs an import attribute of "type: json" at validateAttributes (node:internal/modules/esm/assert:88:15) at defaultLoad (node:internal/modules/esm/load:143:3) at async ModuleLoader.load (node:internal/modules/esm/loader:570:7) at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:445:45) { digest: undefined }

[0xa3k5]

@portdeveloper i'm trying to repro the issue, I think I might be able to solve it but when I run yarn install on the abi.ninja root, I'm getting this:

➤ YN0060: │ @metamask/sdk@npm:0.20.3 [f3962] provides cross-fetch (p0d6be) with version 4.0.0, which doesn't satisfy what @metamask/sdk-communication-layer requests
➤ YN0002: │ @metamask/sdk@npm:0.20.3 [f3962] doesn't provide react-i18next (pecef7), requested by @metamask/sdk-install-modal-web
➤ YN0002: │ @metamask/sdk@npm:0.20.3 [f3962] doesn't provide react-native (pe2f14), requested by react-native-webview
➤ YN0002: │ @safe-global/safe-apps-sdk@npm:8.1.0 doesn't provide typescript (pe4de8), requested by viem
➤ YN0002: │ @se-2/nextjs@workspace:packages/nextjs doesn't provide @typescript-eslint/parser (pb1ea4), requested by @typescript-eslint/eslint-plugin
➤ YN0002: │ burner-connector@npm:0.0.8 doesn't provide @tanstack/react-query (p1976a), requested by @rainbow-me/rainbowkit
➤ YN0002: │ burner-connector@npm:0.0.8 doesn't provide react (pe7978), requested by @rainbow-me/rainbowkit
➤ YN0002: │ burner-connector@npm:0.0.8 doesn't provide react-dom (p8b229), requested by @rainbow-me/rainbowkit
➤ YN0002: │ burner-connector@npm:0.0.8 doesn't provide wagmi (pe6d35), requested by @rainbow-me/rainbowkit
➤ YN0002: │ daisyui@npm:4.4.19 doesn't provide postcss (pd457a), requested by postcss-js
➤ YN0002: │ react-hot-toast@npm:2.4.0 [ef549] doesn't provide csstype (p4ee36), requested by goober
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 224ms
➤ YN0000: ┌ Link step
➤ YN0007: │ se-2@workspace:. must be built because it never has been before or the last one failed
➤ YN0007: │ cypress@npm:13.13.1 must be built because it never has been before or the last one failed
➤ YN0007: │ vercel@npm:28.15.1 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.14.47 must be built because it never has been before or the last one failed
➤ YN0007: │ keccak@npm:3.0.4 must be built because it never has been before or the last one failed
➤ YN0007: │ secp256k1@npm:5.0.0 must be built because it never has been before or the last one failed
➤ YN0007: │ bufferutil@npm:4.0.8 must be built because it never has been before or the last one failed
➤ YN0007: │ utf-8-validate@npm:6.0.4 must be built because it never has been before or the last one failed
➤ YN0007: │ core-js-pure@npm:3.25.3 must be built because it never has been before or the last one failed
➤ YN0009: │ utf-8-validate@npm:6.0.4 couldn't be built successfully (exit code 1, logs can be found here: /private/var/folders/hz/qd1l4_r97pvdp30rshd31sjh0000gn/T/xfs-308921d4/build.log)
➤ YN0000: └ Completed in 38s 999ms
➤ YN0000: Failed with errors in 39s 442ms

yarn install inside the /packages/nextjs

➤ YN0000: ┌ Resolution step
➤ YN0060: │ @metamask/sdk@npm:0.20.3 [f3962] provides cross-fetch (p0d6be) with version 4.0.0, which doesn't satisfy what @metamask/sdk-communication-layer requests
➤ YN0002: │ @metamask/sdk@npm:0.20.3 [f3962] doesn't provide react-i18next (pecef7), requested by @metamask/sdk-install-modal-web
➤ YN0002: │ @metamask/sdk@npm:0.20.3 [f3962] doesn't provide react-native (pe2f14), requested by react-native-webview
➤ YN0002: │ @safe-global/safe-apps-sdk@npm:8.1.0 doesn't provide typescript (pe4de8), requested by viem
➤ YN0002: │ @se-2/nextjs@workspace:packages/nextjs doesn't provide @typescript-eslint/parser (pb1ea4), requested by @typescript-eslint/eslint-plugin
➤ YN0002: │ burner-connector@npm:0.0.8 doesn't provide @tanstack/react-query (p1976a), requested by @rainbow-me/rainbowkit
➤ YN0002: │ burner-connector@npm:0.0.8 doesn't provide react (pe7978), requested by @rainbow-me/rainbowkit
➤ YN0002: │ burner-connector@npm:0.0.8 doesn't provide react-dom (p8b229), requested by @rainbow-me/rainbowkit
➤ YN0002: │ burner-connector@npm:0.0.8 doesn't provide wagmi (pe6d35), requested by @rainbow-me/rainbowkit
➤ YN0002: │ daisyui@npm:4.4.19 doesn't provide postcss (pd457a), requested by postcss-js
➤ YN0002: │ react-hot-toast@npm:2.4.0 [ef549] doesn't provide csstype (p4ee36), requested by goober
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 291ms
➤ YN0000: ┌ Link step
➤ YN0007: │ utf-8-validate@npm:6.0.4 must be built because it never has been before or the last one failed
➤ YN0009: │ utf-8-validate@npm:6.0.4 couldn't be built successfully (exit code 1, logs can be found here: /private/var/folders/hz/qd1l4_r97pvdp30rshd31sjh0000gn/T/xfs-61262057/build.log)
➤ YN0000: └ Completed in 4s 425ms
➤ YN0000: Failed with errors in 4s 931ms

how can I fix these so I can test the web3icons here?

[technophile-04]

@portdeveloper i'm trying to repro the issue, I think I might be able to solve it but when I run yarn install on the abi.ninja root, I'm getting this:

@0xa3k5 could you please try if the solution suggested here https://github.com/BuidlGuidl/abi.ninja/pull/121#pullrequestreview-2140048656 solves the issue?

If the above solution doesn't work ideally there should be some hint present in log file how to fix it. The path of the log file is logged at 3rd last line where utf-8-validate exit with code 1 :

So after you do yarn install copy the path to log file it should be something like /private/var/..../build.log you could probably open this in your text editor eg: code /private/var/...build.log

[0xa3k5]

@0xa3k5 could you please try if the solution suggested here #121 (review) solves the issue?

@technophile-04 awesome, I'm on Mac so instead of installing Visual Studio tools, I had to install python tools. For anyone who faces the issue in the future with node-gyp:

python3 -m ensurepip --upgrade
python3 -m pip install setuptools

[0xa3k5]

hey @technophile-04 and @portdeveloper I believe I fixed the issue; tested quickly on my local with the abi.ninja repo and seems to be it's working. please install the @web3icons/react@3.3.1 (no need for the core package) and try using the <NetworkIcon /> lmk if you prefer me to open a PR.

https://share.cleanshot.com/KJW98vxj

[technophile-04]

https://share.cleanshot.com/KJW98vxj

Ohhh this looks great!! Also thanks for fixing the bug so fast! Would be great if you could create an PR. Thanks @0xa3k5!!