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.


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


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.

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 {
} 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: '🆔',
  // JoyID app url that your app is integrated with
  joyidAppURL: '',
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: {
    []: http(),
    []: http(),
    []: http(),
export const Provider: React.FC<React.PropsWithChildren<any>> = ({
}) => {
  const queryClient = new QueryClient()
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>

Live Demo