Guide
EVM
Adapters
Wagmi

Wagmi

Wagmi ↗ (opens in a new tab) is a collection of React Hooks containing everything you need to start working with Ethereum. wagmi makes it easy to "Connect Wallet," display ENS and balance information, sign messages, interact with contracts, and much more — all with caching, request deduplication, and persistence.

JoyID can be used with wagmi as a Wagmi Connector ↗ (opens in a new tab) by using the @joyid/wagmi package.

Installation

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

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

npm install @joyid/wagmi@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 Wagmi is easy than you think, just need to create a new instance of JoyIdConnector and pass it to WagmiConfig component.

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 } from 'wagmi/chains'
import { joyidConnector } from '@joyid/wagmi'
 
const config = createConfig({
  chains: [sepolia],
  transports: {
    [sepolia.id]: http(),
  },
  connectors: [
    joyidConnector({
      // 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',
    }),
  ],
})
 
export const Provider: React.FC<React.PropsWithChildren<any>> = ({
  children,
}) => {
  const queryClient = new QueryClient()
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  )
}

Live Demo


EVM AARainbowKit