Skip to content

chore(runway): cherry-pick fix(predict): polish World Cup UI tabs and banner cp-7.79.0#30552

Merged
chloeYue merged 1 commit into
release/7.79.0from
runway-cherry-pick-7.79.0-1779394353
May 21, 2026
Merged

chore(runway): cherry-pick fix(predict): polish World Cup UI tabs and banner cp-7.79.0#30552
chloeYue merged 1 commit into
release/7.79.0from
runway-cherry-pick-7.79.0-1779394353

Conversation

@runway-github

@runway-github runway-github Bot commented May 21, 2026

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
  • See trace() for usage and
    addToken
    for an example

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.

[d2e75ef](https://github.com/MetaMask/metamask-mobile/commit/d2e75ef5405587459fc613ee803a3fd33d23baef)

… banner cp-7.79.0 (#30538)

## **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**

```gherkin
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**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### 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](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **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

```bash
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.

<!-- CURSOR_SUMMARY -->
---

> [!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.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
0e6ccea. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
@runway-github runway-github Bot requested a review from a team as a code owner May 21, 2026 20:12
@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.

@metamaskbotv2 metamaskbotv2 Bot added the team-bots Bot team (for MetaMask Bot, Runway Bot, etc.) label May 21, 2026
@runway-github runway-github Bot force-pushed the runway-cherry-pick-7.79.0-1779394353 branch from 5c668b9 to 854b163 Compare May 21, 2026 20:13

@chloeYue chloeYue 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.

LGTM

@github-actions

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - PR targets a release or stable branch (release/* or stable)

All E2E tests pre-selected.

View GitHub Actions results

@sonarqubecloud

Copy link
Copy Markdown

@chloeYue chloeYue added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label May 21, 2026
@chloeYue chloeYue merged commit c8174d9 into release/7.79.0 May 21, 2026
308 of 310 checks passed
@chloeYue chloeYue deleted the runway-cherry-pick-7.79.0-1779394353 branch May 21, 2026 21:15
@github-actions github-actions Bot locked and limited conversation to collaborators May 21, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

size-M skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. team-bots Bot team (for MetaMask Bot, Runway Bot, etc.)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants