How to connet your Web3 wallets in your front-end app using RainbowKit ?

Connecting your Web3 wallets in your front-end app is used to be troublesome. But now, we have RainbowKit, a react library, making things much easier. In this post, we will provide a demo, and also a walkthrough of the code.

Front-end demo

Front-end demo: here

Github repository: here

Step 1: Create react app

yarn create react-app rainbowkit-learning

Step 2: Install rainbowkit, wagmi and view

yarn add @babel/plugin-proposal-private-property-in-object
yarn add @rainbow-me/rainbowkit wagmi viem

Step 3: Import RainbowKit and wagmi in index.js

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

import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { mainnet, polygon, optimism, arbitrum, base, zora, sepolia, holesky  } from "wagmi/chains";
import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";

const { chains, publicClient } = configureChains(
  [mainnet, polygon, optimism, arbitrum, base, zora, sepolia, holesky ],
  [alchemyProvider({ apiKey: process.env.REACT_APP_ALCHEMY_ID }), publicProvider()]
);

const { connectors } = getDefaultWallets({
  appName: process.env.REACT_APP_WALLET_CONNECT_APP_NAME,
  projectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
  chains,
});

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient,
});

Step 4: Register accounts in WalletConnet and Alchemy

• WalletConnet

• Alchemy

Step 5: Create an .env file with the following details

REACT_APP_WALLET_CONNECT_APP_NAME=
REACT_APP_WALLET_CONNECT_PROJECT_ID=
REACT_APP_ALCHEMY_ID=
GENERATE_SOURCEMAP=false

Step 6: Wrap providers

root.render(
  <WagmiConfig config={wagmiConfig}>
    <RainbowKitProvider chains={chains}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </RainbowKitProvider>
  </WagmiConfig>
);

Step 7: Add the connect button in App.js

import logo from "./logo.svg";
import "./App.css";
import { ConnectButton } from "@rainbow-me/rainbowkit";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        <ConnectButton />
      </header>
    </div>
  );
}

export default App;