Connect RainbowKit with Mantle Testnet

Published in

0xMantle

4 min readMar 13, 2023

Introduction

In this tutorial, we’ll be discussing the code that imports RainbowKit and WAGMI libraries, and sets up a Mantle Testnet environment using Next.js framework.

RainbowKit is a library that provides a collection of React components, hooks, and utilities for building decentralized applications (dApps) on the Ethereum blockchain. WAGMI (We Are Going Moon Inc.) is a TypeScript library that provides an easy-to-use interface for interacting with the Ethereum blockchain.

We’ll go through the code line by line and explain what each line does.

Prerequisites

Before we dive into the code, you will need to have a basic understanding of:

JavaScript programming language
React framework
Blockchain basics

Assuming everyone reading has a basic understanding of the above prerequisites, let’s proceed with the code-along tutorial.

Step1: Initialize node project

npm init @rainbow-me/rainbowkit

npm init is a command used to initialize a new Node.js project. It creates a package.json file that describes your project and its dependencies. The package.json file is a JSON file that lists the dependencies required for your project and other metadata about your project.

@rainbow-me/rainbowkit is a package that provides a set of React components and utility functions for building Ethereum wallets and DApps. It is published on the npm registry, which is a public repository of open-source JavaScript packages.

When you run npm init @rainbow-me/rainbowkit, it initializes a new project using the @rainbow-me/rainbowkit package as a template. This will create a new directory with the name of your project and install the dependencies required for the RainbowKit package.

Once you’ve installed, open the file where you installed the project and open index.tsx in any IDE of your choice!

Here, you can see a prebuilt frontend, we just made a few changes to it.

As this tutorial is more focused on the wallet config using rainbow kit, we will be skipping on the explanation of frontend.

Copy and paste the below code in index.tsx

import { ConnectButton } from '@rainbow-me/rainbowkit';
import type { NextPage } from 'next';
import Head from 'next/head';
import styles from '../styles/Home.module.css';

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>RainbowKit App</title>
        <meta
          content="Generated by @rainbow-me/create-rainbowkit"
          name="description"
        />
        <link href="/favicon.ico" rel="icon" />
      </Head>

      <main className={styles.main}>
        <ConnectButton />

        <h1 className={styles.title}>
          Welcome to <a href="">Custom Setup Guide for Mantle Testnet</a>
        </h1>

        <div className={styles.grid}>
          <a className={styles.card} href="https://docs.mantle.xyz">
            <h2>Mantle Documentation &rarr;</h2>
            <p>Learn more about Mantle Testnet</p>
          </a>

          <a className={styles.card} href="https://wagmi.sh">
            <h2>Rainbowkit Documentation &rarr;</h2>
            <p>Learn how to customize wallet connection</p>
          </a>
        </div>
      </main>
    </div>
  );
};

export default Home;

Once you’ve done this headover to styles folder and under styles open Home.Modules.css

Change the existing color to any color of your choice — here we are going with mantle green #65b3ae.

Now, scroll down and add the same color “#65b3ae” to “color” and “border-color”, shown in the snip below.

Step 2: Import the necessary dependencies

The first step is to import the necessary dependencies required to run the application. In this case, we need to import the following:

a. The global CSS file

b. The RainbowKit CSS file

c. The getDefaultWallets and RainbowKitProvider functions from RainbowKit

d. The AppProps type from Next.js

e. The configureChains, createClient, WagmiConfig, and Chain functions from Wagmi

f. The jsonRpcProvider function from Wagmi/providers/jsonRpc

To do this, add the following code to the top of your _app.tsx:

import '../styles/globals.css';
import '@rainbow-me/rainbowkit/styles.css';
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import type { AppProps } from 'next/app';
import { configureChains, createClient, WagmiConfig, Chain} from 'wagmi';
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

Step 3: Configure the Mantle Testnet

The next step is to configure the Mantle Testnet, which is a decentralized blockchain network used for testing DeFi applications. To do this, we need to define the mantle testnet object, which contains the following properties:

a. id: a unique identifier for the network

b. name: the name of the network

c. network: the type of network

d. iconUrl: the URL of the network’s icon

e. iconBackground: the background color of the network’s icon

f. nativeCurrency: the native currency used by the network

g. rpcUrls: the URL of the network’s RPC endpoint

h. blockExplorers: the URL of the network’s block explorer

i. testnet: a boolean value indicating whether the network is a testnet or not

Add the following code to define the Mantle Testnet object:

const mantletestnet: Chain = {
  id: 5001,
  name: 'Mantle Testnet',
  network: 'Mantle Testnet',
  iconUrl: 'https://i.imgur.com/Q3oIdip.png',
  iconBackground: '#fff',
  nativeCurrency: {
    decimals: 18,
    name: 'BIT',
    symbol: 'BIT',
  },
  rpcUrls: {
    default: {
      http: ['https://rpc.testnet.mantle.xyz'],
    },
  },
  blockExplorers: {
    default: { name: 'Mantle Testnet Explorer', url: 'https://explorer.testnet.mantle.xyz' },
  },
  testnet: true,
};

Step 4: Running the project

Now type “npm run dev” in terminal and your dApp should be deployed on http://localhost:3000/

Please check the reference picture below to see how the dApp would look like.

Congrats! We’ve successfully created and deployed a simple dApp to test rainbowkit config for Mantle Testnet.