feat(predict): cp-7.62.0 implement game details action buttons and about sheet by matallui · Pull Request #24540 · MetaMask/metamask-mobile

matallui · 2026-01-15T04:25:39Z

Description

This PR implements the action buttons and about bottom sheet for the Predict NFL game details screen.

Key changes:

PredictActionButtons - New component providing betting buttons (YES/NO or team-based) with proper styling and loading states
PredictBetButton - Individual bet button with dynamic pricing display
PredictClaimButton - Button for claiming winnings with two variants (hero style with amount, standard style without)
PredictGameDetailsFooter - Footer component showing "Pick a winner" label, info icon, volume display, and action buttons
PredictGameAboutSheet - Bottom sheet displaying market description and terms link
usePredictBottomSheet - Hook for managing bottom sheet visibility state

Architecture improvement: The about bottom sheet is rendered at the root level (inside SafeAreaView in PredictGameDetailsContent) rather than inside the footer to ensure the overlay covers the full screen, allowing tap-to-dismiss to work correctly.

Changelog

CHANGELOG entry: null

Related issues

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

Manual testing steps

Feature: NFL Game Details Action Buttons

  Scenario: User views game details footer
    Given user is on an NFL game details screen

    When user views the footer
    Then user sees "Pick a winner" label with info icon
    And user sees volume display (e.g., "$1.5M Vol")
    And user sees two team betting buttons with prices

  Scenario: User taps info button to view about sheet
    Given user is on an NFL game details screen

    When user taps the info icon
    Then the about bottom sheet appears with market description
    And user can see "Read the full contract terms and conditions" link

    When user taps outside the sheet
    Then the bottom sheet closes

  Scenario: User places a bet
    Given user is on an NFL game details screen with open market

    When user taps a team betting button (e.g., "SEA · 65¢")
    Then the buy preview screen opens

  Scenario: User claims winnings
    Given user is on an NFL game details screen with claimable winnings

    When user views the footer
    Then user sees a claim button with the amount (e.g., "Claim $75.50")

    When user taps the claim button
    Then the claim flow initiates

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

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

Implements game-specific actions and info surfaces on the Predict game details screen.

Adds PredictActionButtons (bet YES/NO or team labels with colors; claim button; loading skeleton) and integrates into game views
New PredictGameDetailsFooter showing “Pick a winner”, volume, info button, and hosting action buttons; wired into PredictGameDetailsContent
Adds PredictGameAboutSheet bottom sheet with market description and a terms link (POLYMARKET_TERMS_URL)
Introduces usePredictBottomSheet to manage sheet visibility (simplified open/close behavior)
Wires handlers and claimable amounts into PredictMarketDetails and PredictGameDetailsContent
Adds/updates i18n strings and tests for all new components and hook

^{Written by Cursor Bugbot for commit 038c465. This will update automatically on new commits. Configure here.}

…ailsContent

github-actions · 2026-01-15T04:25:47Z

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.

app/components/UI/Predict/components/PredictActionButtons/PredictBetButton.tsx

- Return null when market is closed/resolved and user has no claimable winnings - Hide 'Pick a winner' info row when showing claim button - Add tests for footer visibility logic

The size prop was defined but never used in PredictBetButton. Remove size prop, PredictBetButtonSize type, and BUTTON_SIZE_MAP constant.

app/components/UI/Predict/components/PredictGameDetailsFooter/PredictGameDetailsFooter.tsx

app/components/UI/Predict/hooks/usePredictBottomSheet.ts

Derive hasClaimableWinnings from claimableAmount > 0 instead of passing both as separate props. This eliminates the edge case where they could disagree and simplifies the component API.

app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.tsx

Show loading skeleton while claimable positions are being fetched to prevent jarring UI transition from bet buttons to claim button.

caieu

LGTM

github-actions · 2026-01-15T20:39:57Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokePredictions
Risk Level: medium
AI Confidence: 92%

click to see 🤖 AI reasoning details

This PR introduces new UI components and modifies existing ones within the Predict (Predictions) feature. The changes include:

New Components: PredictActionButtons, PredictBetButton, PredictBetButtons, PredictClaimButton, PredictGameDetailsFooter, and PredictGameAboutSheet - all related to betting and claiming functionality in prediction markets.
Modified Components: PredictGameDetailsContent now includes a footer with action buttons and an info sheet. PredictMarketDetails was updated to pass bet/claim handlers and loading state.
Hook Fix: usePredictBottomSheet was simplified to fix stale closure issues.
Localization: New strings added for game details footer (pick_a_winner, volume_display, read_terms, claim_winnings_text).
Constants: Added POLYMARKET_TERMS_URL for the about sheet.

