UmiJs+react-web3 connects to Metamask wallet

 I am a rookie who has been into Web3 for two months. I have experienced a month of react background project development. This article is suitable for front-end students who have just entered the blockchain industry (master html, js, css). point! !

need:

• Add Metamask plugin

• Implement click button -> link wallet, and automatically link when refreshing.
• Implement click button -> add Chain node.
• Realize click button -> switch Ethereum/Rinkeby node, the page will refresh when switching.
• Implement button click -> get account balance.
• Implement click button -> get account signature

       

step1 Google browser install Metamask wallet

        I will not demonstrate how to install it here, you can search for it yourself, and install it with the google plug-in

step2 Use UmiJs to build the project

        UmiJs official website: Get started quickly

        1. After creating the folder, enter yarn create @umijs/umi-app in the terminal

        2. Installation depends on yarn add @web3-react/core   

                                 yarn add @web3-react/injected-connector

                                 yarn add @ethersproject/providers

                                 yarn add web3

             Finally, enter yarn in the terminal (in fact, npm install means the same thing but different tools)

        3. Create app.tsx under the src folder, configure the file at runtime, and configure the provider in it, so that the wallet can be detected when the program is running. (For those who don’t understand the provider, you can go to this link and refer to my master’s instructions. React - Provider usage tutorial (context), react comes with a solution to replace redux - Nuggets )

//app.tsx
import { Web3ReactProvider } from '@web3-react/core';
import Web3 from 'web3';

export function rootContainer(container: any) {
  
  return (
    <Web3ReactProvider getLibrary={(provider: any) => new Web3(provider)}>
      {container}
    </Web3ReactProvider>
  );
}

         4. Provide the ChainId that supports the wallet

        Create a web3 folder under the src folder, create an index.ts in the web3 folder, and provide the ChainId we need

        

import { InjectedConnector } from '@web3-react/injected-connector';
export const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42, 97, 56],
});

        

        At this point our project structure should look like this:

step3 call wallet

         1. At this time, we can make a button on the page to call the wallet.

               Go to the src/pages/index.tsx file and modify the code inside: (After deleting the code, enter fc to build a template!)

              Notice! Finally, export default index;! ! !

import React from 'react';

export type IindexProps = {
  
}

const index: React.FC<IindexProps> = ({ }) => {
  return (
    <div>
      
    </div>
  );
}

export default index ;

      2. Write a button and write a click event, then you can use web3-react to connect to METAMASK!

           code show as below:

import { injected } from '@/web3';
import { Web3Provider } from '@ethersproject/providers';
import { useWeb3React } from '@web3-react/core';
import React from 'react';

export type IindexProps = {
  
}

const index: React.FC<IindexProps> = ({ }) => {
  const context = useWeb3React<Web3Provider>();
  const {
    connector,
    library,
    chainId,
    account,
    activate,
    deactivate,
    active,
    error,
  } = context;

  async function connect() {
    try {
      await activate(injected)
    } catch (error) {
      console.log(error);
      
    }
  }

  return (
    <div>
      <button onClick={connect}>点我连接钱包</button>
      {active ? (
        <span>
          Connected with <b>{account}</b>
        </span>
      ) : (
        <span>Not connected</span>
      )}
    </div>
  );
}

export default index ;

Finally, enter yarn start in the terminal and run it to see

    

In this way, after we click the button, the MetaMask wallet will be called up to connect! !

Replenish:

       GitHub - hshlss/web3Study

        This is the source code address, which includes calling the wallet, switching ChainId, getting the balance, and some methods of calling the ERC20 contract, all of which are in it. It is suitable for rookies like me. There is no encapsulated code, and you can do it yourself if you need it. download oh~~~