The boilerplate is powered by Nextjs/typechain which fully supports typescript. Check the result here

1. clone the repo:

git clone https://github.com/happyeric77/evm-dapp-boilerplate-ts

2. install npm depandencies and generate types:

yarn install

yarn generate-types // Generate a new folder `contractTypes` which contains all the contracts types definition. The types are generated from /utils/contracts/*.json (compiled by truffle)

3. Run and listen on localhost port 3000

yarn dev

Use useWeb3 hook to easily access global web3 methods:

const { web3Data, loginWithInjectedWeb3, loginWithWalletConnect, logout, switchNetwork } = useWeb3();

Consume the npm evm-web3-hook react hook yarn add evm-web3-hooks or npm install evm-web3-hooks

1. Add approve-erc20 page to demo contract interaction
2. Introduce typechain (yarn generate-types) to enable types for web3.eth.Contract (see example in ./pages/approve-erc20.tsx)
3. Add useLoading hook
4. Clean up and small optimization

1. To reduce complexity, truffle section are removed. The contract section can be referred to This repo

2. Remove unnecessary components

3. Add hooks: useWeb3 & useNotify

4. Move all style sheet to ./styles