How To Setup Rainbowkit On Berachain Using Vite

Step-by-step guide to setting up Rainbowkit on Berachain via Vite

De The Bera

Published in

berachain-devs

8 min readMay 29, 2024

Bm bm! 🐻

We’re back with another guide to help dApps use existing SDK’s out there and help connect their dApps to Berachain’s Artio Testnet.

🛠️ What are we building ?

In this guide we will be setting up the Rainbowkit’s Connect Wallet button on Berachain Artio using Vite (React + Typescript).

🏃 ViteJS

Vite is a great way to create single page applications and is another alternative to server-side rendering applications like NextJS.

🌈 RainbowKit Advantages

When building Web3 dApps, it’s crucial to balance usability and flexibility. RainbowKit is a great tool for this, making it easier to design a dApp wallet that looks good and is user-friendly.

In the past, adding wallets to dApps was a rigid process. Developers had to tailor the dApp to a specific wallet, like Metamask, which limited users to that wallet only.

RainbowKit changes the game by providing a toolkit that lets developers customize the entire wallet connection process. You can choose different themes to match your dApp’s look and offer a range of supported wallets, allowing users to pick their favorite, whether it’s Metamask, Trust Wallet, or others, for a smooth experience.

Additionally, developers can create custom ‘connect’ buttons that blend seamlessly with their dApp’s design, making the user interface more familiar and fluid.

⚠️ Prerequisites

Knowledge of React.
Development environment: VSCode or Atom.
Node version >v18.16.0.

✅ Step-by-Step Guide Implementing RainbowKit In Your dApp

Step 1: Creating a React Project

Create a new React-typescript application using Vite.

npm create vite@latest berachain-rainbowkit -- --react-ts; 
# Need to install the following packages:
# create-vite@5.2.3
# Ok to proceed? (y) y
# ✔ Select a framework: › React
# ✔ Select a variant: › TypeScript

# Scaffolding project in /Users/dethebera/BeraWork/berarainbowkit/berachain-rainbowkit...
# Done. Now run:
#   cd berachain-rainbowkit
#   npm install
#   npm run dev
# npm notice 
# npm notice New minor version of npm available! 10.2.4 -> 10.5.2
# npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.2
# npm notice Run npm install -g npm@10.5.2 to update!
# npm notice

You can also install Vite using the command below and you’ll be prompted to enter a project name; input your desired name.

npm create vite@latest

Afterward, choose the React framework when prompted to select a framework.
Following that, opt for the Typescript variant when asked for the variant.

Go to your new project directory, install dependencies, and run the app

cd berachain-rainbowkit
npm install
npm run dev

Navigate to your local server at http://localhost:5173/ and you should see an interface displayed as follows:

Once we’ve set up our React project, we can move forward to install RainbowKit along with other necessary dependencies.

Step 2 — Install RainbowKit and Additional Dependencies:

RainbowKit depends on wagmi and other libraries. You can install these by running:

npm install @rainbow-me/rainbowkit wagmi
# added 33 packages, removed 82 packages, changed 60 packages, and audited 1193 packages in 1m
# 137 packages are looking for funding
#   run `npm fund` for details
# found 0 vulnerabilities

Now that we know how RainbowKit allows developers to customize their wallet connection experiences let’s put it into action with a practical guide.

We will be going through a step-by-step process, starting from scratch, to seamlessly integrate a RainbowKit button across various chains.

By now, you’re all set to make use of the RainbowKit package in your project.

Step 3: Configuring RainbowKit and Wagmi

Let’s import the packages into our project. We’ll add these imports at the top of the main.tsx file:

File:./src/main.tsx

import "./polyfills";
import "./global.css";
import "@rainbow-me/rainbowkit/styles.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { berachainTestnet } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const config = getDefaultConfig({
  appName: "RainbowKit demo",
  projectId: "YOUR_PROJECT_ID",
  chains: [berachainTestnet],
});
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <App />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>
);

For this guide, we’ll set up the supported chains for our project and use “berachainTestnet” , keeping it unchanged, along with the provider required by Wagmi to interact with the blockchain.

