Skip to content

使用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。

查看先决条件

要运行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:9944"

  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

    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导出的对应网络定义成默认网络：

    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 INSERT_CONTRACT_ADDRESS

yarn verify --network moonriver INSERT_CONTRACT_ADDRESS

yarn verify --network moonbaseAlpha INSERT_CONTRACT_ADDRESS

注意事项

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

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

Contract verify output

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

本网站的所有信息由第三方提供，仅供参考之用。Moonbeam文档网站(https://docs.moonbeam.network/)上列出和描述的任何项目与Moonbeam立场无关。Moonbeam Foundation不保证网站信息的准确性、完整性或真实性。如使用或依赖本网站信息，需自行承担相关风险，Moonbeam Foundation不承担任何责任和义务。这些材料的所有陈述和/或意见由提供方个人或实体负责，与Moonbeam Foundation立场无关，概不构成任何投资建议。对于任何特定事项或情况，应寻求专业权威人士的建议。此处的信息可能会包含或链接至第三方提供的信息与/或第三方服务（包括任何第三方网站等）。这类链接网站不受Moonbeam Foundation控制。Moonbeam Foundation对此类链接网站的内容（包括此类链接网站上包含的任何信息或资料）概不负责也不认可。这些链接内容仅为方便访客而提供，Moonbeam Foundation对因您使用此信息或任何第三方网站或服务提供的信息而产生的所有责任概不负责。
Last update: September 22, 2023
| Created: March 4, 2022