Using Scaffold-ETH to Deploy a DApp on Moonbeam

Introduction

Scaffold-ETH is a collection of commonly used Ethereum development tools to quickly deploy a Solidity smart contract, and launch a DApp with a React frontend and a deployed subgraph. There are premade templates for common DApp types such as NFT’s, ERC-20 tokens, multi-sig wallets, simple DEXs, and so on.

Scaffold-ETH consists of several sub-components, including Hardhat, The Graph and a React UI. All of these components can be used on Moonbeam networks with some slight modifications. This guide will walk through the steps to deploy and run the default sample contract and DApp that Scaffold-ETH comes with on a Moonbeam network.

Checking Prerequisites

To run The Graph component of Scaffold-ETH, you also need to have the following installed on your system to run a local The Graph node from Docker:

• Docker
• Docker Compose
• JQ

To test out the examples in this guide on Moonbeam or Moonriver, you will need to have your own endpoint and API key, which you can get from one of the supported Endpoint Providers.

Installing Scaffold-ETH

First, download Scaffold-ETH from its GitHub repository.

From the command line, enter:

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

After the download completes, run:

yarn install

Once the dependencies have been installed without any errors in the console output as in the above screenshot, you can proceed to modifying the different components of Scaffold-ETH.

Modify Configurations

You need to make modifications to the configurations of the three major components that make up Scaffold-ETH.

To test out the examples in this guide on Moonbeam or Moonriver, you will need to have your own endpoint and API key, which you can get from one of the supported Endpoint Providers.

Hardhat Component

You can begin with making modifications to the Hardhat component under the /packages/hardhat folder.

1. The main file you need to modify is scaffold-eth/packages/hardhat/hardhat.config.js. First, set the constant defaultNetwork to the network you are deploying the smart contract to.

   MoonbeamMoonriverMoonbase AlphaMoonbeam Dev Node

   defaultNetwork = "moonbeam";
   

   defaultNetwork = "moonriver";
   

   defaultNetwork = "moonbaseAlpha";
   

   defaultNetwork = "moonbeamDevNode";
   

2. Within the same file, under the module.exports/etherscan/apiKey section, add the API key for Moonscan, so you can verify the deployed smart contracts. Check this Etherscan Plugins section for how to generate a Moonscan API key

3. (Optional) Under the function mnemonic(), comment out a console warning for when the network is not set to 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. Create a file named mnemonic.txt under scaffold-eth/packages/hardhat/, then copy and paste the mnemonic of the contract deployer account into this file.

For more information on using Hardhat with Moonbeam, please check the dedicated Hardhat page for more details.

The Graph Component

In The Graph component of Scaffold-ETH, you need to modify two files to point the local The Graph node instance to the corresponding Moonbeam RPC endpoint.

1. First, modify the file scaffold-eth/packages/services/graph-node/docker-compose.yaml, under servers/graph-node/environment/ethereum to change the RPC endpoint for The Graph node to index.

   For Moonbeam or Moonriver, you can use your own RPC API endpoint and the corresponding network name prefix. For Moonbase Alpha or a Moonbeam development node, you can use the following:

   Moonbase AlphaMoonbeam Dev Node

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

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

2. Next, you need to modify subgraph/subgraph.yaml. Change the dataSources/network field of the contract being deployed to the corresponding network name defined earlier in docker-compose.yaml:

   MoonbeamMoonriverMoonbase AlphaMoonbeam Dev Node

   network: moonbeam 
   

   network: moonriver
   

   network: moonbaseAlpha 
   

   network: moonbeamDevNode 
   

3. Next, in the same file, subgraph.yaml, change the dataSources/source/address field to the contract's 0x prefixed deployed address

4. And lastly, in the same file, subgraph.template.yaml, change the dataSources/mapping/abis/file field to:

   MoonbeamMoonriverMoonbase AlphaMoonbeam Dev Node

   file: ./abis/moonbeam_YourContract.json
   

   file: ./abis/moonriver_YourContract.json
   

   file: ./abis/moonbaseAlpha_YourContract.json
   

   file: ./abis/moonbeamDevNode_YourContract.json
   

   Note

   This file name here will be different if you are not deploying the example contract, but follows the same <Network Name>_<Contract File Name> format.

