RainbowKit

This tutorial is a step-by-step guide on how to integrate a wallet such as Phantom into your dApp using the RainbowKit library. RainbowKit is an EVM wallet library that supports Phantom on Ethereum and Polygon.

We will be going through step by step how to go from 0 to a fully integrated RainbowKit button. If you already have a dApp that you are trying to integrate Phantom in, you can use our project as reference. At the end of this guide, your adapter will look like this:

Prerequisites

• Node version >=16.12.0

• A text editor/IDE (such as VSCode)

• Some Knowledge of React

Creating The App

We recommend using Vite to create new react applications.

To create a new React application using Vite, run the following command in your terminal:

yarn create vite

1. This will ask you for a project name. Provide it a name here. For purposes of this tutorial I used "Rainbow-Sandbox".

2. It will then ask you to select a framework. Select "React" here.

3. Next it will ask for a variant. Select "Typescript" here.

Now change directory into your project and run:

yarn install

And make sure your app runs by running the command:

yarn dev

Configuring TypeScript

You will need to change the moduleResolution keys to be switched from "bundler" to "node".

Each file should look as follows.

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

With that out of the way we can install all of our dependencies.

Installing RainbowKit

To install the appropriate package, run the following:

yarn add @rainbow-me/rainbowkit wagmi ethers@^5

Now you can use the RainbowKit package in your project and integrate Phantom as a wallet in the modal.

Initializing RainbowKit

First we will need to import the packages into our project. At the top of the main.tsx file add these imports:

import '@rainbow-me/rainbowkit/styles.css';
import { connectorsForWallets, RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
import { phantomWallet } from '@rainbow-me/rainbowkit/wallets';
import {
  configureChains,
  createClient,
  goerli,
  WagmiConfig,
} from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';

Next, we will configure rainbowkit and wagmi like so.

// =============================================================================
// Rainbowkit Configuration
// =============================================================================
// initalize which chains your dapp will use, and set up a provider
const { chains, provider } = configureChains([goerli], [publicProvider()]);
const connectors = connectorsForWallets([
  {
    groupName: 'Phantom',
    wallets: [phantomWallet({ chains })],
  },
]);

const wagmiClient = createClient({
  connectors,
  provider,
});

Here we configure what chains we will support in our dApp, as well as the provider that wagmi requires to interface with the blockchain.

Then we set up our connectors. This is all of the wallets that you want your dApp to support. You can have as many objects in the array as you would like, each categorized into different groups by the groupName and wallets keys.

To see all of the different ways that you can configure your connection modal, you can go to RainbowKit's documentation.

After that, we will pass the connectors and provider to the createClient function, which we will later use to wrap our app in a Wagmi Client and RainbowKitProvider.

With this bit of prep done, we can now go to our app and add the providers as well as a connection button.

Wrapping Your App With The Providers

In main.tsx wrap your <App />component with the providers. Your file should look like this with all of the configuration and wrapping completed.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

import '@rainbow-me/rainbowkit/styles.css';
import { connectorsForWallets, RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
import { phantomWallet } from '@rainbow-me/rainbowkit/wallets';
import {
  configureChains,
  createClient,
  goerli,
  WagmiConfig,
} from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';



// =============================================================================
// Rainbowkit Configuration
// =============================================================================
// initalize which chains your dapp will use, and set up a provider
const { chains, provider } = configureChains([goerli], [publicProvider()]);
const connectors = connectorsForWallets([
  {
    groupName: 'Phantom',
    wallets: [phantomWallet({ chains })],
  },
]);

const wagmiClient = createClient({
  connectors,
  provider,
});

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains} theme={darkTheme()}>
        <App />
      </RainbowKitProvider>
    </WagmiConfig>
  </React.StrictMode>,
)

Now we have everything we need done to add a connect wallet button to the app.

Adding A Connect Button

At the top of your App.tsx file you can import the connect button from RainbowKit.

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

Next, you can add this button in place of the counter button that is there by default.

//REPLACE THIS
<button onClick={() => setCount((count) => count + 1)}>
    count is {count}
</button>
// WITH THIS
<ConnectButton /> 

Then delete the useState hook, and it's import as we don't need the counter anymore.

// DELETE THIS
const [count, setCount] = useState(0)
// AND THIS
import { useState } from 'react'

Your entire App.tsx file should look like so

import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { ConnectButton } from '@rainbow-me/rainbowkit';

function App() {
  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
      <ConnectButton /> 
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

Now when you run everything locally it should look like this!

And then once you click the connect button, it will pop open a modal like the picture below

Conclusion

RainbowKit provides quite a lot out of the gate with very little work on your end as a developer.

It also lets you leverage the wagmi library to it's fullest potential, as RainbowKit uses wagmi under the hood to manage all of the wallets. This allows you to use the other wagmi hooks to do things like sign messages, and send transactions. To see what a more advanced app might look like, you can look at the code for our sandbox for RainbowKit. And you can also check out the functionality here for a live demo.

We hope that you enjoyed this guide!