[P5-2] Trading Widget

[realproject7]

Context

§6.2 — buy/sell storyline tokens with $PLOT on the story page. Uses MCV2_Bond's mint() and burn() functions. The bonding curve makes the price deterministic — the widget should show an estimated price before the user confirms. Include slippage protection.

Effective royalty split: 5% on every trade — 80% (4%) to writer, 20% (1%) to Mint Club protocol.

Sub-tickets

• P5-2a: Build the trading widget component — buy/sell tabs, amount input, estimated cost/return display. Reads estimates from MCV2_Bond view functions.
• P5-2b: Implement buy flow — approve $PLOT → call MCV2_Bond.mint() for the storyline token. Show tx states.
• P5-2c: Implement sell flow — call MCV2_Bond.burn() for the storyline token → receive $PLOT. Show tx states.

Proposal Reference

§3.2 (Mint Club Integration), §6.2 (Story Page — Trading widget)

Dependencies

P5-1 (price utility), P3-1 (wallet)

[realproject7]

T3 Note: Use /frontend-design skill in Claude Code when building UI components for this ticket. The design direction is terminal aesthetic — monospace, dark, outline-based, no fills, no shadows (§6.1).

[realproject7]

Note for implementation: MCV2_BondPeriphery (0x20fBC8a650d75e4C2Dab8b7e85C27135f0D64e89 on Base Sepolia) provides reverse/exact-input calculations for MCV2_Bond.mint(). The trading widget should use BondPeriphery for "I want to spend X reserve tokens, how many do I get?" calculations, alongside MCV2_Bond.getReserveForToken() for "I want to mint X tokens, how much does it cost?".