Chains

Customizing chains

The chains prop on RainbowKitProvider defines which chains are available for the user to select.

RainbowKit is designed to integrate with wagmi’s chain object which currently provides the following chains:

• chain.mainnet
• chain.ropsten
• chain.rinkeby
• chain.goerli
• chain.kovan
• chain.sepolia
• chain.optimism
• chain.optimismGoerli
• chain.optimismKovan
• chain.polygon
• chain.polygonMumbai
• chain.arbitrum
• chain.arbitrumRinkeby
• chain.localhost
• chain.hardhat

For more detail about the chain object, or to see examples when creating a custom chain definition, see the source code for wagmi’s chain object.

Your chain config can be defined in a single array provided to configureChains.

import { RainbowKitProvider, Chain } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains } = configureChains(
  [chain.mainnet, chain.polygon],
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
    publicProvider(),
  ]
);

const App = () => {
  return (
    <RainbowKitProvider chains={chains} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};

By default, RainbowKit will connect to the first chain in your chains array to ensure users aren't immediately presented with the "Wrong network" state. This behavior can be customized via the initialChain prop.

The initial chain can be configured using a chain ID.

<RainbowKitProvider chains={chains} initialChain={1}>

As a convenience, you can also pass a chain object.

<RainbowKitProvider chains={chains} initialChain={chain.mainnet}>

By default, RainbowKit will resolve ENS details from the mainnet chain if it's in your chains array. This chain can be customized via the ensChain prop.

The ENS chain can be configured using a chain ID.

<RainbowKitProvider chains={chains} ensChain={5}>

As a convenience, you can also pass a chain object.

<RainbowKitProvider chains={chains} ensChain={chain.goerli}>

Several chain icons are provided by default, but you can customize the icon for each chain using the iconUrl property.

const defaultChains: Chain[] = [
  {
    ...chain.mainnet,
    iconUrl: 'https://example.com/icons/ethereum.png',
  },
  {
    ...chain.polygon,
    iconUrl: 'https://example.com/icons/polygon.png',
  },
];

const { chains } = configureChains(defaultChains, [
  alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
  publicProvider(),
]);