# wagmi + viem Frontend Integration

## Installation
```bash
npm install wagmi viem @tanstack/react-query
```

## Configuration Setup
```typescript
// config.ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia, polygon, base } from 'wagmi/chains'
import { injected, walletConnect, coinbaseWallet } from 'wagmi/connectors'

export const config = createConfig({
  chains: [mainnet, sepolia, polygon, base],
  connectors: [
    injected(),
    walletConnect({ projectId: 'YOUR_PROJECT_ID' }),
    coinbaseWallet({ appName: 'My App' }),
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

```tsx
// App.tsx
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from './config'

const queryClient = new QueryClient()

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

## Common Hooks
```typescript
import { useAccount, useConnect, useDisconnect, useBalance, useReadContract, useWriteContract, useWaitForTransactionReceipt } from 'wagmi'

// Connection status
const { address, isConnected, chain } = useAccount()

// Balance
const { data: balance } = useBalance({ address, token: USDC_ADDRESS })

// Read contract
const { data: totalSupply } = useReadContract({
  address: TOKEN_ADDRESS, abi: ERC20_ABI, functionName: 'totalSupply',
})

// Write contract
const { writeContract, data: hash } = useWriteContract()
const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash })

function sendTx() {
  writeContract({ address: CONTRACT, abi: ABI, functionName: 'transfer', args: [to, amount] })
}
```

## Direct viem Usage (Without React)
```typescript
import { createPublicClient, createWalletClient, http, parseEther } from 'viem'
import { mainnet } from 'viem/chains'

// Read
const publicClient = createPublicClient({ chain: mainnet, transport: http() })
const balance = await publicClient.getBalance({ address: '0x...' })
const result = await publicClient.readContract({ address, abi, functionName: 'balanceOf', args: [userAddr] })

// Write
const walletClient = createWalletClient({ account, chain: mainnet, transport: http() })
const hash = await walletClient.writeContract({ address, abi, functionName: 'transfer', args: [to, parseEther('1')] })
await publicClient.waitForTransactionReceipt({ hash })
```

## TypeScript ABI Type Inference
```typescript
// Use const assertion to preserve type information
const ERC20_ABI = [...] as const
// Or use viem's parseAbi
import { parseAbi } from 'viem'
const abi = parseAbi(['function balanceOf(address) returns (uint256)', 'event Transfer(address indexed from, address indexed to, uint256 value)'])
```

## Common Pitfalls
- `useReadContract` has a default refetch interval of 4s; set `watch: true` for real-time monitoring
- After `writeContract` returns a hash, you still need `useWaitForTransactionReceipt` to wait for confirmation
- In multi-chain projects, note that when switching chains the address remains the same but chainId changes—monitor `chain.id`
- WalletConnect projectId must be obtained from cloud.walletconnect.com