Feat/add escrow trade status

[mariocodecr]

📝 (feat: add Escrow / Trade Status screen with lifecycle stepper)

🛠️ Issue

• Closes [FEAT]: Add the Escrow / Trade Status screen (lifecycle stepper) #321

📖 Description

Adds the Escrow / Trade Status screen at app/trades/[id]/page.tsx — a mobile-first view that renders the Trustless Work escrow lifecycle (Iniciado →
Financiado → Liberado, with a Disputa branch) using a new reusable EscrowStepper component. Each step exposes four visual states (completed, current,
pending, disputed) mapped to the brand's semantic tokens, so it adapts to light and dark themes without hardcoded colors. The screen surfaces a summary
header (amount, counterparty via WalletBadge, contract-id placeholder) and a context-aware primary CTA derived from the current step, plus a secondary
"Abrir disputa" action — both wired to console.log stubs per the issue scope.

UI / mock only. No Trustless Work API calls, no backend, no changes to files outside the declared scope.

✅ Changes made

• New reusable component — p2p-safe-swap/frontend/components/trade/escrow-stepper.tsx
  • Data-driven vertical stepper (steps: EscrowStep[]) — reusable for future trade flows.
  • Four semantic step states with token-based styling:
    • completed → bg-primary text-primary-foreground (check)
    • current → bg-primary/15 text-primary ring-2 ring-primary/40 (animated spinner)
    • pending → border-border text-muted-foreground (muted circle)
    • disputed → bg-destructive/15 text-destructive (warning)
  • Semantic markup:
    /
    1. , aria-current="step", , sr-only status labels.
    2. Timestamps formatted via Intl.DateTimeFormat with overrideable locale (default es-AR).
    3. Vertical rail between steps colored by completion (bg-primary vs bg-border).
• New route — p2p-safe-swap/app/trades/[id]/page.tsx
  • Client component using React.use(params) (Next 16 async params) — dynamic [id] accepts any trade id.
  • Header with functional back button (router.back()) + centered title "Estado de la operación".
  • Summary card: WalletBadge + counterparty name + short address + amount (tabular-nums) + USDC + contract-id placeholder with ShieldCheck icon.
  • Stepper card rendering the mocked lifecycle (initiated completed → funded current → released pending).
  • Context-aware primary CTA derived from the current step (initiated → "Financiar escrow", funded → "Liberar fondos") + secondary danger "Abrir
    disputa".
  • Full content wrapped in for a subtle entrance that honors prefers-reduced-motion.
  • Mobile-first layout matching the rest of the app (mx-auto max-w-md bg-background).
  • Reuses existing components: Button, WalletBadge, Reveal; icons from lucide-react; classes composed via cn.
  • Copy follows the surrounding Spanish convention ("Volver", "Iniciado", "Financiado", "Liberado").

🖼️ Media (screenshots/videos)

📜 Additional Notes

• Definition of Done verified locally
  • npx tsc --noEmit → clean
  • npm run lint (ESLint) → clean
  • Dev server (npm run dev) → GET /trades/demo-123 returns 200, page renders in both themes.
• Scope discipline — only the two files declared in the issue are added; nothing else in the repo is modified (no changes to package.json, tokens,
  existing components, etc.).
• Atomic commits — split intentionally so each compiles standalone and is bisect-friendly:
  a. feat: add reusable escrow lifecycle stepper component — building block.
  b. feat: add trade status screen at /trades/[id] — consumer.
• Accessibility — semantic list, aria-current on the active step, sr-only status labels for screen readers, for machine-readable
  timestamps, focusable back button with aria-label and visible focus ring, disabled state on secondary action when no step is active.
• Testing — no automated tests added in this PR; the repo currently has no test infrastructure for the frontend and adding it is out of scope for this
  issue. Manual test steps:
  • Navigate to http://localhost:3000/trades/anything — screen renders with mock trade.
  • Toggle theme (bottom-right) — both themes look correct.
  • Click primary CTA → console shows [escrow] primary action: { tradeId, action: "release" }.
  • Click "Abrir disputa" → console shows [escrow] dispute opened { tradeId }.
  • Enable macOS "Reduce motion" → entrance animation is skipped, content still renders.