Rainbow logo
RainbowKit
2.0.0

Overview

IntroductionMigration Guide

Getting Started

InstallationConnectButtonModal SizesThemingChainsLocalizationAuthenticationRecent Transactions

Advanced

Modal HooksCustom ConnectButtonCustom themeCustom Wallet ListCustom WalletsCustom chainsCustom App InfoCustom AvatarsCustom authenticationWalletButtonCool mode

Chains

Chains

Customizing chains

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

Customizing the initial chain

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

Chain Modal v2

If you want to switch chains before connecting your wallet, just set ignoreChainModalOnConnect prop to false in <RainbowKitProvider>. This will let you interact with the chain modal before your wallet is connected, and also while it is connected.

<RainbowKitProvider ignoreChainModalOnConnect={false}>

Custom chain metadata

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,

});
PreviousTheming
LocalizationNext