pavloaliabiev / web3-typescript-fullstack

web3-typescript-fullstack

Batch Transaction Fullstack ( Localhost:8545 )

This project demonstrates single transaction and batch transaction use case. It comes with a transaction and batch transaction solidity contract, a reactjs front-end to interact with transaction contract, a backend server to subscribe event and continue listen using ether.js websocket api

Try running some of the following tasks:

Note :

Please run client and backend server first to launch the app

yarn start : front-end

node backend/server.js : back-end

npx hardhat node : solidity
npx hardhat run --network localhost contract-scripts/deploy.js : solidity

Native Token to sent : ETH

.env

REACT_APP_INFURA_KEY=""
REACT_APP_ENV="MAINNET"

Init Package Setup

yarn

Typechain

npx typechain --target ethers-v5 --out-dir typechain {YOUR_PATH}/abi.json

Smart Contract ( Solidity, Hardhat )

npx hardhat accounts
npx hardhat compile
npx hardhat clean
npx hardhat test
npx hardhat node
node contract-scripts/deploy.js
npx hardhat help
npx hardhat run --network localhost contract-scripts/deploy.js

Backend (Proxy with front end)

api 1: lastEvent API
api 2: allEvent API
api 3: blockEvent API

node backend/server.js

After event listener init, will receive any transaction that related to the events, including batch transaction and single transaction event.

Subscribe event listener screenshot ( terminal )

Frontend

yarn dev ( vite )

Skillsets

Front-end : React.js, Typescript, Redux, Redux-thunk, vite, rollup, ether.js, web3.js, scss, 
Back-end : Express, Node.js
Smart-contract: Solidity, ethers, hardhat

Todo

1. Custom token transcation
2. Solidity test coverage
3. Typescript version of Express

Reference

1. Web3React: https://hackmd.io/Ykpp1MWLTjixIZG2ZJEShA