- Autogenerate fully typed React hooks integrated into your Hardhat smart contract watch pipeline.
- No need to manually write your own react hooks on top of new Contract(ABI, ...) instances (which aren't function typed anyways)
Suppose you change something in your smart contract. In that case, hardhat will recompile the ABIs hardhat-react (using Typechain) will scan those and generate React context hooks for you! Plus provider, signer, and currentAdd.
This saves you a lot of time 🕑
- Typechain
- Ethers.js
- React.js
- Hardhat
- Autogeneration plugin
- Get started by forking 👉 this repo. Tutorial in the Readme 👈
Here is the code for the hardhat react plugin. Lerna will symlink this package to @symfoni/hardhat-demo so we can use it there.
Test project. It's the boilerplate "SimpleStorage code" using hardhat-react for the frontend.
- Install lerna globally
npm i -g lerna
- Run
yarn
- Run
yarn run bootstrap
// This will install all packages and build
You need three processes running for the full development environment
yarn run watch
watches changes in hardhat-react plugin. Lerna will then symlink this package to be used in hardhat-demo.yarn run node
runs up a blockchain node, generate typechain interfaces, compile and deploy smart-contracts then watch for changes in smart contracts and deploy them.yarn run frontend
runs a dev-server for a create-react-application from packages/hardhat-demo/frontend that is served on http://localhost:3000/ with hot-reloading. This will also reload when you change smart contracts
yarn run pubish
builds all packages and published them to npm with version bump.
- Use Metamask or some other wallet provider (https://metamask.io/).
- Use Mnemonic "shrug antique orange tragic direct drop abstract ring carry price anchor train".
- Set the Network to custom rpc at "http://127.0.0.1:8545/".
The demo should be working!