Web3 frontend part-5

In the previous article we used the wallet connect and a set of functions from wagmi in order to connect our wallet with the frontend of the decentralized application. We also saw that for creating an instance of an already deployed smart contract as well as for deploying our smart contracts from the frontend we need to have signers and providers.

There is already an article for understanding the concept of providers and signers.

Now that we have the wallet connected the next step is to create objects for signers or providers so that they can be used. For that it is preferred to create a new js file in the frontend by the name of lets say SignerorProvider.js. However as this convention is not working we can get around it by directly using it in our main Js files.

The wagmi provides a set of hooks for creating the signers and providers for the smart contract. Two of the hooks are:

• useSigner()

• useProvider()

Let us create a signer

The code is as follows:

//This is the statement that imports the hook at the top of the js file
import {useSigner} from "wagmi";

//Now as it is a react hook,Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders.
//Also the SignerorProvider didn't work because the function there was not a react component and hooks only work inside the react components
export default function App()
{
   let signermain=useSigner();
   let signer=signermain.data;
}

Hence this is it. The signer object is now stored inside the signer variable and then we can directly use that variable inside the any of our functions to create an instance or deploy a smart contract