Skip to main content

​
RainbowKit

RainbowKit is a popular wallet connector for React that allows users to connect to a wallet and sign transactions.

Sophon Account + RainbowKit example repository

RainbowKit Example

​
Installation

npm install @sophon-labs/account-eip6963 wagmi viem @rainbow-me/rainbowkit @tanstack/react-query

​
Live demo

​
Sample configuration

Make sure to get your project ID from Reown and set it in your environment variables.
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";

import "@sophon-labs/account-eip6963/testnet";

import { getDefaultConfig } from "@rainbow-me/rainbowkit";
import { sophonTestnet } from "wagmi/chains";
import { http } from "wagmi";

const config = getDefaultConfig({
  appName: "RainbowKit App",
  // Get your project ID from https://cloud.reown.com
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID || "",
  transports: {
    [sophonTestnet.id]: http(),
  },
  chains: [sophonTestnet],
  ssr: true,
});

export default function AppProviders({ children }: { children: React.ReactNode }) {
  const client = new QueryClient();

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <RainbowKitProvider
          appInfo={{
            appName: "RainbowKit Demo",
            learnMoreUrl: "https://rainbow.me/",
          }}
        >
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
⌘I