pedrojok01/web3-boilerplate

Clean Web3 Dapp starter template using the latest stack out there: Typescript ^5, react ^18 (including react-scrits ^5), and @web3-react/core v8. Enjoy!

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:

• Web3 Wallet (Metamask / Wallet connect / Coinbase)
• Chain selector
• Wallet balance
• Sign Messages & Transfer Native
• Dark mode support
• 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)

web3-boilerplate's Issues

Support not only infura and alchemy, but regular RPC endpoint

Loking in ifura and alchemy is not always preferrable. A lot of web3 developers using own RPC endpoints (just as an example, you can get one at QuickNode and don't need any keys to use that endpoint).

Do you have any plans to support non-vendor locking RPC endpoint?