[bug] Network switcher is hidden until a wallet is connected

[LilaRest]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

1.02

wagmi Version

1.2.0

Current Behavior

The network switcher is currently hidden when no wallet is connected.

Expected Behavior

However, this doesn't align with the standard way of doing things. And one of the most important UX rules is to mimic the behaviors of the majority of UIs (Jakob's law).

Most multi-chains DApp allow their users to switch between networks even before a wallet is connected.
This allows users to easily browse data on each chain (e.g., yields).

Maybe showing/hiding the network switcher when a wallet is connected should be configurable through a showSwitcher: "always" | "connected" prop of the <ConnectButton/> component.

Steps To Reproduce

No response

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

https://www.rainbowkit.com/

Anything else?

No response

[adbario]

I don't think RainbowKit or any other wallet connection library should be responsible for anything that happens when no wallets are connected.

You can build a simple dropdown for the networks on your own and show the page content based on the selected value. You won't need RainbowKit for that. You could also use just simple icons as in https://magiceden.io.

[DanielSinclair]

Will think about this! There have some improvements in WalletConnect v2 that makes this more feasible.

[LilaRest]

@adbario : I don't think RainbowKit or any other wallet connection library should be responsible for anything that happens when no wallets are connected.

I got your point, it makes sense thanks.

But by allowing users to switch between networks defined in the Wagmi config it seems that RainbowKit already goes beyond the wallet's scope. If RainbowKit wanted to fit in the wallet's scope it should only provide a way to access RPCs provided by wallets or shouldn't allow network management at all.

IMO RainbowKit is actually more a network + wallet manager.

Your network switcher is relevant with nowadays design trends, a bit customizable and so should fit for most project. However, as most multi-chain project will require being able to manage network before wallet connection, they will not being able to use yours.

A dropdown is not "simple" to code properly as it requires respecting a ton of accessibility measures, managing a list of chains icons, handling network change on click, etc. Not having to think about this and to code things from scratch is usually why developers are using libraries like RainbowKit.

@adbario : You can build a simple dropdown for the networks on your own and show the page content based on the selected value. You won't need RainbowKit for that. You could also use just simple icons as in https://magiceden.io/.

Sure using icons-based switching will fit for some projects to provide icons-based switching (like MagicEden or Beefy) but it wouldn't for many others. A good approach could be to let choice to developers by providing a component's prop as mentionned in my previous message.

@DanielSinclair : Will think about this! There have some improvements in WalletConnect v2 that makes this more feasible.

Great ! What makes it actually hard to realize ?

[magiziz]

@LilaRest Just to catch back on this we're building this feature alongside with wagmi v2. Can you take a look at the video in this PR and tell me if that would solve your problem ?

Let me know if you have any more questions 👍

[DanielSinclair]

We're starting to see this paradigm sunset with Uniswap's recent change, where network switching is decoupled from the connect step and is requested at the time of interaction. I'll close this out so that we can focus on adopting the recent EIPs for the multi-chain window provider to mitigate this need all together. https://x.com/Uniswap/status/1833871322352353569