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}>

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