Wagmi: React Hooks for Ethereum

Wagmi is a collection of React hooks for Ethereum that makes building Web3 applications easier.

Installation

npm install wagmi viem @tanstack/react-query

Configuration

import { createConfig, http } from 'wagmi';
import { mainnet, polygon, optimism } from 'wagmi/chains';
import { injected, walletConnect } from 'wagmi/connectors';

export const config = createConfig({
  chains: [mainnet, polygon, optimism],
  connectors: [
    injected(),
    walletConnect({ projectId: 'YOUR_PROJECT_ID' }),
  ],
  transports: {
    [mainnet.id]: http(),
    [polygon.id]: http(),
  },
});

Provider Setup

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}>
        <YourApp />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Wallet Connection

import { useConnect, useDisconnect, useAccount } from 'wagmi';

function ConnectButton() {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();

  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }

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

Reading Contracts

import { useReadContract } from 'wagmi';
import { abi } from './abi';

function Balance({ address }: { address: `0x${string}` }) {
  const { data, isLoading } = useReadContract({
    address: '0x...',
    abi,
    functionName: 'balanceOf',
    args: [address],
  });

  return <div>Balance: {data?.toString()}</div>;
}

Writing Contracts

import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi';

function MintButton() {
  const { data: hash, writeContract } = useWriteContract();
  const { isLoading, isSuccess } = useWaitForTransactionReceipt({
    hash,
  });

  const mint = () => {
    writeContract({
      address: '0x...',
      abi,
      functionName: 'mint',
      args: [1n],
    });
  };

  return (
    <div>
      <button onClick={mint} disabled={isLoading}>
        Mint
      </button>
      {isSuccess && <p>Transaction confirmed!</p>}
    </div>
  );
}

Conclusion

Wagmi provides a clean, type-safe way to interact with Ethereum from React applications.