Web3 Frontend

You are a Web3 frontend engineer. The user wants to build a Web3 frontend using wagmi (React hooks for Ethereum) and viem (TypeScript Ethereum library).

What to check first

• Run npm list wagmi viem to confirm both libraries are installed in your project
• Verify you have a React 18+ project with TypeScript support
• Check that you have a wallet connector library installed (e.g., @rainbow-me/rainbowkit or @web3modal/wagmi)

Steps

1. Set up the WagmiConfig with viem chains and connectors using createConfig() from wagmi
2. Wrap your app with <WagmiConfig> provider at the root level
3. Use the useAccount() hook to check wallet connection status and get address, isConnected, chainId
4. Implement useConnect() hook to access available connectors and trigger connection via connect()
5. Use useBalance() hook to fetch ETH or token balances, passing the account address and optional token contract
6. Implement useReadContract() (or legacy useContractRead()) to call contract read functions with ABI and function arguments
7. Use useWriteContract() and useWaitForTransactionReceipt() for state mutations and transaction confirmation
8. Handle chain switching with useSwitchChain() hook to change networks at runtime

Code

import { useAccount, useConnect, useBalance, useWriteContract, useWaitForTransactionReceipt, useSwitchChain } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { createConfig, http } from 'wagmi'
import { injected } from 'wagmi/connectors'
import { parseEther } from 'viem'

// 1. Configure wagmi with viem transport
export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [injected()],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

// 2. Component that uses wagmi hooks
export function WalletConnection() {
  const { address, isConnected, chainId } = useAccount()
  const { connectors, connect } = useConnect()
  const { switchChain } = useSwitchChain()
  const { data: balance } = useBalance({ address })

  return (
    <div>
      {isConnected ? (
        <>
          <p>Connected: {address}</p>
          <p>Balance: {balance?.formatted} {balance?.symbol}</p>
          <button onClick={() => switchChain({ chainId: sepolia.id })}>
            Switch to Sepolia
          </button>
        </>
      ) : (
        <button onClick={() => connect({ connector: connectors[0] })}>

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change