Hardhat Parcel Dapp Starter

Getting Started

terminal 1

git clone https://github.com/crapthings/hardhat-parcel-dapp-starter
cd hardhat-parcel-dapp-starter
npm i
npm run dev

terminal 2

npm run contract:compile
npm run contract:deploy

Requirements

You should have MetaMask Installed MetaMask

MetaMask A crypto wallet & gateway to blockchain apps.

FAQ

connect to your contract address

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

generating localhost ssl certificate

npx devcert-cli generate localhost

nonce too high

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."}}}'`}

CLI

{
  "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\""
}

Docs

Hardhat Ethereum development environment for professionals.

Parcel Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.

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.

TODOS

Load contract address automatically
Add IPFS support
Add backend for off-chain data

crapthings / hardhat-parcel-dapp-starter