willhennessy/hardhat-react-typechain-template

A fork of the hardhat-react-boilerplate that converts all JavaScript files to TypeScript and adds TypeChain support!

Hardhat React TypeChain Template

This repository is a fork of the amazing hardhat-hackathon-boilerplate by Nomic Labs. Their boilerplate is a sample project that anyone can use as the starting point for an Ethereum project. It's also a great fit for learning the basics of smart contract development.

This fork converts the scripts from Javascript to Typescript and adds TypeChain support

This project is intended to be used with the Hardhat Beginners Tutorial, but you should be able to follow it by yourself by reading the README and exploring its contracts, tests, scripts and frontend directories.

Quick start

The first things you need to do are cloning this repository and installing its dependencies:

git clone https://github.com/willhennessy/hardhat-react-typechain-template.git
cd hardhat-react-typechain-template
npm install

Once installed, let's run Hardhat's testing network:

npx hardhat node

Then, on a new terminal, go to the repository's root folder and run this to deploy your contract:

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

Finally, we can run the frontend with:

cd frontend
npm install
npm start

Note: There's an issue in ganache-core that can make the npm install step fail.

If you see npm ERR! code ENOLOCAL, try running npm ci instead of npm install.

Open http://localhost:3000/ to see your Dapp. You will need to have Metamask installed and listening to localhost 8545.

User Guide

You can find detailed instructions on using this repository and many tips in its documentation.

• Project description (Token.sol)
• Setting up the environment
• Testing with Hardhat, Mocha and Waffle
• Setting up Metamask
• Hardhat's full documentation

For a complete introduction to Hardhat, refer to this guide.

What’s Included?

Your environment will have everything you need to build a Dapp powered by Hardhat and React.

• Hardhat: An Ethereum development task runner and testing network.
• Mocha: A JavaScript test runner.
• Chai: A JavaScript assertion library.
• ethers.js: A JavaScript library for interacting with Ethereum.
• Waffle: To have Ethereum-specific Chai assertions/mathers.
• A sample frontend/Dapp: A Dapp which uses Create React App.

Troubleshooting

• Invalid nonce errors: if you are seeing this error on the npx hardhat node console, try resetting your Metamask account. This will reset the account's transaction history and also the nonce. Open Metamask, click on your account followed by Settings > Advanced > Reset Account.

Feedback, help and news

We'd love to have your feedback on this tutorial. Feel free to reach us through this repository or our Discord server.

Also you can follow us on Twitter.

Happy buidling!