Follow the link: Getting Started | Create React App
Then we need to add the WebReactProvider in the index.tsx so we can use the library in the component. Then we need to create utils where the library is set.
In the chains.ts we can add the networks that we want to use for the Ethereum Blockchain.
We can add more than one network. If you use Ganache here in this file you can add your network name and chain id. In this project, we use only the networks that are public.
Next, we need to add custom hooks to handle web3 connect.
The file useConnectWeb3
In the supportedChainIds we can add all the networks that we like to use “Mainnet” etc. We can check all the Chain Ids in this link: CoinTool
UseWebReact
From the hook useWeb3React we can get all the important things so we can handle the login and other functionalities in Metamask. When the network is changing the useEffect trigger and we store the network id and with the chain.tsx we can map and extract the name so we can display it.
From the hook, we return the network value and we can use it in the project.
Also, we can check if the user has installed the Metamask and display some messages. Now we can check if the user is not connected then we can use this function to connect in the project with the simple button.
Now we can use the hook from the library in the app.tsx and we can extract:
And use it like this in the app.tsx:
And that is a simple way to use it in your project, check the GitHub code.
GitHub - erevos-13/connect-web3