Web3 Boilerplate

Update:

2024-01:

• Upgrade all dependencies (still no switch to ethers v6, seems more and more unlikely that @web3-react will switch to ethers v6 anytime soon);
• Fix Antd breaking changes;
• Replaced Ethereum goerli (soon to be deprecated) by Ethereum Sepolia & Arbitrum Goerli by Arbitrum Sepolia;
• Add VerifySignature contracts on Optimism Goerli, Arbitrum Sepolia, Fantom Opera, Fantom Testnet

2023-10:

• Upgrade all package dependencies (except ethers);
• Improve useToken hook to fetch any ERC20 token balance/allowance/decimals/symbol;
• Fix minor responsive issues;

2023-07:

• Upgrade all package 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

Table of Contents

• Update:
• Table of Contents
• Disclaimer
• Description
• Built With
• Installation
• Make sure you have the following ready:
• Once your config is ready, create a new repo, open your favorite code editor, and clone the repo with the following cmd:
• Install all package dependencies by running:
• Add your API keys in the .env file:
• start the web3-boilerplate:
• Features:
• ⭐️ ... and don't forget to leave a star if you like it! ⭐️

Disclaimer

1. Work in progress...
2. No Typescript expert and no React expert either, so any contribution/improvement pull request is welcomed!
3. For a more "recent and high-level" web3 boilerplate built on Next.js, Wagmi, Viem, and ChakraUI, check out Next-Web3-Boilerplate

Description

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: https://web3-boilerplate.netlify.app/

Built With

Installation

Make sure you have the following ready:

• node.js installed (developed on LTS v18)
• typescript installed (developed on v5.2.2)
• 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 https://github.com/Pedrojok01/Web3-Boilerplate.git .

Install all package dependencies 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

Features:

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

Enjoy!!!

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

(back to top)