wagmi

Wagmi is a collection of modular and composable APIs designed to simplify Ethereum application development. It addresses common challenges such as wallet connectivity, multi-chain support, transaction signing, and state management.

Key value propositions include:

• Developer Experience: Provides strongly typed APIs with automatic type inference and autocomplete, especially when providing an ABI. It uses a documentation and test-driven development approach for predictable APIs.
• Performance: Built by the team behind Viem, Wagmi is optimized for tree-shaking and dead-code elimination to minimize bundle sizes. It leverages TanStack Query for efficient data fetching, including caching, deduplication, and persistence.
• Feature Coverage: Offers 40+ React Hooks for accounts, wallets, contracts, transactions, signing, and ENS. It supports EIP-6963 for multi-injected provider discovery and provides official connectors for most wallets.
• Stability: Uses semver for predictable upgrades. From v2 onwards, new functionality is opt-in with deprecation paths for old features to ensure smooth migrations.

Wagmi is designed to simplify Ethereum application development by abstracting complex tasks like wallet connection, multi-chain support, transaction signing, and state management. It focuses on four key pillars:

• Developer Experience: Provides modular, composable APIs with strong TypeScript integration (autocomplete and type inference) and comprehensive documentation.
• Performance: Built on top of Viem, Wagmi is optimized for tree-shaking and dead-code elimination to minimize bundle sizes. It also leverages TanStack Query for efficient data fetching, including caching, deduplication, and persistence.
• Feature Coverage: Offers 40+ Vue Composables for common tasks (accounts, contracts, ENS, etc.) and supports a wide range of wallets via official connectors and EIP-6963.
• Stability: Uses a test-driven approach with forked Ethereum nodes and follows semantic versioning (semver) to ensure predictable upgrades.

The Wagmi CLI automates the management of Application Binary Interfaces (ABIs) and generates type-safe code for your application. Instead of manually managing ABIs via npm packages, custom scripts, or copy-pasting, the CLI takes ABIs as inputs (from sources like Etherscan, Foundry, or Hardhat) and outputs both the ABIs and generated code.

Key benefits include:

• Automated ABI Fetching: Use plugins like the Etherscan plugin to fetch ABIs across multiple chains and deployments.
• Code Generation: Use the React plugin to generate specialized Wagmi Hooks for your ABIs, significantly reducing boilerplate.
• Watch Mode: The CLI supports a watch mode that automatically detects changes in your smart contracts (via Foundry or Hardhat) and re-runs plugins to update your generated code, shortening the development feedback loop.

// Example of using generated hooks instead of generic Wagmi hooks
import { useReadFroggyFriends, useWriteFroggyFriends } from './generated'

function App() {
  // Using a generated hook reduces boilerplate by removing the need to pass
  // the abi and address manually every time.
  const { data } = useReadFroggyFriends({
    functionName: 'tokenURI',
    args: [123n],
  })

  const { write } = useWriteFroggyFriends()
  const onClick = React.useCallback(() => {
    write({
      functionName: 'mint',
      args: ['foo', 123n],
    })
  }, [write])
}

When choosing a React library for Ethereum development (managing wallet connections, utility hooks, etc.), Wagmi is compared against web3-react and useDApp.

Wagmi Key Features

• Framework Support: React and Vanilla JS.
• EIP-6963: Fully compatible with EIP-6963 (multi-injected provider support).
• TypeScript: High-fidelity type inference from ABIs and EIP-712 Typed Data.
• Data Management: Uses TanStack Query for caching, request deduplication, and persistence.
• Automation: Auto-refreshes data on wallet, block, and network changes.
• Capabilities: Includes 20+ hooks for ENS, contracts, transactions, and signing, plus built-in support for Multicall.

Comparison Summary