UmiJs+react-web3连接Metamask钱包-Toy模板网

这篇具有很好参考价值的文章主要介绍了UmiJs+react-web3连接Metamask钱包。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本人是步入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 add web3

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

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

//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、提供支持钱包的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<IindexProps> = ({ }) => {
  return (
    <div>
      
    </div>
  );
}

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<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 ;

最后在终端中输入 yarn start ,跑起来看看

react 使用uniset 连接欸钱包,前端,区块链,typescript,react.js