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

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

• 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

• Features:

Disclaimer

• Work in progress...
• No Typescript expert and no React expert either, so any contribution/improvement pull request is welcomed!
• 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

• [![React][react.js]][react-url]
• [![typescript]][typescript-url]
• [![AntDesign]][antdesign-url]
• [![web3react]][web3react-url]
• [![prettier]][prettier-url]
• [![ESLint]][eslint-url]

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:

REACTAPPINFURA_KEY = "your API key here";
...
REACTAPPWALLETCONNECTPROJECTID = "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

(back to top)

[react.js]: https://img.shields.io/badge/React_v18.2-20232A?style=for-the-badge&logo=react&logoColor=61DAFB [react-url]: https://reactjs.org/ [typescript]: https://img.shields.io/badge/typescript_v5.3.3-375BD2?style=for-the-badge&logo=typescript&logoColor=61DAFB [typescript-url]: https://www.typescriptlang.org/ [web3react]: https://img.shields.io/badge/@web3react_v8.2-006600?style=for-the-badge&logo=web3-react&logoColor=4FC08D [web3react-url]: https://github.com/Uniswap/web3react#readme [antdesign]: https://img.shields.io/badge/AntDesign_v5.12.5-FF0000?style=for-the-badge&logo=AntDesign&logoColor=61DAFB [antdesign-url]: https://ant.design/ [prettier]: https://img.shields.io/badge/Prettier-360D3A?style=for-the-badge&logo=Prettier&logoColor=61DAFB [prettier-url]: https://prettier.io/ [eslint]: https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=ESLint&logoColor=61DAFB [eslint-url]: https://eslint.org/