Skip to content

feat(predict): cp-7.62.0 add PredictPicks components for position display#24579

Merged
matallui merged 9 commits intomainfrom
predict/picks
Jan 15, 2026
Merged

feat(predict): cp-7.62.0 add PredictPicks components for position display#24579
matallui merged 9 commits intomainfrom
predict/picks

Conversation

@caieu
Copy link
Copy Markdown
Contributor

@caieu caieu commented Jan 15, 2026

Description

Adds new PredictPicks components to display user positions in prediction markets.

What changed:

  • PredictPicks - Main component showing user picks with position details (size, outcome, P&L) and "Cash Out" button on market details view
  • PredictPicksForCard - Compact version for displaying picks within market cards with P&L and amount display

Why:
Users need visibility into their active positions on market detail views to track their picks and take action (cash out).

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/PRED-479

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Screenshot 2026-01-15 at 17 54 00 Screenshot 2026-01-15 at 17 55 41

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Adds UI to surface a user's active positions with live P&L and cash-out flow, plus underlying live-price integration.

  • New PredictPicks (market details) and PredictPicksForCard (compact) components show initialValue, outcome, live cashPnl, and amount (card), with a "Cash out" button navigating to Routes.PREDICT.MODALS.SELL_PREVIEW via usePredictActionGuard
  • New useLivePositions hook computes live currentValue, cashPnl, and percentPnl from bestBid updates (via useLiveMarketPrices), returns connection status and lastUpdateTime; exported in hooks/index
  • Hooks wired with autoRefreshTimeout: 10000; outcomes resolved by position.outcomeId; currency formatting via formatPrice
  • i18n: added predict.market_details.your_picks, predict.position_pick_info, and predict.position_pick_info_to_win
  • Comprehensive tests for components and hook behavior (rendering states, formatting, colors, navigation, and live calculations)

Written by Cursor Bugbot for commit 170f091. This will update automatically on new commits. Configure here.

@github-actions
Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbot metamaskbot added the team-predict Predict team label Jan 15, 2026
@github-actions github-actions bot added size-XL and removed size-L labels Jan 15, 2026
@caieu caieu marked this pull request as ready for review January 15, 2026 20:42
@caieu caieu requested a review from a team as a code owner January 15, 2026 20:42
@github-actions
Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokePredictions
  • Risk Level: medium
  • AI Confidence: 90%
click to see 🤖 AI reasoning details

The PR introduces new components and hooks specifically for the Predictions feature:

  1. New Components: PredictPicks.tsx and PredictPicksForCard.tsx - UI components for displaying user's prediction positions with cash out functionality
  2. New Hook: useLivePositions.ts - Provides live-updated positions based on real-time market prices via WebSocket
  3. Localization: Added new strings for the predictions feature in en.json
  4. Unit Tests: Comprehensive unit tests are included for all new components and hooks

All changes are contained within the app/components/UI/Predict/ directory and are additive (new files only). The existing E2E tests in e2e/specs/predict/ directory use the SmokePredictions tag and cover various prediction scenarios including cash-out functionality, which is directly related to the new PredictPicks component.

The changes don't affect any core wallet functionality, controllers, or other features. They are isolated to the Predictions feature, making SmokePredictions the only relevant tag to run.

View GitHub Actions results

@sonarqubecloud
Copy link
Copy Markdown

@matallui matallui changed the title feat(predict): add PredictPicks components for position display feat(predict): cp-7.62.0 add PredictPicks components for position display Jan 15, 2026
@matallui matallui added this pull request to the merge queue Jan 15, 2026
Merged via the queue into main with commit d0ae183 Jan 15, 2026
87 of 88 checks passed
@matallui matallui deleted the predict/picks branch January 15, 2026 22:30
@github-actions github-actions bot locked and limited conversation to collaborators Jan 15, 2026
@metamaskbot metamaskbot added the release-7.63.0 Issue or pull request that will be included in release 7.63.0 label Jan 15, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-7.63.0 Issue or pull request that will be included in release 7.63.0 size-XL team-predict Predict team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants