Skip to content

Latest commit

 

History

History
152 lines (109 loc) · 6.26 KB

README.md

File metadata and controls

152 lines (109 loc) · 6.26 KB
Raw

Web3 Boilerplate

Stargazers Forks Issues MIT License LinkedIn Netlify Status



Preview

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

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

  • React
  • typescript
  • AntDesign
  • web3react
  • prettier
  • ESLint

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)