PM-10: Trade Modal — Mint/Swap/Merge/Redeem

[mzparacha]

Overview

Tabbed trading modal for all token operations (mint, swap, merge, redeem).

Size: Large
Depends on: PM-7
Blocks: PM-17

Files to Create

• client/scripts/views/modals/prediction_market_trade_modal.tsx

Follows Pattern

Reference: client/scripts/views/components/ThreadTokenDrawer/ThreadTokenDrawer.tsx (tabbed trading pattern)

Acceptance Criteria

• Mint tab: amount input, collateral cost, "Deposit and Mint"
• Swap tab: PASS/FAIL toggle, amount, slippage (1%), estimated output
• Merge tab: amount (limited to min balance), collateral returned
• Redeem tab: (post-resolution only) amount, collateral returned
• Shows token balances, wallet tx via contract helpers, loading/error states
• Tabs disabled by market status (swap off when resolved, redeem off when active)

UI Wireframe — All 4 Tabs

  Mint Tab                               Swap Tab
  +---------------------------------------+  +---------------------------------------+
  | Trade: Will ETH reach $5k?           |  | Trade: Will ETH reach $5k?           |
  |                                       |  |                                       |
  | [Mint] [Swap] [Merge] [Redeem]       |  | [Mint] [Swap] [Merge] [Redeem]       |
  | ====== ~~~~~~ ~~~~~~~ ~~~~~~~~       |  | ~~~~~~ ====== ~~~~~~~ ~~~~~~~~       |
  |                                       |  |                                       |
  | Deposit collateral to mint tokens:   |  | Buy:  (x) PASS  ( ) FAIL            |
  |                                       |  |                                       |
  | Amount: [100        ] USDC           |  | Sell:   [50         ] FAIL tokens    |
  |                                       |  | Receive: ~48.2 PASS tokens (est.)   |
  | You receive:                         |  | Slippage: 1%                         |
  |   100 PASS tokens                    |  |                                       |
  |   100 FAIL tokens                    |  | [Cancel]              [Swap]         |
  |                                       |  +---------------------------------------+
  | [Cancel]        [Deposit and Mint]   |
  +---------------------------------------+  Merge Tab
                                             +---------------------------------------+
  Redeem Tab (post-resolution only)          | Trade: Will ETH reach $5k?           |
  +---------------------------------------+  |                                       |
  | Trade: Will ETH reach $5k?           |  | [Mint] [Swap] [Merge] [Redeem]       |
  |                                       |  | ~~~~~~ ~~~~~~ ======= ~~~~~~~~       |
  | [Mint] [Swap] [Merge] [Redeem]       |  |                                       |
  | ~~~~~~ ~~~~~~ ~~~~~~~ ========       |  | Merge equal tokens back to collateral|
  |  off    off    off                   |  |                                       |
  |                                       |  | Amount: [25         ] token pairs    |
  | Market resolved: PASS wins           |  | (max: 50 -- limited to min balance)  |
  |                                       |  |                                       |
  | Your PASS balance: 148 tokens        |  | You receive: 25 USDC                 |
  | Redeem: [148        ] PASS tokens    |  |                                       |
  |                                       |  | [Cancel]              [Merge]        |
  | You receive: 148 USDC               |  +---------------------------------------+
  |                                       |
  | [Cancel]              [Redeem]       |
  +---------------------------------------+

Data Flow — Trade Operations

TRADE FLOW (Mint/Swap/Merge):

1. User fills form → clicks action button
2. Frontend: Prompts wallet → calls contract method:
   • Mint: Vault.mint()
   • Swap: Router.swap()
   • Merge: Vault.merge()
3. No immediate API call — EVM worker picks up event
4. EVM Worker (120s polling) detects event
5. Event mapper → Outbox → RabbitMQ
6. PredictionMarketPolicy → ProjectTrade command → DB insert
7. React Query auto-refetch (staleTime: 30s)
8. UI updates with new position / probability

REDEEM FLOW (Post-resolution):

1. User clicks "Redeem" with amount
2. Frontend: Prompts wallet → calls Vault.redeem()
3. EVM Worker picks up TokensRedeemed event
4. ProjectTrade(redeem) → DB update
5. React Query refetch → UI shows updated balance

Related

Part of the Prediction Markets (Futarchy) Integration Plan. See common_knowledge/Prediction-Markets.md for full specification.

[mzparacha]

Already implemented in #13377.