Provide a way to add custom chain icon (logo)

[songkeys]

Connectkit has defined a set of mainstream chains' logos in the code. I'm considering if we could provide a way to let user define their custom chain icons?

The code for now basically goes like this:

const { chains } = useNetwork();

// for each `chain` in `chains`
const c = supportedChains.find((ch) => ch.id === chain.id);
const ch = { ...c, ...chain } // basically to merge the `logo` field

// render the defined icon or the unknown fallback
{ch.logo ?? <ChainIcons.UnknownChain />}

However, if user tries to define logo field themself, it will not work because the chains in const { chains } = useNetwork() is already pure object, i.e., the logo field is not a valid ReactElement in use.

So we need to provide a similar way like rainbowkit which asks to provide an iconUrl so that it will be an indestructible string.

The proposal will follow rainbowkit usage:

const chains: Chain[] = [
  {
    ...mainnet,
    iconUrl: 'https://example.com/icons/ethereum.png', // overwrite the default one
  },
  {
    ...customChain,
    iconUrl: 'https://example.com/icons/custom.png', // define a custom one
    iconBackground: '#ccc', // moreover, a valid css background
  },
];

Let me know what you think. I'm willing to make this PR.

[adiled]

Surprisingly I just felt the need for it, came looking here! +10 for this. Chain type is from wamgi though, so maybe this can be done as ChainMetadata or along those lines, configured with a match on chain id. At least that's the convention with the L2 I'm working with. Metadata is offchainy things like icons, user friendly names. In my case, name is a second identifier next to id so there's no space for chain label either.

[dylanngph]

Feel like they abandoned this project, nothing change much for a while.

[lochie]

last release was 4 weeks ago. we're still very much active.

[AdamK222]

This is a key feature and should be added, there is a lot of blockchains and it will be hard for devs to keep up to date with new launches.

[wottpal]

Got this feature implemented in the meantime, @lochie? If not, +10 from my side as well :)

[ElerianDePenaFuerte]

I would appreciate this feature as well. Both Rainbowkit and Web3Modal offer this feature. But I don't want to go ahead with them.

[TudorEsan]

any update on this? we would need this feature