[frontend] Vault list page: data fetching + VaultCard components + link to detail

[ozpool]

Context

dApp entry. Fetches vault registry (via VaultFactory) and renders VaultCard grid.

Ref: PRISM_PRD_v1.0.html §Day 5.

Scope

In scope:

• app/(app)/vaults/page.tsx
• VaultCard component with states (loading/empty/error/active)
• Server component for initial data, client for interactivity

Out of scope:

• Filtering/search

Acceptance Criteria

• Links route to /vault/[id]
• 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: [frontend] Vault detail page layout: header + TVL/APR/share-price metrics + positions table #50
• Blocked by: [design] Vault list page layout + card states (empty/loading/error/active) #6, [contracts] VaultFactory: CREATE2 deploy per (PoolKey, Strategy) + registry + events #31, [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] App shell: header + nav + dark-only theme provider + footer + error boundary #47

References

• N/A

Estimate

M

[ozpool]

PR opened — /vaults page with all 4 design states wired through a discriminated union.