Everyone here knows that entry to the decentralized world of web3 involves connecting the wallet and entering the ecosystem. After so much research in this space, we are finally able to make connect wallet button a relatively easy process.

Starting Rainbowkit with Next.js

After having a lot of trouble integrating wallets in my dapp I stumbled upon Rainbow kit. It became a savior to someone who was not yet good enough to understand the code but wanted to get my hand dirty with working on projects. I want to return the favor and give you a quick working piece.

Rainbowkit is made on top of wagmi which is made on top of ethers.js but you need not understand the working yet let's solve your problem and get your code working first.Also if you are fan of video tutorials then check below.

How to execute the code

Open your cmd terminal first. Enter the folder where you want to make this project and copy the below code in cmd. This will create a next.js folder named connectwallet with all requirements(dependencies).

npx create-next-app@latest connectwallet

where connectwallet is the name of your application.

Then there will be some questions asked answer no for typescript and then yes to all other questions by clicking enter.

Next in the same cmd write the below command. What cd does is it makes you enter the folder.

cd connectwallet

after the "cd connectwallet" copy the below code and paste in your terminal.

npm install @rainbow-me/rainbowkit wagmi ethers

Next command to type will be code . ( with a space b/w them)

code .

The above command will open the vscode for your current folder walletconnect. Next

Delete everything previously in index.js then Copy and paste the below code into your index.js file inside the pages folder. This is how your index.js will look.

import { ConnectButton } from '@rainbow-me/rainbowkit'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <>
      <main className={styles.main}>
        <ConnectButton />
      </main>
    </>
  )
}

Delete everything previously in _app.js. This is how your _app.js will look. Copy and paste this in your _app.js file inside the pages folder.

import "../styles/globals.css";
import '@rainbow-me/rainbowkit/styles.css';
import {
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [mainnet, polygon, optimism, arbitrum],
  [publicProvider()]
);

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

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

export default function App({ Component, pageProps }) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
       <Component {...pageProps} />
     </RainbowKitProvider>
    </WagmiConfig>
  )
}

Now open your terminal inside vscode by going to the top and clicking terminal and then selecting terminal or by simultaneously pressing ctrl and `. Then enter the last command as given below.

npm run dev

then you will be directed to your local host. where you might face hydration error. In order to solve this error you can check out my blog below. I also have this solution in the above video in this blog.

This is a blog link and inside blog you can also find a yt video

Congratulations on your achievement. Your app is working now. Click on connect button and select metamask. Click sign-in and now your metamask is connected.

Coming to explanation index.js and _app.js

The rest of the written code was explained then and there.

index.js

import styles from '../styles/Home.module.css'

The above file simply brings the CSS from the Home.module.css folder which helps to display our button in the middle of the screen.

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

The above import has already an inbuilt button which was designed by rainbowkit. So we imported that prebuilt button and pasted into our code using the below function.

<ConnectButton />

Now the index.js file explanation is done. Let's move onto _app.js

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

This will import all the designs and colors of how our wallets will look and has all the CSS inside of it.

import { getDefaultWallets, RainbowKitProvider, } from '@rainbow-me/rainbowkit';

The above code might look complex but it is just written in a line if you try matching it with other lines. This above function gets us all the default wallets like metamask wallet, coinbase wallet, rainbow wallet, etc.

RainbowkitProvider gets us all providers which are used to read data from different chains. This is a prebuilt component made by rainbowkit which is used to wrap over our app.

import { configureChains, createClient, WagmiConfig } from 'wagmi';

configureChains is imported from wagmi which takes in two arrays . where one array is all the different chains we want to work with eg. polygon, Ethereum, etc.

createClient takes in 3 parameters. autoconnect, connectors and providers.

WagmiConfig is a prebuilt wrapper just like RainbowkitProvider. Usually, the function of these wrappers is to wrap our whole app. Earlier the practice was for every individual page like teams, about, home, etc we needed to do this individually now it was not required.

import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';

These are all the chains imported from wagmi . like ethereum mainnet, polygon, etc. which is customizable according to your need.

import { publicProvider } from 'wagmi/providers/public';

the provider is used to read from the blockchain. other examples are alchemy and infura. for sake of ease, we are using publicProvider.

const { chains, provider } = configureChains( [mainnet, polygon, optimism, arbitrum], [publicProvider()] );

const { connectors } = getDefaultWallets({ appName: 'My RainbowKit App', chains }); const wagmiClient = createClient({ autoConnect: true, connectors, provider })

What is happening here is if you look at the functions with the input we are taking out certain values from the function which is all done by wagmi . you needed to understand for it to work

Finally,
If you didn't understand what is happening above Remember why we shifted to react/next right. We wanted to break our code into small pieces. So overall configureChains functions provide us with const chains which are taken as input by the get defaultWallets function which gives a const connectors which in turn is taken as input by createClient function. All the work is taken care by wagmi for us which is built on top of ethers js. Thus, So you need to only understand what is happening and not how is happening.

export default function App({ Component, pageProps }) {

return ( <WagmiConfig client={wagmiClient}>

<RainbowKitProvider chains={chains}>

<Component {...pageProps} />

</RainbowKitProvider>

</WagmiConfig> ) }

finally, we exported our app. and we are passing in the props to our wrappers. the props wagmiClient and chains which we fetched from the function which was imported from wagmi functions.

Conclusion

Rainbowkit is the easiest way to get get your app working instant. Personally, for me, It was like 3 months ago when I first used rainbowkit for wallet connection. Even if you don't understand all the connections and function. The starting code is given to you as an easy procedure to get your dapp working and to date, it is the easiest way to get your wallets connected to your website in a single go.