cyotee/wagmi-react-overview

Wagmi-React Overview

React hooks for Ethereum.

Install

pnpm add wagmi [email protected] @tanstack/react-query

Quick Start

// config.ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

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

// App.tsx
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from './config'

const queryClient = new QueryClient()

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

Skills

• Providers: wagmi-react-providers - WagmiProvider setup
• Connect: wagmi-react-connect - Wallet connection hooks
• Read: wagmi-react-read - useReadContract
• Write: wagmi-react-write - useWriteContract
• Hooks: wagmi-react-hooks - All hooks overview

TypeScript Registration

import { useBlockNumber } from 'wagmi'

declare module 'wagmi' {
  interface Register {
    config: typeof config
  }
}

// Now chainId is typed
useBlockNumber({ chainId: mainnet.id }) // ✅
useBlockNumber({ chainId: 123 })        // ❌ type error