Installation

Get up and running with RainbowKit

Install

Install RainbowKit and its peer dependencies, wagmi and ethers.

npm install @rainbow-me/rainbowkit wagmi ethers

Import

Import RainbowKit, wagmi, and ethers.

import '@rainbow-me/rainbowkit/styles.css';

import {
  apiProvider,
  configureChains,
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { chain, createClient, WagmiProvider } from 'wagmi';

Configure

Configure your wallets, desired chains and generate the required connectors. You will also need to setup a wagmi client.

...
import { chain, createClient, WagmiProvider } from 'wagmi';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
  [
    apiProvider.alchemy(process.env.ALCHEMY_ID),
    apiProvider.fallback()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'My RainbowKit App',
  chains
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
})

Wrap providers

Wrap your application with RainbowKitProvider and WagmiProvider.

const App = () => {
  return (
    <WagmiProvider client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <YourApp />
      </RainbowKitProvider>
    </WagmiProvider>
  );
};

Use it

Then, in your app, import and render the ConnectButton component.

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

You're done! RainbowKit will now handle your user's wallet selection, display wallet/transaction information and handle network/wallet switching.

Note if you're using Remix remember to add RainbowKit to its server dependencies.

Overview

Getting Started