Skip to main content

Build a basic dApp with Scaffold-Eth-Monad

Scaffold-Eth-Monad is a fork of Scaffold-ETH 2 with Monad configuration.

Scaffold-Eth-Monad is designed to make it easier for developers to create and deploy smart contracts on Monad and build user interfaces that interact with those contracts.

Requirements​

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

  • Node (>= v18.18)
  • Yarn (v1 or v2+)
  • Git

Get Funds on Testnet​

You will need funds on Monad Testnet in order to deploy smart contracts, you can get funds from the Monad Faucet.

Initial Setup​

  1. Clone the Scaffold-Eth-Monad repo
git clone https://github.com/monad-developers/scaffold-eth-monad.git
  1. Open the project directory and install dependencies
cd scaffold-eth-monad && yarn install
  1. Setup .env file for Hardhat:

Make a copy of .env.example in packages/hardhat folder, name it .env and enter the respective values

  • DEPLOYER_PRIVATE_KEY: Private key of the wallet that is going to deploy the smart contracts.
DEPLOYER_PRIVATE_KEY=
  1. Deploying smart contracts on Monad:

Once the .env file is setup, you can now run the below command in your terminal.

yarn deploy --network monadTestnet

This command deploys YourContract.sol to the Monad testnet network. The contract is located in packages/hardhat/contracts and can be modified to suit your needs.

The yarn deploy command uses the deploy script located in packages/hardhat/deploy to deploy the contract to the network. You can also customize the deploy script.

  1. Setup .env file for Next.js app (optional):

Make a copy of .env.example in packages/nextjs folder, name it .env and enter the respective values

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
  1. On a second terminal, start your NextJS app:
yarn start

Visit your app on: http://localhost:3000. You should see a dApp like below.

scaffold-eth-monad-homescreen

You can interact with your smart contract using the Debug Contracts page. You can tweak the app config in packages/nextjs/scaffold.config.ts.

What's next​

  • Edit your smart contract YourContract.sol in packages/hardhat/contracts.
  • Edit your frontend homepage at packages/nextjs/app/page.tsx. For guidance on routing and configuring pages/layouts checkout the Next.js documentation.
  • Edit your deployment scripts in packages/hardhat/deploy.
  • Edit your smart contract test in: packages/hardhat/test. To run test use yarn hardhat:test