frontend-ux

Model wallet connection as a four-state machine: disconnected, connecting, connected, and wrong-network. RainbowKit's ConnectButton.Custom render prop exposes account, chain, and modal handlers so you can render distinct UI for each state, including a wrong-network switch prompt.

Combine useWriteContract with useWaitForTransactionReceipt to derive four states: awaiting-signature while isSigning, pending while confirming, confirmed when receipt status is success, and failed on revert or error. Show an explorer link during pending and a retry button on failure.

No. Error 4001 means the user intentionally cancelled in their wallet, so the correct UX is a silent reset back to the idle state. Detect it with viem's UserRejectedRequestError or by matching 'user rejected' in the message, and reserve error toasts for actual failures.

Infinite approval grants a spender unlimited token access in one transaction but risks total loss if the spender is compromised. Permit2 uses one approval to Uniswap's universal Permit2 contract, then off-chain EIP-712 signatures per interaction, limiting exposure to time-bound permits.

Regular mobile browsers have no injected provider, so connection requires WalletConnect v2 with a valid projectId. In-app browsers like MetaMask Mobile inject a provider directly. Include both injected() and walletConnect() connectors, or use RainbowKit which handles detection automatically.

Enable ssr: true in the wagmi config and use cookieStorage so the server renders the connected state. Then hydrate on the client with cookieToInitialState read from request headers, preventing the flash of disconnected state on page load.