Overview
Wagmi is a modern toolkit for building Ethereum applications with a focus on reactivity, type safety, and modularity. Designed primarily for React, Wagmi exposes a growing collection of hooks that cover everyday blockchain needs—accounts, wallet connection, contract interaction, transaction handling, and signing flows—while integrating tightly with TypeScript and developer tooling. The project is built on top of Viem, a low-level TypeScript interface for Ethereum, and includes optional integrations like TanStack Query for caching and persistence.
Core Features
-
React Hooks for Web3 workflows: Wagmi provides 20+ hooks that address common tasks such as connecting wallets, reading and writing contract data, handling transactions, and resolving ENS. These hooks are composable and idiomatic for modern React development.
-
TypeScript Ready: Infer types directly from smart contract ABIs and EIP-712 Typed Data to get accurate autocompletion, improved safety, and fewer runtime errors. Type-first design helps teams ship reliable frontends faster.
-
Wallet Connectors: Official connectors are available for MetaMask, WalletConnect, Coinbase Wallet, and other standards like EIP-6963. These connectors let developers support multiple wallet options with consistent APIs.
-
Caching, Deduplication, and Persistence: Built-in query caching and deduplication are provided through TanStack Query, enabling efficient network usage, fast UI responses, and offline/persistence strategies for better user experiences.
-
Modular and Extensible Core: Wagmi’s architecture allows using only the parts you need. If you prefer not to use React, Wagmi Core can be adapted for VanillaJS or other frameworks via adapters.
How Wagmi Works
Wagmi abstracts common blockchain client responsibilities into small, focused hooks and utilities. Rather than forcing a monolithic SDK approach, it offers composable pieces that integrate with your app’s state and lifecycle. For data fetching and caching, Wagmi leans on TanStack Query, providing familiar patterns for developers already using that library. Wallet connectors unify connection flows, while the TypeScript integration with ABIs and Viem provides strong typing for contract calls and transaction payloads.
The typical developer flow with Wagmi involves installing the React package, configuring providers (chains and RPC), enabling connectors, and then using hooks such as useAccount, useContractRead, useContractWrite, and useSignTypedData to implement UI flows. The library’s internals handle provider switching, call caching, and transaction lifecycle events, so developers can focus on UX and business logic.
Why Choose Wagmi?
Wagmi is recommended for teams that value developer ergonomics, predictable type safety, and modularity. Its hook-based API aligns well with modern React patterns, making it easy to integrate into existing apps. The TypeScript-first approach reduces mistakes when working with ABIs and signatures, saving time during development and audits. Built-in support for caching and persistence reduces the need to implement custom data-layer logic, while the extensible architecture means you can pick and choose parts to suit your stack.
Ecosystem and Community
Wagmi is maintained openly on GitHub and is supported by integrations like Viem and TanStack Query. It has a growing ecosystem of sponsors and contributors from prominent projects across the crypto space. Documentation includes guides for getting started, TypeScript usage, connectors, and full API references. Whether you’re building prototypes or production-grade dApps, Wagmi offers a pragmatic, well-structured approach to managing Ethereum frontends with modern web tooling.
Getting Started
To begin, follow Wagmi’s quickstart to configure providers and connectors, then use the provided hooks to implement wallet connections, contract calls, and transaction flows. Leverage TypeScript inference for safer contract interactions and plug in TanStack Query for advanced caching and synchronization across your UI.
