[frontend] Deposit form: paired amount inputs + approval flow + preview + tx state machine

[ozpool]

Context

Primary LP action. Explicit tx state machine — no boolean flags.

Ref: PRISM_PRD_v1.0.html §Day 2, §Day 5.

Scope

In scope:

• components/vault/DepositForm.tsx
• hooks/useDeposit.ts
• Approval + deposit flow
• Preview: expected shares + implied tick distribution

Out of scope:

• Withdraw ([frontend] Withdraw form: share input + proportional preview + tx state machine #53)
• PrismVisual preview rendering lives in [frontend] PrismVisual: d3 component rendering tick-range distribution with weight heights #51

Acceptance Criteria

• Approval flow covers: none / partial / sufficient allowance
• Tx state machine is single discriminated union
• All tx states rendered (idle/pending/success/error/wrong-network)
• wagmi v2 + viem v2 (not ethers)
• ABIs from packages/shared (never hand-maintained)
• Keyboard navigable; semantic HTML; WCAG AA contrast
• Responsive at 320 / 768 / 1280
• pnpm typecheck && pnpm lint && pnpm test pass

Dependencies

• Blocks: [test] Playwright E2E: wallet-connect → deposit → observe rebalance → withdraw happy path #67, [test] Playwright E2E: error paths — wrong network, insufficient balance, tx rejection #68
• Blocked by: [design] Deposit + withdraw flow: all tx states (idle/pending/success/error/wrong-network) #8, [contracts] Vault.deposit: unlock callback + multi-position deploy + MIN_SHARES burn on first #27, [contracts] Vault views: getPositions, getTotalAmounts, getPoolKey, sharePrice, TVL cap #30, [frontend] Providers: wagmi v2 + viem v2 + RainbowKit v2 + TanStack Query on Base Sepolia #44, [frontend] packages/shared: generated ABIs + per-chain addresses + shared TypeScript types #45, [frontend] scripts/export-abis.ts: Foundry out/ → packages/shared/abi.ts automation #46

References

• wagmi useWriteContract

Estimate

L