本人是步入Web3两个月的小菜鸟，经历了一个月react的后台项目开发，此文章适合刚进入区块链行业的前端同学使用 (掌握html、js、css)，还请大佬们轻点！！

需求：

  • 添加Metamask插件

  • 实现点击按钮 -> 链接钱包，并在刷新时自动链接。
  • 实现点击按钮 -> 添加Chain节点。
  • 实现点击按钮 -> 切换Ethereum/Rinkeby节点，切换时页面将刷新。
  • 实现点击按钮 -> 获取账户余额。
  • 实现点击按钮 -> 获取账户签名

step1 Google浏览器安装Metamask钱包

这里就不演示如何安装了，可以自行搜索，google插件进行安装

step2 使用UmiJs构建项目

UmiJs官网：快速上手

1、创建好文件夹后在终端中输入yarn create @umijs/umi-app

2、安装依赖yarn add@web3-react/core

yarn add@web3-react/injected-connector

yarn add@ethersproject/providers

yarn addweb3

最后在终端输入yarn (其实也就是npm install 意思是一样的 只是工具不同)

3、在src文件夹下创建app.tsx，运行时配置文件，将provider配置进去，这样程序运行时就可以检测到钱包了。(provider不明白的小伙伴，可以到这个链接，参考我师傅的说明React – Provider使用教程（context）、 react自带代替redux的方案 – 掘金)

//app.tsximport { Web3ReactProvider } from '@web3-react/core';import Web3 from 'web3';export function rootContainer(container: any) {return ( new Web3(provider)}>{container});}

4、提供支持钱包的ChainId

在src文件夹下创建web3文件夹，在web3文件夹里创建一个index.ts， 然后提供我们需要的ChainId

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

这时我们的项目结构应该是这个样子的:

step3 调用钱包

1、这个时候我们就可以在页面弄一个按钮，用来调用钱包啦。

进入到src/pages/index.tsx文件中，把里面代码修改一下：（把代码删除后，输入fc就可以构建一个模板出来啦！）

注意！最后是export default index ;！！！

import React from 'react';export type IindexProps = {}const index: React.FC = ({ }) => {return ();}export default index ;

2、写一个按钮，写好一个点击事件，就可以利用web3-react连接到METAMASK啦！

代码如下：

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 = ({ }) => {const context = useWeb3React();const {connector,library,chainId,account,activate,deactivate,active,error,} = context;async function connect() {try {await activate(injected)} catch (error) {console.log(error);}}return ({active " /> 
这样我们点击按钮后，就会调起MetaMask钱包进行连接啦！！
补充：
 GitHub - hshlss/web3Study
这个是源码地址，里面包含了调用钱包，切换ChainId，获取余额，还有调用ERC20合约的一些方法，都在里面，适合像我一样的小菜鸟使用，没有做封装的代码，大家有需要可以自行下载哦~~~