#Hardhat Boilerplate Project

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 app

In 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/components contains the react components
    • Dapp.js is 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/contracts has the ABI and address of the contract and these are automatically generated by the deployment script

# How to use it

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 your wallet. In a different terminal in the same directory, run:

npx hardhat run scripts/deploy.js --network localhost

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:

Click the button to connect your wallet.

After connecting your wallet, you should see this:

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. The transaction might take a few seconds before updating the balance visible in the frontend.

You can check out the code for the task in /tasks/faucet.js, which is required from hardhat.config.js.

$ 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

Showing the console.log output from the transfer() function in our contract, and this is what the web app will look like after you run the faucet task:

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.