[bug] Extension no longer detects installed wallets when Wagmi config changes

[AlexBHarley]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

2.1.2

wagmi Version

2.10.7

Current Behavior

Whenever the config provided to WagmiProvider changes it breaks "Installed" wallets detection in the RainbowKit modal.

Expected Behavior

I expect the installed wallets list to remain the same despite what happens to the config object.

Steps To Reproduce

1. Navigate to Superbridge and click "Connect"
2. Observe the "Installed" wallets list
3. Close the modal
4. Click the settings cog and turn on Testnets
5. Click "Connect"
6. Observe missing "Installed" wallets list

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

See #1839 for another issue we had when the config object changes.

[magiziz]

@AlexBHarley Can you provide a minimal reproducible example on how your Wagmi config changes ?

[magiziz]

Going to close this issue for now. Feel free to re-open this if you're still stuck.

[AlexBHarley]

@magiziz here's a reproduction https://codesandbox.io/p/sandbox/stupefied-water-jlqqqp

• Ensure you have some browser extension wallets installed
• Click "Connect"
• Observe the "Installed" wallets list
• Connect a wallet
• Disconnect
• Toggle the chains list
• Click "Connect"
• Observe missing "Installed" wallets list

[magiziz]

@AlexBHarley Are you able to move getDefaultConfig outside of your component ? Possibly putting it in a wagmi.ts file ? Both Wagmi and RainbowKit documentation shows that you should have getDefaultConfig / createConfig outside of React components.

Since if you're not putting getDefaultConfig outside of your <App /> component then it'll cause re-renders which would result into Wagmi state being reset.

We've also had situations where users wanted to change chains in getDefaultConfig / createConfig and we've suggested them to include all of their chains, but only show / filter the supported ones in frontend.

[AlexBHarley]

Got it, yes doable for us.

[ZimM-LostPolygon]

What do we do if we need to dynamically change the list of chains the user is allowed to connect to? For example, let's say it's a store, and product A can only be purchased on Mainnet, but product B can only be purchase on Arbitrum and Polygon. We can't just include all the chains, since most of them make no sense.

You suggest showing/filtering in the frontend, but how do we that in Rainbowkit itself? Specifically in the chain selector:

[magiziz]

@ZimM-LostPolygon In that case i'd suggest building your own chains modal where you filter the supported chains. Currently the chain modal gets the chains from createConfig / getDefaultConfig.

[ZimM-LostPolygon]

@magiziz That's a theoretical option. But I believe you understand how this is a gargantuan amount of work for something seemingly so simple, especially considering everything worked flawlessly as-is in 1.x.

If at least there could be an option to override the list of "visible"/"active" chains, that would pretty much make everything just work again with minimal code changes compared to 1.x. Can this be considered?

Thank you!

[magiziz]

@ZimM-LostPolygon Yeah i know, we realized that in 1.x we were doing some double work that wasn't needed, e.g we already defined chains for wagmi and defined them again in RainbowKitProvider.

I know that this is a breaking change, but this solution works for us as of now. Another thing we could do is to maybe expose a parameter to useChainModal hook so we can filter out the chains that's not needed. Is this something that'd be useful in your case ?

[ZimM-LostPolygon]

@magiziz I only use <ConnectButton> and nothing else, so unless that parameter can be passed to <ConnectButton>, it's not going to help in my case, unfortunately...

[magiziz]

@ZimM-LostPolygon Gotcha. You could use <ConnectButton.Custom> component to add custom connect button if that's helpful by any chance ? https://www.rainbowkit.com/docs/custom-connect-button.

[ZimM-LostPolygon]

@magiziz It's much of the same issue as writing my own modal. I don't want to implement my own thing from scratch, that would only be beneficial if I needed to do some truly big changes. I'm perfectly happy with the visuals and 99% of the behavior of <ConnectButton>, and I do want to benefit from RainbowKit updates instead of having to maintain my own custom implementation, I just need that small change to limit the chain list.

Even if I were to use <ConnectButton.Custom>, there doesn't seem to be a way to preserve the original look, as all the CSS styles are minified and with obfuscated class names, which means I have to make my own layout/styles for the button as well. I personally feel there just should be some kind of extension point for more advanced users that doesn't require basically writing their own Rainbowkit variant.

Those are just my thoughts, though, I understand that this might not be the most popular request. Just wish RainbowKit allowed for some more customization in existing components, instead of requiring to completely abandon them for every tiny change.

[magiziz]

@ZimM-LostPolygon Got it. I'll look into this more and let you know as soon as possible, but i can't guarantee 100%.

[ZimM-LostPolygon]

@magiziz Any luck with this one?