Getting Started
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. Check out the list of supported chains here.
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 { configureChains } from 'wagmi';
import { mainnet, optimism, zora } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
const { chains } = configureChains(
[mainnet, optimism, zora],
[
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={mainnet}>
Several chain icons are provided by default, but you can customize the icon for each chain using the iconUrl property.
import { Chain, mainnet, optimism } from 'wagmi/chains';
const defaultChains: Chain[] = [
{
...mainnet,
iconUrl: 'https://example.com/icons/ethereum.png',
},
{
...optimism,
iconUrl: 'https://example.com/icons/optimism.png',
},
];
const { chains } = configureChains(defaultChains, [
alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
publicProvider(),
]);
