Rainbow Kit

This tutorial will illustrate a step-by-step walkthrough in NextJS of how to setup a project using RainbowKit and how to set up a custom wallet list that recommends the ME Wallet.

Note:

The ME wallet works out of the box in the RainbowKit default config if a user has the wallet installed on their browser, because all installed wallets that conform to EIP-6963 will be detected. This guide is to illustrate how you can control the specific wallets shown in a custom list.

Installation

npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query

Implementation

Here we will import the necessary libraries, create a custom connectors list, and a config that communicates with those connectors and Ethereum mainnet.

Once you've done that, you can wrap your application with RainbowKitProvider, WagmiProvider, and QueryClientProvider.

import "../styles/globals.css";
import "@rainbow-me/rainbowkit/styles.css";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { RainbowKitProvider, connectorsForWallets } from "@rainbow-me/rainbowkit";
import { magicEdenWallet } from "@rainbow-me/rainbowkit/wallets";
import { http, createConfig } from "wagmi";
import { mainnet } from "wagmi/chains";

const connectors = connectorsForWallets(
	[
		{
			groupName: "Recommended",
			wallets: [magicEdenWallet],
		},
	],
	{
		appName: "My RainbowKit App",
		projectId: "YOUR_PROJECT_ID",
	}
);

const config = createConfig({
	connectors,
	chains: [mainnet],
	ssr: true,
	transports: {
		[mainnet.id]: http(),
	},
});

const client = new QueryClient();

function MyApp({ Component, pageProps }: AppProps) {
	return (
		<WagmiProvider config={config}>
			<QueryClientProvider client={client}>
				<RainbowKitProvider>
					<Component {...pageProps} />
				</RainbowKitProvider>
			</QueryClientProvider>
		</WagmiProvider>
	);
}

export default MyApp;

Add the Connect Button

In your index.tsx file, go ahead and add the ConnectButton supplied by RainbowKit

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 />
			</main>
		</div>
	);
};

export default Home;

And that's all. When you trigger the button, you should get a nice modal that recognizes installed wallets and sets up the ME wallet in a standalone "reccommended" catagory. It may look something like this:

PreviousWallet Connect NextWagmi

Last updated 8 months ago

Implementation

Here we will import the necessary libraries, create a custom connectors list, and a config that communicates with those connectors and Ethereum mainnet.

Once you've done that, you can wrap your application with RainbowKitProvider, WagmiProvider, and QueryClientProvider.

import "../styles/globals.css";
import "@rainbow-me/rainbowkit/styles.css";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { RainbowKitProvider, connectorsForWallets } from "@rainbow-me/rainbowkit";
import { magicEdenWallet } from "@rainbow-me/rainbowkit/wallets";
import { http, createConfig } from "wagmi";
import { mainnet } from "wagmi/chains";

const connectors = connectorsForWallets(
	[
		{
			groupName: "Recommended",
			wallets: [magicEdenWallet],
		},
	],
	{
		appName: "My RainbowKit App",
		projectId: "YOUR_PROJECT_ID",
	}
);

const config = createConfig({
	connectors,
	chains: [mainnet],
	ssr: true,
	transports: {
		[mainnet.id]: http(),
	},
});

const client = new QueryClient();

function MyApp({ Component, pageProps }: AppProps) {
	return (
		<WagmiProvider config={config}>
			<QueryClientProvider client={client}>
				<RainbowKitProvider>
					<Component {...pageProps} />
				</RainbowKitProvider>
			</QueryClientProvider>
		</WagmiProvider>
	);
}

export default MyApp;

Add the Connect Button

In your index.tsx file, go ahead and add the ConnectButton supplied by RainbowKit

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 />
			</main>
		</div>
	);
};

export default Home;