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.
Installation
npm install @rainbow-me/rainbowkit wagmi [email protected] @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:

Last updated