If you want to get started with your dApp quickly or see what this whole project looks like with a frontend, you can use our boilerplate repo.
• What's included
- The Solidity contract we used in this tutorial
- Tests for the entire functionality of the contract
- A minimal React front-end to interact with the contract using ethers.js
• Solidity contract & tests
In the root of the repo you'll find the Hardhat project we put together through this tutorial with the
Token contract. To refresh your memory on what it implements:
- There is a fixed total supply of tokens that can't be changed.
- The entire supply is assigned to the address that deploys the contract.
- Anyone can receive tokens.
- Anyone with at least one token can transfer tokens.
- The token is non-divisible. You can transfer 1, 2, 3 or 37 tokens but not 2.5.
frontend you'll find a simple app that allows the user to do two things:
- Check the connected wallet's balance
- Send tokens to an address
It's a separate npm project and it was created using
create-react-app, so this means that it uses webpack and babel.
• Frontend file architecture
src/contains all the code
src/componentscontains the react components
Dapp.jsis the only file with business logic. This is where you'd replace the code with your own if you were to use this as boilerplate
- Every other component just renders HTML, no logic.
src/contractshas the ABI and address of the contract and these are automatically generated by the deployment script
First clone the repository, and then prepare for the contract deployment:
cd hardhat-boilerplate npm install npx hardhat node
Here we just install the npm project's dependencies, and by running
npx hardhat node we spin up an instance of Hardhat Network that you can connect to using MetaMask. In a different terminal in the same directory, run:
npx hardhat --network localhost run scripts/deploy.js
This will deploy the contract to Hardhat Network. After this completes, start the react web app:
cd frontend npm install npm run start
Then open http://127.0.0.1:3000/ in your browser and you should see this:
Set your network in MetaMask to
What's happening here is that the frontend code to show the current wallet's balance is detecting that the balance is
0, so you wouldn't be able to try the transfer functionality. By running:
npx hardhat --network localhost faucet <your address>
You'll run a custom Hardhat task we included that uses the balance of the deploying account to send 100 MHT and 1 ETH to your address. This will allow you to send tokens to another address.
You can check out the code for the task in
/tasks/faucet.js, which is required from
$ npx hardhat --network localhost faucet 0x0987a41e73e69f60c5071ce3c8f7e730f9a60f90 Transferred 1 ETH and 100 tokens to 0x0987a41e73e69f60c5071ce3c8f7e730f9a60f90
In the terminal where you ran
npx hardhat node you should also see:
eth_sendTransaction Contract call: Token#transfer Transaction: 0x460526d98b86f7886cd0f218d6618c96d27de7c745462ff8141973253e89b7d4 From: 0xc783df8a850f42e7f7e57013759c285caa701eb6 To: 0x7c2c195cd6d34b8f845992d380aadb2730bb9c6f Value: 0 ETH Gas used: 37098 of 185490 Block #8: 0x6b6cd29029b31f30158bfbd12faf2c4ac4263068fd12b6130f5655e70d1bc257 console.log: Transferring from 0xc783df8a850f42e7f7e57013759c285caa701eb6 to 0x0987a41e73e69f60c5071ce3c8f7e730f9a60f90 100 tokens
Try playing around with it and reading the code. It's full of comments explaining what's going on and clearly indicating what code is Ethereum boilerplate and what's actually dApp logic. This should make the repository easy to reuse for your project.