Ethers.js 入门教程：玩转以太坊区块链开发

前端

2023-10-13 19:09:57

拥抱区块链之旅：与 Ethers.js 携手共创以太坊应用

踏入区块链世界的浩瀚海洋，Ethers.js 宛如一盏明灯，照亮你的开发之路。这个强大的 JavaScript 库专门为与以太坊区块链交互而设计，提供了一系列丰富且易用的 API，让你轻松构建各种以太坊应用。

基础概念：区块链的基石

在踏上征程之前，理解一些基本概念至关重要：

以太坊区块链： 一个去中心化的账本，记录着交易并验证其真实性。
智能合约： 存储在区块链上的程序，自主执行预先定义的规则和协议。
Metamask： 一个流行的区块链钱包，让你管理以太坊账户并与智能合约交互。
Hardhat： 一个区块链测试环境，让你在本地测试和部署智能合约。

构建你的第一个以太坊应用

准备就绪后，让我们通过一个简单的以太坊应用来实战演练 Ethers.js 的强大功能。该应用将让你发送和接收以太坊：

1. 项目初始化

首先，创建一个新项目并安装必要的依赖项：

npx create-react-app my-ether-app
cd my-ether-app
npm install ethers

2. 集成 Metamask

接下来，添加对 Metamask 的支持，以便用户可以使用他们的 Metamask 账户与你的应用交互：

// src/App.js

import { useEffect, useState } from "react";
import { ethers } from "ethers";

function App() {
  // 省略其他代码...

  useEffect(() => {
    if (!window.ethereum) {
      setIsMetamaskInstalled(false);
      return;
    }

    setIsMetamaskInstalled(true);
    window.ethereum.on("accountsChanged", (accounts) => {
      setAccount(accounts[0]);
    });
  }, []);

  const connectMetamask = async () => {
    try {
      const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
      setAccount(accounts[0]);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    // 省略其他代码...
    <button onClick={connectMetamask}>连接 MetaMask</button>
  );
}

export default App;

3. 发送和接收以太坊

最后，添加发送和接收以太坊的功能：

// src/App.js

// 省略其他代码...

const sendEther = async () => {
  try {
    const transaction = await window.ethereum.request({
      method: "eth_sendTransaction",
      params: [
        {
          from: account,
          to: "0x1234567890123456789012345678901234567890",
          value: ethers.utils.parseEther("0.1"),
        },
      ],
    });
    await transaction.wait();
    console.log("交易已发送");
  } catch (error) {
    console.error(error);
  }
};

const receiveEther = async () => {
  // 省略代码...
};

// 省略其他代码...

<button onClick={sendEther}>发送 0.1 ETH</button>
<button onClick={receiveEther}>接收 ETH</button>