All changes are self-contained within the app/components/UI/Predict/ directory and directly relate to the Predictions feature. The E2E tests under e2e/specs/predict/ are tagged with SmokePredictions and cover scenarios like claiming positions, cash out, opening positions, and API/geo restrictions - all relevant to validating these UI changes.

No other features are impacted by these changes, so only the SmokePredictions tag is needed.

View GitHub Actions results

sonarqubecloud · 2026-01-15T21:03:33Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
87.8% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

matallui added 7 commits January 14, 2026 13:59

feat(predict): implement PredictActionButtons

312be4b

feat(predict): implement PredictGameDetailsFooter

63a22fd

feat(predict): integrate PredictGameDetailsFooter into PredictGameDet…

f6eff44

…ailsContent

fix: ui improvements

f34883e

fix(predict): align with guidelines

d244ce8

fix(predict): tune ui for PredictGameAboutSheet

30de472

fix(predict): about bottom sheet

59f095e

metamaskbot added the team-predict Predict team label Jan 15, 2026

github-actions bot added the size-XL label Jan 15, 2026

matallui marked this pull request as ready for review January 15, 2026 04:27

matallui requested a review from a team as a code owner January 15, 2026 04:27

cursor bot reviewed Jan 15, 2026

View reviewed changes

app/components/UI/Predict/components/PredictActionButtons/PredictBetButton.tsx Show resolved Hide resolved

matallui added 2 commits January 14, 2026 21:39

fix(predict): hide footer for closed markets without claimable winnings

d0e55cb

- Return null when market is closed/resolved and user has no claimable winnings - Hide 'Pick a winner' info row when showing claim button - Add tests for footer visibility logic

refactor(predict): remove unused size prop from bet buttons

cf08804

The size prop was defined but never used in PredictBetButton. Remove size prop, PredictBetButtonSize type, and BUTTON_SIZE_MAP constant.

cursor bot reviewed Jan 15, 2026

View reviewed changes

app/components/UI/Predict/components/PredictGameDetailsFooter/PredictGameDetailsFooter.tsx Outdated Show resolved Hide resolved

app/components/UI/Predict/hooks/usePredictBottomSheet.ts Show resolved Hide resolved

matallui added 3 commits January 15, 2026 11:06

fix(predict): address ai code review

935fb3a

refactor(predict): remove redundant hasClaimableWinnings prop

b7893f3

Derive hasClaimableWinnings from claimableAmount > 0 instead of passing both as separate props. This eliminates the edge case where they could disagree and simplifies the component API.

Merge branch 'main' into predict/game-action-buttons

a9699d7

cursor bot reviewed Jan 15, 2026

View reviewed changes

app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.tsx Show resolved Hide resolved

fix(predict): pass isLoading to game details content

038c465

Show loading skeleton while claimable positions are being fetched to prevent jarring UI transition from bet buttons to claim button.

caieu approved these changes Jan 15, 2026

View reviewed changes

kevinbluer approved these changes Jan 15, 2026

View reviewed changes

matallui enabled auto-merge January 15, 2026 20:51

matallui added this pull request to the merge queue Jan 15, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 15, 2026

matallui changed the title ~~feat(predict): implement game details action buttons and about sheet~~ feat(predict): cp-7.62.0implement game details action buttons and about sheet Jan 15, 2026

matallui changed the title ~~feat(predict): cp-7.62.0implement game details action buttons and about sheet~~ feat(predict): cp-7.62.0 implement game details action buttons and about sheet Jan 15, 2026

matallui added this pull request to the merge queue Jan 15, 2026

Merged via the queue into main with commit 85ed4b9 Jan 15, 2026
153 of 156 checks passed

matallui deleted the predict/game-action-buttons branch January 15, 2026 22:25

github-actions bot locked and limited conversation to collaborators Jan 15, 2026

metamaskbot added the release-7.63.0 Issue or pull request that will be included in release 7.63.0 label Jan 15, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(predict): cp-7.62.0 implement game details action buttons and about sheet #24540

feat(predict): cp-7.62.0 implement game details action buttons and about sheet #24540
matallui merged 13 commits intomainfrom
predict/game-action-buttons

matallui commented Jan 15, 2026 •

edited by cursor bot

Loading

Uh oh!

github-actions bot commented Jan 15, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

caieu left a comment

Uh oh!

github-actions bot commented Jan 15, 2026

Uh oh!

sonarqubecloud bot commented Jan 15, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

matallui commented Jan 15, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Jan 15, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

caieu left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 15, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud bot commented Jan 15, 2026

Quality Gate passed

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

matallui commented Jan 15, 2026 •

edited by cursor bot

Loading