jellydn / react-dapp

Dapp Example with ERC20 Token and Simple Greeter Contract. Built with Hardhat + EthersJs + React + TypeScript.

Welcome to react-dapp 👋

Dapp example with react (vitejs)

🏠 Homepage

✨ Demo

Screenshot

Install

bun install

Built with

• New-Web-App cli https://github.com/jellydn/new-web-app
• Hardhat with TypeChain integration https://github.com/ethereum-ts/TypeChain/tree/master/packages/hardhat

Develop

Step 1: Deploy smart contract on local node

Open 1st terminal, then run below command

npx hardhat node
# or
bun run local-node

For example, below is my result.

npx hardhat node
Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/

Accounts
========
Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

Next, compile and deploy to local node

# Compile smart contract and generate types for typescript
npx hardhat compile
# Deploy localhost
npx hardhat run scripts/deploy.js --network localhost
# Or
bun run compile-node

You will get the deploy address from CLI. For example:

npx hardhat run scripts/deploy.js --network localhost
Generating typings for: 0 artifacts in dir: src/types for target: ethers-v5
Successfully generated 3 typings!
Successfully generated 3 typings for external artifacts!
Greeter deployed to: 0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0
Token deployed to: 0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9

Step 2: Run react app

Create .env from .env.example from root directory. Remember to fill the value for deployed addresses.

# .env
VITE_GREETER_ADDRESS=
VITE_TOKEN_ADDRESS=

# Fill below information if you want to deploy to Mainnet/Testnet
ROPSTEN_PROVIDER_URL=
RINKEBY_PROVIDER_URL=
MNEMONIC=

# Verify smart contract on EtherScan
ETHERSCAN_API=

Then run below command

bun run dev

Deploy to Ropsten Testnet

• Sign up and earn $100 in credit on alchemy. More detail here.

• Send some ETH to your wallet https://faucet.dimensions.network/

# Compile smart contract and generate types for typescript
npx hardhat compile
#
npx hardhat run scripts/deploy.js --network ropsten

• Verify contract

npx hardhat verify --network ropsten VITE_GREETER_ADDRESS 'Hello, Hardhat!'

You might have something similar

npx hardhat verify --network ropsten 0x0608Cc0b2970729f4577Eae89403cAE3049C1525  'Hello, Hardhat!'
Nothing to compile
Generating typings for: 0 artifacts in dir: src/types for target: ethers-v5
Successfully generated 3 typings!
Successfully generated 3 typings for external artifacts!
Compiling 1 file with 0.8.4
Successfully submitted source code for contract
contracts/Greeter.sol:Greeter at 0x0608Cc0b2970729f4577Eae89403cAE3049C1525
for verification on Etherscan. Waiting for verification result...

Successfully verified contract Greeter on Etherscan.
https://ropsten.etherscan.io/address/0x0608Cc0b2970729f4577Eae89403cAE3049C1525#code

npx hardhat verify --network ropsten 0x2Bce4076C8EE3facddC3325FfA4314B854d9447b 1000000 'ERC20 Demo Token' 18 'EDT'
Nothing to compile
Generating typings for: 0 artifacts in dir: src/types for target: ethers-v5
Successfully generated 3 typings!
Successfully generated 3 typings for external artifacts!
Compiling 1 file with 0.8.4
Successfully submitted source code for contract
contracts/Token.sol:StandardToken at 0x2Bce4076C8EE3facddC3325FfA4314B854d9447b
for verification on Etherscan. Waiting for verification result...

Successfully verified contract StandardToken on Etherscan.
https://ropsten.etherscan.io/address/0x2Bce4076C8EE3facddC3325FfA4314B854d9447b#code

Author

👤 Huynh Duc Dung

• Website: https://productsway.com/
• Twitter: @jellydn
• Github: @jellydn

Stargazers 🌟

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator

react-dapp's Issues

Fetch Greeting : Toast UI issue

By clicking the Fetch Greeting Button , Error Message in Toast Getting break out of Toast Container and onClose of Toast not working by Clicking (x) icon

Check the Attachment below!

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@types/react, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, react, react-dom)
• chore(deps): update dependency eslint to v9
• chore(deps): lock file maintenance
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• fix(deps): update dependency ethers to v6

Detected dependencies

bun

package.json

• ethers 5.7.2
• react 18.3.0
• react-dom 18.3.0
• react-hot-toast 2.4.1
• @nomiclabs/hardhat-ethers 2.2.3
• @nomiclabs/hardhat-etherscan 3.1.8
• @nomiclabs/hardhat-waffle 2.0.6
• @trivago/prettier-plugin-sort-imports 4.3.0
• @typechain/ethers-v5 11.1.2
• @typechain/hardhat 9.1.0
• @types/chai 4.3.14
• @types/mocha 10.0.6
• @types/node 20.12.7
• @types/react 18.3.0
• @types/react-dom 18.3.0
• @typescript-eslint/eslint-plugin 7.7.1
• @typescript-eslint/parser 7.7.1
• @vitejs/plugin-react-refresh 1.3.6
• chai 5.1.0
• dotenv 16.4.5
• eslint 8.57.0
• eslint-config-productsway 1.3.2
• ethereum-waffle 4.0.10
• hardhat 2.22.3
• husky 9.0.11
• lint-staged 15.2.2
• prettier 3.2.5
• prettier-plugin-solidity 1.3.1
• solhint 4.5.4
• solhint-plugin-prettier 0.1.0
• ts-node 10.9.2
• typechain 8.3.2
• typescript 5.4.5
• vite 5.2.10
• vite-plugin-windicss 1.9.3
• windicss 3.5.6

nvm

.nvmrc

---

• Check this box to trigger a request for Renovate to run again on this repository