Web3 Boilerplate

Update:

2023-07:

Upgrade all packages dependencies;
Add support for Wallet-Connect v2;
Clean code & folders structure;
Improve code readability.

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:

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

quarkmotta/Web3-Boilerplate