Frontend Web3 Integration

Frontends read blockchain state and submit transactions through libraries wrapping JSON-RPC. Modern stacks use viem with React hooks from wagmi for typed contract calls, wallet management, and cleaner async state handling.

Reading state means calling view functions — balanceOf, getReserves, totalSupply. Batch reads with multicall for performance and cache aggressively; chain state only changes on new blocks. Writing state requires building a transaction, getting a wallet signature, and tracking the hash through pending to confirmed.

ethers.js remains widely used with a mature ecosystem, but viem and wagmi are the default for new TypeScript projects. Configure chain IDs and RPC endpoints in wagmi config so your app prompts network switches before users sign transactions on the wrong chain.