Web3-Boilerplate
Web3-Boilerplate copied to clipboard
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!
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) byEthereum Sepolia
&Arbitrum Goerli
byArbitrum 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
- 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
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)