Skip to content

fix(predict): polish World Cup UI tabs and banner cp-7.79.0#30538

Merged
matallui merged 6 commits into
mainfrom
predict/pred-897
May 21, 2026
Merged

fix(predict): polish World Cup UI tabs and banner cp-7.79.0#30538
matallui merged 6 commits into
mainfrom
predict/pred-897

Conversation

@matallui

@matallui matallui commented May 21, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Contributor

Description

Fixes several World Cup Predict UI issues:

  1. Corrects the World Cup footer icon used in the main feed banner.
  2. Removes client-side sorting for World Cup stage tab markets so feature flag list ordering is preserved.
  3. Fixes the active Live tab label/dot colors without changing the active tab background behavior for other tabs.
  4. Optimizes the bundled World Cup banner asset size and aligns the default banner aspect ratio.

Changelog

CHANGELOG entry: null

Related issues

Fixes: PRED-897

Manual testing steps

Feature: Predict World Cup UI polish

  Scenario: user views the World Cup Predict screen
    Given the Predict World Cup feature flag is enabled
    When user opens the World Cup Predict screen
    Then the World Cup tabs render with the correct active and inactive colors
    And the Live tab label and pulsing dot remain readable when selected
    And the World Cup banner renders with the correct icon and aspect ratio

Screenshots/Recordings

Before

N/A

After

N/A

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
    • Ideally on a mid-range device; emulator is acceptable
  • I've tested with a power user scenario
    • Use these power-user SRPs to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

For performance guidelines and tooling, see the Performance Guide.

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.

Test plan

yarn jest app/components/UI/Predict/views/PredictWorldCup/PredictWorldCup.test.tsx app/components/UI/Predict/components/PredictWorldCupMainFeedBanner/PredictWorldCupMainFeedBanner.test.tsx app/components/UI/Predict/queries/worldCup.test.ts app/components/UI/Predict/hooks/usePredictWorldCup.test.ts app/components/UI/Predict/utils/worldCup.test.ts --runInBand

Result: 5 test suites passed, 50 tests passed.

Note

Low Risk
Low risk UI/query behavior tweaks; main functional change is removing client-side sorting for stage markets, which could change stage tab ordering but is limited to World Cup Predict screens.

Overview
Polishes the World Cup Predict UI by updating the main-feed banner’s default image aspect ratio (now 360/177) and explicitly sizing the banner arrow icon.

Adjusts World Cup stage market fetching to stop client-side start-time sorting, preserving the API/flag-provided ordering; corresponding tests are updated for the new expected order.

Refactors tab rendering to a dedicated WorldCupTabButton and fixes Live tab label/dot readability when active by rendering it under an inverted design-system theme while keeping existing active-background behavior.

Reviewed by Cursor Bugbot for commit 0e6ccea. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions

github-actions Bot commented May 21, 2026

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.

@github-actions github-actions Bot added the pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. label May 21, 2026
@matallui matallui added team-predict Predict team and removed pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. labels May 21, 2026
@matallui matallui marked this pull request as ready for review May 21, 2026 16:56
@matallui matallui requested a review from a team as a code owner May 21, 2026 16:56
cursor[bot]
cursor Bot reviewed May 21, 2026
View reviewed changes

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 980867b. Configure here.

Comment thread ...onents/UI/Predict/components/PredictWorldCupMainFeedBanner/PredictWorldCupMainFeedBanner.tsx Outdated
@github-actions

github-actions Bot commented May 21, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokePredictions, SmokeWalletPlatform, SmokeConfirmations
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 90%
click to see 🤖 AI reasoning details

E2E Test Selection:
All 6 changed files are within the app/components/UI/Predict/ directory, adding new World Cup prediction market functionality:

  1. PredictWorldCupMainFeedBanner (component + test + image): A new banner component displayed in the main Predict feed that navigates to the World Cup screen. It tracks analytics via PredictController and conditionally renders based on feature flags.

  2. PredictWorldCup.tsx: A new screen with tabbed navigation (All, Props, Live, Stage-based tabs) for browsing World Cup prediction markets. Uses PredictController for analytics tracking.

  3. worldCup.ts / worldCup.test.ts: Query infrastructure (react-query options) for fetching World Cup markets from the Polymarket API with pagination support.

SmokePredictions: Directly impacted — these changes add new World Cup functionality to the Predictions feature. The banner appears in the main Predict feed and the World Cup screen is a new navigation destination within the Predict flow.

SmokeWalletPlatform: Required per SmokePredictions tag description — "Predictions is also a section inside the Trending tab (SmokeWalletPlatform); changes to Predictions views (headers, lists, full views) affect Trending." The banner is shown in PredictFeed which is accessible from Trending.

SmokeConfirmations: Required per SmokePredictions tag description — "opening/closing positions are on-chain transactions — when selecting SmokePredictions, also select SmokeConfirmations."

No changes to shared infrastructure (navigation, Engine, controllers, modals) that would warrant broader test coverage. Changes are isolated to the Predict feature module.

Performance Test Selection:
No performance-impacting changes detected. The changes add new UI components and query infrastructure to the Predict feature, but do not modify existing list rendering, state management, app startup, login flows, or other performance-sensitive paths. The new components are feature-flagged and only render when enabled, so they won't impact existing performance baselines.

View GitHub Actions results

@matallui matallui changed the title fix(predict): polish World Cup UI tabs and banner fix(predict): polish World Cup UI tabs and banner cp-7.79.0 May 21, 2026
@matallui matallui enabled auto-merge May 21, 2026 18:31
@sonarqubecloud

sonarqubecloud Bot commented May 21, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

@matallui matallui added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label May 21, 2026
@matallui matallui added this pull request to the merge queue May 21, 2026
Merged via the queue into main with commit d2e75ef May 21, 2026
446 of 452 checks passed
@matallui matallui deleted the predict/pred-897 branch May 21, 2026 20:05
@github-actions github-actions Bot locked and limited conversation to collaborators May 21, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.80.0 Issue or pull request that will be included in release 7.80.0 label May 21, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@cursor cursor[bot] cursor[bot] left review comments

@caieu caieu caieu approved these changes

Assignees

No one assigned

Labels

release-7.80.0 Issue or pull request that will be included in release 7.80.0 size-M skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. team-predict Predict team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@matallui @caieu