Hardhat Hackathon 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 hackathon boilerplate repo.

https://github.com/nomiclabs/hardhat-hackathon-boilerplate

What's included

• The Solidity contract we used in this tutorial
• A test suite using ethers.js and Waffle
• A minimal 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 to get the contracts deployed:

cd hardhat-hackathon-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 run:

cd hardhat-hackathon-boilerplate/frontend/
npm install
npm run start

To start the react web app. Open http://localhost:3000/ in your browser and you should see this:

Set your network in MetaMask to localhost:8545. You might also need to configure MetaMask to work well with Hardhat. To do that, go to Settings -> Networks -> Localhost 8545 and change the Chain ID input to 31337.

Now click the button in the web app. You should then 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 MBT 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 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.