wagmi

# Wagmi for Celo Wagmi is a React library for building Ethereum applications with hooks. It uses viem under the hood. Source: https://wagmi.sh ## When to Use - Building React dApps on Celo - Implementing wallet connection flows - Managing blockchain state in React components - Using React hooks for contract interactions ## Installation ```bash npm install wagmi viem@2.x @tanstack/react-query ``` ## Configuration ### Basic Setup ```typescript // config.ts import { http, createConfig } from "wagmi"; import { celo, celoSepolia } from "wagmi/chains"; export const config = createConfig({ chains: [celo, celoSepolia], transports: { [celo.id]: http(), [celoSepolia.id]: http(), }, }); ``` ### With Connectors ```typescript import { http, createConfig } from "wagmi"; import { celo, celoSepolia } from "wagmi/chains"; import { injected, walletConnect, metaMask } from "wagmi/connectors"; const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!; export const config = createConfig({ chains: [celo, celoSepolia], connectors: [ injected(), walletConnect({ projectId }), metaMask(), ], transports: { [celo.id]: http(), [celoSepolia.id]: http(), }, }); ``` Source: https://wagmi.sh/react/guides/connect-wallet ## Provider Setup ```tsx // app.tsx import { WagmiProvider } from "wagmi"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { config } from "./config"; const queryClient = new QueryClient(); function App({ children }: { children: React.ReactNode }) { return ( <WagmiProvider config={config}> <QueryClientProvider client={queryClient}> {children} </QueryClientProvider> </WagmiProvider> ); } ``` ## Wallet Connection ### Display Wallet Options ```tsx import { useConnect, useConnectors } from "wagmi"; function WalletOptions() { const { connect } = useConnect(); const connectors = useConnectors(); return ( <div> {connectors.map((connector) => ( <button key={connector.uid} onClick={() => connect({ connector })} > {connector.name} </button> ))} </div> ); } ``` ### Display Connected Account ```tsx import { useAccount, useDisconnect } from "wagmi"; function Account() { const { address, isConnected, chain } = useAccount(); const { disconnect } = useDisconnect(); if (!isConnected) return <WalletOptions />; return ( <div> <p>Connected: {address}</p> <p>Chain: {chain?.name}</p> <button onClick={() => disconnect()}>Disconnect</button> </div> ); } ``` ## Reading Contract Data ```tsx import { useReadContract } from "wagmi"; const ERC20_ABI = [ { name: "balanceOf", type: "function", stateMutability: "view", inputs: [{ name: "account", type: "address" }], outputs: [{ type: "uint256" }], }, ] as const; function TokenBalance({ address }: { address: `0x${string}` }) { const { data: balance, isLoading } = useReadContract({ address: "0x765de816845861e75a25fca122bb6898b8b1282a", // USDm abi: ERC20_ABI, functionName: "balanceOf", args: [address], }); if (isLoading) return <div>Loading...</div>; return <div>Balance: {balance?.toString()}</div>; } ``` ## Writing to Contracts ```tsx import { useWriteContract, useWaitForTransactionReceipt } from "wagmi"; import { parseEther } from "viem"; function TransferToken() { const { writeContract, data: hash, isPending } = useWriteContract(); const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash, }); async function handleTransfer() { writeContract({ address: "0x765de816845861e75a25fca122bb6898b8b1282a", abi: ERC20_ABI, functionName: "transfer", args: ["0x...", parseEther("10")], }); } return ( <div> <button onClick={handleTransfer} disabled={isPending}> {isPending ? "Confirming..." : "Transfer"} </button> {isConfirming && <div>Waiting for confirmation...</div>} {isSuccess && <div>Transaction confirmed!</div>} </div> ); } ``` ## Sending Transactions ```tsx import { useSendTransaction, useWaitForTransactionReceipt } from "wagmi"; import { parseEther } from "viem"; function SendCelo() { const { sendTransaction, data: hash, isPending } = useSendTransaction(); const { isSuccess } = useWaitForTransactionReceipt({ hash }); return ( <button onClick={() => sendTransaction({ to: "0x...", value: parseEther("0.1"), }) } disabled={isPending} > Send 0.1 CELO </button> ); } ``` ## Chain Switching ```tsx import { useSwitchChain } from "wagmi"; import { celo, celoSepolia } from "wagmi/chains"; function NetworkSwitcher() { const { switchChain, isPending } = useSwitchChain(); return ( <div> <button onClick={() => switchChain({ chainId: celo.id })} disabled={isPending} > Switch to Celo Mainnet </button> <button onClick={() => switchChain({ chainId: celoSepolia.id })} disabled={isPending} > Switch to Celo Sepolia </button> </div> ); } ``` ## Common Hooks | Hook | Purpose | |------|---------| | useAccount | Get connected account info | | useConnect | Connect wallet | | useDisconnect | Disconnect wallet | | useReadContract | Read contract state | | useWriteContract | Write to contract | | useSendTransaction | Send native currency | | useWaitForTransactionReceipt | Wait for tx confirmation | | useSwitchChain | Switch networks | | useBalance | Get account balance | | useChainId | Get current chain ID | ## Celo Chain IDs | Network | Chain ID | |---------|----------| | Celo Mainnet | 42220 | | Celo Sepolia | 11142220 | ## Dependencies ```json { "dependencies": { "wagmi": "^2.0.0", "viem": "^2.0.0", "@tanstack/react-query": "^5.0.0" } } ``` ## Additional Resources - [hooks-reference.md](references/hooks-reference.md) - Complete hooks reference