Connect to Wallet
In this post we will introduce some battlefield tested react libraries in order to connect users to MetaMask or any wallet from the frontend.
web3-react
A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps
Features
Supports many different wallet connectors
Basic hooks for managing account
Used by Uniswap and some other popular projects
Reference
wagmi
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.
Features
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
Reference
useDapp
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
Reference
Web3Modal
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.
Reference
Last updated