Web3 Boilerplate
[](https://github.com/Pedrojok01/Web3-Boilerplate/stargazers) [](https://github.com/Pedrojok01/Web3-Boilerplate/issues) [](https://github.com/Pedrojok01/Web3-Boilerplate/issues) [](https://github.com/Pedrojok01/Web3-Boilerplate/blob/main/License) [](https://www.linkedin.com/in/pierre-e/) [](https://app.netlify.com/sites/web3-boilerplate/deploys)
Update:
2023-07:
- 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
Disclaimer
- This is a work in progress…
- No Typescript expert and no React expert either, so any contribution/improvement pull-request is welcomed!
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 (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:
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
- [ ] Hook to query user's Token Balances
- [ ] Hook to query user's NFTs