# Create Next.js app with TypeScript
npx create-next-app@latest my-dapp --typescript
cd my-dapp

npm install ethers

import { ethers } from 'ethers'

// Connect to Ethereum
const provider = new ethers.JsonRpcProvider('https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY')

// Read contract
const contract = new ethers.Contract(contractAddress, abi, provider)
const balance = await contract.balanceOf(userAddress)

npm install viem

import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'

const client = createPublicClient({
  chain: mainnet,
  transport: http()
})

const balance = await client.readContract({
  address: contractAddress,
  abi: contractAbi,
  functionName: 'balanceOf',
  args: [userAddress]
})

npm install wagmi viem @tanstack/react-query

// wagmi.ts - Configuration
import { http, createConfig } 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'

const queryClient = new QueryClient()

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

npm install @rainbow-me/rainbowkit

import '@rainbow-me/rainbowkit/styles.css'
import { RainbowKitProvider, getDefaultConfig } from '@rainbow-me/rainbowkit'

const config = getDefaultConfig({
  appName: 'My dApp',
  projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
  chains: [mainnet, sepolia],
})

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

import { ConnectButton } from '@rainbow-me/rainbowkit'

export function Header() {
  return (
    <header>
      <h1>My dApp</h1>
      <ConnectButton />
    </header>
  )
}

'use client'

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

export function WalletConnection() {
  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 with {connector.name}
        </button>
      ))}
    </div>
  )
}

import { useSignMessage } from 'wagmi'

export function SignInButton() {
  const { signMessageAsync } = useSignMessage()

  async function handleSignIn() {
    try {
      const message = `Sign this message to authenticate.\nNonce: ${Date.now()}`
      const signature = await signMessageAsync({ message })

      // Send signature to backend for verification
      const response = await fetch('/api/auth/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message, signature })
      })

      const { token } = await response.json()
      localStorage.setItem('authToken', token)
    } catch (error) {
      console.error('Sign in failed:', error)
    }
  }

  return (
    <button onClick={handleSignIn}>
      Sign In with Wallet
    </button>
  )
}

import { useReadContract } from 'wagmi'

const ERC20_ABI = [
  {
    name: 'balanceOf',
    type: 'function',
    stateMutability: 'view',
    inputs: [{ name: 'account', type: 'address' }],
    outputs: [{ name: 'balance', type: 'uint256' }]
  },
  {
    name: 'totalSupply',
    type: 'function',
    stateMutability: 'view',
    inputs: [],
    outputs: [{ type: 'uint256' }]
  }
] as const

export function TokenBalance({ address }: { address: `0x${string}` }) {
  const { data: balance, isLoading } = useReadContract({
    address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC
    abi: ERC20_ABI,
    functionName: 'balanceOf',
    args: [address]
  })

  if (isLoading) return <div>Loading...</div>

  return (
    <div>
      Balance: {balance?.toString()} USDC
    </div>
  )
}

import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi'
import { parseEther } from 'viem'

const NFT_ABI = [
  {
    name: 'mint',
    type: 'function',
    stateMutability: 'payable',
    inputs: [{ name: 'quantity', type: 'uint256' }],
    outputs: []
  }
] as const

export function MintNFT() {
  const { data: hash, writeContract, isPending } = useWriteContract()

  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({
    hash
  })

  async function handleMint() {
    writeContract({
      address: '0xYourNFTContract',
      abi: NFT_ABI,
      functionName: 'mint',
      args: [1n], // Mint 1 NFT
      value: parseEther('0.08') // 0.08 ETH
    })
  }

  return (
    <div>
      <button onClick={handleMint} disabled={isPending || isConfirming}>
        {isPending ? 'Confirming...' :
         isConfirming ? 'Minting...' :
         'Mint NFT'}
      </button>

      {hash && <div>Transaction: {hash}</div>}
      {isSuccess && <div>Successfully minted!</div>}
    </div>
  )
}

import { useWatchContractEvent } from 'wagmi'

export function TransferWatcher() {
  const [transfers, setTransfers] = useState<any[]>([])

  useWatchContractEvent({
    address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
    abi: ERC20_ABI,
    eventName: 'Transfer',
    onLogs(logs) {
      setTransfers(prev => [...prev, ...logs])
    }
  })

  return (
    <div>
      <h2>Recent Transfers</h2>
      {transfers.map((transfer, i) => (
        <div key={i}>
          {transfer.args.from} → {transfer.args.to}
          : {transfer.args.value.toString()}
        </div>
      ))}
    </div>
  )
}

import { mainnet, sepolia, arbitrum, optimism, base, polygon } from 'wagmi/chains'

export const config = createConfig({
  chains: [
    mainnet,      // Ethereum Mainnet
    sepolia,      // Ethereum Testnet
    arbitrum,     // Arbitrum (L2)
    optimism,     // Optimism (L2)
    base,         // Base (Coinbase L2)
    polygon       // Polygon
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
    [arbitrum.id]: http(),
    [optimism.id]: http(),
    [base.id]: http(),
    [polygon.id]: http()
  }
})

import { useSwitchChain } from 'wagmi'

export function NetworkSwitcher() {
  const { chains, switchChain } = useSwitchChain()

  return (
    <select onChange={(e) => switchChain({ chainId: Number(e.target.value) })}>
      {chains.map((chain) => (
        <option key={chain.id} value={chain.id}>
          {chain.name}
        </option>
      ))}
    </select>
  )
}

