skills.rest
naruto11eth
naruto11ethCOMMUNITY
Explore all skills by this author →
Website𝕏@naruto11ethGitHub

frontend-ux

Implement dApp wallet connection, transaction lifecycle, and error handling UX with wagmi and RainbowKit.

1|1|Updated May 21, 2026
Search Tags:#error handling#wagmi#dapp#wallet connection#rainbowkit#transaction lifecycle#web3 frontend
One-click install
npx skills add https://github.com/naruto11eth/cryptoskills --skill frontend-ux-naruto11eth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ux
Source: https://github.com/naruto11eth/cryptoskills/tree/main/skills/frontend-ux
Command: npx skills add https://github.com/naruto11eth/cryptoskills --skill frontend-ux-naruto11eth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? dApp frontends commonly ship broken UX because wallet connection and transactions are treated as simple buttons and spinners instead of multi-state machines, leaving users confused by silent failures, cryptic gas numbers, and unhandled rejections. ## Core Features & Use Cases - Wallet Connection State Machine: Implements the four-state connection flow (disconnected, connecting, connected, wrong-network) using RainbowKit, wagmi v2, and EIP-6963 multi-wallet discovery, with mobile support via WalletConnect v2. - Four-State Transaction Lifecycle: Provides complete transaction components covering idle, awaiting-signature, pending, and confirmed/failed states, with silent handling of user rejection (error 4001) and decoded contract revert messages. - Gas, Approvals, and QA Checklists: Converts gas costs to USD display, implements exact vs infinite ERC-20 approval patterns with Permit2 support, and ships production QA checklists covering accessibility, mobile, and error handling. - Use Case: A developer building a token transfer page on Base can use the included starter template to get wallet connection, chain switching, a full transaction form with explorer links, and proper error decoding without writing the state logic from scratch. ## Quick Start Ask the agent to build a dApp page with RainbowKit wallet connection and a four-state transaction form for an ERC-20 transfer using wagmi and viem.

Frequently Asked Questions about frontend-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle wallet connection states in a React dApp?▼

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

How to show transaction pending and confirmed states with wagmi?▼

Combine useWriteContract with useWaitForTransactionReceipt to derive four states: idle, awaiting-signature, pending, and confirmed or failed. Show 'Confirm in wallet...' while signing, an explorer link while pending, and the block number on confirmation.

Should I show an error when a user rejects a transaction in MetaMask?▼

No. Error code 4001 means the user intentionally cancelled, so silently reset to the idle state without an error toast. Detect it with viem's UserRejectedRequestError or by checking the message for 'user rejected'.

Does RainbowKit work with mobile wallets like MetaMask Mobile?▼

Yes. Mobile wallet apps use in-app browsers with injected providers, while regular mobile browsers connect via WalletConnect v2 deep links or QR codes. RainbowKit handles both automatically when configured with a WalletConnect project ID.

Infinite approval vs exact amount approval for ERC-20 tokens?▼

Exact-amount approval limits risk to only the approved tokens and is the safer default. Infinite approval (max uint256) saves gas on repeat interactions but lets a compromised spender drain all tokens; Permit2 offers a middle ground with one approval plus off-chain signatures.

Why does my wagmi app show a hydration mismatch error in Next.js?▼

The server renders the disconnected state while the client reconnects from storage, causing a mismatch. Enable ssr: true with cookieStorage in the wagmi config and hydrate using cookieToInitialState from the request headers in your root layout.

Related Skills

Explore More Software Engineering Skills→
keypo-uskeypo-us
181

contract-learner

Generate reusable contract interaction skills from verified on-chain ABIs.

Official
Advanced
ccashwellccashwell
120

ipfs-deployment

Automate dApp frontend deployment to IPFS with pinning and ENS content hashes.

Community
Intermediate
okx-wallet-Hokx-wallet-H

h-v2-security-guard

Detect scams, audit smart contracts, and assess token approvals onchain.

Community
Intermediate
reown-comreown-com
2

appkit

Integrate Web3 wallet connectivity and multi-chain support into web applications using the Reown AppKit SDK.

Official
Intermediate