git clone https://github.com/crapthings/hardhat-dapp-starter
cd hardhat-dapp-starter
npm i
npm run dev
You should have MetaMask Installed MetaMask
MetaMask A crypto wallet & gateway to blockchain apps.
command to run your dapp environment
npm run dev
npm run contract:compile
npm run contract:deploy
find your contract addresses with dapp-ui/src/contracts.json after deploy
npx devcert-cli generate localhost
if you see this, go to metamask "settings > advanced > reset account"
MetaMask - RPC Error: [ethjs-query] while formatting outputs from RPC '{"value":{"code":-32603,"data":{"code":-32000,"message":"Nonce too high. Expected nonce to be 1 but got 3. Note that transactions can't be queued when automining."}}}' {code: -32603, message: `[ethjs-query] while formatting outputs from RPC '{…ransactions can't be queued when automining."}}}'`}
{
"contract:dev": "npx hardhat node",
"contract:compile": "npx hardhat compile",
"contract:deploy": "npx hardhat run dapp-contract/scripts/deploy.js --network localhost",
"contract:test": "npx hardhat test",
"ui:dev": "snowpack dev",
"ui:build": "snowpack build",
"dev": "concurrently \"npm run contract:dev\" \"npm run ui:dev\""
}
Hardhat Ethereum development environment for professionals.
Snowpack Snowpack is a lightning-fast frontend build tool, designed for the modern web.
Ethers The ethers.js library aims to be a complete and compact library for interacting with the Ethereum Blockchain and its ecosystem.
React A JavaScript library for building user interfaces.
Zustand A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn't boilerplatey or opinionated.
React Router React client-side routing.
React Hook Form Performant, flexible and extensible forms with easy-to-use validation.
React Icons Include popular icons in your React projects easily with react-icons.
Tailwind CSS A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Daisy UI Tailwind CSS Components.
Lodash A modern JavaScript utility library delivering modularity, performance & extras.
Day.js Fast 2kB alternative to Moment.js with the same modern API.
- Load contract address automatically
- Add IPFS support
- Add backend for off-chain data