[FEAT]: Add the Order Detail & "Start Trade" screen

[grantfox-oss]

📘 Description

Tapping an order should open a detail screen showing the full offer and letting the user start a
trade. Add app/p2p/orders/[id]/page.tsx that shows one order's details and an amount input with
a primary "Start trade" CTA (mock — logs the intent).

✅ Acceptance Criteria

• New route app/p2p/orders/[id]/page.tsx.
• New component(s) under frontend/components/p2p/order-detail/ (e.g. OrderDetail.tsx).
• Display: counterparty (WalletBadge + name + rating/ops), price, available amount, min/max
  limits, payment methods, settlement window — reuse the P2POrder shape from
  frontend/components/p2p/types.ts.
• An amount input with validation against min/max limits and a computed "you receive" figure.
• A primary "Start trade" Button (uses variant="primary"), plus a back affordance.
• Mock order data; light + dark correct.
• Do not modify app/p2p/orders/page.tsx (linking list→detail is handled in Issue Design a marketplace page for the project #5).

🌎 References

• frontend/components/p2p/types.ts (P2POrder, OrderUser, OrderLimits)
• frontend/components/TransactionCard/TransactionCard.tsx (styling reference)
• frontend/components/ui/Button/Button.tsx

📜 Additional Notes

• Wrap the content in <Reveal> for entrance motion.
• Keep the amount math client-side; no API calls.

---

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 understand the requirements. I'll reuse the existing components and types, follow the project's design guidelines, and ensure the implementation is responsive, accessible, and compatible with both light and dark themes. If assigned, I can start immediately and aim to submit a clean, well-tested PR within 2 days.

[Primex-hub]

I will like to take this job

[QuiqueCode]

Proposal: Order detail screen (app/p2p/orders/[id]/page.tsx)

Understanding

Build the P2P order detail screen: shows the full offer (counterparty, price, limits, payment methods, settlement window) using the existing P2POrder shape, plus an amount input with min/max validation and a computed "you receive" value, and a primary "Start trade" button (mock — logs the intent only).

Plan

• Create OrderDetail.tsx under frontend/components/p2p/order-detail/.
• Show counterparty (WalletBadge + name + rating/ops), price, available amount, min/max limits, payment methods, and settlement window, using the P2POrder/OrderUser/OrderLimits types.
• Add an amount input with client-side validation against min/max, plus a computed "you receive" figure.
• Add a primary Button ("Start trade", variant="primary") and a back affordance.
• Build app/p2p/orders/[id]/page.tsx, resolving the order from mock data by id.
• 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 to app/p2p/orders/page.tsx.

Looking forward to working on this.

[grantfox-oss]

🦊 GrantFox — @QuiqueCode 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 #320)
2. Your PR will be reviewed by the Kaizenode maintainers

Good luck! Track your progress on GrantFox.