For more information on using The Graph with Moonbeam, please check the dedicated The Graph page for more details; or the dedicated The Graph Node page for more information on running a Graph node for Moonbeam.

React Component

Next, you need to modify two files in the React component to add Moonbeam networks.

1. First, modify scaffold-eth/packages/react-app/src/App.jsx and set the initialNetwork constant to the corresponding network definition exported from constants.js to be the default network:

   MoonbeamMoonriverMoonbase AlphaMoonbeam Dev Node

   const initialNetwork = NETWORKS.moonbeam;
   

   const initialNetwork = NETWORKS.moonriver;
   

   const initialNetwork = NETWORKS.moonbaseAlpha;
   

   const initialNetwork = NETWORKS.moonbeamDevNode;
   

2. Within the same file, App.jsx, set networkOptions to whichever networks your DApp will support, for example:

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

Deploy and Launch the DApp

1. After all the modifications to the configuration files are done, launch the local The Graph node instance by typing:

   yarn run-graph-node
   

   This will launch a local node instance through a Docker image, and the console output should show that it's indexing blocks of the network that it's being pointed to

   

2. Open a new tab or window in the terminal. Next, compile and deploy the smart contract by running the command:

   yarn deploy
   

   

   If you are going to use The Graph, be sure to edit subgraph.yaml with the deployed contract's address from the output. If not, you can skip to step 5 to start the React server

3. Next, create a local sub-graph by typing:

   yarn graph-create-local
   

   

4. Next, deploy the sub-graph to the local graph node by typing:

   MoonbeamMoonriverMoonbase AlphaMoonbeam Dev Node

   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
   

   You will be prompted to enter a version name for the sub-graph being deployed

   

5. Finally, you can launch the React server by typing:

   yarn start
   

   This will launch the React based DApp UI at http://localhost:3000/ by default

   

6. You can then point your browser to http://localhost:3000/ and interact with the React frontend

   

Verifying Contracts

If you would also like to use Scaffold-ETH to verify the smart contract deployed, and have entered the corresponding Moonscan API key into hardhat.config.js, you can use the following command to verify the smart contract.

MoonbeamMoonriverMoonbase Alpha

yarn verify --network moonbeam <CONTRACT-ADDRESS>

yarn verify --network moonriver <CONTRACT-ADDRESS>

yarn verify --network moonbaseAlpha <CONTRACT-ADDRESS>

Note

If the smart contract you are verifying has constructor method parameters, you will also need to append the parameters used to the end of the above command.

After a short wait, the console output will display the verification result and if successful, the URL to the verified contract on Moonscan.

For more information about verifying smart contracts on Moonbeam using Hardhat Etherscan plugin, please refer to the Etherscan Plugins page.

The information presented herein has been provided by third parties and is made available solely for general information purposes. Moonbeam does not endorse any project listed and described on the Moonbeam Doc Website (https://docs.moonbeam.network/). Moonbeam Foundation does not warrant the accuracy, completeness or usefulness of this information. Any reliance you place on such information is strictly at your own risk. Moonbeam Foundation disclaims all liability and responsibility arising from any reliance placed on this information by you or by anyone who may be informed of any of its contents. All statements and/or opinions expressed in these materials are solely the responsibility of the person or entity providing those materials and do not necessarily represent the opinion of Moonbeam Foundation. The information should not be construed as professional or financial advice of any kind. Advice from a suitably qualified professional should always be sought in relation to any particular matter or circumstance. The information herein may link to or integrate with other websites operated or content provided by third parties, and such other websites may link to this website. Moonbeam Foundation has no control over any such other websites or their content and will have no liability arising out of or related to such websites or their content. The existence of any such link does not constitute an endorsement of such websites, the content of the websites, or the operators of the websites. These links are being provided to you only as a convenience and you release and hold Moonbeam Foundation harmless from any and all liability arising from your use of this information or the information provided by any third-party website or service.

Last update: January 10, 2023
| Created: May 22, 2023