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 which currently provides the following chains:
chain.mainnet
chain.ropsten
chain.rinkeby
chain.goerli
chain.kovan
chain.optimism
chain.optimismKovan
chain.polygon
chain.polygonMumbai
chain.arbitrum
chain.arbitrumRinkeby
chain.localhost
chain.hardhat
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 { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
const { chains } = configureChains(
[chain.mainnet, chain.polygon],
[
alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
publicProvider(),
]
);
const App = () => {
return (
<RainbowKitProvider chains={chains} {...etc}>
{}
</RainbowKitProvider>
);
};
Several chain icons are provided by default, but you can customize the icon for each chain using the iconUrl property.
const defaultChains: Chain[] = [
{
...chain.mainnet,
iconUrl: 'https://example.com/icons/ethereum.png',
},
{
...chain.polygon,
iconUrl: 'https://example.com/icons/polygon.png',
},
];
const { chains } = configureChains(defaultChains, [
alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
publicProvider(),
]);
