Wagmi React Hooks

What is Wagmi?

Wagmi is a collection of React hooks for interacting with Ethereum. It simplifies wallet connection, contract reading/writing, and transaction handling.

Core Features

• Wallet Connection: Built-in support for MetaMask, WalletConnect, Coinbase Wallet
• Contract Reading: useReadContract hook for reading smart contracts
• Contract Writing: useWriteContract for transactions
• Transaction Management: useWaitForTransactionReceipt
• Multichain Support: Works with any EVM chain

Installation

npm install wagmi viem @tanstack/react-query
        

Basic Setup

import { WagmiProvider, createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <YourApp />
      </QueryClientProvider>
    </WagmiProvider>
  )
}
        

Using Hooks

import { useConnect, useAccount, useReadContract, useWriteContract } from 'wagmi'
import { useMemo } from 'react'
import { erc20Abi } from 'viem'

function WalletConnect() {
  const { connectors, connect } = useConnect()
  const { address, isConnected } = useAccount()

  if (isConnected) {
    return <div>Connected: {address}</div>
  }

  return (
    <div>
      {connectors.map(connector => (
        <button key={connector.uid} onClick={() => connect({ connector })}>
          Connect {connector.name}
        </button>
      ))}
    </div>
  )
}

function ReadToken() {
  const { data } = useReadContract({
    address: '0x...',
    abi: erc20Abi,
    functionName: 'balanceOf',
    args: ['0x...'],
  })
  return <div>Balance: {data?.toString()}</div>
}