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 developing Web3 dApps, striking a balance between usability and flexibility is paramount. RainbowKit emerges as a valuable tool, enhancing the process of designing a dApp wallet by not only ensuring visual appeal but also offering exceptional user-friendliness.

Traditionally, integrating wallets into decentralized applications (dApps) was rigid. Developers had to adapt the dApp to a specific wallet like Metamask, limiting users to that wallet only.

RainbowKit changes this completely. It offers a toolkit allowing customization of the entire wallet connection process in dApps. Developers can select various themes to match their dApp’s appearance, and offer a selection of supported wallets for users to choose from. This flexibility enables users to use their preferred wallet, whether it’s Metamask, Trust Wallet, or others, all within a seamless experience.

Developers can also craft custom ‘connect’ buttons that seamlessly integrate with their dApp’s design language, enhancing the user interface with familiarity and fluidity.

ℹ️ Prerequisites

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

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

Let's start now walkthrough different steps to create our dApp.

Step 1: Creating a React Project

Create a new React-typescript application using Vite.

npm create vite@latest berachain-rainbowkit -- --react-ts; 

# [Expected Prompts]:
# 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

Alternatively, 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;

# [Expected Prompts]:
# Need to install the following packages:
# create-vite@5.2.3
# Ok to proceed? (y) y
# ✔ Project name: … berachain-rainbowkit
# ✔ Select a framework: › React
# ✔ Select a variant: › TypeScript
# 
# Scaffolding project in /path/to/berachain-rainbowkit...
# 
# Done. Now run:
# 
#   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 Dependencies

In order to get started with RainbowKit, we both need the rainbowkit library and its dependency wagmi. Start by installing the following:

# FROM ./berachain-rainbowkit

npm install @rainbow-me/rainbowkit wagmi;

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

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

If you'd like to see the full code, gead over to Berachain guides repo using the link below and find the template for the above guide to directly test the dApp out!

Berachain RainbowKit Full Source Code

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.

Berachain Guides

How to get Developer Support ?

⚠️ Still facing issues or have doubts?

Head over to Official Berachain Discord and raise a ticket as shown in the gif below!

Our DevRel team will be happy to assist! 🤝

Byyeeee bears! 🐻