Rainbow logo
RainbowKit
1.3.0

Advanced

Custom chains

Create a custom chain

You can use the Chain type to help you create a custom chain. Then, pass that to the configureChains function.

For example, here's how you can create an Avalanche chain for avax.network.

import { Chain, getDefaultWallets } from '@rainbow-me/rainbowkit';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';
const avalanche: Chain = {
id: 43_114,
name: 'Avalanche',
network: 'avalanche',
iconUrl: 'https://example.com/icon.svg',
iconBackground: '#fff',
nativeCurrency: {
decimals: 18,
name: 'Avalanche',
symbol: 'AVAX',
},
rpcUrls: {
public: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
},
blockExplorers: {
default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
etherscan: { name: 'SnowTrace', url: 'https://snowtrace.io' },
},
contracts: {
multicall3: {
address: '0xca11bde05977b3631167028862be2a173976ca11',
blockCreated: 11_907_934,
},
},
testnet: false,
};
const { provider, chains } = configureChains(
[avalanche],
[publicProvider()]
);
const { connectors } = getDefaultWallets({
appName: 'My RainbowKit App',
projectId: 'YOUR_PROJECT_ID',
chains,
});
const wagmiConfig = createConfig({
autoConnect: true,
connectors,
provider,
});
const App = () => {
return (
<WagmiConfig config={wagmiConfig}>
<RainbowKitProvider chains={chains}>
{/* Your App */}
</RainbowKitProvider>
</WagmiConfig>
);
};

Learn more about configuring chains.