Workshop Plan for Tug of War Game on Monad Blockchain

Monad is a layer 1 blockchain with 10,000 transactions per second, 1-second block times, single-slot finality, and low-hardware requirements.

And this workshop will introduce how to build a simple dapp on the Monad chain. We use Scaffold-ETH2-Open source toolkit which has built-in wagmi and viem libraries and Foundry, to build dapp.

Requirements

Before you begin, you need to install the following tools:

• Node (>= v18.17)
• Yarn (v1 or v2+)
• Git
• Scaffold-ETH2 toolkit: Type folder name you want, and choose Foundry

  npx create-eth@0.0.55
  

Start

Enter the file directory you just created, and there are two important folders under the packages folder, one is Foundery which manages our solidity contracts including compile, deploy, and test.

And we need to open 3 separate terminals.

1. Run a local network in the first terminal:

yarn chain

This command starts a local Ethereum network using Foundry. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in packages/foundry/foundry.toml.

2. On a second terminal, deploy the test contract:

yarn deploy

This command deploys a test smart contract to the local network. The contract is located in packages/foundry/contracts and can be modified to suit your needs. The yarn deploy command uses the deploy script located in packages/foundry/script to deploy the contract to the network. You can also customize the deploy script.

3. On a third terminal, start your NextJS app:

yarn start

Visit your app on: http://localhost:3000. You can interact with your smart contract using the Debug Contracts page. You can tweak the app config in packages/nextjs/scaffold.config.ts.

Foundry-Local Test

1. Edit solidity contract: We use "Tug of War Game" demo. Copy the content of file https://github.com/tokenlin/monad-demo/blob/main/packages/foundry/contracts/YourContract.sol, and repleat the content of local file packages/foundry/contracts/YourContract.sol.
2. Modify the test script: Copy the content of file https://github.com/tokenlin/monad-demo/blob/main/packages/foundry/test/YourContract.t.sol, and repleat the content of local file packages/foundry/test/YourContract.t.sol.
3. Use yarn test command on the second terminal to test the solidity contract edited by us.
4. Use yarn deploy command again on the second terminal to deploy the contract to the local network.

Foundry-Deploy to Chain

1. Set .env

   The packages/foundry/.env file is automatically generated by the toolkit.

   Copy the file content https://github.com/tokenlin/monad-demo/blob/main/packages/foundry/.env.example, and repleat the content of local file packages/foundry/.env.

   We need to add private key prefixed with of "0x" to DEPLOYER_PRIVATE_KEY, and RPC to MONAD_RPC.

   NOTE: ALCHEMY_API_KEY built-in is the public key for users. Sometimes it is restricted due to too many calls. It is recommended to change it to your own key.

2. Set monad Chain

   Add monad chain in line 10 of packages/foundry/foundry.toml:

   ...
   [rpc_endpoints]
   default_network = "http://127.0.0.1:8545"
   localhost = "http://127.0.0.1:8545"
   monad = "${MONAD_RPC}"  # add monad chain
   mainnet = "https://eth-mainnet.alchemyapi.io/v2/${ALCHEMY_API_KEY}"
   ...
   

3. Deploy to Chain

• sepolia: Make sure the address of your privatekey has enough ETH to pay gas.

  yarn deploy --network sepolia
  

• monad: Make sure the address of your privatekey has enough MON to pay gas.

  yarn deploy --network monad
  

4. Verify Contract:

• sepolia:

  yarn verify --network sepolia
  

• monad: Foundry contract verification does not support Monad Devnet, but will be enabled on Testnet by entering the command:

  yarn verify --network monad
  

NextJS

1. Modify UI

• Page:

  Copy the file content https://github.com/tokenlin/monad-demo/blob/main/packages/nextjs/app/page.tsx, and repleat the content of local file packages/nextjs/app/page.tsx.

• Styles:

  Copy the file content https://github.com/tokenlin/monad-demo/blob/main/packages/nextjs/styles/globals.css, and repleat the content of local file packages/nextjs/styles/globals.css.

  Then, you can view the complete UI on your http://localhost:3000. Currently it is base on the contract deployed on local testnet.

  In order to test on the local test network, firstly need to get local native token to pay gas, just click the right-top buttom to grab funds from faucet.

2. Connect to Chain-sepolia

   Since sepolia is built into toolkit, there is no any modification.

3. Connect to Chain-monad

• Set .env

  Copy the packages/nextjs/.env.example and paste it in same folder, then modify it to .env.

  Add NEXT_PUBLIC_RPCURL_MONAD key in .env, just copy the file content https://github.com/tokenlin/monad-demo/blob/main/packages/nextjs/.env.example, and repleat the content of local file packages/nextjs/.env.

  Add RPC to NEXT_PUBLIC_RPCURL_MONAD key in packages/nextjs/.env.

• Add networks.monad.ts

  Create new file networks.monad.ts under the folder packages/nextjs/utils.

  Copy the file content https://github.com/tokenlin/monad-demo/blob/main/packages/nextjs/utils/networks.monad.ts, and paste it into the new file networks.monad.ts.

• Modify Setting

  Currently, only local testnet can be connected. In order to connect the block chains of sepolia or monad, we need to modify the setting in the file packages/nextjs/scaffold.config.ts.

  Import monad network, comment out line 5, and add a new line below to add sepolia and monad network in the file packages/nextjs/scaffold.config.ts. This will switch to the sepolia and monad network.

  import * as chains from "viem/chains";
  import { monad } from "./utils/networks.monad";  // import monad network
  
  ...
  const scaffoldConfig = {
  // The networks on which your DApp is live
  // targetNetworks: [chains.foundry],  // comment out
  targetNetworks: [monad, chains.sepolia],  // add new networks
  
  

4. UI Update Frequency

   In order to refresh the UI quickly, we need to adjust the pollingInterval in the file packages/nextjs/scaffold.config.ts, for example, set to 2000

   ...
   // The interval at which your front-end polls the RPC servers for new data
   // it has no effect if you only target the local network (default is 4000)
   pollingInterval: 2000,  // change to 2000
   ...
   

Metamask Wallet

1. sepolia: just turn on the Show test networks buttom, then will show the sepolia testnet.

2. monad: Open Setting on Metamask Wallet, choose Networks, and click Add a network, enter the following infos:

   Network name: Monad
   New RPC URL: https://xxx(enter the monad RPC)
   Chain ID: 41454
   Currency symbol: MON
   Block explorer URL(Optional): https://xxx(enter the monad explorer URL)
   

Enjoy Demo

Now that we have everything set up, we can happily interact with on-chain contracts in our local UI using the monad testnet.