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:
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.
-
The main file you need to modify is
scaffold-eth/packages/hardhat/hardhat.config.js
. First, set the constantdefaultNetwork
to the network you are deploying the smart contract to.defaultNetwork = "moonbeam";
defaultNetwork = "moonriver";
defaultNetwork = "moonbaseAlpha";
defaultNetwork = "moonbeamDevNode";
-
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 -
(Optional) Under the
function mnemonic()
, comment out a console warning for when the network is not set tolocalhost
if (defaultNetwork !== "localhost") { //console.log( // "☢️ WARNING: No mnemonic file created for a deploy account. Try `yarn run generate` and then `yarn run account`." //); }
-
Create a file named
mnemonic.txt
underscaffold-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.
-
First, modify the file
scaffold-eth/packages/services/graph-node/docker-compose.yaml
, underservers/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:
ethereum: "moonbaseAlpha:https://rpc.api.moonbase.moonbeam.network"
ethereum: "moonbeamDevNode:http://127.0.0.1:9944"
-
Next, you need to modify
subgraph/subgraph.yaml
. Change thedataSources/network
field of the contract being deployed to the corresponding network name defined earlier indocker-compose.yaml
:network: moonbeam
network: moonriver
network: moonbaseAlpha
network: moonbeamDevNode
-
Next, in the same file,
subgraph.yaml
, change thedataSources/source/address
field to the contract's0x
prefixed deployed address -
And lastly, in the same file,
subgraph.template.yaml
, change thedataSources/mapping/abis/file
field to: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.
-
First, modify
scaffold-eth/packages/react-app/src/App.jsx
and set theinitialNetwork
constant to the corresponding network definition exported fromconstants.js
to be the default network:const initialNetwork = NETWORKS.moonbeam;
const initialNetwork = NETWORKS.moonriver;
const initialNetwork = NETWORKS.moonbaseAlpha;
const initialNetwork = NETWORKS.moonbeamDevNode;
-
Within the same file,
App.jsx
, setnetworkOptions
to whichever networks your DApp will support, for example:const networkOptions = [initialNetwork.name, "moonbeam", "moonriver"];
Deploy and Launch the DApp¶
-
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
-
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 -
Next, create a local sub-graph by typing:
yarn graph-create-local
-
Next, deploy the sub-graph to the local graph node by typing:
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
-
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 -
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.
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.
| Created: May 22, 2023