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

npm install wagmi viem@2.x @tanstack/react-query

Configuration

Basic Setup

// 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

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

// 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 (
    
      
        {children}
      
    
  );
}

Wallet Connection

Display Wallet Options

import { useConnect, useConnectors } from "wagmi";

function WalletOptions() {
  const { connect } = useConnect();
  const connectors = useConnectors();

  return (
    
      {connectors.map((connector) => (
         connect({ connector })}
        >
          {connector.name}
        
      ))}
    
  );
}

Display Connected Account

import { useAccount, useDisconnect } from "wagmi";

function Account() {
  const { address, isConnected, chain } = useAccount();
  const { disconnect } = useDisconnect();

  if (!isConnected) return ;

  return (
    
      Connected: {address}
      Chain: {chain?.name}
       disconnect()}>Disconnect
    
  );
}

Reading Contract Data

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 Loading...;

  return Balance: {balance?.toString()};
}

Writing to Contracts

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 (
    
      
        {isPending ? "Confirming..." : "Transfer"}
      
      {isConfirming && Waiting for confirmation...}
      {isSuccess && Transaction confirmed!}
    
  );
}

Sending Transactions

import { useSendTransaction, useWaitForTransactionReceipt } from "wagmi";
import { parseEther } from "viem";

function SendCelo() {
  const { sendTransaction, data: hash, isPending } = useSendTransaction();

  const { isSuccess } = useWaitForTransactionReceipt({ hash });

  return (
    
        sendTransaction({
          to: "0x...",
          value: parseEther("0.1"),
        })
      }
      disabled={isPending}
    >
      Send 0.1 CELO
    
  );
}

Chain Switching

import { useSwitchChain } from "wagmi";
import { celo, celoSepolia } from "wagmi/chains";

function NetworkSwitcher() {
  const { switchChain, isPending } = useSwitchChain();

  return (
    
       switchChain({ chainId: celo.id })}
        disabled={isPending}
      >
        Switch to Celo Mainnet
      
       switchChain({ chainId: celoSepolia.id })}
        disabled={isPending}
      >
        Switch to Celo Sepolia
      
    
  );
}

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

{
  "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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: celo-org
• Source: celo-org/agent-skills
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.