feat(predict): add World Cup route scaffold (#30127)

## **Description**

Adds the dedicated Predict World Cup route scaffold required by PRED-877
and follow-up World Cup stories.

This PR:
- Adds World Cup deep-link parsing for `/predict?feed=world-cup` and
`/predict?feed=world-cup&tab=<tabKey>`.
- Preserves existing `/predict?market=...`, `/predict?marketId=...`,
`/predict?tab=...`, and search deep-link behavior.
- Adds `Routes.PREDICT.WORLD_CUP` to the Predict stack.
- Adds a dedicated `PredictWorldCup` screen scaffold with a `World Cup`
header and fixed pill tabs.
- Resolves invalid/missing World Cup tabs to `All`.
- Falls back to the Predict feed when the World Cup screen flag is
disabled.

The screen intentionally contains no market/card content yet; data
population will happen in follow-up PRs.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/PRED-877

## **Manual testing steps**

```gherkin
Feature: Predict World Cup deep links

  Scenario: user opens the World Cup feed link
    Given the Predict World Cup screen flag is enabled
    When user opens /predict?feed=world-cup
    Then the World Cup screen opens with the All tab selected

  Scenario: user opens the World Cup feed link with a tab
    Given the Predict World Cup screen flag is enabled
    When user opens /predict?feed=world-cup&tab=live
    Then the World Cup screen opens with the Live tab selected

  Scenario: user opens a stale World Cup link
    Given the Predict World Cup screen flag is disabled
    When user opens /predict?feed=world-cup
    Then the app falls back to the Predict market list
```

Automated validation run:
- `yarn jest
app/core/DeeplinkManager/handlers/legacy/__tests__/handlePredictUrl.test.ts
app/components/UI/Predict/routes/index.test.tsx
app/components/UI/Predict/views/PredictWorldCup/PredictWorldCup.test.tsx
--runInBand`
- `yarn lint:tsc`

## **Screenshots/Recordings**

### **Before**

N/A — dedicated World Cup route/screen did not exist.

### **After**



https://github.com/user-attachments/assets/0605feeb-2850-4e60-a53c-1ccff872ff8b



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

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Adds a new navigation route and extends deeplink parsing/dispatch in
`handlePredictUrl`, which can affect how users are routed from external
links if mis-parsed or flags/config are wrong. Changes are gated by
feature flags and covered by new unit tests, reducing but not
eliminating navigation/regression risk.
> 
> **Overview**
> Adds a dedicated Predict **World Cup** entry point: a new
`Routes.PREDICT.WORLD_CUP` stack screen and a `PredictWorldCup` scaffold
UI with header + pill tabs, including initial-tab resolution and
fallback-to-`All` behavior.
> 
> Extends `/predict` deeplink handling to support `?feed=world-cup`
(plus optional `tab=`), validating the requested tab against fixed +
configured stage tabs and falling back to the normal market list when
the World Cup screen is disabled. Updates navigation param types
accordingly and adds tests for the new route and deeplink scenarios.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
f968523. 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/constants/worldCupTabs.ts

@@ -0,0 +1,35 @@
+import type { PredictWorldCupConfig } from '../types/flags';
+
+export const PREDICT_WORLD_CUP_FEED_PARAM = 'world-cup';
+
+export const PREDICT_WORLD_CUP_TAB_KEYS = {
+  ALL: 'all',
+  LIVE: 'live',
+  PROPS: 'props',
+} as const;
+
+export type PredictWorldCupTabKey = string;
+
+export const getPredictWorldCupAvailableTabKeys = (
+  config?: Pick<PredictWorldCupConfig, 'stages'>,
+): string[] => [
+  ...Object.values(PREDICT_WORLD_CUP_TAB_KEYS),
+  ...(config?.stages ?? []).map((stage) => stage.key),
+];
+
+export const resolvePredictWorldCupInitialTab = (
+  requestedTab?: string | null,
+  config?: Pick<PredictWorldCupConfig, 'stages'>,
+): PredictWorldCupTabKey => {
+  const normalizedTab = requestedTab?.toLowerCase();
+
+  if (!normalizedTab) {
+    return PREDICT_WORLD_CUP_TAB_KEYS.ALL;
+  }
+
+  const availableTabKeys = getPredictWorldCupAvailableTabKeys(config);
+
+  return availableTabKeys.includes(normalizedTab)
+    ? normalizedTab
+    : PREDICT_WORLD_CUP_TAB_KEYS.ALL;
+};

app/components/UI/Predict/routes/index.test.tsx

@@ -43,6 +43,11 @@ jest.mock('../views/PredictFeed', () => {
   );
 });
 
