Web3 Boilerplate

Overview:

The Web3 Boilerplate is a simple and minimalist template for developing decentralized applications (Dapps) using React and TypeScript. It eliminates the need to set up a complex development environment by providing a ready-to-use stack that includes CRA (Create React App), TypeScript, AntDesign, web3-react, Prettier, and ESLint. With this boilerplate, developers can start coding right away and leverage the latest tools and technologies available in the Web3 ecosystem.

Features:

• Web3 Wallet integration: Support for popular wallets such as MetaMask, WalletConnect, and Coinbase.
• Chain selector: Allows users to select the blockchain network they want to interact with.
• Wallet balance: Displays the balance of the connected wallet.
• Sign Messages & Transfer Native: Enables users to sign messages and transfer native tokens.
• Dark mode support: Provides a dark mode option for the user interface.
• Hook to query user’s Token Balances: A custom hook to retrieve the balance, allowance, decimals, and symbol of ERC20 tokens.
• Hook to query user’s NFTs: (Not implemented yet)

Installation:

To install the Web3 Boilerplate, make sure you have the following prerequisites:

• Node.js installed (developed on LTS v18)
• TypeScript installed (developed on v5.2.2)
• Yarn installed
• MetaMask (or any other web3 compatible wallet) installed in your browser

Follow these steps to install the boilerplate:

1. Clone the repository:

   git clone <repository-url>
   

2. Install all package dependencies:

   yarn
   

3. Configure API keys:

   • Create a .env file at the root of your project.
   • Copy the contents of the .env.example file into the .env file.
   • Fill in the necessary variables with your API keys.

4. Start the web3-boilerplate:

   yarn start
   

Summary:

The Web3 Boilerplate is a useful tool for developers looking to quickly start building Dapps using React and TypeScript. It provides a pre-configured development environment with all the necessary tools and libraries. The boilerplate includes features like Web3 Wallet integration, chain selector, wallet balance display, message signing, token balance retrieval, and dark mode support. Although it is a work in progress and lacks some features like querying NFTs, it offers a solid foundation for Dapp development. The boilerplate is built with React, TypeScript, AntDesign, web3-react, Prettier, and ESLint, and can be easily installed and customized for different project requirements.