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()
  ...
}

Actions Module Types