Skip to content

使用Scaffold-ETH在Moonbeam上部署DApp

Scaffold-ETH Banner

概览

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下载或自行运行以下代码完成安装

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节点:

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

安装Scaffold-ETH

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

在命令行输入:

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

下载完成后,运行:

yarn install

Scaffold-ETH installation output

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

修改配置

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

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

Hardhat组件

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

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

    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开发节点,您可以使用以下端点:

    ethereum: "moonbaseAlpha:https://rpc.api.moonbase.moonbeam.network"
    
    ethereum: "moonbeamDevNode:http://127.0.0.1:9933"
    
  2. 接下来,您需要修改subgraph/subgraph.yaml。将正在部署的合约中dataSources/network字段更改为先前在docker-compose.yaml中定义的对应网络名称:

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

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

    file: ./abis/moonbeam_YourContract.json
    
    file: ./abis/moonriver_YourContract.json
    
    file: ./abis/moonbaseAlpha_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导出的对应网络定义成默认网络:

    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镜像启动一个本地节点实例,并控制台输出将显示它正在索引其指向的网络区块

    The Graph node output

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

    yarn deploy
    

    Contract deployment output

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

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

    yarn graph-create-local
    

    Create sub-graph output

  4. 接下来,部署sub-graph至本地graph节点:

    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输入版本名称

    Sub-graph deployment output

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

    yarn start
    

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

    React server output

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

    React UI

验证合约

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

yarn verify --network moonbeam <CONTRACT-ADDRESS>
yarn verify --network moonriver <CONTRACT-ADDRESS>
yarn verify --network moonbaseAlpha <CONTRACT-ADDRESS>

注意事项

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

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

Contract verify output

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