将 Metamask 与 React 应用程序连接

Metamask 是一个浏览器插件，它提供了钱包管理功能，允许用户进行以太坊区块链交互。在需要在 React 应用程序中与以太坊区块链进行交互时，可以使用 Metamask 来轻松地实现这一目的。在本文中，我们将介绍如何将 Metamask 与 React 应用程序连接。

步骤 1：安装 Metamask

首先，需要安装 Metamask 浏览器插件。可以从 Metamask 官网 下载并安装。

步骤 2：创建 React 应用程序

可以使用 Create React App 来创建一个新的React应用程序。在终端中运行以下命令：

npx create-react-app my-app
cd my-app
npm start

步骤 3：安装 Web3.js

Web3.js 是以太坊区块链的 JavaScript 库。需要使用它来与以太坊交互。在终端中运行以下命令进行安装：

npm install web3

步骤 4：连接 Metamask

在 React 应用程序中连接 Metamask，需要使用 Web3.js。可以使用以下代码片段来连接 Metamask：

import React, { useEffect, useState } from "react";
import Web3 from "web3";

function App() {
  const [web3, setWeb3] = useState(null);

  useEffect(() => {
    const getWeb3 = async () => {
      // Wait for loading completion to avoid race conditions with web3 injection timing.
      while (typeof window.ethereum === "undefined") {
        await new Promise((resolve) => setTimeout(resolve, 1000));
      }

      // Use MetaMask's provider.
      const web3 = new Web3(window.ethereum);
      setWeb3(web3);
    };

    getWeb3();
  }, []);

  return (
    <div className="App">
      {/* Render your app here */}
    </div>
  );
}

export default App;

首先，导入 Web3.js 并声明一个名为 web3 的状态变量。 在 useEffect 钩子中，创建一个异步函数 getWeb3。在该函数中，我们等待 MetaMask 加载完成，然后使用其提供程序实例化一个新的 Web3 对象。

最后，将新的 Web3 对象设置为 web3 状态变量的值。

步骤 5：使用 Metamask 进行交互

现在，已经成功连接了 Metamask，并可以通过 Web3.js 与以太坊区块链进行交互。可以通过以下代码片段来获取当前连接的账户地址：

import React, { useEffect, useState } from "react";
import Web3 from "web3";

function App() {
  const [web3, setWeb3] = useState(null);
  const [accounts, setAccounts] = useState([]);

  useEffect(() => {
    const getWeb3 = async () => {
      // Wait for loading completion to avoid race conditions with web3 injection timing.
      while (typeof window.ethereum === "undefined") {
        await new Promise((resolve) => setTimeout(resolve, 1000));
      }

      // Use MetaMask's provider.
      const web3 = new Web3(window.ethereum);
      setWeb3(web3);

      // Get the current accounts.
      const [account] = await web3.eth.getAccounts();
      setAccounts([account]);
    };

    getWeb3();
  }, []);

  return (
    <div className="App">
      <h1>Your Account: {accounts[0]}</h1>
    </div>
  );
}

export default App;

首先，声明一个名为 accounts 的状态变量。在 useEffect 中使用 web3.eth.getAccounts() 来获取当前用户的账户地址，并将其设置为 accounts 状态变量的值。最后，在 JSX 中渲染账户地址。

现在，就已经成功将 Metamask 与 React 应用程序连接，可以通过 Web3.js 来与以太坊区块链进行交互。