[UI/UX] Implement Dual-Pane Swap Engine Interface (Desktop & Mobile)

[Rampop01]

Issue #63

[UI/UX] Implement Dual-Pane Swap Engine Interface (Desktop & Mobile)

🔴 Priority: Critical
Difficulty: Hard
Estimated Effort: 5-7 days
Relevant Files: src/app/swap/[id]/page.tsx, src/components/swap/SwapEngine.tsx, src/components/swap/CollateralPanel.tsx, src/components/swap/SwapTimeline.tsx
Labels: ui, swap, web3, priority:critical, figma

Requirements

1. Dual-Pane Interface

   • Implement the split-screen interface (stacked vertically on mobile): Left side 'Your Device', Right side 'Their Device' + Required Collateral in USDC beneath each.
   • If the user's device is worth less than the target device, display a prominent inline warning: 'You will be required to deposit X USDC collateral to secure this swap.'
   • Display interactive, color-coded buttons based on negotiation state: 'Propose Swap', 'Counter Offer', 'Accept', 'Reject', 'Cancel'.
   • Once state is 'Agreed', transform the primary CTA to 'Deposit Collateral' and trigger the Soroban XDR signing flow, showing steps: 'Waiting for signature' -> 'Submitting' -> 'Confirmed'.
   • Include a live countdown timer showing how long until the swap auto-cancels.

2. Screenshot Requirement

   • Capture and commit screenshots of the Desktop Swap Engine in both the 'Negotiating' state and the 'Awaiting Collateral' state.
   • Include a Mobile screenshot of the stacked vertical layout.
   • Place screenshots in src/components/swap/screenshots/.

3. Testing Requirements

   • Unit test: Mock the WebSocket context and dispatch a 'Swap Accepted' event. Assert the UI correctly transitions from the Negotiation view to the Funding view.
   • E2E Test: Simulate clicking 'Deposit Collateral', mock the wallet signature, and verify the step-by-step overlay appears correctly.

---