dapp-frontend-patterns

dApp Frontend Patterns

Stack Overview

• viem: Low-level TypeScript library for Ethereum (replaces ethers.js)
• wagmi v2: React hooks for Ethereum (built on viem + TanStack Query)
• RainbowKit: Wallet connection UI component

Project Setup

npm create wagmi@latest my-dapp
# Select: Next.js, RainbowKit

# Or add to existing project:
npm install wagmi viem @tanstack/react-query @rainbow-me/rainbowkit

Wagmi Config

import { http, createConfig } from 'wagmi';
import { base, mainnet, optimism } from 'wagmi/chains';
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

export const config = getDefaultConfig({
  appName: 'My dApp',
  projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!, // WalletConnect
  chains: [base, mainnet, optimism],
  transports: {
    [base.id]: http(process.env.NEXT_PUBLIC_BASE_RPC),
    [mainnet.id]: http(process.env.NEXT_PUBLIC_MAINNET_RPC),
    [optimism.id]: http(process.env.NEXT_PUBLIC_OP_RPC),
  },
});

Provider Setup

'use client';

import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
import { config } from './config';
import '@rainbow-me/rainbowkit/styles.css';

const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider theme={darkTheme()}>
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Reading Contract Data

import { useReadContract, useReadContracts } from 'wagmi';
import { formatEther, formatUnits } from 'viem';

const tokenAbi = [
  { name: 'balanceOf', type: 'function', stateMutability: 'view',
    inputs: [{ name: 'account', type: 'address' }],
    outputs: [{ name: '', type: 'uint256' }] },
  { name: 'decimals', type: 'function', stateMutability: 'view',
    inputs: [], outputs: [{ name: '', type: 'uint8' }] },
  { name: 'symbol', type: 'function', stateMutability: 'view',
    inputs: [], outputs: [{ name: '', type: 'string' }] },
] as const;

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

  // Batch multiple reads in one call
  const { data: tokenInfo } = useReadContracts({
    contracts: [
      { address: token, abi: tokenAbi, functionName: 'symbol' },
      { address: token, abi: tokenAbi, functionName: 'decimals' },
    ],
  });

  if (isLoading) return <span>Loading...</span>;

  const symbol = tokenInfo?.[0]?.result ?? '';
  const decimals = tokenInfo?.[1]?.result ?? 18;

  return (
    <span>
      {balance != null ? formatUnits(balance, decimals) : '0'} {symbol}
    </span>
  );
}