In this post we will introduce some battlefield tested react libraries in order to connect users to MetaMask or any wallet from the frontend.
A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps
- Supports many different wallet connectors
- Basic hooks for managing account
- Used by Uniswap and some other popular projects
wagmi is a collection of React Hooks containing everything you need to start working with Ethereum. wagmi makes it easy to "Connect Wallet," display ENS and balance information, sign messages, interact with contracts, and much more — all with caching, request deduplication, and persistence.
- 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.
- Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, and Injected
- Caching, request deduplication, and persistence powered
- Auto-refresh data on wallet, block, and network changes
- Multicall support
- Test suite running against forked Ethereum network
- TypeScript ready (infer types from ABIs and EIP-712 Typed Data)
- Extensive documentation and examples
- Used by ENS, Foundation, SushiSwap, and more
Features:
- React hooks - Uses React hooks as your primary building ingredient
- Auto refresh - Refreshes on a new block, wallet change or network change
- Multicall - Combines multiple blockchain calls into a single multicall
Best practices:
- Modern stack - Employs ethers.js, multicall & waffle
- Extendability - Extends easily with custom hooks
- Testability - Simple integration tests for UI and blockchain
Web3Modal is a versatile ui library built on top of WalletConnect and wagmi. It is designed to make complex tasks like connecting wallets, performing transactions and managing accounts easy. Built on top of latest web standards, Web3Modal can be used in any front-end environment. Check out web3modal.com for a live demo and in-depth feature list.