chore(runway): cherry-pick fix(predict): polish World Cup UI tabs and banner cp-7.79.0#30552
Merged
Merged
Conversation
… 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 -->
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. |
5c668b9 to
854b163
Compare
Contributor
🔍 Smart E2E Test Selection⏭️ Smart E2E selection skipped - PR targets a release or stable branch (release/* or stable) All E2E tests pre-selected. |
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.



Description
Fixes several World Cup Predict UI issues:
feature flag list ordering is preserved.
active tab background behavior for other tabs.
default banner aspect ratio.
Changelog
CHANGELOG entry: null
Related issues
Fixes: PRED-897
Manual testing steps
Screenshots/Recordings
Before
N/A
After
N/A
Pre-merge author checklist
Docs and MetaMask Mobile
Coding
Standards.
if applicable
guidelines).
Not required for external contributors.
Performance checks (if applicable)
SRPs
to import wallets with many accounts and tokens
performance metrics
trace()for usage andaddTokenfor an example
For performance guidelines and tooling, see the Performance
Guide.
Pre-merge reviewer checklist
app, test code being changed).
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
Test plan
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 thebanner 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
WorldCupTabButtonand fixesLive 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.