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

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 wagmi viem

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.

Testnet: https://testnet.joyid.dev (opens in a new tab)
Mainnet: https://app.joy.id (opens in a new tab)

provider.tsx

import * as React from "react";
import { WagmiConfig, createConfig, configureChains } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { sepolia, polygonMumbai } from "wagmi/chains";
import { JoyIdConnector } from "@joyid/wagmi";
 
export const { chains, publicClient } = configureChains(
  [sepolia, polygonMumbai],
  [publicProvider()],
);
 
export const joyidConnector = new JoyIdConnector({
  chains,
  options: {
    // name of your app
    name: "JoyID demo",
    // logo of your app
    logo: "https://fav.farm/🆔",
    // JoyID app url that your app is integrated with
    joyidAppURL: "https://testnet.joyid.dev",
  },
});
 
const config = createConfig({
  autoConnect: true,
  publicClient,
  connectors: [joyidConnector],
});
 
export const Provider: React.FC<React.PropsWithChildren> = ({ children }) => {
  return <WagmiConfig config={config}>{children}</WagmiConfig>;
};

Try it out

Send Transaction RainbowKit