Web3 Boilerplate

screenshot of Web3 Boilerplate
react
ant-design

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!

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)
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

ant-design
Ant Design

Ant Design is a React UI library that provides a set of pre-designed components and design resources for building high-quality, responsive web applications.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.