Wagmi + Rainbowkit

Incorporate wagmi and rainbowkit with no effort !

Install

npm i @cometh/connect-sdk-viem wagmi viem

Add Connect to Wagmi/Rainbowkit config

You need to import to rainbowkitComethConnect as a connector. It takes some params (click here to view all parameters):

chains - required

options - required (apikey, walletAddress and other optional parameters)

"use client";

import { getComethConnectWallet } from "@cometh/connect-sdk-viem";
import {
connectorsForWallets,
} from '@rainbow-me/rainbowkit'; 
import {
  createClient,
  WagmiConfig,
} from 'wagmi';
import { polygon } from "viem/chains";

const comethConnect = getComethConnectWallet({ apiKey: API_KEY });
const connectors = connectorsForWallets(
  [
    {
      groupName: "Recommended",
      wallets: [comethConnect],
    },
  ],
  {
    appName: APP_NAME,
    projectId: WALLET_CONNECT_PROJECT_ID,
  }
);

const wagmiConfig = createConfig({
  connectors,
  chains: [polygon],
  transports: {
    [polygon.id]: http(),
  },
});

const queryClient = new QueryClient();

NextJs v13 Tutorial on polygon

https://github.com/cometh-game/wagmi-rainbowkit-getting-startedgithub.com

Preview

Preparing our layout

On a fresh install of Next.js v13 and Wagmi, your layout.ts code should look pretty bare:

"use client";

import "./lib/ui/globals.css";

{...}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

You want to import the rainbow kit and wagmi library files:

"use client";

import "./lib/ui/globals.css";
import '@rainbow-me/rainbowkit/styles.css';
import {
  connectorsForWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';  
import { rainbowkitComethConnect } from "@cometh/connect-sdk-viem";
import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
} from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

{...}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <WagmiProvider config={wagmiConfig}>
          <QueryClientProvider client={queryClient}>
            <RainbowKitProvider>
              {children}
            </RainbowKitProvider>
          </QueryClientProvider>
        </WagmiProvider>
      </body>
    </html>
  );
}

Understanding the Imports

We are importing the styles for rainbow kit, already built in for us to use

import '@rainbow-me/rainbowkit/styles.css';

This imports the Provider Wrapper for our layout.tsx and setting for cometh connect wallet. We do need to import the rainbowkitComethConnect from the cometh sdk.

import { 
connectorsForWallets,
RainbowKitProvider 
} from '@rainbow-me/rainbowkit';
import { rainbowkitComethConnect } from "@cometh/connect-sdk-viem";

This part is for the Wagmi configuration

chain - brings in default chains included in Wagmi (ethereum, test nets, polygon, etc)

configureChains - lets us modify the providers for our chains (we could use infura, alchemy, Ankr, Pokt, or any of our choosing)

createClient - Lets us manage our Wallets (MetaMask, etc) and Providers(alchemy, ankr, etc)

WagmiConfig - This is the wrapper for our entire _app.js object (since rainbow kit is dependent on Wagmi, it wraps over rainbow kit wrapper)

import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
} from 'wagmi';

The providers can be confusing the wagmi docs and the rainbow docs. In short, a feature of Wagmi is to have failover RPCs. Let's say we start with an alchemy RPC and that fails, then we can use an Ankr RPC and that fails and finally we can use the Public RPCs so that people can keep using our dapp even if our account API fails.

import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

Now Let's configure out imports, if you have been following the docs your code should look like this so far:

"use client";

import "./lib/ui/globals.css";
import '@rainbow-me/rainbowkit/styles.css';
import {
  connectorsForWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';  
import { rainbowkitComethConnect } from "@cometh/connect-sdk-viem";
import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
} from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.polygon],
  [
    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }), //Alchemy API
    publicProvider()
  ]
);

const connectors = connectorsForWallets([
  {
    groupName: "Recommended",
    wallets: [rainbowkitComethConnect({ apiKey, chains })],
  },
]);

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <WagmiProvider config={wagmiConfig}>
          <QueryClientProvider client={queryClient}>
            <RainbowKitProvider>
              {children}
            </RainbowKitProvider>
          </QueryClientProvider>
        </WagmiProvider>
      </body>
    </html>
  );
}

Breaking down what is happening here in the configuration

Setting up configureChains hook. Here we are using the tool to let our variables "chains" and "provider" know what chains we are using and what providers we are using.

chains is taking in polygon.

provider is taking in both Alchemy provider (with our API key) and public provider. We can also add more providers as well. So it will first go with Alchemy first and if it fails, then the public provider.

const { chains, provider } = configureChains(
  [chain.polygon],
  [
    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
    publicProvider()
  ]
);

Setting our Default wallets. This sets up our variable "connectors" to accepts the chains that we just previously set in the "configureChains" and giving the app our name (we can change that to whatever we want, our Dapp Name)

const connectors = connectorsForWallets([
  {
    groupName: "Recommended",
    wallets: [rainbowkitComethConnect({ apiKey, chains })],
  },
]);

The createClient just puts it all together in a single Object call wagmiClient. We take "connectors" we just previously setup (this took in our chains we want to support) and our "Providers" (the RPCs we have setup) and bundle it up for wagmi to refer to.

const wagmiClient = createClient({
  connectors,
  provider
})

Now that we have all the basic configurations setup, we can now wrap our layout.tsx so wagmi and rainbowkit will function throughout our entire website. We are going to turn this part:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
         {children}
      </body>
    </html>
  );
}

into this:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <WagmiConfig config={wagmiConfig}>
          <RainbowKitProvider chains={chains}>{children}</RainbowKitProvider>
        </WagmiConfig>
      </body>
    </html>
  );
}

We just wrapped out website "layout" with the RainbowKit wrapper and let it know we want to support these "chains" (the chains we chose in "configureChains"). Then we wrapped this entire wrapping with the WagmiConfig wrapper and set it to the wagmiClient (that set the type of wallets we will support and the RPC providers). That's a lot of wrapping but at the end, your layout.tsx file should look like this:

"use client";

import { rainbowkitComethConnect } from "@cometh/connect-sdk-viem";
import {
  connectorsForWallets,
} from '@rainbow-me/rainbowkit'; 
import {
  createClient,
  WagmiConfig,
} from 'wagmi';
import { polygon } from "viem/chains";

const comethConnect = getComethConnectWallet({ apiKey: API_KEY });
const connectors = connectorsForWallets(
  [
    {
      groupName: "Recommended",
      wallets: [comethConnect],
    },
  ],
  {
    appName: APP_NAME,
    projectId: WALLET_CONNECT_PROJECT_ID,
  }
);

const wagmiConfig = createConfig({
  connectors,
  chains: [polygon],
  transports: {
    [polygon.id]: http(),
  },
});

const queryClient = new QueryClient();

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <WagmiConfig config={wagmiConfig}>
          <RainbowKitProvider chains={chains}>{children}</RainbowKitProvider>
        </WagmiConfig>
      </body>
    </html>
  );
}

Add the connect button

You can then add the ConnectButton components from RainbowKit and you'll be good to go !

import { ConnectButton } from "@rainbow-me/rainbowkit";

Last updated 7 months ago

Install​