Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crapthings/hardhat-dapp-starter
a dapp starter kit with modern workflow.
https://github.com/crapthings/hardhat-dapp-starter
blockchain boilerplate-template dapp ethers hardhat react smart-contracts solidity starter-kit tailwindcss zustand
Last synced: 3 months ago
JSON representation
a dapp starter kit with modern workflow.
- Host: GitHub
- URL: https://github.com/crapthings/hardhat-dapp-starter
- Owner: crapthings
- Created: 2021-11-21T11:17:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-04-12T15:01:12.000Z (about 2 years ago)
- Last Synced: 2024-01-21T03:18:57.060Z (6 months ago)
- Topics: blockchain, boilerplate-template, dapp, ethers, hardhat, react, smart-contracts, solidity, starter-kit, tailwindcss, zustand
- Language: JavaScript
- Homepage:
- Size: 636 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Lists
- my-awesome-stars - crapthings/hardhat-dapp-starter - a dapp starter kit with modern workflow. (JavaScript)
README
# Hardhat Dapp Starter
## Getting Started
```bash
git clone https://github.com/crapthings/hardhat-dapp-starter
cd hardhat-dapp-starter
npm i
npm run dev
```
## Requirements
> You should have MetaMask Installed [MetaMask](https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn)
[MetaMask](https://metamask.io/) A crypto wallet & gateway to blockchain apps.
## FAQ
#### connect to your contract address
> command to run your dapp environment
```bash
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
```bash
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
```json
{
"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](https://hardhat.org/) Ethereum development environment for professionals.
[Snowpack](https://www.snowpack.dev/) Snowpack is a lightning-fast frontend build tool, designed for the modern web.
[Ethers](https://docs.ethers.io/) The ethers.js library aims to be a complete and compact library for interacting with the Ethereum Blockchain and its ecosystem.
[React](https://reactjs.org/) A JavaScript library for building user interfaces.
[Zustand](https://github.com/pmndrs/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](https://reactrouter.com/) React client-side routing.
[React Hook Form](https://www.react-hook-form.com/) Performant, flexible and extensible forms with easy-to-use validation.
[React Icons](https://react-icons.github.io/react-icons/) Include popular icons in your React projects easily with react-icons.
[Tailwind CSS](https://tailwindcss.com/) 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](https://daisyui.com/) Tailwind CSS Components.
[Lodash](https://lodash.com/) A modern JavaScript utility library delivering modularity, performance & extras.
[Day.js](https://day.js.org/) Fast 2kB alternative to Moment.js with the same modern API.
## TODOS
- [x] Load contract address automatically
- [ ] Add IPFS support
- [ ] Add backend for off-chain data