Account setup flow

Skill contextwtf/context-skills/skills/build/account-setup-flow

Build the wallet connect → approve → deposit → ready-to-trade UI flowFrom its SKILL.md

Install

npx -y skills add contextwtf/context-skills --skill account-setup-flow

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.0 KB, as published. Nobody here has run it

Account Setup Flow

Build the onboarding flow that takes a user from wallet connection to ready-to-trade: connect wallet, approve contracts, deposit USDC.

When to Use

The user wants to build the account setup UI — the first thing a new user sees before they can trade.

Steps

Wallet connection — use wagmi's useConnect() and useAccount():

const { connect, connectors } = useConnect()
const { address, isConnected } = useAccount()

Check account status — useAccountStatus() returns whether approvals and deposits are needed:

const { data: status } = useAccountStatus()
// status.isReady — true if account is fully set up
// status.needsUsdcApproval — needs USDC spend approval
// status.needsOperatorApproval — needs operator approval

One-click setup — useAccountSetup() handles both approvals in one call:

const { mutate: setup, isPending } = useAccountSetup()
// On testnet: gasless (no ETH needed)
// On mainnet: on-chain transactions (requires ETH for gas)

Granular approvals (optional) — for UIs that want separate steps:
- useApproveUsdc() — approve USDC spending
- useApproveOperator() — approve the settlement contract as operator

Deposit USDC — useDeposit() to fund the trading account:

const { mutate: deposit } = useDeposit()
deposit(100)  // deposit 100 USDC

Show ready state — once status.isReady is true and balance > 0, the user can trade.

Gotchas

Testnet auto-uses gasless setup. On testnet, useAccountSetup uses signature-based approvals (no ETH needed). On mainnet, it sends on-chain transactions requiring ETH for gas.
useApproveUsdc and useApproveOperator for granular control. Use these if your UI wants separate approval steps with progress indicators. useAccountSetup combines both.
Chain must be correct. If the user is on the wrong chain, wallet operations will fail. Use wagmi's useSwitchChain() to prompt switching to Base (mainnet) or Base Sepolia (testnet).
Handle ContextWalletError. Import from context-markets-react — it covers user rejection, wrong chain, and insufficient funds with structured error types.
Deposit requires prior approval. If the user hasn't run setup/approve first, deposit will fail. Check status.isReady or status.needsUsdcApproval before showing the deposit button.

Verification

Wallet connects and address displays.
Account status correctly shows what's needed (approvals, deposit).
Setup completes without errors (testnet: instant, mainnet: waits for tx).
After deposit, balance shows in useBalance() and status.isReady is true.