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