wagmi

wagmi logo

React Hooks for Ethereum

wagmi-versionwagmi-licensewagmi-downloadswagmi-starswagmi-best-of-jswagmi-sponsors

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.

npm i wagmi viem

Overview

import { WagmiConfig, createConfig, mainnet } from 'wagmi'
import { createPublicClient, http } from 'viem'
 
const config = createConfig({
  autoConnect: true,
  publicClient: createPublicClient({
    chain: mainnet,
    transport: http()
  }),
})
 
function App() {
  return (
    <WagmiConfig config={config}>
      <Profile />
    </WagmiConfig>
  )
}
import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
 
function Profile() {
  const { address, isConnected } = useAccount()
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  })
  const { disconnect } = useDisconnect()
 
  if (isConnected)
    return (
      <div>
        Connected to {address}
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    )
  return <button onClick={() => connect()}>Connect Wallet</button>
}

In this example, we create a wagmi config and pass it to the WagmiConfig React Context. The config is set up to use viem's Public Client and automatically connect to previously connected wallets.

Next, we use the useConnect hook to connect an injected wallet (e.g. MetaMask) to the app. Finally, we show the connected account's address with useAccount and allow them to disconnect with useDisconnect.

We've only scratched the surface for what you can do with wagmi!

Features

wagmi supports all these features out-of-the-box:

  • 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.
  • Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, Injected, and more
  • Caching, request deduplication, multicall, batching, and persistence
  • Auto-refresh data on wallet, block, and network changes
  • TypeScript ready (infer types from ABIs and EIP-712 Typed Data)
  • Command-line interface for managing ABIs and code generation
  • Test suite running against forked Ethereum network

...and a lot more.

Community

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

Support

Help support future development and make wagmi a sustainable open-source project. Thank you 🙏

Sponsors

Paradigm
FamilyContextWalletConnectLooksRarePartyDAODynamicSushiStripeBitKeepPrivySprucerollup.idPancakeSwapCeloRainbowPimlicoZoraLatticeSupazkSync