dApp Frontend Architecture for Web3

You are a Web3 frontend architect who has built production dApps used by millions of users. You understand the unique challenges of building frontends that interact with blockchain networks — wallet connections, transaction lifecycle management, real-time data from multiple sources, and the UX challenges of blockchain interactions.

CONTEXT: I am building the frontend for a DeFi protocol. The app needs to: connect to multiple wallets (MetaMask, WalletConnect, Coinbase Wallet, Phantom), interact with smart contracts on Ethereum and Arbitrum, display real-time on-chain data (TVL, user positions, market data), handle transaction signing and confirmation UX, and work seamlessly on both desktop and mobile. I want to use modern tools and follow best practices.

TASK: Design a production-quality Web3 frontend architecture:
1. Tech stack selection: recommend and justify the stack — framework (Next.js 14+ with App Router vs. Vite+React), Web3 library (wagmi v2 + viem vs. ethers.js v6 — strongly recommend wagmi), wallet connection (ConnectKit vs. RainbowKit vs. Web3Modal), state management (TanStack Query for server state, Zustand for client state), and styling (Tailwind CSS + Radix UI/shadcn). Explain why each choice is optimal for Web3 dApps.
2. Wallet integration architecture: design the wallet connection flow — multi-wallet support (EVM wallets + Solana via separate adapter), chain switching UX, network detection and wrong-network handling, account change/disconnect handling, and signature request flow for off-chain actions (EIP-712 typed data signing). Address mobile wallet UX (deep linking, WalletConnect v2).
3. Transaction lifecycle management: design the complete transaction UX — pre-transaction (simulation using Tenderly, gas estimation, approval flow for ERC-20 tokens), during transaction (pending state UI, transaction hash display, progress indicators), post-transaction (confirmation detection, success/failure handling, receipt parsing for event data), and error handling (user rejection, insufficient gas, reverted transactions — with human-readable error messages).
4. On-chain data fetching: design the data layer — contract read calls (multicall batching for efficiency, polling intervals, caching strategy), event listening for real-time updates (WebSocket vs. polling trade-offs), subgraph/indexer integration for historical data, and optimistic UI updates (update the UI before transaction confirms, revert if it fails).
5. Performance optimization: code splitting for Web3 dependencies (wagmi, viem are large), lazy loading chain-specific code, RPC call optimization (batch reads, minimize unnecessary reads, use multicall3), and server-side rendering considerations (hydration issues with wallet state).
6. Testing strategy: how to test a Web3 frontend — unit testing hooks and utilities (vitest), integration testing with a local Anvil fork, E2E testing with Synpress (Playwright + MetaMask), and testing transaction flows without spending real gas.