# Moving from web3-react and ether to wagmi and viem

*Migrations of the commonly used functions*

By [Caleb](https://paragraph.com/@calebwick) · 2023-09-24

web3, tutorial

---

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](https://web3modal.com/) and [RainbowKit](https://www.rainbowkit.com/) 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.

Getting started
---------------

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.

---

*Originally published on [Caleb](https://paragraph.com/@calebwick/web3react-to-wagmi)*