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
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:
In frontend/
you'll find a simple app that allows the user to do two things:
It's a separate npm project and it was created using create-react-app
, so this means that it uses webpack and babel.
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 boilerplatesrc/contracts
has the ABI and address of the contract and these are automatically generated by the deployment scriptFirst 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
, and click the button. 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.