Chains

Customizing chains

RainbowKit is designed to integrate with wagmi’s chain object. Check out the list of supported chains here.

Customizing the initial chain

By default, RainbowKit will connect to the first chain supplied to Wagmi. This behavior can be customized via the initialChain prop.

The initial chain can be configured using a chain ID.

<RainbowKitProvider initialChain={1}>

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

<RainbowKitProvider initialChain={mainnet}>

If you want to switch chains before connecting your wallet, just set chainModalOnConnect prop to true in <RainbowKitProvider>. This will let you interact with the chain modal before your wallet is connected, and also while it is connected.

<RainbowKitProvider chainModalOnConnect>

Custom chain metadata

Several chain icons and backgrounds are provided by default, but you can customize the icon and background for each chain using the iconUrl and iconBackground properties.

Example with getDefaultConfig

import { mainnet, optimism } from 'wagmi/chains';

const config = getDefaultConfig({
  chains: [
    {
      ...mainnet,
      iconBackground: '#000',
      iconUrl: 'https://example.com/icons/ethereum.png',
    },
    {
      ...optimism,
      iconBackground: '#ff0000',
      iconUrl: 'https://example.com/icons/optimism.png',
    },
  ],
});

Example with createConfig

import { mainnet, optimism } from 'wagmi/chains';
import { Chain } from '@rainbow-me/rainbowkit';

const chains: readonly [Chain, ...Chain[]] = [
  {
    ...mainnet,
    iconBackground: '#000',
    iconUrl: 'https://example.com/icons/ethereum.png',
  },
  {
    ...optimism,
    iconBackground: '#ff0000',
    iconUrl: 'https://example.com/icons/optimism.png',
  },
];

const config = createConfig({
  chains,
});

Overview

Getting Started

Advanced

Chains

Customizing chains

Customizing the initial chain

Custom chain metadata

Overview

Getting Started

Advanced

Chains

Customizing chains

Customizing the initial chain

Chain Modal v2

Custom chain metadata