feat(predict): update World Cup banner (MetaMask#30480)

## **Description**

Updates the Predict World Cup main feed banner to match the latest Figma
card design. The banner now renders as a muted card with the World Cup
image, title, description, and a filled icon button in the footer.

Also updates the Predict World Cup feature flag image override from a
single URL to a structured `bannerImage` object containing `{ url,
width, height }`, so remote images can preserve their intended aspect
ratio while still falling back to a safe default aspect ratio when
dimensions are missing or invalid.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: PRED-895

## **Manual testing steps**

```gherkin
Feature: Predict World Cup main feed banner

  Scenario: user views the Predict feed with World Cup enabled
    Given the Predict World Cup feature flag is enabled
    And showMainFeedBanner and showWorldCupScreen are enabled

    When user opens the Predict feed
    Then the World Cup banner is displayed as a card with an image, title, description, and arrow button

  Scenario: user taps the World Cup banner
    Given the World Cup banner is visible on the Predict feed

    When user taps the banner
    Then user is navigated to the World Cup Predictions screen
```

## **Screenshots/Recordings**

### **Before**

N/A

### **After**

<img width="350" alt="Simulator Screenshot - mm-blue - 2026-05-20 at 15
16 24"
src="https://github.com/user-attachments/assets/088e1035-373e-4f23-bd3e-736d6930ff7b"
/>


## **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
- [x] 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.

## Testing

```bash
yarn jest app/components/UI/Predict/components/PredictWorldCupMainFeedBanner/PredictWorldCupMainFeedBanner.test.tsx app/components/UI/Predict/schemas/flags.test.ts app/components/UI/Predict/utils/resolvePredictFeatureFlags.test.ts --runInBand
```

Result: 3 test suites passed, 53 tests passed.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Moderate risk because it changes the remote feature-flag schema/type
for the World Cup banner image (from `bannerImageUrl` to structured
`bannerImage`) and updates banner sizing logic based on provided
dimensions, which could impact rendering if remote config is malformed.
> 
> **Overview**
> Updates the Predict World Cup main-feed banner to a card-style layout
with footer copy (title/description) and a filled arrow `ButtonIcon`,
while keeping the same navigation/tracking behavior.
> 
> Reworks the World Cup feature-flag image override from
`bannerImageUrl` to a structured `bannerImage` object (`{ url, width,
height }`) and introduces `getPredictWorldCupBannerImageAspectRatio` to
compute banner height from configured dimensions with a safe default
fallback; associated schema/type and unit tests are updated accordingly,
and the English banner description string is revised.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
580875f. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: matallui

app/components/UI/Predict/assets/world-cup-main-feed-banner.png

@@ -1,12 +1,13 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import { fireEvent, render } from '@testing-library/react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import Routes from '../../../../../constants/navigation/Routes';
 import { DEFAULT_PREDICT_WORLD_CUP_FLAG } from '../../constants/flags';
 import { PredictEventValues } from '../../constants/eventNames';
 import PredictWorldCupMainFeedBanner, {
+  getPredictWorldCupBannerImageAspectRatio,
   getPredictWorldCupBannerSource,
 } from './PredictWorldCupMainFeedBanner';
 import { PredictWorldCupMainFeedBannerSelectorsIDs } from './PredictWorldCupMainFeedBanner.testIds';
@@ -19,19 +20,6 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }));
 
-jest.mock('react-native', () => {
-  const actualReactNative = jest.requireActual('react-native');
-  return {
-    ...actualReactNative,
-    useWindowDimensions: jest.fn(() => ({
-      width: 393,
-      height: 852,
-      scale: 3,
-      fontScale: 1,
-    })),
-  };
-});
-
 const mockUseNavigation = useNavigation as jest.Mock;
 const mockUseSelector = useSelector as jest.Mock;
 const mockNavigate = jest.fn();
@@ -75,18 +63,24 @@ describe('PredictWorldCupMainFeedBanner', () => {
     ).toBeOnTheScreen();
   });
 
