如何将 ReactJS 与 MetaMask 连接起来？

区块链是加密货币和 Web 3.0 的支柱。由于不同交易的透明度，世界正在接受区块链技术并接受去中心化应用程序。 NFT 正在流行，大多数 NFT DAPP 在以太坊区块链上运行。在本文中，我们将看看如何将他们的 react js 应用程序连接到 Meta mask 钱包，这是用于发送和接收签名交易的最常用的浏览器工具。

MetaMaks： MetaMask 是一个加密钱包和区块链 DAPP 的网关。它用于将我们的应用程序连接到 web3。它只是一个 chrome 扩展，用于访问以太坊区块链并与之交互。其功能支持以太坊生态系统上的代币和数字资产。它还用作将余额存储在以太坊中的主钱包。

对于连接，我们使用ethers.js来连接以太坊钱包。

创建反应应用程序：

第 1 步：使用 CLI 创建一个 React 项目

npx create-react-app eth_app
or
yarn create react-app eth_app

项目结构：如下所示。

第 2 步：连接 Metamask 以响应应用程序。为了实现元掩码钱包地址，我们需要将 MetaMaks 连接到我们的 react 应用程序。检查是否连接了元掩码。

if(window.ethereum){
      // Do something 
    }else{
      alert("install metamask extension!!")
    }

现在，如果安装了元掩码，我们需要请求该帐户。

window.ethereum.request({method:'eth_requestAccounts'})
.then(res=>{
        // Return the address of the wallet
        console.log(res) 
})

为了获得余额，我们需要请求 balance 方法

window.ethereum.request({
    method:'eth_getBalance', 
    params: [address, 'latest']
}).then(balance => {
    // Return string value to convert it into int balance
    console.log(balance) 
      
    // Yarn add ethers for using ethers utils or
    // npm install ethers
    console.log(ethers.utils.formatEther(balance))
    // Format the string into main latest balance
})

第 3 步：提取信息以做出反应。为了将信息获取到反应页面，我们将使用 useState 从 javascript 方法中设置值并使用到 jsx

const [data, setdata] = useState({
    address:'',    // Stores address
    Balance: null  // Stores balance
  })

App.js

// Importing modules
import React, { useState } from "react";
import { ethers } from "ethers";
import "./App.css";
import { Button, Card } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
  
function App() {
  
  // usetstate for storing and retrieving wallet details
  const [data, setdata] = useState({
    address: "",
    Balance: null,
  });
  
  // Button handler button for handling a
  // request event for metamask
  const btnhandler = () => {
  
    // Asking if metamask is already present or not
    if (window.ethereum) {
  
      // res[0] for fetching a first wallet
      window.ethereum
        .request({ method: "eth_requestAccounts" })
        .then((res) => accountChangeHandler(res[0]));
    } else {
      alert("install metamask extension!!");
    }
  };
  
  // getbalance function for getting a balance in
  // a right format with help of ethers
  const getbalance = (address) => {
  
    // Requesting balance method
    window.ethereum
      .request({ 
        method: "eth_getBalance", 
        params: [address, "latest"] 
      })
      .then((balance) => {
        // Setting balance
        setdata({
          Balance: ethers.utils.formatEther(balance),
        });
      });
  };
  
  // Function for getting handling all events
  const accountChangeHandler = (account) => {
    // Setting an address data
    setdata({
      address: account,
    });
  
    // Setting a balance
    getbalance(account);
  };
  
  return (
    
      {/* Calling all values which we 
       have stored in usestate */}
  
      
        
          Address: 
          {data.address}
        
        
          
            Balance: 
            {data.Balance}
          
          
        
      
    
  );
}
  
export default App;

输出：