Web3 Boilerplate[![Stargazers](https://img.shields.io/github/stars/Pedrojok01/Web3-Boilerplate)](https://github.com/Pedrojok01/Web3-Boilerplate/stargazers) [![Forks](https://img.shields.io/github/forks/Pedrojok01/Web3-Boilerplate)](https://github.com/Pedrojok01/Web3-Boilerplate/issues) [![Issues](https://img.shields.io/github/issues/Pedrojok01/Web3-Boilerplate)](https://github.com/Pedrojok01/Web3-Boilerplate/issues) [![MIT License](https://img.shields.io/github/license/Pedrojok01/Web3-Boilerplate)](https://github.com/Pedrojok01/Web3-Boilerplate/blob/main/License) [![LinkedIn](https://img.shields.io/badge/-LinkedIn-black)](https://www.linkedin.com/in/pierre-e/) [![Netlify Status](https://api.netlify.com/api/v1/badges/3c3b76de-6191-4ab2-b2c6-a5d824f6fe2f/deploy-status)](https://app.netlify.com/sites/web3-boilerplate/deploys)
- 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
- This is a work in progress…
- 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: https://web3-boilerplate.netlify.app/
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 https://github.com/Pedrojok01/Web3-Boilerplate.git .
Install all package dependancies by running:
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:
- [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