Guide
EVM
Adapters
RainbowKit

RainbowKit

RainbowKit ↗ (opens in a new tab) is a React library that makes it easy to add wallet connection to your dapp. It's intuitive, responsive and customizable. JoyID can be used as a Custom Wallet ↗ (opens in a new tab) for RainbowKit by using @joyid/rainbowkit package.

Installation

This document is about RainbowKit V2. If you want to learn about RainbowKit V1, please check out this document.

Since @joyid/rainbowkit has a peer dependency on @rainbow-me/rainbowkit, and @rainbow-me/rainbowkit has a peer dependency on viem and wagmi, you must have wagmi, viem and @rainbow-me/rainbowkit installed.

npm install @joyid/rainbowkit@2 @rainbow-me/rainbowkit@2 wagmi@2 viem@2

With Wagmi v2, TanStack Query is now a required peer dependency.

Install it with the following command:

npm install @tanstack/react-query

Usage

Use JoyID with RainbowKit is easy than you think, just need to import JoyIdWallet from @joyid/rainbowkit and pass it to wallets in connectorsForWallets function.

The joyidAppURL parameter is the JoyID App URL that your app will connect to.

provider.tsx
import React from 'react'
import { http, WagmiProvider, createConfig } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { sepolia, polygonAmoy, opBNBTestnet } from 'wagmi/chains'
import {
  connectorsForWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit'
import { createJoyIdWallet } from '@joyid/rainbowkit'
import { injectedWallet, coinbaseWallet } from '@rainbow-me/rainbowkit/wallets'
import '@rainbow-me/rainbowkit/styles.css'
 
const joyidWallet = createJoyIdWallet({
  // name of your app
  name: 'JoyID Rainbowkit demo',
  // logo of your app
  logo: 'https://fav.farm/🆔',
  // JoyID app url that your app is integrated with
  joyidAppURL: 'https://testnet.joyid.dev',
})
 
const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [joyidWallet, injectedWallet, coinbaseWallet],
    },
  ],
  {
    appName: 'JoyID RainbowKit demo',
    // for walletconnect
    projectId: 'YOUR_PROJECT_ID',
  }
)
 
const config = createConfig({
  chains: [sepolia, polygonAmoy, opBNBTestnet],
  transports: {
    [sepolia.id]: http(),
    [polygonAmoy.id]: http(),
    [opBNBTestnet.id]: http(),
  },
  connectors,
})
 
export const Provider: React.FC<React.PropsWithChildren<any>> = ({
  children,
}) => {
  const queryClient = new QueryClient()
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>{children}</RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Live Demo


WagmiEthers.js