import { useEstimateGas, useGasPrice } from 'wagmi'
import { formatGwei } from 'viem'

export function GasEstimator() {
  const { data: gasPrice } = useGasPrice()

  const { data: gasEstimate } = useEstimateGas({
    to: '0xRecipientAddress',
    value: parseEther('0.01')
  })

  const totalCost = gasPrice && gasEstimate
    ? (gasPrice * gasEstimate)
    : 0n

  return (
    <div>
      <p>Gas Price: {gasPrice ? formatGwei(gasPrice) : '...'} gwei</p>
      <p>Estimated Gas: {gasEstimate?.toString()}</p>
      <p>Total Cost: {formatEther(totalCost)} ETH</p>
    </div>
  )
}

import { useQuery } from '@tanstack/react-query'

export function useTokenPrice(tokenAddress: string) {
  return useQuery({
    queryKey: ['tokenPrice', tokenAddress],
    queryFn: async () => {
      const response = await fetch(
        `https://api.coingecko.com/api/v3/simple/token_price/ethereum?contract_addresses=${tokenAddress}&vs_currencies=usd`
      )
      return response.json()
    },
    refetchInterval: 30000 // Refetch every 30s
  })
}

// Usage
function TokenPrice() {
  const { data, isLoading } = useTokenPrice('0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48')

  if (isLoading) return <div>Loading price...</div>

  return <div>USDC: ${data?.['0xA0b86991...'].usd}</div>
}

import { gql, request } from 'graphql-request'

const UNISWAP_V3_SUBGRAPH = 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3'

const POOL_QUERY = gql`
  query GetPool($poolAddress: String!) {
    pool(id: $poolAddress) {
      token0 {
        symbol
        name
      }
      token1 {
        symbol
        name
      }
      volumeUSD
      totalValueLockedUSD
    }
  }
`

export function usePoolData(poolAddress: string) {
  return useQuery({
    queryKey: ['pool', poolAddress],
    queryFn: () => request(UNISWAP_V3_SUBGRAPH, POOL_QUERY, { poolAddress })
  })
}

import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi'
import { toast } from 'sonner'

export function SwapTokens() {
  const { data: hash, writeContract, isPending, error } = useWriteContract()

  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({
    hash
  })

  async function handleSwap() {
    try {
      writeContract({
        address: '0xSwapRouterAddress',
        abi: SWAP_ABI,
        functionName: 'swap',
        args: [tokenIn, tokenOut, amount]
      })

      toast.loading('Confirming transaction...')
    } catch (err) {
      toast.error('Transaction failed')
    }
  }

  useEffect(() => {
    if (isConfirming) {
      toast.loading('Processing on blockchain...', { id: hash })
    }
    if (isSuccess) {
      toast.success('Swap successful!', { id: hash })
    }
  }, [isConfirming, isSuccess, hash])

  return (
    <button onClick={handleSwap} disabled={isPending || isConfirming}>
      {isPending ? 'Confirm in wallet...' :
       isConfirming ? 'Swapping...' :
       'Swap Tokens'}
    </button>
  )
}

import { BaseError, ContractFunctionRevertedError } from 'viem'

try {
  await writeContract({...})
} catch (err) {
  if (err instanceof BaseError) {
    const revertError = err.walk(err => err instanceof ContractFunctionRevertedError)

    if (revertError instanceof ContractFunctionRevertedError) {
      const errorName = revertError.data?.errorName ?? ''

      if (errorName === 'InsufficientBalance') {
        toast.error('Insufficient balance')
      } else if (errorName === 'InsufficientAllowance') {
        toast.error('Please approve tokens first')
      }
    } else if (err.message.includes('User rejected')) {
      toast.error('Transaction cancelled')
    }
  }
}

# .env.local
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id
NEXT_PUBLIC_ALCHEMY_API_KEY=your_alchemy_key
NEXT_PUBLIC_ETHERSCAN_API_KEY=your_etherscan_key

const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(`https://eth-mainnet.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_API_KEY}`)
  }
})

// Fallback RPC providers
import { fallback } from 'wagmi'

const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: fallback([
      http(`https://eth-mainnet.g.alchemy.com/v2/${ALCHEMY_KEY}`),
      http(`https://mainnet.infura.io/v3/${INFURA_KEY}`),
      http() // Public RPC as fallback
    ])
  }
})

// abis/ERC20.ts
export const ERC20_ABI = [
  {
    name: 'balanceOf',
    type: 'function',
    stateMutability: 'view',
    inputs: [{ name: 'account', type: 'address' }],
    outputs: [{ type: 'uint256' }]
  },
  // ... more methods
] as const

// Type-safe contract addresses
export const CONTRACTS = {
  USDC: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
  DAI: '0x6B175474E89094C44Da98b954EedeAC495271d0F'
} as const

// __tests__/wallet.test.tsx
import { render, screen } from '@testing-library/react'
import { WagmiProvider } from 'wagmi'
import { renderHook } from '@testing-library/react-hooks'

describe('Wallet Connection', () => {
  it('should connect to MetaMask', async () => {
    const { result } = renderHook(() => useConnect())

    await result.current.connect({ connector: result.current.connectors[0] })

    expect(result.current.isConnected).toBe(true)
  })
})

// Example: Slippage protection
const amountOutMin = calculateMinimumOutput(amountIn, slippageTolerance)

writeContract({
  functionName: 'swap',
  args: [amountIn, amountOutMin] // Minimum output enforced
})