Dynamically set list for chains.

[mits87]

Hi there!

I'm struggling with set dynamically list of chains in RainbowKit.
I would like to have list of chain based of backend configuration.

Currently following documentation my code looks like:

"use client";

import { GetSiweMessageOptions, RainbowKitSiweNextAuthProvider } from "@rainbow-me/rainbowkit-siwe-next-auth";
import {
  RainbowKitProvider as BaseRainbowKitProvider,
  getDefaultWallets,
  getDefaultConfig,
  Chain,
} from "@rainbow-me/rainbowkit";
import { arbitrum, base, mainnet, optimism, polygon } from "wagmi/chains";
import { WagmiProvider, useAccountEffect } from "wagmi";

import { DictionaryChainsQuery, useDictionaryChainsQuery } from "@/graphql/client";

import { APP_NAME } from "@/constants";
import { SessionProvider } from "@/contexts";

const { wallets } = getDefaultWallets();

const config = getDefaultConfig({
  ssr: true,
  appName: APP_NAME,
  projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || "default",
  chains: [
    mainnet,
    arbitrum,
    base,
    optimism,
    polygon,
  ],
  wallets,
});

const getSiweMessageOptions: GetSiweMessageOptions = () => ({
  statement: process.env.NEXT_PUBLIC_WALLET_SIGN_MESSAGE,
});

export default function RainbowKitProvider({ children }: React.PropsWithChildren): React.ReactElement {
  const { data } = useDictionaryChainsQuery(
    {}, { select: ({ DictionaryChainsList }: DictionaryChainsQuery) => DictionaryChainsList.data || [] },
  );

  const chains = config.chains.filter(({ id }) =>
    data?.map(({ chainId }) => chainId).includes(String(id)),
  ) as unknown as [Chain, ...Chain[]];

  // HOW TO UPDATE config.chains here???????

  useAccountEffect({
    config,
    onDisconnect() {
      if (typeof window !== "undefined" && window.location.pathname !== "/") {
        window.location.href = "/";
      }
    },
  });

  return (
    <WagmiProvider config={config}>
      <SessionProvider>
        <RainbowKitSiweNextAuthProvider getSiweMessageOptions={getSiweMessageOptions}>
          <BaseRainbowKitProvider>
            {children}
          </BaseRainbowKitProvider>
        </RainbowKitSiweNextAuthProvider>
      </SessionProvider>
    </WagmiProvider>
  );
}

As you can see firstly I build default configuration based on some params.
Secondly I would like to request to the backend for chain list which we are supporting and update the config.
But currently I can't see an option for that.

Any advice?

Best,

[magiziz]

@mits87 Some users have been struggling with the same thing, but this is doable. What if you first pull the chains from your backend first and when that's done you just pass it as prop to your RainbowKitProvider component later in the react-tree ?

Also you'd want to hide the component if data is loading before passing backend chains into your provider. Does this sound something that's possible in your case ?

[mits87]

@magiziz yes, I did it but this not solves my problem.
If you check again for my code example:

const config = getDefaultConfig({
  ssr: true,
  appName: APP_NAME,
  projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || "default",
  chains: [
    mainnet,
    arbitrum,
    base,
    optimism,
    polygon,
  ],
  wallets,
});

then you can see that the code is executed before backend call.
So the data from the backend will be available a little bit further.

Also another problem is that we can't make chains empty for initial load and update it when the data will be fetched from the backend.

So still the problem here is with update current chains configuration.

[magiziz]

Got it. In that case i would include all chains you support in getDefaultConfig and createConfig, then filter out the chains that the backend support in client. There are some limitations when it comes to Wagmi where you can't update the chains in createConfig or getDefaultConfig.

[mits87]

@magiziz this is exactly my point - how can I filter it as you suggested?

 then filter out the chains that the backend support in client.

Because this part I'm not sure.

In the other hand don't you think that RainbowKit should offer that option out of the box? Previous version of RainbowKit were allowed to pass dynamic chain list to the Provider directly now this is very complicated.

[mits87]

I've tried like this:

<WagmiProvider
      config={{
        ...config,
        chains: config.chains.filter(({ id }) =>
          [{ chainId: "42161" }].map(({ chainId }) => String(chainId)).includes(String(id)),
        ) as unknown as readonly [Chain, ...Chain[]],
      }}
    >

but this does not work - there is a never ending loading:

[magiziz]

There isn't a specific way to do this in RainbowKit since we use Wagmi's config to get the chains. You can leave config as is and do this:

<WagmiProvider config={config}>

Then do something like this:

import { useConfig } from "wagmi";

const { chains } = useConfig();
// Your own filter logic
const supportedChainsFromBackend = chains.filter(()=> ...)

You can also specify initialChain prop from RainbowKit:

<RainbowKitProvider initialChain={1}>