?本人是步入Web3兩個(gè)月的小菜鳥，經(jīng)歷了一個(gè)月react的后臺(tái)項(xiàng)目開發(fā)，此文章適合剛進(jìn)入?yún)^(qū)塊鏈行業(yè)的前端同學(xué)使用 (掌握html、js、css)，還請(qǐng)大佬們輕點(diǎn)??！

需求：

• 添加Metamask插件

• 實(shí)現(xiàn)點(diǎn)擊按鈕 -> 鏈接錢包，并在刷新時(shí)自動(dòng)鏈接。
• 實(shí)現(xiàn)點(diǎn)擊按鈕 -> 添加Chain節(jié)點(diǎn)。
• 實(shí)現(xiàn)點(diǎn)擊按鈕 -> 切換Ethereum/Rinkeby節(jié)點(diǎn)，切換時(shí)頁面將刷新。
• 實(shí)現(xiàn)點(diǎn)擊按鈕 -> 獲取賬戶余額。
• 實(shí)現(xiàn)點(diǎn)擊按鈕 -> 獲取賬戶簽名

? ? ? ?

step1 Google瀏覽器安裝Metamask錢包

? ? ? ? 這里就不演示如何安裝了，可以自行搜索，google插件進(jìn)行安裝

step2 使用UmiJs構(gòu)建項(xiàng)目

? ? ? ? UmiJs官網(wǎng)：快速上手

? ? ? ? 1、創(chuàng)建好文件夾后在終端中輸入??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? ?(其實(shí)也就是npm install 意思是一樣的 只是工具不同)

? ? ? ? 3、在src文件夾下創(chuàng)建app.tsx，運(yùn)行時(shí)配置文件，將provider配置進(jìn)去，這樣程序運(yùn)行時(shí)就可以檢測(cè)到錢包了。(provider不明白的小伙伴，可以到這個(gè)鏈接，參考我?guī)煾档恼f明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文件夾下創(chuàng)建web3文件夾，在web3文件夾里創(chuàng)建一個(gè)index.ts， 然后提供我們需要的ChainId

????????

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

????????

? ? ? ??這時(shí)我們的項(xiàng)目結(jié)構(gòu)應(yīng)該是這個(gè)樣子的:

step3? 調(diào)用錢包

? ? ? ? ?1、這個(gè)時(shí)候我們就可以在頁面弄一個(gè)按鈕，用來調(diào)用錢包啦。

? ? ? ? ? ? ? ?進(jìn)入到src/pages/index.tsx文件中，把里面代碼修改一下：（把代碼刪除后，輸入fc就可以構(gòu)建一個(gè)模板出來啦?。?/p>

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

import React from 'react';

export type IindexProps = {
  
}

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

export default index ;

? ? ? 2、寫一個(gè)按鈕，寫好一個(gè)點(diǎn)擊事件，就可以利用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}>點(diǎn)我連接錢包</button>
      {active ? (
        <span>
          Connected with <b>{account}</b>
        </span>
      ) : (
        <span>Not connected</span>
      )}
    </div>
  );
}

export default index ;

最后在終端中輸入 yarn start ,跑起來看看

? ??

這樣我們點(diǎn)擊按鈕后，就會(huì)調(diào)起MetaMask錢包進(jìn)行連接啦?。?/p>

補(bǔ)充：

? ? ? ?GitHub - hshlss/web3Study

????????這個(gè)是源碼地址，里面包含了調(diào)用錢包，切換ChainId，獲取余額，還有調(diào)用ERC20合約的一些方法，都在里面，適合像我一樣的小菜鳥使用，沒有做封裝的代碼，大家有需要可以自行下載哦~~~??文章來源地址http://www.zghlxwxcb.cn/news/detail-824304.html

到了這里，關(guān)于UmiJs+react-web3連接Metamask錢包的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！