使用Scaffold-ETH在Moonbeam上部署DApp

概览

Scaffold-ETH是以太坊常用开发工具的集合，使开发人员能够快速部署Solidity智能合约，并上线带有React前端和已部署subgraph的DApp。目前有一些预制模板可供常见DApp类型，如NFT、ERC-20 Token、多签钱包、简易DEX等使用。

Scaffold-ETH由一些子组件组成，包括Hardhat、The Graph和React UI。所有这些组件只需稍作修改就可在Moonbeam网络上使用。本教程将引导您如何在Moonbeam网络上使用Scaffold-ETH部署和运行默认示例合约和DApp。

查看先决条件

本教程操作需安装Node.js（这个示例将使用v16.x）和「npm package manager」。您可通过Node.js下载或自行运行以下代码完成安装

UbuntuMacOS

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -

sudo apt install -y nodejs

# You can use homebrew (https://docs.brew.sh/Installation)
brew install node

# Or you can use nvm (https://github.com/nvm-sh/nvm)
nvm install node

您可以通过请求每个安装包的版本来验证是否安装正确：

node -v

npm -v

要运行Scaffold-ETH的The Graph组件，您还需要在您的系统安装以下程序以从Docker运行本地The Graph节点：

• Docker
• Docker Compose
• JQ

要在Moonbeam或Moonriver网络上测试本指南中的示例，您可以从受支持的网络端点提供商之一获取您自己的端点和API密钥。

安装Scaffold-ETH

首先，从GitHub代码库下载Scaffold-ETH。

在命令行输入：

git clone https://github.com/scaffold-eth/scaffold-eth.git

下载完成后，运行：

yarn install

当依赖项已安装且在控制台输出无任何错误（如上图所示），您可以继续修改Scaffold-ETH的不同组件。

修改配置

您需要对组成Scaffold-ETH的三个主要组件进行配置修改。

要在Moonbeam或Moonriver网络上测试本指南中的示例，您可以从受支持的网络端点提供商之一获取您自己的端点和API密钥。

Hardhat组件

您可以在/packages/hardhat文件下对Hardhat组件进行修改配置。

1. 您需要修改的文件名为scaffold-eth/packages/hardhat/hardhat.config.js。首先，将defaultNetwork常量设置为您想要部署智能合约的网络

   MoonbeamMoonriverMoonbase AlphaMoonbeam开发节点

   defaultNetwork = "moonbeam";
   

   defaultNetwork = "moonriver";
   

   defaultNetwork = "moonbaseAlpha";
   

   defaultNetwork = "moonbeamDevNode";
   

2. 在同一个文件的module.exports/etherscan/apiKey部分，为Moonscan添加API密钥，用于验证已部署的智能合约。了解如何生成Moonscan API密钥，请查看Etherscan Plugins部分。

3. （可选）在function mnemonic()部分，注释当网络未设置为localhost时控制台发出警告

   if (defaultNetwork !== "localhost") {
     //console.log(
     //  "☢️ WARNING: No mnemonic file created for a deploy account. Try `yarn run generate` and then `yarn run account`."
     //);
   }
   

4. 在 scaffold-eth/packages/hardhat/ 下创建一个名为 mnemonic.txt 的文件，然后将合约部署者账户的助记词复制粘贴到该文件中。

关于如何在Moonbeam上使用Hardhat部署合约的更多资讯，请参考Hardhat页面。

The Graph组件

在Scaffold-ETH的The Graph组件中，您需要修改两个文件将本地TheGraph节点实例指向对应Moonbeam RPC端点。

1. 首先，修改servers/graph-node/environment/ethereum下的scaffold-eth/packages/services/graph-node/docker-compose.yaml文件，将The Graph节点的RPC端点更改为索引。

   对于Moonbeam或Moonriver，您可以使用私有的RPC网络端点和相应的网络前缀。对于Moonbase Alpha或Moonbeam开发节点，您可以使用以下端点：

   Moonbase AlphaMoonbeam开发节点

   ethereum: "moonbaseAlpha:https://rpc.api.moonbase.moonbeam.network"
   

   ethereum: "moonbeamDevNode:http://127.0.0.1:9944"
   

