Skip to content

wagmi

React Hooks for Ethereum

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.

Get Started · Examples · GitHub Repository

Overview

import { Provider, createClient, useAccount, useConnect } from 'wagmi'

const client = createClient()

function App() {
  return (
    <Provider client={client}>
      <ConnectWallet />
    </Provider>
  )
}

function Profile() {
  const { data } = useAccount()
  const { connectors, connect } = useConnect()

  if (data?.address) return <div>Connected to {data.address}</div>
  return <button onClick={() => connect(connectors[0])}>Connect Wallet</button>
}

In this example, we create a wagmi Client (using the default configuration) and pass it to the React Context Provider. Then, we use the useConnect hook to connect a wallet to the app. Finally, we show the connected account's address using useAccount.

The default client is initialized with MetaMask, but connectors for WalletConnect and Coinbase Wallet are also just an import away. useAccount can also automatically fetch the ENS name and avatar for the connected account. We've only scratched the surface for what you can do with wagmi!

Features

wagmi is built on ethers.js and supports all these amazing features out-of-the-box:

  • 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.
  • Built-in wallet connectors for MetaMask, WalletConnect, and Coinbase Wallet
  • Caching, request deduplication, and persistence powered by react-query
  • Auto-refresh data on wallet, block, and network changes
  • TypeScript ready, solid test suite and documentation
  • MIT License

And a lot more.

Community & Support

Check out the following places for more wagmi-related content:

Or support future development:

wagmi frens