Web3 frontend part-4

Now let us understand the concept of connecting to a wallet. This is particularly important because any transaction made or the read only functions called will be done with the help of the externally owned accounts(EOAs) of the user.

For that we are going to use a library called Web3Modal.

Web3Modal is an elegantly simple yet powerful library that helps you manage your multi-chain wallet connection flows, all in one place

By multichain it means that a digital wallet that is able to integrate multiple address to a variety of different blockchains. The Multi-Chain wallet allows you to store, send & receive numerous coins/tokens on different blockchains in one single wallet, with only one single Passphrase.

Web3Modal currently works with HTML and react as well as all the EVM compatible chains.

After briefly going through its documentation here are a few points that are important

Web3Modal website link

One great thing about the web3modal library is that it has a built-in support for RPC and hence the users can enjoy the read/write access to multiple blockchains without having to do extra steps for setup.

Step-1) Lets say we need to connect our wallet with three testnets which are: goerli,celoAlfajores and polygon mumbai. Now these are3 different blockchains that we want to connect with.

There is a react library called wagmi which provides with a set of features and hooks in order to make development easy

Now let us first install the wagmi npm package

npm install wagmi

Now this library or the package has a sub package by the name of chains from where we can import all the evm compatible blockchains.

import {goerli,celoAlfajores,polygonMumbai} from "wagmi/chains";

Now lets talk about the configureChains function of the wagmi library

The configureChains function allows you to configure your chains with providers such as: Alchemy, Infura, or something else. This means you don't need to worry about defining RPC URLs and chain configuration in your connector or provider. This is managed internally by wagmi.

//configureChains accepts an array of chains and an array of providers. It returns:
//chains: to pass to your connector(s)
//provider: to pass to createClient
//webSocketProvider: to optionally pass to createClient

import { configureChains,createclient } from 'wagmi'

//This is the array of chains
const chains=[goerli,celoAlfajores,polygonMumbai];

Now we need an array of providers such that we can pass it inside the configureChains function. For that we need to import another npm package by the name of @web3modal/ethereum which contains these providers

npm install @web3modal/ethereum

//This walletConnectProvider is a function in which we pass in the projectId that we get from the web3modal and hence we can then use an array of providers
//The walletConnectprovider is a function that returns an array of these providers. It is an internal function of 
import {walletConnectProvider,modalconnectors} from "@web3modal/ethereum";

//Get the projectId from the walletconnect cloud
//Inside that create a new project and enter the details
let walletproviders=walletConnectProvider({ projectId: "<YOUR_PROJECT_ID>" });

Now we make use of the configurechains function. Once that is done the next step is to create a client. Why?The wagmi Client is a framework agnostic (Vanilla JS) client that manages wallet connection state and configuration, such as: auto-connection, connectors, and ethers providers.

const {providers}=configureChains(chains,walletproviders);

//Now that we have the providers the next step is to create a client
//It can take a lot of parameters
//The first parameter is the autoConnect (optional) which Enables reconnecting to last used connector on mount. Defaults to false.
//The second parameter is the connectors.Connectors used for linking accounts. Defaults to [new InjectedConnector()].
//For the connectors we make use of the modalconnectors function of the @web3modal/ethereum
//The last parameter for our usage is the provider that we got from the configurechains
const client = createClient({
    autoConnect:true,
    connectors: modalConnectors({
        projectId: "project id",
        version: "1", // or "2"
        appName: "decentralized storage",
        chains,
      }),
    provider,
  })

Now that we have created a client the next step is to ethereum client using yet another function that is provided by the web3modal. This function is also imported using the @web3modal/ethereum. It has already been imported in the above steps and now we have to create the client

const ethereumClient=new EthereumClient(client,chains);

//Now we export both the ethereumclient and the client so that it can be used in our app
let obj={client,ethereumClient};

Now inside the App.jsx we need to include the following react components. For that we need to export the client and the ethereum client that we created in the above steps.

Once they are imported and other required components are also imported we finally write the following code:

import {Web3Modal} from "@web3modal/react";
import { WagmiConfig } from "wagmi";
import {client,ethereumClient} from "./Walletconnect2";

<WagmiConfig client={client}>

      <Context.Provider value={obj}>
        <Router>
          <Navbar />
          <Routes>
            <Route exact path="/" element={<Walletconnect />} />
            {/* <Route exact path="/use" element={<UseAccount />} /> */}
            <Route exact path="/Generate" element={<IPFSapp />} />
          </Routes>
        </Router>
      </Context.Provider>
      </WagmiConfig>

      <Web3Modal
        projectId="db6f8aea7165a0906d6ceab802837cd9"
        ethereumClient={ethereumClient}
      />