2. 接下来，您需要修改subgraph/subgraph.yaml。将正在部署的合约中dataSources/network字段更改为先前在docker-compose.yaml中定义的对应网络名称：

   MoonbeamMoonriverMoonbase AlphaMoonbeam开发节点

   network: moonbeam 
   

   network: moonriver
   

   network: moonbaseAlpha 
   

   network: moonbeamDevNode
   

3. 接着，在同一个文件subgraph.yaml中，将dataSources/source/address字段更改为含有0x前缀的合约部署地址

4. 最后，在同一个文件subgraph.template.yaml中，将dataSources/mapping/abis/file字段更改为：

   MoonbeamMoonriverMoonbase AlphaMoonbeam开发节点

   file: ./abis/moonbeam_YourContract.json
   

   file: ./abis/moonriver_YourContract.json
   

   file: ./abis/moonbaseAlpha_YourContract.json
   

   file: ./abis/moonbeamDevNode_YourContract.json
   

   注意事项

   如果您不部署示例合约，此处的文件名将有所不同，但遵循相同的 <网络前缀>_<合约文件名> 格式。

关于如何在Moonbeam上使用The Graph部署合约的更多资讯，请参考The Graph页面。关于如何在Moonbeam上运行The Graph节点的更多资讯，请参考The Graph Node页面。

React组件

现在，您需要在React组件中修改两个文件以添加Moonbeam网络。

1. 首先，修改scaffold-eth/packages/react-app/src/App.jsx，并将initialNetwork常量设置从constants.js导出的对应网络定义成默认网络：

   MoonbeamMoonriverMoonbase AlphaMoonbeam开发节点

   const initialNetwork = NETWORKS.moonbeam;
   

   const initialNetwork = NETWORKS.moonriver;
   

   const initialNetwork = NETWORKS.moonbaseAlpha;
   

   const initialNetwork = NETWORKS.moonbeamDevNode;
   

2. 在同一个文件App.jsx中，将networkOptions设置为您的DApp所支持的网络，例如：

   const networkOptions = [initialNetwork.name, "moonbeam", "moonriver"];
   

部署并启动DApp

1. 所有配置文件修改完毕后，通过输入以下代码启动本地The Graph节点实例：

   yarn run-graph-node
   

   这将通过Docker镜像启动一个本地节点实例，并控制台输出将显示它正在索引其指向的网络区块

   

2. 在终端打开新的标签或窗口。然后，通过运行以下命令编译和部署智能合约：

   yarn deploy
   

   

   如果您要使用The Graph，请将部署的合约地址填入subgraph.yaml。如果不用The Graph，你可以跳到第5步来启动React 服务器

3. 接下来，通过输入以下命令以创建sub-graph：

   yarn graph-create-local
   

   

4. 接下来，部署sub-graph至本地graph节点：

   MoonbeamMoonriverMoonbase AlphaMoonbeam开发节点

   yarn graph-codegen && yarn graph-build --network moonbeam && yarn graph-deploy-local
   

   yarn graph-codegen && yarn graph-build --network moonriver && yarn graph-deploy-local
   

   yarn graph-codegen && yarn graph-build --network moonbaseAlpha && yarn graph-deploy-local
   

   yarn graph-codegen && yarn graph-build --network moonbeamDevNode && yarn graph-deploy-local
   

   系统将提示您为正在部署的sub-graph输入版本名称

   

5. 最后，您可以通过输入以下命令启动React服务器：

   yarn start
   

   这将默认在http://localhost:3000/启动基于React的DApp UI

   

6. 现在，您可以将您的浏览器指向http://localhost:3000/并与React前端交互

   

验证合约

如果您还想要使用Scaffold-ETH来验证已部署的智能合约，并且已经在hardhat.config.js输入对应的Moonscan API密钥，您可以使用以下命令来验证智能合约：

MoonbeamMoonriverMoonbase Alpha

yarn verify --network moonbeam <CONTRACT-ADDRESS>

yarn verify --network moonriver <CONTRACT-ADDRESS>

yarn verify --network moonbaseAlpha <CONTRACT-ADDRESS>

注意事项

如果您正在验证的智能合约具有构造函数方法参数，您还需要将使用的参数附加到上述命令的末尾。

稍等片刻，控制台输出将显示验证结果。如果成功，则会显示Moonscan上已验证合约的 URL。

关于如何在Moonbeam上使用Hardhat Etherscan插件验证智能合约，请参考Etherscan Plugins页面。

---

Last update: October 11, 2022
Created: March 4, 2022