Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fecony/wave-web3-dapp
Learning web3 & Solidity with buildspace | Full app
https://github.com/fecony/wave-web3-dapp
buildspace dapp learning-by-doing preline react solidity tailwind vite wagmi web3
Last synced: about 1 month ago
JSON representation
Learning web3 & Solidity with buildspace | Full app
- Host: GitHub
- URL: https://github.com/fecony/wave-web3-dapp
- Owner: fecony
- License: mit
- Created: 2022-07-27T08:08:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-12-16T18:45:40.000Z (about 2 years ago)
- Last Synced: 2024-11-05T15:35:37.455Z (3 months ago)
- Topics: buildspace, dapp, learning-by-doing, preline, react, solidity, tailwind, vite, wagmi, web3
- Language: JavaScript
- Homepage:
- Size: 1.26 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# buildspace Wave Portal 👋
Simple Solidity app built with [buildspace](https://buildspace.so/p/build-solidity-web3-app/) (Remastered)
[Base Solidity Frontend Repository](https://github.com/Fecony/web3-ui)
[Base Solidity Contract Repository](https://github.com/Fecony/web3-solidity)
##### Used
- [Alchemy](https://www.alchemy.com/)
- [Solidity](https://soliditylang.org/)
- [Hardhat](https://hardhat.org/)
- Rinkeby testnet
- Frontend
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [React Hot Toast](https://react-hot-toast.com/)
- [wagmi](https://wagmi.sh/)
- [truncate-eth-address](https://github.com/gpxl-dev/truncate-eth-address)
- [Tailwindcss](https://tailwindcss.com/)
- [Formik](https://formik.org/)
- [Preline](https://preline.co/)
##### Changes from default app
- Confetti
- Event listening
- Wave Author badge
- Wave count (total, for address)
- Used wagmi hooks
- Switch to Rinkeby test network
- Toasts! 🍞
##### Fix
- Should have used [Turporepo](https://turborepo.org/)
- Use [Rainbowkit](https://www.rainbowkit.com/)
- Clean up React components
- Write Tests
# Advanced Sample Hardhat Project
This project demonstrates an advanced Hardhat use case, integrating other tools commonly used alongside Hardhat in the ecosystem.
The project comes with a sample contract, a test for that contract, a sample script that deploys that contract, and an example of a task implementation, which simply lists the available accounts. It also comes with a variety of other tools, preconfigured to work with the project code.
Try running some of the following tasks:
```shell
npx hardhat accounts
npx hardhat compile
npx hardhat clean
npx hardhat test
npx hardhat node
npx hardhat help
REPORT_GAS=true npx hardhat test
npx hardhat coverage
npx hardhat run scripts/deploy.ts
TS_NODE_FILES=true npx ts-node scripts/deploy.ts
npx eslint '**/*.{js,ts}'
npx eslint '**/*.{js,ts}' --fix
npx prettier '**/*.{json,sol,md}' --check
npx prettier '**/*.{json,sol,md}' --write
npx solhint 'contracts/**/*.sol'
npx solhint 'contracts/**/*.sol' --fix
```
# Etherscan verification
To try out Etherscan verification, you first need to deploy a contract to an Ethereum network that's supported by Etherscan, such as Ropsten.
In this project, copy the .env.example file to a file named .env, and then edit it to fill in the details. Enter your Etherscan API key, your Ropsten node URL (eg from Alchemy), and the private key of the account which will send the deployment transaction. With a valid .env file in place, first deploy your contract:
```shell
hardhat run --network ropsten scripts/deploy.ts
```
Then, copy the deployment address and paste it in to replace `DEPLOYED_CONTRACT_ADDRESS` in this command:
```shell
npx hardhat verify --network ropsten DEPLOYED_CONTRACT_ADDRESS "Hello, Hardhat!"
```
# Performance optimizations
For faster runs of your tests and scripts, consider skipping ts-node's type checking by setting the environment variable `TS_NODE_TRANSPILE_ONLY` to `1` in hardhat's environment. For more details see [the documentation](https://hardhat.org/guides/typescript.html#performance-optimizations).