Rainbow logo
RainbowKit
2.1.7

Chains

Chains

Customizing chains

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

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

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,
});