frontend-ux

Disable the button immediately on click, show a spinner with action text, and keep it disabled until chain state confirms completion. Use a separate loading state per action and always release it in a finally block so rejected transactions do not lock the button permanently.

isPending drops to false when the wallet returns the transaction hash, before onchain confirmation, leaving a window where the button re-enables while the allowance has not updated. Combine a submission flag cleared in finally with a post-confirmation cooldown plus refetch to close both gaps.

Show one primary action at a time: Connect Wallet, then Switch Network, then Approve, then Execute. The wrong-network check must run before approval checks, and Approve and Execute must never appear simultaneously.

Convert contract base units with viem's formatUnits or formatEther before display, and use parseUnits or parseEther for inputs. Always pair token amounts with USD context, such as 0.5 ETH (~$1,250.00), and never show raw values like 1500000000000000000.

Extract errors from the ABI or custom error definitions, map them to human-readable messages, handle wallet-level rejections and gas issues, and render a persistent inline error near the triggering action. Users should never see raw revert selectors or silent failures.

Use a dedicated RPC provider rather than relying on public fallbacks, keep polling around 2-5 seconds for interactive apps, and make fallback transports intentional and rate-limit aware. Sustained high request volume usually signals render loops or duplicate watchers in frontend hooks.