-  it('uses the remote banner image URL when configured', () => {
+  it('uses the remote banner image URL and configured dimensions when configured', () => {
     const bannerImageUrl = 'https://example.com/world-cup-banner.png';
     mockUseSelector.mockReturnValue({
       ...enabledConfig,
-      bannerImageUrl,
+      bannerImage: {
+        url: bannerImageUrl,
+        width: 300,
+        height: 100,
+      },
     });
 
     const { getByTestId } = render(<PredictWorldCupMainFeedBanner />);
     const image = getByTestId(PredictWorldCupMainFeedBannerSelectorsIDs.IMAGE);
 
     expect(image.props.source).toStrictEqual({ uri: bannerImageUrl });
-    expect(StyleSheet.flatten(image.props.style).height).toBeGreaterThan(0);
+    expect(StyleSheet.flatten(image.props.style).height).toBeCloseTo(
+      (Dimensions.get('window').width - 32) / 3,
+    );
   });
 
   it('does not render when the main feed banner is disabled', () => {
@@ -159,10 +153,39 @@ describe('PredictWorldCupMainFeedBanner', () => {
   });
 });
 
+describe('getPredictWorldCupBannerImageAspectRatio', () => {
+  it('returns configured image aspect ratio when dimensions are provided', () => {
+    expect(
+      getPredictWorldCupBannerImageAspectRatio({
+        url: 'https://example.com/banner.png',
+        width: 300,
+        height: 100,
+      }),
+    ).toBe(3);
+  });
+
+  it('returns default image aspect ratio when dimensions are missing', () => {
+    expect(getPredictWorldCupBannerImageAspectRatio()).toBe(2);
+  });
+
+  it('returns default image aspect ratio when dimensions are invalid', () => {
+    expect(
+      getPredictWorldCupBannerImageAspectRatio({
+        url: 'https://example.com/banner.png',
+        width: 0,
+        height: -200,
+      }),
+    ).toBe(2);
+  });
+});
+
 describe('getPredictWorldCupBannerSource', () => {
   it('returns a trimmed remote URI source before the fallback image source', () => {
     expect(
-      getPredictWorldCupBannerSource(' https://example.com/banner.png ', 1),
+      getPredictWorldCupBannerSource(
+        { url: ' https://example.com/banner.png ', width: 400, height: 200 },
+        1,
+      ),
     ).toStrictEqual({ uri: 'https://example.com/banner.png' });
   });
 

app/components/UI/Predict/components/PredictWorldCupMainFeedBanner/PredictWorldCupMainFeedBanner.test.tsx

@@ -3,11 +3,23 @@ import {
   Image,
   ImageSourcePropType,
   Pressable,
+  View,
   useWindowDimensions,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import {
+  ButtonIcon,
+  ButtonIconSize,
+  ButtonIconVariant,
+  FontWeight,
+  IconName,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+import { strings } from '../../../../../../locales/i18n';
 import Routes from '../../../../../constants/navigation/Routes';
 import Engine from '../../../../../core/Engine';
 import { selectPredictWorldCupConfig } from '../../selectors/featureFlags';
@@ -17,16 +29,16 @@ import { PredictWorldCupMainFeedBannerSelectorsIDs } from './PredictWorldCupMain
 
 import worldCupMainFeedBannerImage from '../../assets/world-cup-main-feed-banner.png';
 
-const WORLD_CUP_BANNER_ASPECT_RATIO = 360 / 177;
+const WORLD_CUP_BANNER_DEFAULT_IMAGE_ASPECT_RATIO = 2;
 const WORLD_CUP_BANNER_HORIZONTAL_MARGIN = 16;
 const WORLD_CUP_BANNER_HORIZONTAL_MARGIN_TOTAL =
   WORLD_CUP_BANNER_HORIZONTAL_MARGIN * 2;
 
 export const getPredictWorldCupBannerSource = (
-  bannerImageUrl?: string,
+  bannerImage?: PredictWorldCupConfig['bannerImage'],
   fallbackImageSource?: ImageSourcePropType,
 ): ImageSourcePropType | undefined => {
-  const trimmedBannerImageUrl = bannerImageUrl?.trim();
+  const trimmedBannerImageUrl = bannerImage?.url.trim();
 
   if (trimmedBannerImageUrl) {
     return { uri: trimmedBannerImageUrl };
@@ -35,6 +47,16 @@ export const getPredictWorldCupBannerSource = (
   return fallbackImageSource;
 };
 
+export const getPredictWorldCupBannerImageAspectRatio = (
+  bannerImage?: PredictWorldCupConfig['bannerImage'],
+): number => {
+  if (bannerImage && bannerImage.width > 0 && bannerImage.height > 0) {
+    return bannerImage.width / bannerImage.height;
+  }
+
+  return WORLD_CUP_BANNER_DEFAULT_IMAGE_ASPECT_RATIO;
+};
+
 interface PredictWorldCupMainFeedBannerProps {
   fallbackImageSource?: ImageSourcePropType | null;
 }
@@ -60,7 +82,10 @@ const PredictWorldCupMainFeedBanner: React.FC<
     windowWidth - WORLD_CUP_BANNER_HORIZONTAL_MARGIN_TOTAL,
     0,
   );
-  const bannerHeight = bannerWidth / WORLD_CUP_BANNER_ASPECT_RATIO;
+  const bannerImageAspectRatio = getPredictWorldCupBannerImageAspectRatio(
+    predictWorldCupConfig.bannerImage,
+  );
+  const bannerImageHeight = bannerWidth / bannerImageAspectRatio;
 
   const resolvedFallbackImageSource =
     fallbackImageSource === undefined
@@ -71,7 +96,7 @@ const PredictWorldCupMainFeedBanner: React.FC<
     () =>
       shouldRenderBanner(predictWorldCupConfig)
         ? getPredictWorldCupBannerSource(
-            predictWorldCupConfig.bannerImageUrl,
+            predictWorldCupConfig.bannerImage,
             resolvedFallbackImageSource,
           )
         : undefined,
@@ -114,12 +139,38 @@ const PredictWorldCupMainFeedBanner: React.FC<
       style={tw.style('mx-4 pb-3')}
       testID={PredictWorldCupMainFeedBannerSelectorsIDs.CONTAINER}
     >
-      <Image
-        source={imageSource}
-        resizeMode="cover"
-        testID={PredictWorldCupMainFeedBannerSelectorsIDs.IMAGE}
-        style={tw.style('w-full rounded-xl', { height: bannerHeight })}
-      />
+      <View style={tw.style('bg-muted rounded-xl overflow-hidden')}>
+        <Image
+          source={imageSource}
+          resizeMode="cover"
+          testID={PredictWorldCupMainFeedBannerSelectorsIDs.IMAGE}
+          style={tw.style('w-full rounded-t-xl', { height: bannerImageHeight })}
+        />
+        <View style={tw.style('flex-row items-center justify-between p-3')}>
+          <View style={tw.style('flex-shrink')}>
+            <Text
+              variant={TextVariant.BodyMd}
+              color={TextColor.TextDefault}
+              fontWeight={FontWeight.Medium}
+            >
+              {strings('predict.world_cup.banner_title')}
+            </Text>
+            <Text
+              variant={TextVariant.BodySm}
+              color={TextColor.TextAlternative}
+            >
+              {strings('predict.world_cup.banner_description')}
+            </Text>
+          </View>
+          <ButtonIcon
+            accessibilityLabel={strings('predict.world_cup.banner_title')}
+            iconName={IconName.ArrowRight}
+            onPress={handlePress}
+            size={ButtonIconSize.Md}
+            variant={ButtonIconVariant.Filled}
+          />
+        </View>
+      </View>
     </Pressable>
   );
 };

app/components/UI/Predict/components/PredictWorldCupMainFeedBanner/PredictWorldCupMainFeedBanner.tsx

@@ -217,7 +217,11 @@ describe('PredictWorldCupSchema', () => {
       seriesId: '11433',
       tagSlug: 'fifa-world-cup',
       gamesTagId: '100639',
-      bannerImageUrl: 'https://example.com/banner.png',
+      bannerImage: {
+        url: 'https://example.com/banner.png',
+        width: 400,
+        height: 200,
+      },
       stages: [
         {
           key: 'group_stage',

app/components/UI/Predict/schemas/flags.test.ts

@@ -76,7 +76,13 @@ export const PredictWorldCupSchema = defaulted(
       string(),
       () => DEFAULT_PREDICT_WORLD_CUP_FLAG.gamesTagId,
     ),
-    bannerImageUrl: optional(string()),
+    bannerImage: optional(
+      object({
+        url: string(),
+        width: number(),
+        height: number(),
+      }),
+    ),
     stages: defaulted(array(PredictWorldCupStageSchema), () => []),
   }),
   () => DEFAULT_PREDICT_WORLD_CUP_FLAG,

app/components/UI/Predict/schemas/flags.ts

@@ -37,7 +37,11 @@ export interface PredictWorldCupConfig extends VersionGatedFeatureFlag {
   seriesId: string;
   tagSlug: string;
   gamesTagId: string;
-  bannerImageUrl?: string;
+  bannerImage?: {
+    url: string;
+    width: number;
+    height: number;
+  };
   stages: PredictWorldCupStageConfig[];
 }
 

app/components/UI/Predict/types/flags.ts

@@ -236,7 +236,11 @@ describe('resolvePredictFeatureFlags', () => {
             showMainFeedBanner: true,
             showMainFeedTab: true,
             showWorldCupScreen: true,
-            bannerImageUrl: 'https://example.com/banner.png',
+            bannerImage: {
+              url: 'https://example.com/banner.png',
+              width: 400,
+              height: 200,
+            },
             stages: [
               {
                 key: 'group_stage',
@@ -255,7 +259,11 @@ describe('resolvePredictFeatureFlags', () => {
         showMainFeedBanner: true,
         showMainFeedTab: true,
         showWorldCupScreen: true,
-        bannerImageUrl: 'https://example.com/banner.png',
+        bannerImage: {
+          url: 'https://example.com/banner.png',
+          width: 400,
+          height: 200,
+        },
         stages: [
           {
             key: 'group_stage',

app/components/UI/Predict/utils/resolvePredictFeatureFlags.test.ts

@@ -2243,7 +2243,7 @@
     "world_cup": {
       "title": "World Cup",
       "banner_title": "World Cup 2026",
-      "banner_description": "Trade on World Cup markets",
+      "banner_description": "Trade every match, every moment.",
       "tabs": {
         "all": "All",
         "props": "Props",