feat(predict): add World Cup feed banner (#30070)

## **Description**

Adds the Predict World Cup promotional banner entry point to the main
Predict feed for PRED-880.

This change:
- Renders the banner only when `predictWorldCup.enabled`,
`showMainFeedBanner`, and `showWorldCupScreen` are enabled.
- Uses the feature flag `bannerImageUrl` when present.
- Falls back to the bundled Figma banner asset when no remote image URL
is configured.
- Navigates users to `Routes.PREDICT.WORLD_CUP` when tapped.
- Adds unit coverage for enabled, disabled, missing-image, remote-image,
and tap behavior.

## **Changelog**

CHANGELOG entry: Added a World Cup promotional banner to the Predict
feed.

## **Related issues**

Fixes:
[PRED-880](https://consensyssoftware.atlassian.net/browse/PRED-880)

## **Manual testing steps**

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

  Scenario: user opens the World Cup feed from the Predict feed banner
    Given the Predict World Cup feature flag is enabled
    And showMainFeedBanner is enabled
    And showWorldCupScreen is enabled
    And no bannerImageUrl is configured

    When user opens the main Predict feed
    Then the bundled World Cup banner is shown above the Predict feed tabs

    When user taps the banner
    Then the app navigates to the Predict World Cup screen
```

## **Screenshots/Recordings**

### **Before**

N/A

### **After**

<img width="320" alt="Simulator Screenshot - mm-blue - 2026-05-12 at 16
03 50"
src="https://github.com/user-attachments/assets/54ba08e7-7696-446b-b3e6-e315466781a6"
/>


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

## Validation

- `yarn lint:tsc --pretty false`
- `NODE_OPTIONS=--max-old-space-size=8192 yarn jest
app/components/UI/Predict/components/PredictWorldCupMainFeedBanner/PredictWorldCupMainFeedBanner.test.tsx
app/components/UI/Predict/views/PredictFeed/PredictFeed.test.tsx
--runInBand --forceExit`


[PRED-880]:
https://consensyssoftware.atlassian.net/browse/PRED-880?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk UI-only change gated behind existing Predict World Cup
feature flags, plus a new navigation route constant/type; minimal impact
when flags are off.
> 
> **Overview**
> Adds a new `PredictWorldCupMainFeedBanner` component to the main
Predict feed header as a **feature-flagged** promo entry point,
rendering only when `predictWorldCup.enabled`, `showMainFeedBanner`, and
`showWorldCupScreen` are true.
> 
> The banner supports a remotely configured `bannerImageUrl` (trimmed)
with a bundled image fallback, and navigates to the new
`Routes.PREDICT.WORLD_CUP` / `PredictWorldCup` route on tap. Includes
unit tests covering render gating, image source selection, and
navigation behavior.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
1ed2978. 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

@@ -0,0 +1,138 @@
+import React from 'react';
+import { 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 PredictWorldCupMainFeedBanner, {
+  getPredictWorldCupBannerSource,
+} from './PredictWorldCupMainFeedBanner';
+import { PredictWorldCupMainFeedBannerSelectorsIDs } from './PredictWorldCupMainFeedBanner.testIds';
+
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: jest.fn(),
+}));
+
+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();
+
+const enabledConfig = {
+  ...DEFAULT_PREDICT_WORLD_CUP_FLAG,
+  enabled: true,
+  showMainFeedBanner: true,
+  showWorldCupScreen: true,
+};
+
+describe('PredictWorldCupMainFeedBanner', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseNavigation.mockReturnValue({ navigate: mockNavigate });
+    mockUseSelector.mockReturnValue(enabledConfig);
+  });
+
+  it('renders when the banner and World Cup screen are enabled and fallback image exists', () => {
+    const { getByTestId } = render(<PredictWorldCupMainFeedBanner />);
+
+    expect(
+      getByTestId(PredictWorldCupMainFeedBannerSelectorsIDs.CONTAINER),
+    ).toBeOnTheScreen();
+    expect(
+      getByTestId(PredictWorldCupMainFeedBannerSelectorsIDs.IMAGE),
+    ).toBeOnTheScreen();
+  });
+
+  it('uses the remote banner image URL when configured', () => {
+    const bannerImageUrl = 'https://example.com/world-cup-banner.png';
+    mockUseSelector.mockReturnValue({
+      ...enabledConfig,
+      bannerImageUrl,
+    });
+
+    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);
+  });
+
+  it('does not render when the main feed banner is disabled', () => {
+    mockUseSelector.mockReturnValue({
+      ...enabledConfig,
+      showMainFeedBanner: false,
+    });
+
+    const { queryByTestId } = render(<PredictWorldCupMainFeedBanner />);
+
+    expect(
+      queryByTestId(PredictWorldCupMainFeedBannerSelectorsIDs.CONTAINER),
+    ).toBeNull();
+  });
+
+  it('does not render when the World Cup screen is disabled', () => {
+    mockUseSelector.mockReturnValue({
+      ...enabledConfig,
+      showWorldCupScreen: false,
+    });
+
+    const { queryByTestId } = render(<PredictWorldCupMainFeedBanner />);
+
+    expect(
+      queryByTestId(PredictWorldCupMainFeedBannerSelectorsIDs.CONTAINER),
+    ).toBeNull();
+  });
+
+  it('does not render when there is no remote image URL or fallback image', () => {
+    const { queryByTestId } = render(
+      <PredictWorldCupMainFeedBanner fallbackImageSource={null} />,
+    );
+
+    expect(
+      queryByTestId(PredictWorldCupMainFeedBannerSelectorsIDs.CONTAINER),
+    ).toBeNull();
+  });
+
+  it('navigates to the World Cup screen when pressed', () => {
+    const { getByTestId } = render(<PredictWorldCupMainFeedBanner />);
+
+    fireEvent.press(
+      getByTestId(PredictWorldCupMainFeedBannerSelectorsIDs.CONTAINER),
+    );
+
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.PREDICT.WORLD_CUP);
+  });
+});
+
+describe('getPredictWorldCupBannerSource', () => {
+  it('returns a trimmed remote URI source before the fallback image source', () => {
+    expect(
+      getPredictWorldCupBannerSource(' https://example.com/banner.png ', 1),
+    ).toStrictEqual({ uri: 'https://example.com/banner.png' });
+  });
+
+  it('returns the fallback image source when remote URL is missing', () => {
+    expect(getPredictWorldCupBannerSource(undefined, 1)).toBe(1);
+  });
+
+  it('returns undefined when remote URL and fallback are both missing', () => {
+    expect(getPredictWorldCupBannerSource()).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,4 @@
+export const PredictWorldCupMainFeedBannerSelectorsIDs = {
+  CONTAINER: 'predict-world-cup-main-feed-banner',
+  IMAGE: 'predict-world-cup-main-feed-banner-image',
+} as const;

app/components/UI/Predict/components/PredictWorldCupMainFeedBanner/PredictWorldCupMainFeedBanner.testIds.ts

@@ -0,0 +1,103 @@
+import React, { useCallback, useMemo } from 'react';
+import {
+  Image,
+  ImageSourcePropType,
+  Pressable,
+  useWindowDimensions,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useSelector } from 'react-redux';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import Routes from '../../../../../constants/navigation/Routes';
+import { selectPredictWorldCupConfig } from '../../selectors/featureFlags';
+import type { PredictWorldCupConfig } from '../../types/flags';
+import { PredictWorldCupMainFeedBannerSelectorsIDs } from './PredictWorldCupMainFeedBanner.testIds';
+
+import worldCupMainFeedBannerImage from '../../assets/world-cup-main-feed-banner.png';
+
+const WORLD_CUP_BANNER_ASPECT_RATIO = 360 / 177;
+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,
+  fallbackImageSource?: ImageSourcePropType,
+): ImageSourcePropType | undefined => {
+  const trimmedBannerImageUrl = bannerImageUrl?.trim();
+
+  if (trimmedBannerImageUrl) {
+    return { uri: trimmedBannerImageUrl };
+  }
+
+  return fallbackImageSource;
+};
+
+interface PredictWorldCupMainFeedBannerProps {
+  fallbackImageSource?: ImageSourcePropType | null;
+}
+
+const shouldRenderBanner = ({
+  enabled,
+  showMainFeedBanner,
+  showWorldCupScreen,
+}: Pick<
+  PredictWorldCupConfig,
+  'enabled' | 'showMainFeedBanner' | 'showWorldCupScreen'
+>): boolean => enabled && showMainFeedBanner && showWorldCupScreen;
+
+const PredictWorldCupMainFeedBanner: React.FC<
+  PredictWorldCupMainFeedBannerProps
+> = ({ fallbackImageSource }) => {
+  const tw = useTailwind();
+  const { width: windowWidth } = useWindowDimensions();
+  const navigation = useNavigation();
+  const predictWorldCupConfig = useSelector(selectPredictWorldCupConfig);
+  const bannerWidth = Math.max(
+    windowWidth - WORLD_CUP_BANNER_HORIZONTAL_MARGIN_TOTAL,
+    0,
+  );
+  const bannerHeight = bannerWidth / WORLD_CUP_BANNER_ASPECT_RATIO;
+
+  const resolvedFallbackImageSource =
+    fallbackImageSource === undefined
+      ? worldCupMainFeedBannerImage
+      : (fallbackImageSource ?? undefined);
+
+  const imageSource = useMemo(
+    () =>
+      shouldRenderBanner(predictWorldCupConfig)
+        ? getPredictWorldCupBannerSource(
+            predictWorldCupConfig.bannerImageUrl,
+            resolvedFallbackImageSource,
+          )
+        : undefined,
+    [resolvedFallbackImageSource, predictWorldCupConfig],
+  );
+
+  const handlePress = useCallback(() => {
+    navigation.navigate(Routes.PREDICT.WORLD_CUP);
+  }, [navigation]);
+
+  if (!imageSource) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={handlePress}
+      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 })}
+      />
+    </Pressable>
+  );
+};
+
+export default PredictWorldCupMainFeedBanner;

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

@@ -0,0 +1,3 @@
+export { default } from './PredictWorldCupMainFeedBanner';
+export { getPredictWorldCupBannerSource } from './PredictWorldCupMainFeedBanner';
+export { PredictWorldCupMainFeedBannerSelectorsIDs } from './PredictWorldCupMainFeedBanner.testIds';

app/components/UI/Predict/components/PredictWorldCupMainFeedBanner/index.ts

@@ -100,6 +100,7 @@ export interface PredictNavigationParamList extends ParamListBase {
   Predict: undefined;
   PredictMarketList: PredictMarketListParams;
   PredictMarketDetails: PredictMarketDetailsParams;
+  PredictWorldCup: undefined;
   PredictSellPreview: PredictSellPreviewParams;
   PredictBuyPreview: PredictBuyPreviewParams;
   PredictActivityDetail: PredictActivityDetailParams;

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

@@ -71,6 +71,7 @@ import PredictWithdrawUnavailableSheet, {
 } from '../../components/PredictWithdrawUnavailableSheet';
 import PredictOffline from '../../components/PredictOffline';
 import FeaturedCarousel from '../../components/FeaturedCarousel';
+import PredictWorldCupMainFeedBanner from '../../components/PredictWorldCupMainFeedBanner';
 import {
   selectPredictFeaturedCarouselEnabledFlag,
   selectPredictUpDownEnabledFlag,
@@ -208,6 +209,7 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
             <FeaturedCarousel />
           </Box>
         )}
+        <PredictWorldCupMainFeedBanner />
       </Animated.View>
       <View
         ref={tabBarRef}

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

@@ -378,6 +378,7 @@ const Routes = {
     MARKET_LIST: 'PredictMarketList',
     MARKET_DETAILS: 'PredictMarketDetails',
     ACTIVITY_DETAIL: 'PredictActivityDetail',
+    WORLD_CUP: 'PredictWorldCup',
     MODALS: {
       ROOT: 'PredictModals',
       BUY_PREVIEW: 'PredictBuyPreview',