This tutorial is for projects that have been developed around early 2021, where web3-react is the only library for react app to interact with web3 functions.

Right now, we have a few more but I think Wagmi is one of the most commonly used, even some widely used wallet connectors like Web3modal and RainbowKit are using wagmi and viem under the hood.

Here I will show you some steps to migrate from web3react to wagmi and also from ether to viem.

1. Install the new packages

   "wagmi": "^1.3.10",
"viem": "^0.3.19",

2. Changing the imports
   From
   import { useWeb3React } from '@web3-react/core'
   To
   import { useAccount, useNetwork, useWalletClient } from 'wagmi'

3. Getting account/address and chain data
   From
   const { library, account } = useWeb3React()
   To
   const { chain } = useNetwork()
const { address: account } = useAccount()

4. Getting library
   From
   const { library } = useWeb3React()
   To
   const { chain } = useNetwork()
const chainId = chain?.id || 0
const { data: walletClient } = useWalletClient({ chainId: chainId })
const library = walletClient ? walletClientToSigner(walletClient)?.provider?.provider :
new Web3.providers.HttpProvider({RPC URL OF THE CHAIN YOU ARE ON}, { timeout: 10000 } as HttpProviderOptions)
   ` getProviderNoAccount(chainId)

5. WalletClientToSigner function is as follow:
   import { providers } from 'ethers'

export function walletClientToSigner(walletClient, chainId?) {
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}
   
   

I hope this helps anyone and prevents the headache that I went through, cheers.

This tutorial is for projects that have been developed around early 2021, where web3-react is the only library for react app to interact with web3 functions.

Right now, we have a few more but I think Wagmi is one of the most commonly used, even some widely used wallet connectors like Web3modal and RainbowKit are using wagmi and viem under the hood.

Here I will show you some steps to migrate from web3react to wagmi and also from ether to viem.

1. Install the new packages

   "wagmi": "^1.3.10",
"viem": "^0.3.19",

2. Changing the imports
   From
   import { useWeb3React } from '@web3-react/core'
   To
   import { useAccount, useNetwork, useWalletClient } from 'wagmi'

3. Getting account/address and chain data
   From
   const { library, account } = useWeb3React()
   To
   const { chain } = useNetwork()
const { address: account } = useAccount()

4. Getting library
   From
   const { library } = useWeb3React()
   To
   const { chain } = useNetwork()
const chainId = chain?.id || 0
const { data: walletClient } = useWalletClient({ chainId: chainId })
const library = walletClient ? walletClientToSigner(walletClient)?.provider?.provider :
new Web3.providers.HttpProvider({RPC URL OF THE CHAIN YOU ARE ON}, { timeout: 10000 } as HttpProviderOptions)
   ` getProviderNoAccount(chainId)

5. WalletClientToSigner function is as follow:
   import { providers } from 'ethers'

export function walletClientToSigner(walletClient, chainId?) {
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}
   
   

I hope this helps anyone and prevents the headache that I went through, cheers.