Restrict the set of networks users can select to a subset of chains defined in wagmiConfig

[VikomiC]

One year ago there was an interesting bug that was fixed: #1156 .

But after migration to version 2.* and the removal of the chains props from the RainbowKitProvider component, the solution to the issue no longer works.

In our dApp we need to configure a large list of chains in our wagmiConfig created by createConfig. All those chains are required for a widget we use (LiFi).

For the dApp itself, we want however to restrict the set of networks users can select to a subset of the list defined in wagmiConfig.

Is there a way to do this?

[magiziz]

@VikomiC Yeah that's right. We made sure to only have chains included in the createConfig from wagmi. I would suggest finding a way where you can update your createConfig to include your desired chains or include all chains and filter out the ones you would want to use in the app.

[VikomiC]

I would suggest next changes.

packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx - add visibleChains optional property and pass it to the RainbowKitChainProvider:

...
export interface RainbowKitProviderProps {
  initialChain?: Chain | number;
  visibleChains?: number[];
  ...
}
...
export function RainbowKitProvider({
  ...
  initialChain,
  visibleChains,
  ...
}: RainbowKitProviderProps) {
  ...
  return (
    <RainbowKitChainProvider initialChain={initialChain} visibleChains={visibleChains || []}>
      <WalletButtonProvider>
  ...

packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitChainContext.tsx - add visibleChains property and filter chains in case it is not empty array.

...
interface RainbowKitChainProviderProps {
  initialChain?: Chain | number;
  visibleChains: number[];
  children: ReactNode;
}

export function RainbowKitChainProvider({
  children,
  initialChain,
  visibleChains,
}: RainbowKitChainProviderProps) {
  const { chains } = useConfig();

  let availableChains = chains;
  if (visibleChains.length > 0) {
    availableChains = availableChains.filter(({ id }) => visibleChains.includes(id)) as [Chain, ...Chain[]];
  }

  return (
    <RainbowKitChainContext.Provider
      value={useMemo(
        () => ({
          chains: provideRainbowKitChains(availableChains),
          initialChainId:
            typeof initialChain === 'number' ? initialChain : initialChain?.id,
        }),
        [availableChains, initialChain],
      )}
    >
      {children}
    </RainbowKitChainContext.Provider>
  );
}
...

We made patch for the latest version with these changes and now it works for us.
Maybe need to think about property name, but, at least, this is solution for our dApp.

[magiziz]

Thanks for the context. The idea from our latest 2.x update was that people used to pass the same chains from wagmi to RainbowKit which was unnecessary when we could pull those chains from wagmi itself. You can always build your own logic by including visibleChains like you just said that.

[VikomiC]

You can always build your own logic by including visibleChains like you just said that.

Sure, I can. But to work with patch - is not great. Changes always needs to be delivered/moved with new versions of the library, or just need to keep version where patch is applied and no movement forward with the library.

I would suggest to add this optional parameter to the library. It would be great. I can create PR if you allow to do it.

[magiziz]

Got it. Yeah this was one of the breaking change we've done, but i think it was pretty reasonable because devs wouldn't have to stress over some extra prop in our provider. I would suggest you create your own logic for this since we've decided to not expose any additional props when we can get it from wagmi.