+jest.mock('../views/PredictWorldCup', () => {
+  const { View } = jest.requireActual('react-native');
+  return () => <View testID="predict-world-cup" />;
+});
+
 jest.mock('../views/PredictMarketDetails', () => {
   const { View } = jest.requireActual('react-native');
   return () => <View testID="predict-market-details" />;
@@ -135,6 +140,16 @@ describe('PredictScreenStack', () => {
     expect(screen.getByTestId('predict-market-details')).toBeOnTheScreen();
   });
 
+  it('navigates to WORLD_CUP screen', async () => {
+    renderWithNavigation(<PredictScreenStack />);
+
+    await act(async () => {
+      navigationRef.current?.navigate(Routes.PREDICT.WORLD_CUP);
+    });
+
+    expect(screen.getByTestId('predict-world-cup')).toBeOnTheScreen();
+  });
+
   it('navigates to BUY_PREVIEW with PredictBuyPreview when payWithAnyToken is off', async () => {
     mockPayWithAnyTokenEnabled = false;
 

app/components/UI/Predict/routes/index.tsx

@@ -12,6 +12,7 @@ import PredictActivityDetail from '../components/PredictActivityDetail/PredictAc
 import { PredictNavigationParamList } from '../types/navigation';
 import PredictAddFundsModal from '../views/PredictAddFundsModal/PredictAddFundsModal';
 import PredictFeed from '../views/PredictFeed';
+import PredictWorldCup from '../views/PredictWorldCup';
 import PredictGTMModal from '../components/PredictGTMModal';
 import { Dimensions } from 'react-native';
 import { useSelector } from 'react-redux';
@@ -162,6 +163,15 @@ const PredictScreenStack = () => {
           }}
         />
 
+        <Stack.Screen
+          name={Routes.PREDICT.WORLD_CUP}
+          component={PredictWorldCup}
+          options={{
+            headerShown: false,
+            cardStyleInterpolator: slideFromRightInterpolator,
+          }}
+        />
+
         <Stack.Screen
           name={Routes.PREDICT.MODALS.BUY_PREVIEW}
           component={BuyPreviewComponent}

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

@@ -13,6 +13,7 @@ import {
 } from '.';
 import { PredictEventValues } from '../constants/eventNames';
 import type { TransactionActiveAbTestEntry } from '../../../../util/transactions/transaction-active-ab-test-attribution-registry';
+import type { PredictWorldCupTabKey } from '../constants/worldCupTabs';
 
 export type PredictEntryPoint =
   | typeof PredictEventValues.ENTRY_POINT.CAROUSEL
@@ -47,6 +48,12 @@ export interface PredictMarketDetailsParams {
   transactionActiveAbTests?: TransactionActiveAbTestEntry[];
 }
 
+/** Predict World Cup feed parameters */
+export interface PredictWorldCupParams {
+  entryPoint?: string;
+  initialTab?: PredictWorldCupTabKey;
+}
+
 /** Predict activity detail parameters */
 export interface PredictActivityDetailParams {
   activity: PredictActivityItem;
@@ -100,7 +107,7 @@ export interface PredictNavigationParamList extends ParamListBase {
   Predict: undefined;
   PredictMarketList: PredictMarketListParams;
   PredictMarketDetails: PredictMarketDetailsParams;
-  PredictWorldCup: undefined;
+  PredictWorldCup: PredictWorldCupParams | undefined;
   PredictSellPreview: PredictSellPreviewParams;
   PredictBuyPreview: PredictBuyPreviewParams;
   PredictActivityDetail: PredictActivityDetailParams;

app/components/UI/Predict/views/PredictWorldCup/PredictWorldCup.test.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import PredictWorldCup, {
+  PREDICT_WORLD_CUP_SCREEN_TEST_IDS,
+} from './PredictWorldCup';
+import Routes from '../../../../../constants/navigation/Routes';
+import { DEFAULT_PREDICT_WORLD_CUP_FLAG } from '../../constants/flags';
+
+const mockNavigate = jest.fn();
+const mockGoBack = jest.fn();
+const mockCanGoBack = jest.fn(() => true);
+let mockRouteParams: { entryPoint?: string; initialTab?: string } | undefined;
+let mockIsScreenEnabled = true;
+let mockConfig = DEFAULT_PREDICT_WORLD_CUP_FLAG;
+
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: () => ({
+    navigate: mockNavigate,
+    goBack: mockGoBack,
+    canGoBack: mockCanGoBack,
+  }),
+  useRoute: () => ({ params: mockRouteParams }),
+}));
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn((selector) => {
+    if (selector === 'selectPredictWorldCupConfig') {
+      return mockConfig;
+    }
+
+    if (selector === 'selectPredictWorldCupScreenEnabledFlag') {
+      return mockIsScreenEnabled;
+    }
+
+    return undefined;
+  }),
+}));
+
+jest.mock('../../selectors/featureFlags', () => ({
+  selectPredictWorldCupConfig: 'selectPredictWorldCupConfig',
+  selectPredictWorldCupScreenEnabledFlag:
+    'selectPredictWorldCupScreenEnabledFlag',
+}));
+
+describe('PredictWorldCup', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockCanGoBack.mockReturnValue(true);
+    mockRouteParams = undefined;
+    mockIsScreenEnabled = true;
+    mockConfig = {
+      ...DEFAULT_PREDICT_WORLD_CUP_FLAG,
+      enabled: true,
+      showWorldCupScreen: true,
+    };
+  });
+
+  it('renders the screen scaffold with All selected by default', () => {
+    render(<PredictWorldCup />);
+
+    expect(
+      screen.getByTestId(PREDICT_WORLD_CUP_SCREEN_TEST_IDS.CONTAINER),
+    ).toBeOnTheScreen();
+    expect(
+      screen.getByTestId(PREDICT_WORLD_CUP_SCREEN_TEST_IDS.INITIAL_TAB),
+    ).toHaveTextContent('all');
+  });
+
+  it('renders fixed tabs and an empty content area', () => {
+    render(<PredictWorldCup />);
+
+    expect(
+      screen.getByTestId(`${PREDICT_WORLD_CUP_SCREEN_TEST_IDS.TAB}-all`),
+    ).toBeOnTheScreen();
+    expect(
+      screen.getByTestId(`${PREDICT_WORLD_CUP_SCREEN_TEST_IDS.TAB}-live`),
+    ).toBeOnTheScreen();
+    expect(
+      screen.getByTestId(`${PREDICT_WORLD_CUP_SCREEN_TEST_IDS.TAB}-props`),
+    ).toBeOnTheScreen();
+    expect(
+      screen.getByTestId(PREDICT_WORLD_CUP_SCREEN_TEST_IDS.EMPTY_STATE),
+    ).toBeOnTheScreen();
+  });
+
+  it('uses a valid requested initial tab', () => {
+    mockRouteParams = { initialTab: 'props' };
+
+    render(<PredictWorldCup />);
+
+    expect(
+      screen.getByTestId(PREDICT_WORLD_CUP_SCREEN_TEST_IDS.INITIAL_TAB),
+    ).toHaveTextContent('props');
+  });
+
+  it('updates active tab when a tab is pressed', () => {
+    render(<PredictWorldCup />);
+
+    fireEvent.press(
+      screen.getByTestId(`${PREDICT_WORLD_CUP_SCREEN_TEST_IDS.TAB}-live`),
+    );
+
+    expect(
+      screen.getByTestId(PREDICT_WORLD_CUP_SCREEN_TEST_IDS.INITIAL_TAB),
+    ).toHaveTextContent('live');
+  });
+
+  it('uses a configured stage initial tab', () => {
+    mockRouteParams = { initialTab: 'group-stage' };
+    mockConfig = {
+      ...mockConfig,
+      stages: [{ key: 'group-stage', eventIds: ['1'] }],
+    };
+
+    render(<PredictWorldCup />);
+
+    expect(
+      screen.getByTestId(PREDICT_WORLD_CUP_SCREEN_TEST_IDS.INITIAL_TAB),
+    ).toHaveTextContent('group-stage');
+  });
+
+  it('falls back to All for an invalid requested initial tab', () => {
+    mockRouteParams = { initialTab: 'invalid' };
+
+    render(<PredictWorldCup />);
+
+    expect(
+      screen.getByTestId(PREDICT_WORLD_CUP_SCREEN_TEST_IDS.INITIAL_TAB),
+    ).toHaveTextContent('all');
+  });
+
+  it('redirects to Predict market list when the screen is disabled', () => {
+    mockIsScreenEnabled = false;
+    mockRouteParams = { entryPoint: 'deeplink', initialTab: 'live' };
+
+    const { queryByTestId } = render(<PredictWorldCup />);
+
+    expect(
+      queryByTestId(PREDICT_WORLD_CUP_SCREEN_TEST_IDS.CONTAINER),
+    ).toBeNull();
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.PREDICT.MARKET_LIST, {
+      entryPoint: 'deeplink',
+    });
+  });
+});