• React
  • Ethers.js Adapters

Ethers.js Adapters

It is recommended for projects to migrate to viem when using wagmi, but there are some cases where you might still need to use ethers.js in your project:

  • You may want to incrementally migrate ethers.js usage to viem
  • Some third-party libraries & SDKs may only support ethers.js

We have provided reference implementations for viem → ethers.js adapters that you can copy + paste in your project.

Public Client → Provider

Reference Implementation

Copy the following reference implementation into a file of your choice:

src/ethers.ts
import * as React from 'react'
import { type PublicClient, usePublicClient } from 'wagmi'
import { providers } from 'ethers'
import { type HttpTransport } from 'viem'
 
export function publicClientToProvider(publicClient: PublicClient) {
  const { chain, transport } = publicClient
  const network = {
    chainId: chain.id,
    name: chain.name,
    ensAddress: chain.contracts?.ensRegistry?.address,
  }
  if (transport.type === 'fallback')
    return new providers.FallbackProvider(
      (transport.transports as ReturnType<HttpTransport>[]).map(
        ({ value }) => new providers.JsonRpcProvider(value?.url, network),
      ),
    )
  return new providers.JsonRpcProvider(transport.url, network)
}
 
/** Hook to convert a viem Public Client to an ethers.js Provider. */
export function useEthersProvider({ chainId }: { chainId?: number } = {}) {
  const publicClient = usePublicClient({ chainId })
  return React.useMemo(() => publicClientToProvider(publicClient), [publicClient])
}

Usage

Now you can use the useEthersProvider Hook in your components:

src/Example.ts
import { useEthersProvider } from './ethers'
 
function Example() {
  const provider = useEthersProvider()
  ...
}

Wallet Client → Signer

Reference Implementation

Copy the following reference implementation into a file of your choice:

src/ethers.ts
import * as React from 'react'
import { type WalletClient, useWalletClient } from 'wagmi'
import { providers } from 'ethers'
 
export function walletClientToSigner(walletClient: WalletClient) {
  const { account, chain, transport } = walletClient
  const network = {
    chainId: chain.id,
    name: chain.name,
    ensAddress: chain.contracts?.ensRegistry?.address,
  }
  const provider = new providers.Web3Provider(transport, network)
  const signer = provider.getSigner(account.address)
  return signer
}
 
/** Hook to convert a viem Wallet Client to an ethers.js Signer. */
export function useEthersSigner({ chainId }: { chainId?: number } = {}) {
  const { data: walletClient } = useWalletClient({ chainId })
  return React.useMemo(
    () => (walletClient ? walletClientToSigner(walletClient) : undefined),
    [walletClient],
  )
}

Usage

Now you can use the useEthersSigner Hook in your components:

src/Example.ts
import { useEthersSigner } from './ethers'
 
function Example() {
  const signer = useEthersSigner()
  ...
}