Ethers.js

Ethers.js ↗ (opens in a new tab) is a complete and compact library for interacting with the Ethereum Blockchain and its ecosystem. JoyID can be used with Ethers.js as a Provider or a Signer to interact with the Ethereum Blockchain by using the @joyid/ethers package.

⚠️

@joyid/ethers only supports Ethers.js v5. If you are using Ethers.js v6, you may check Ethereum Provider for more information.

Installation

Since @joyid/ethers has a peer dependency on ethers, you must have ethers installed.

npm install @joyid/ethers ethers@5

Usage

@joyid/ethers exports a JoyIDProvider and a JoyIDSigner that can be used with Ethers.js. JoyIDProvider is a subclass of ethers.providers.JsonRpcProvider ↗ (opens in a new tab) and JoyIDSigner is a subclass of ethers.Signer ↗ (opens in a new tab).

Connect to JoyID

You may check the Connect for more information on how to connect to JoyID. Instead of importing connect from @joyid/evm, you should import it directly from @joyid/ethers.

Create your provider

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.ts

import { JoyIDProvider } from '@joyid/ethers'
 
export function createProvider() {
  const rpcURL = 'https://ethereum-sepolia.blockpi.network/v1/rpc/public'
  const network = {
    name: 'Sepolia',
    chainId: 11155111,
  }
  const joyidConfig = {
    rpcURL,
    network,
    // 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",
  }
  return new JoyIDProvider(
    rpcURL,
    network,
    joyidConfig
  )
}

Use provider to interact with the blockchain

import { createProvider } from './provider'
 
// provider is a subclass of ethers.providers.JsonRpcProvider
// more information: https://docs.ethers.io/v5/api/providers/jsonrpc-provider/
const provider = createProvider()
return provider.getBalance(address)

Use signer to sign message/transactions

import { createProvider } from './provider'
 
const provider = createProvider()
const signer = provider.getSigner()
const message = 'Hello JoyID!'
// signer is a subclass of ethers.Signer
// more information: https://docs.ethers.io/v5/api/signer/
const signature = await signer.signMessage(message)

Caveats

Since Sign Typed Data is experimental in Ethers.js v5, you may check Sign Typed Data for more information on how to sign typed data. Instead of importing signTypedData from @joyid/evm, you should import it directly from @joyid/ethers.

Demo

For a complete demo, you may check GitHub ↗ (opens in a new tab) and JoyID Ethers.js Demo ↗ (opens in a new tab) .

RainbowKit Ethereum Provider