[FEAT]: Add the Escrow / Trade Status screen (lifecycle stepper)

[grantfox-oss]

📘 Description

Once a trade starts, users need to see the escrow lifecycle. Add app/trades/[id]/page.tsx with a
vertical stepper reflecting the Trustless Work escrow flow:
Initiated → Funded → Released (with a Disputed branch). Each step shows a state
(done / current / pending) and a mock timestamp, plus the primary action for the current state.

✅ Acceptance Criteria

• New route app/trades/[id]/page.tsx.
• New component frontend/components/trade/escrow-stepper.tsx (a reusable stepper).
• Steps render with distinct visual states using tokens: completed = primary, current =
  emphasized, pending = muted-foreground, disputed = destructive.
• A summary header (amount, counterparty via WalletBadge, contract-id placeholder).
• A context-aware primary action button (e.g. "Fund escrow" / "Release funds" / "Open dispute")
  wired to console.log stubs.
• Mock trade state; light + dark correct.

🌎 References

• Escrow flow context: root README.md ("How It Works") + p2p-safe-swap/lib/trustless-work.ts
  (the escrow steps this UI represents: initialize → fund → complete → dispute → resolve)
• frontend/components/ui/Button/Button.tsx, WalletBadge

📜 Additional Notes

• UI/mock only — do not call the Trustless Work API in this issue.
• Make the stepper data-driven (array of steps) so it can be reused later.

---

Guidelines

• Use semantic brand tokens only — bg-card, text-foreground, text-muted-foreground,
  bg-primary, border-border, etc. No hardcoded hex. Reference:
  docs/guidelines/colors.md.
• Typography is Satoshi (already global) — no font setup needed.
• Light + dark: build both. Test with the theme toggle (bottom-right) — every screen must
  look right in both themes.
• Reuse existing components before building new ones: Button
  (frontend/components/ui/Button), WalletBadge, TransactionList, TabBar, SearchBar,
  Reveal (frontend/components/motion/reveal.tsx).
• Motion: wrap screen content / lists in <Reveal> for a subtle entrance; it already
  honors prefers-reduced-motion.
• Layout: mobile-first. Match existing screens — centered column, max-w-md, bg-background.
• Data: mock data only (no backend). Keep mock arrays in the page file or a local mock.ts.
• Copy: match the language of the surrounding screens (currently Spanish labels, e.g.
  "Comprar", "Transacciones"). Don't introduce a new convention.
• Accessibility: semantic elements, aria-labels, keyboard-focusable controls.
• Definition of done: npm run lint + npx tsc --noEmit clean; screen renders at its route
  in both themes; no changes to files outside the issue's declared scope.

[sainath5001]

Hi, I have experience building applications with Next.js, React, TypeScript, and Tailwind CSS. I've reviewed the issue and would implement a reusable, data-driven escrow stepper, create the trade status page, reuse the existing UI components, and ensure responsive behavior, theme compatibility, and clean code that matches the acceptance criteria. I can start as soon as I'm assigned and expect to submit a well-tested PR within 2 days.

[mariocodecr]

Hi! I'm a frontend engineer with experience building React/Next.js interfaces, reusable component libraries, and state-driven workflows. I've worked on stepper/timeline components, design systems, and mobile-first UIs with Tailwind, focusing on reusable, accessible components that integrate cleanly into existing applications.

For this issue, I'd implement the escrow lifecycle page as a data-driven, reusable feature that aligns with the existing design system and is ready for future backend integration.

My approach would include:

• Creating the new route app/trades/[id]/page.tsx with mock trade data.

• Building a reusable frontend/components/trade/escrow-stepper.tsx that renders its steps from a configuration array instead of hardcoded UI.

• Supporting all required states:

  • completed
  • current
  • pending
  • disputed
    using the project's semantic design tokens only.

• Adding a summary header displaying:

  • amount
  • WalletBadge for the counterparty
  • contract ID placeholder

• Implementing a context-aware primary action button ("Fund escrow", "Release funds", "Open dispute") wired to console.log stubs.

• Wrapping the screen with the existing Reveal component and reusing shared UI components such as Button and WalletBadge.

• Ensuring the page is fully responsive, accessible, and works correctly in both light and dark themes without introducing hardcoded colors.

Why I'm a good fit:

• Strong React, Next.js, and TypeScript experience
• Experience building reusable UI components and workflow steppers
• Familiar with design-system driven development and accessibility best practices
• Careful about component reuse and maintainable architecture
• Focus on pixel consistency and responsive interfaces

I'll structure the stepper so that replacing the mock data with real Trustless Work API responses later only requires changing the data source, not the component implementation.

[Primex-hub]

I will like to take this job

[yunus-dev-codecrafter]

Hi! I've carefully reviewed the entire task description and fully understand the requirements and expected outcome.
I have experience working on similar tasks and I'm confident I can complete this within about an hour. I'd be happy to take ownership of this issue and submit a clean, well-tested solution promptly.
If it's available, please assign it to me. Thank you!

[QuiqueCode]

Proposal: Trade escrow status screen (app/trades/[id]/page.tsx)

Understanding

Build the trade status screen showing the escrow lifecycle via a vertical stepper (Initiated → Funded → Released, with a Disputed branch). Each step shows its state (done/current/pending) and a mock timestamp, plus a context-aware primary action button for the current state. UI/mock only no calls to the Trustless Work API.

Plan

• Create frontend/components/trade/escrow-stepper.tsx as a reusable, data-driven stepper (array of steps as input).
• Style step states with semantic tokens: completed = primary, current = emphasized, pending = muted-foreground, disputed = destructive.
• Add a summary header: amount, counterparty via WalletBadge, and a contract-id placeholder.
• Add a context-aware primary action Button (e.g. "Fund escrow" / "Release funds" / "Open dispute") wired to console.log stubs based on current state.
• Build app/trades/[id]/page.tsx using mock trade data.
• Wrap content in <Reveal> for entrance motion.
• Use only semantic color tokens, mobile-first max-w-md layout matching existing screens.
• Handle accessibility (aria-labels, keyboard focus) and check both themes.
• Validate with npm run lint and npx tsc --noEmit before marking as done; no changes outside the issue's declared scope.

Looking forward to working on this.

[grantfox-oss]

🦊 GrantFox — @mariocodecr has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #321)
2. Your PR will be reviewed by the Kaizenode maintainers

Good luck! Track your progress on GrantFox.