Integrating RainbowKit with Somnia in a Next.js Application

In this guide, we'll integrate RainbowKit with the Somnia Network in a Next.js application. This will enable users to connect their wallets seamlessly, facilitating interactions with the Somnia blockchain.

Prerequisites

Before we begin, ensure you have the following:

This guide is not an introduction to JavaScript Programming; you are expected to understand JavaScript.
To complete this guide, you will need MetaMask installed and the Somnia DevNet added to the list of Networks. If you have yet to install MetaMask, please follow this guide to Connect Your Wallet guide.
Familiarity with React and Next.js is assumed.

Create the Next.js Project

Open your terminal and run the following commands to set up a new Next.js project:

npx create-next-app@latest somnia-rainbowkit
cd somnia-rainbowkit

Install the required Dependencies, which are wagmi, viem, @tanstack/react-query, and rainbowkit. Run the following command:

npm install wagmi viem @tanstack/react-query rainbowkit

Confige the Somnia Network

Since wagmi doesn't include the Somnia network by default, we'll define it manually.

Create a new directory named lib in the app directory. Inside this directory, create a file named chains.tsx and add the following code:

import { defineChain } from 'viem/chains';

export const somnia = defineChain({
  id: 50311,
  name: 'Somnia',
  network: 'somnia',
  nativeCurrency: {
    name: 'Somnia Token',
    symbol: 'STT',
    decimals: 18,
  },
  rpcUrls: {
    default: {
      http: ['https://dream-rpc.somnia.network/'], // Replace with the actual RPC URL
    },
  },
  blockExplorers: {
    default: {
      name: 'Somnia Explorer',
      url: 'https://somnia-devnet.socialscan.io/',
    },
  },
});

Set Up Providers in Next.js

We'll set up several providers to manage the application's state and facilitate interactions with the blockchain.

Create a components directory in the app folder. Inside the components directory, create a file named ClientProvider.tsx with the following content:

'use client';

import { WagmiProvider } from "wagmi";
import {
  RainbowKitProvider,
  getDefaultConfig,
} from "@rainbow-me/rainbowkit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { somnia } from "./lib/chains";

const queryClient = new QueryClient();

const config = getDefaultConfig({
  appName: "Somnia Example App",
  projectId: "Get_WalletConnect_ID",
  chains: [somnia],
  ssr: true, 
});

export default function ClientProvider({ children }) {
  return (
    <WagmiConfig config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowkitProvider>{children}</RainbowkitProvider>
      </QueryClientProvider>
    </WagmiConfig>
  );
}

Every Rainbowkit dApp relies on WalletConnect and needs to obtain a projectId from WalletConnect Cloud. Get one here.

In the app directory, locate the layout.tsx file and update it as follows:

import ClientProvider from './components/ClientProvider';


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Somnia DApp</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>
      <body>
        <ClientProvider>{children}</ClientProvider>
      </body>
    </html>
  );
}

Build the Home Page

We'll create a simple home page that allows users to connect their wallets and displays their address upon connection.

In the app directory, locate the page.tsx file and update it as follows:

'use client';

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


export default function Home() {
  const { address, isConnected } = useAccount();


  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
        <ConnectButton />
        {isConnected && (
          <p className="mt-4 text-lg text-blue-600">Connected as: {address}</p>
        )}
      </main>
    </div>
  );
}

Run the Application

Start the Development Server by running the following command:

npm run dev

Open your browser and navigate to http://localhost:3000. You should see the RainbowKit button, allowing users to connect their wallets to the Somnia network.

Conclusion

You've successfully integrated RainbowKit with the Somnia Network in a Next.js application. This setup provides a foundation for building decentralized applications on Somnia, enabling seamless wallet connections and interactions with the Somnia Network.

For further exploration, consider adding features such as interacting with smart contracts, displaying user balances, or implementing transaction functionalities.

If you encounter any issues or need assistance, join the Somnia Developer Discord.

PreviousIntegrate ConnectKit with Somnia in a Next.js Application NextMission

Last updated 12 days ago