For a comprehensive overview of various ways to configure your connection modal, you can refer to RainbowKit’s documentation.

We’ll also need a Project ID.

You can get one from WalletConnect Cloud and it will look something like this: 4322794c0c46b……..ca48ba15fc3. This unique identifier is integral to your project’s interaction with WalletConnect Cloud, enabling seamless connections with various wallets.

Step 4: Getting a RainbowKit Project ID

To generate a Project ID, access WalletConnect Cloud by signing in and selecting the Create option, as illustrated below:

Provide a name for the project and then click on the Create button to proceed.

Following these steps, you should obtain a Project ID.

Step 5: Polyfills Fix

The Vite bundler doesn’t provide Node polyfills, so you’ll need to include polyfills for global, Buffer and process.env.

Create a new file named Polyfills.ts and add the following code to it.

File:./src/Polyfills.ts

import { Buffer } from "buffer";
window.global = window.global ?? window;
window.Buffer = window.Buffer ?? Buffer;
window.process = window.process ?? { env: {} }; // Minimal process polyfill
export {};

Step 6: Optional — Adding Global.css

In certain instances you might notice the Global.css file might be missing.

Head over to src folder and create a new file name Global.css and add the following code in it.

File:./src/Global.css

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Step 7: Adding the Connect Button

To include the connect button, import it from RainbowKit at the top of your App.tsx file.

Your entire App.tsx looks something similar to what we have below. Essentially, this file controls how your app looks and works. It includes different parts of your app and adds the RainbowKit connect button to make it easy for users to connect their wallets.

File:./src/App.tsx

import { ConnectButton } from "@rainbow-me/rainbowkit";
function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "flex-end",
        padding: 12,
      }}
    >
      <ConnectButton />
    </div>
  );
}
export default App;

Once everything is up and running on your local system, you should have something similar to this:

When you click Connect Wallet, a pop-up window, similar to the image below, will appear:

If you click on any of the wallets (i.e. metamask), you should be able to connect your wallet and the chain of your choice.

Congratulations for making it to the end of the tutorial and successfully integrating RainbowKit!

Complete Code

File:./src/main.tsx

import "./polyfills";
import "./global.css";
import "@rainbow-me/rainbowkit/styles.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { berachainTestnet } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const config = getDefaultConfig({
  appName: "RainbowKit demo",
  projectId: "YOUR_PROJECT_ID",
  chains: [berachainTestnet],
});
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <App />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>
);

File:./src/App.tsx

import { ConnectButton } from "@rainbow-me/rainbowkit";
function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "flex-end",
        padding: 12,
      }}
    >
      <ConnectButton />
    </div>
  );
}
export default App;

File:./src/Polyfills.ts

import { Buffer } from "buffer";
window.global = window.global ?? window;
window.Buffer = window.Buffer ?? Buffer;
window.process = window.process ?? { env: {} }; // Minimal process polyfill
export {};

File:./src/Global.css

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Head over to Berachain guides repo using the link below and find the template for the above guide to directly test the dApp out!

guides/apps/rainbowkit-vite at main · berachain/guides

A demonstration of different contracts, languages, and libraries that work with Berachain EVM. …

github.com

Recap

RainbowKit offers a range of useful tools without requiring much effort from developers. It integrates seamlessly with the Wagmi library, enabling easy utilization of Wagmi’s features such as message signing and transactions.

Note: The alignment of the Connect Wallet button might seem different from the SDK initially — that is because of slight change in css that we made.

This guide demonstrates setting up a Vite project with RainbowKit to function with Berachain’s Artio testnet, simplifying wallet connections and enabling developers to setup their dApp’s user onboarding.

🛠️ Want To Build and How To Get Support ?

If you’re interested in understanding and developing more on Berachain, try various example repos provided in the official guides repo.

GitHub - berachain/guides: A demonstration of different contracts, languages, and libraries that…

A demonstration of different contracts, languages, and libraries that work with Berachain EVM. - berachain/guides