Skip to content

Build Prediction Market Widget#13378

Merged
dillchen merged 11 commits intomasterfrom
mz/feature-13373-build-prediction-market-card-component-p
Mar 9, 2026
Merged

Build Prediction Market Widget#13378
dillchen merged 11 commits intomasterfrom
mz/feature-13373-build-prediction-market-card-component-p

Conversation

@mzparacha
Copy link
Contributor

@mzparacha mzparacha commented Feb 11, 2026

Description

image

Implements the read-only prediction market card component for displaying market information within thread views (GitHub issue #13373 / PM-7a).

Changes

Frontend Component (PM-7a)

  • ThreadPredictionMarketCard.tsx: Card component following ThreadPollCard pattern
    • Status badge display with color coding (draft/active/resolved/cancelled)
    • Probability bar visualization showing green (PASS) / red (FAIL) proportional fill
    • Total collateral locked display (formatted with K/M suffixes)
    • Time remaining countdown (days/hours/minutes)
    • Cancel button (auth-gated to thread author for draft/active markets only)
    • Skeleton loading state with pulse animation
    • Responsive layout with mobile breakpoints
  • prediction_market_cards.scss: Styling following design system patterns

Data Layer (PM-2, PM-5, PM-6)

Since the card component required backend data, also implemented:

Backend:

  • GetPredictionMarkets.query.ts: Query aggregate with pagination support
  • CancelPredictionMarket.command.ts: Command with thread author auth validation
  • prediction-market.ts: tRPC API router with query and mutation endpoints
  • Updated external-router.ts to expose prediction market routes
  • Added PredictionMarket tag to tRPC types enum

Frontend Hooks:

  • useGetPredictionMarketsQuery: Fetches markets by thread_id (30s stale time)
  • useCancelPredictionMarketMutation: Cancels market and invalidates cache

Testing

  • ✅ TypeScript compilation passes (pnpm build)
  • ✅ Linting passes (pnpm lint-branch-warnings)
  • ✅ Follows existing patterns (ThreadPollCard, PollCard)

UI Features

  • Status badges with proper color coding for each status
  • Probability visualization with proportional green/red bars
  • Formatted collateral display (converts from wei to readable format)
  • Time remaining countdown (shows days, hours, or minutes)
  • Cancel confirmation modal
  • Skeleton loading state
  • Responsive design for mobile/tablet/desktop

Related

🤖 Generated with Claude Code

@Rotorsoft
Copy link
Contributor

@mzparacha did you merge my second PR here?

@mzparacha
Copy link
Contributor Author

nope, just the initial version of prediction market spec

@mzparacha mzparacha linked an issue Feb 12, 2026 that may be closed by this pull request
17 tasks
@mzparacha mzparacha marked this pull request as ready for review February 17, 2026 16:43
- ThreadPredictionMarketCard component with status, probability bar, collateral, countdown
- Prediction market API hooks (getPredictionMarkets, cancelPredictionMarket)
- ViewThreadPage integration and predictionMarketUtils
- Styles: ThreadPredictionMarketCard.scss

Client-side only; backend/API from PR 13393 when ready.

Co-authored-by: Cursor <cursoragent@cursor.com>
@mzparacha mzparacha force-pushed the mz/feature-13373-build-prediction-market-card-component-p branch from b8f7079 to 07c14e4 Compare February 19, 2026 19:08
@mzparacha mzparacha linked an issue Feb 26, 2026 that may be closed by this pull request
5 tasks
@mzparacha mzparacha changed the title feat: Build Prediction Market Card Component (PM-7a) WIP: Build Prediction Market Widget Feb 26, 2026
@mzparacha mzparacha marked this pull request as draft February 26, 2026 17:43
…rafts

- Store initial_liquidity on prediction markets (migration, model, schema)
- Include initial_liquidity in create and deploy APIs
- Validate Ethereum addresses before on-chain deploy
- Allow cancel only for draft markets, not active
- Filter out cancelled markets and show one active market per thread
- Add collateral address validation in DeployDraftPredictionMarketModal

Made-with: Cursor
@mzparacha mzparacha changed the title WIP: Build Prediction Market Widget Build Prediction Market Widget Mar 4, 2026
@mzparacha mzparacha marked this pull request as ready for review March 4, 2026 18:16
@dillchen dillchen merged commit 39a1ec9 into master Mar 9, 2026
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

PM-8: Thread View — Sidebar Card + Editor Card Build Prediction Market Card Component (PM-7a)

4 participants