[bug] Chains not shown for Connect Button if only one chain

[hsuanweifu-sports-inference]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.12.8

wagmi Version

0.12.8

Current Behavior

The chain button that toggles switch chains dropdown would not show if there is only one chain available.

https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx#L71C15-L71C15

Expected Behavior

It should be a configurable option to hide the button if there is only one chain available.

Otherwise we'd need to always rely on custom connect button to show the current chain.

Steps To Reproduce

No response

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

No response

Anything else?

No response

[DanielSinclair]

@hsuanweifu-sports-inference You can hide the chain drop-down like so:

<ConnectButton chainStatus="none" />

[hsuanweifu-sports-inference]

@DanielSinclair this is not what I am asking. I want to show the chain status even if there is only one chain. Right now it will hide regard less of what you set for chainStatus due to only having one available chain.

{chain && (chains.length > 1 || unsupportedChain)

See this line in the link in the original post.

[DanielSinclair]

@hsuanweifu-sports-inference I see. This was an intentional design choice because users still need to choose the network via their wallet, so seeing the current network via RainbowKit is duplicative. Can you share more about the expected usecase and UX goals, and why that functionality would be better? Chain switching as a concept is largely on its way out because of WalletConnect v2 and some the modern browser extension wallets, so dApps in the near future will be able to simultaneously connect to multiple networks.

[hsuanweifu-sports-inference]

@DanielSinclair

First of all, thank you for taking the time to respond to this ticket.

The goal is to have multiple environments (staging / prod) that's connected to (Testnet / Mainnet) respectively. The users will be redirected to staging (Testnet) environment if their current region is blacklisted.

We want to show the current chain on the page as some wallets (such as MagicLink) do not have an interface for the user to view and change chain.

[magiziz]

@hsuanweifu-sports-inference If there is only "one" chain configured in your dApp can you use wagmi's switch chain hook instead ?

We can help by adding a prop to <RainbowKitProvider /> to always show the chains, even if you set up just one, but i would need to think about it.

But yeah if you only have one chain configured you can avoid opening the chain modal and use wagmi's switch chain hook instead which would be much simpler. Would that fix your problem?

[magiziz]

@hsuanweifu-sports-inference Hey just catching back here again. Any updates on this ?

[hsuanweifu-sports-inference]

@kosmoskey I think the main issue is to show the current chain on the connect button regardless of how many chains are available. We are using <ConnectButton.Custom> to build a custom button with the chain icon.

The ability to switch chain is not important for this particular use case.

Thank you.

[DanielSinclair]

@hsuanweifu-sports-inference Thanks for this suggestion! We'll work on a prop to always show the current chain. We'll add this upstream in our new RainbowKit v2 version which launches this week. Check back soon there!

[ITZSHOAIB]

Is this feature added to version 2? If not, please let me know how I can contribute.

[magiziz]

@ITZSHOAIB This is not available yet no. This is something that we'll do, but if you're interested in contributing feel free to follow this README.md.

[KholdStare]

#1806 Should help with this