Description

Implement the prediction market editor modal that allows thread authors to configure and deploy a new prediction market. This modal handles the two-step process: (1) creating a draft prediction market in the database and (2) triggering the on-chain deployment transaction via wallet interaction.

Users should be able to configure market parameters (prompt, collateral token, duration, resolution threshold, initial liquidity) and then initiate deployment which creates the smart contract instances on-chain and records the contract addresses.

Technical Context

Type: feature
Category: ui
Priority: high
Risk: medium

Architecture Notes

• Part of PM-7b sub-ticket in the prediction markets feature set
• Follows existing modal patterns from poll_editor_modal.tsx
• Integrates with React Query hooks from PM-6 (useCreatePredictionMarketMutation, useDeployPredictionMarketMutation)
• Uses contract helpers from @hicommonwealth/evm-protocols for wallet transactions
• Two-phase flow: DB record creation (Slice 1) followed by on-chain deployment (Slice 2)
• Must handle wallet connection, transaction signing, and error states gracefully

Implementation Steps

• Create client/scripts/views/modals/PredictionMarketEditorModal.tsx component
• Add form fields: prompt input (textarea), collateral token selector (USDC/WETH/custom ERC20 dropdown), duration picker (slider/input, 1-90 days), resolution threshold slider (default 55%, range 51-99%), initial liquidity amount input
• Integrate useCreatePredictionMarketMutation hook for creating draft DB record
• Integrate wallet connection (via existing wallet context/hooks)
• Implement "Create and Deploy" button handler that: (1) calls createPredictionMarket mutation to create DB record, (2) triggers wallet transaction via contract helper to deploy Governor.propose(), (3) calls deployPredictionMarket mutation with transaction result to record addresses
• Add loading states during each phase (DB creation, wallet tx pending, deployment recording)
• Add error handling for: DB creation failures, wallet connection errors, transaction rejections, gas estimation failures, deployment recording errors
• Add form validation: non-empty prompt, valid duration range, valid threshold range, positive initial liquidity
• Style modal following component_kit patterns with responsive layout
• Add tooltip/help text explaining threshold and TWAP resolution mechanics

Testing Requirements

• Unit tests: Form validation (empty prompt rejected, duration bounds, threshold bounds), state transitions (initial -> creating -> deploying -> success/error)
• Integration tests: Full create-and-deploy flow with mocked wallet and API responses, error recovery scenarios (wallet rejection, tx failure)
• Manual verification: Open modal from thread creation, configure all fields, complete deployment on Base Sepolia, verify market card shows correct parameters and status=active

Acceptance Criteria

• Prompt input accepts multiline text with character limit display
• Collateral selector includes USDC, WETH, and custom ERC20 input field
• Duration picker supports 1-90 day range with visual feedback
• Resolution threshold slider defaults to 55% and shows percentage label
• Initial liquidity input validates positive decimal amounts
• "Create and Deploy" button disabled until form valid
• Loading spinner shown during DB creation and wallet transaction phases
• Error messages display for each failure mode (wallet, tx, API)
• Modal closes on successful deployment
• Query invalidation triggers market card to show new draft/active market
• Component follows existing modal styling patterns
• All text inputs have proper labels and accessibility attributes

Created with Claude by gent