August 14, 2023

Clean Web3 Dapp starter template using Typescript and react

Web3 Boilerplate

[![Stargazers](]( [![Forks](]( [![Issues](]( [![MIT License](]( [![LinkedIn](]( [![Netlify Status](](




  • Upgrade all packages dependencies;
  • Add support for Wallet-Connect v2;
  • Clean code & folders structure;
  • Improve code readability.
  • Add dark mode support
  • Add support for: Optimism, Arbitrum, zkSync & Fantom networks


  1. This is a work in progress…
  2. No Typescript expert and no React expert either, so any contribution/improvement pull-request is welcomed!


Simple and minimalist Web3 boilerplate to boost your Dapp development. Don't waste time setting up CRA, Typescript, react-script v5 polyfill, and connecting metamask and other wallets any longer. Instead, get this web3-boilerplate and start coding right away with the latest stack available out there!

Try it yourself:

Built With

  • React
  • typescript
  • AntDesign
  • web3react
  • prettier
  • ESLint


Make sure you have the following ready:

  • node.js installed (developped on LTS v18)
  • typescript installed (developped on v5.1.6)
  • yarn installed
  • MetaMask (or any web3 compatible wallet) installed in your browser

Once your config is ready, create a new repo, open your favorite code editor, and clone the repo with the following cmd:

git clone .

Install all package dependancies by running:

yarn install

IMPORTANT: Double check your package.json to make sure you've installed the exact same version for all @web3-react packages. Since the version 8+ is still in beta, it may not be automatically installed.

Add your API keys in the .env file:

Create a .env file at the root of your project and copy the content of the .env.example file into it. Then, fill in the following variables:

REACT_APP_INFURA_KEY = "your API key here";
REACT_APP_WALLETCONNECT_PROJECT_ID = "Project id needed for WalletConnect v2";

start the web3-boilerplate:

yarn start


  • [x] Web3 Wallet (Metamask / Wallet connect / Coinbase)
  • [x] Chain selector
  • [x] Wallet balance
  • [x] Sign Messages & Transfer Native
  • [x] Dark mode support
  • [ ] Hook to query user's Token Balances
  • [ ] Hook to query user's NFTs


⭐️ … and don't forget to leave a star if you like it! ⭐️

(back to top)