feat(predict): Add World Cup tab data hooks and content (#30162)

## **Description**

Adds the World Cup Predict data layer and wires it into the dedicated
World Cup screen so the tab row and tab content are driven by Polymarket
data instead of placeholders.

This includes:
- World Cup-specific query builders/options for All, Live, Props, and
configured stage tabs.
- Lightweight availability checks for tabs that should be hidden when
empty.
- A unified cached `usePredictWorldCupMarkets` hook using React Query
for tab content.
- Prefetching visible World Cup tab content after availability resolves
to reduce skeletons during tab switches.
- World Cup screen tab rendering and market list content using existing
Predict market cards.
- Unit tests for query shapes, availability behavior, caching, hidden
tabs, and World Cup game parsing.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: PRED-879

## **Manual testing steps**

```gherkin
Feature: Predict World Cup tab data

  Scenario: user views and switches World Cup tabs
    Given the Predict World Cup feature flag is enabled with World Cup identifiers and stage event IDs
    And the user opens the World Cup Predict screen

    When tab availability finishes loading
    Then tabs with active content are visible
    And tabs without active content are hidden

    When user switches between All, Props, Live, and configured stage tabs
    Then market content loads for the selected tab
    And previously loaded tabs reuse cached data without showing the full loading skeleton again
```

## **Screenshots/Recordings**

N/A — data/query wiring and existing UI composition. Manually validated
in simulator during development.

### **Before**

N/A

### **After**



https://github.com/user-attachments/assets/aadd8ec0-d5a6-4896-b828-af1e0662d908



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

- [x] 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**
> Medium risk because it adds new React Query data-fetching/prefetching
paths and changes the World Cup screen to render paginated market lists
and conditional tabs based on API-driven availability.
> 
> **Overview**
> **World Cup Predict is now data-driven instead of
placeholder-driven.** The PR introduces a World Cup-specific data layer
(query keys/options, services, and hooks) to fetch Polymarket markets
for `All`, `Live`, `Props`, and configured stage tabs, including
pagination where appropriate and deterministic start-time sorting for
stage/game markets.
> 
> Tabs are now conditionally shown/hidden based on lightweight
availability checks, and
`resolvePredictWorldCupInitialTab`/`getPredictWorldCupAvailableTabKeys`
take this availability into account. The World Cup screen is rewired to
use `usePredictWorldCupAvailableTabs` + `usePredictWorldCupMarkets`,
rendering a `FlashList` of `PredictMarket` cards with skeleton/loading,
pull-to-refresh, error state, and prefetching of visible tabs to reduce
reloads on tab switches.
> 
> Adds/updates unit tests covering query shapes, tab availability +
initial-tab fallback, market hook caching/pagination behavior, stage
edge cases (no event IDs), and World Cup game parsing in Polymarket
utils.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
240a4a1. 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.test.ts

@@ -0,0 +1,54 @@
+import {
+  getPredictWorldCupAvailableTabKeys,
+  PREDICT_WORLD_CUP_TAB_KEYS,
+  resolvePredictWorldCupInitialTab,
+} from './worldCupTabs';
+
+const config = {
+  stages: [
+    { key: 'group-stage', eventIds: ['123'] },
+    { key: 'final', eventIds: ['456'] },
+  ],
+};
+
+describe('worldCupTabs', () => {
+  describe('getPredictWorldCupAvailableTabKeys', () => {
+    it('returns all fixed and configured stage tabs when availability is not supplied', () => {
+      expect(getPredictWorldCupAvailableTabKeys(config)).toEqual([
+        PREDICT_WORLD_CUP_TAB_KEYS.ALL,
+        PREDICT_WORLD_CUP_TAB_KEYS.LIVE,
+        PREDICT_WORLD_CUP_TAB_KEYS.PROPS,
+        'group-stage',
+        'final',
+      ]);
+    });
+
+    it('hides Live, Props, and stage tabs when availability is false', () => {
+      expect(
+        getPredictWorldCupAvailableTabKeys(config, {
+          live: false,
+          props: true,
+          stages: {
+            'group-stage': false,
+            final: true,
+          },
+        }),
+      ).toEqual([PREDICT_WORLD_CUP_TAB_KEYS.ALL, 'props', 'final']);
+    });
+  });
+
+  describe('resolvePredictWorldCupInitialTab', () => {
+    it('falls back to All when requested tab is hidden by availability', () => {
+      expect(
+        resolvePredictWorldCupInitialTab('group-stage', config, {
+          live: true,
+          props: true,
+          stages: {
+            'group-stage': false,
+            final: true,
+          },
+        }),
+      ).toBe(PREDICT_WORLD_CUP_TAB_KEYS.ALL);
+    });
+  });
+});

app/components/UI/Predict/constants/worldCupTabs.ts

@@ -10,24 +10,43 @@ export const PREDICT_WORLD_CUP_TAB_KEYS = {
 
 export type PredictWorldCupTabKey = string;
 
+export interface PredictWorldCupTabAvailability {
+  live: boolean;
+  props: boolean;
+  stages: Record<string, boolean>;
+}
+
 export const getPredictWorldCupAvailableTabKeys = (
   config?: Pick<PredictWorldCupConfig, 'stages'>,
+  availability?: PredictWorldCupTabAvailability,
 ): string[] => [
-  ...Object.values(PREDICT_WORLD_CUP_TAB_KEYS),
-  ...(config?.stages ?? []).map((stage) => stage.key),
+  PREDICT_WORLD_CUP_TAB_KEYS.ALL,
+  ...(!availability || availability.live
+    ? [PREDICT_WORLD_CUP_TAB_KEYS.LIVE]
+    : []),
+  ...(!availability || availability.props
+    ? [PREDICT_WORLD_CUP_TAB_KEYS.PROPS]
+    : []),
+  ...(config?.stages ?? [])
+    .filter((stage) => !availability || availability.stages[stage.key])
+    .map((stage) => stage.key),
 ];
 
 export const resolvePredictWorldCupInitialTab = (
   requestedTab?: string | null,
   config?: Pick<PredictWorldCupConfig, 'stages'>,
+  availability?: PredictWorldCupTabAvailability,
 ): PredictWorldCupTabKey => {
   const normalizedTab = requestedTab?.toLowerCase();
 
   if (!normalizedTab) {
     return PREDICT_WORLD_CUP_TAB_KEYS.ALL;
   }
 
-  const availableTabKeys = getPredictWorldCupAvailableTabKeys(config);
+  const availableTabKeys = getPredictWorldCupAvailableTabKeys(
+    config,
+    availability,
+  );
 
   return availableTabKeys.includes(normalizedTab)
     ? normalizedTab

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

@@ -25,3 +25,12 @@ export {
 } from './usePredictSearch';
 
 export { usePredictCashOut } from './usePredictCashOut';
+
+export {
+  usePredictWorldCupMarkets,
+  usePredictWorldCupAvailability,
+  usePredictWorldCupAvailableTabs,
+  type UsePredictWorldCupMarketsOptions,
+  type UsePredictWorldCupAvailableTabsOptions,
+  type PredictWorldCupAvailableTab,
+} from './usePredictWorldCup';

app/components/UI/Predict/hooks/usePredictWorldCup.test.ts

@@ -0,0 +1,217 @@
+import React from 'react';
+import { renderHook, waitFor } from '@testing-library/react-native';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Engine from '../../../../core/Engine';
+import { DEFAULT_PREDICT_WORLD_CUP_FLAG } from '../constants/flags';
+import { Recurrence, type PredictMarket } from '../types';
+import { usePredictWorldCupMarkets } from './usePredictWorldCup';
+
+jest.mock('../../../../core/Engine', () => ({
+  context: {
+    PredictController: {
+      getMarkets: jest.fn(),
+    },
+  },
+}));
+
+const mockGetMarkets = jest.mocked(Engine.context.PredictController.getMarkets);
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { cacheTime: Infinity, retry: false } },
+  });
+  const Wrapper = ({ children }: { children: React.ReactNode }) =>
+    React.createElement(QueryClientProvider, { client: queryClient }, children);
+  return { Wrapper, queryClient };
+};
+
+const createMarket = (
+  overrides: Partial<PredictMarket> = {},
+): PredictMarket => ({
+  id: 'market-1',
+  providerId: 'polymarket',
+  slug: 'market-1',
+  title: 'Market 1',
+  description: 'Description',
+  image: 'image.png',
+  status: 'open',
+  recurrence: Recurrence.NONE,
+  category: 'hot',
+  tags: [],
+  outcomes: [],
+  liquidity: 0,
+  volume: 0,
+  ...overrides,
+});
+
+describe('usePredictWorldCupMarkets', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('requests All markets with a cached paginated query', async () => {
+    const { Wrapper } = createWrapper();
+    const allMarket = createMarket({ id: 'all-market' });
+    mockGetMarkets.mockResolvedValue([allMarket]);
+
+    const { result } = renderHook(
+      () =>
+        usePredictWorldCupMarkets({
+          tabKey: 'all',
+          config: DEFAULT_PREDICT_WORLD_CUP_FLAG,
+          pageSize: 30,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() => expect(result.current.marketData).toEqual([allMarket]));
+
+    expect(mockGetMarkets).toHaveBeenCalledWith({
+      category: 'hot',
+      customQueryParams:
+        'active=true&archived=false&closed=false&tag_slug=fifa-world-cup&order=volume24hr&ascending=false',
+      limit: 30,
+      offset: 0,
+    });
+    expect(result.current.hasMore).toBe(false);
+  });
+
+  it('requests Props markets with a cached paginated query', async () => {
+    const { Wrapper } = createWrapper();
+    const propsMarket = createMarket({ id: 'props-market' });
+    mockGetMarkets.mockResolvedValue([propsMarket]);
+
+    const { result } = renderHook(
+      () =>
+        usePredictWorldCupMarkets({
+          tabKey: 'props',
+          config: DEFAULT_PREDICT_WORLD_CUP_FLAG,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() =>
+      expect(result.current.marketData).toEqual([propsMarket]),
+    );
+
+    expect(mockGetMarkets).toHaveBeenCalledWith(
+      expect.objectContaining({
+        customQueryParams:
+          'active=true&archived=false&closed=false&tag_slug=fifa-world-cup&exclude_tag_id=100639&order=volume&ascending=false',
+      }),
+    );
+  });
+
+  it('requests Live markets without pagination', async () => {
+    const { Wrapper } = createWrapper();
+    const liveMarket = createMarket({ id: 'live-market' });
+    mockGetMarkets.mockResolvedValue([liveMarket]);
+
+    const { result } = renderHook(
+      () =>
+        usePredictWorldCupMarkets({
+          tabKey: 'live',
+          config: DEFAULT_PREDICT_WORLD_CUP_FLAG,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() =>
+      expect(result.current.marketData).toEqual([liveMarket]),
+    );
+
+    expect(mockGetMarkets).toHaveBeenCalledWith(
+      expect.objectContaining({
+        customQueryParams:
+          'active=true&archived=false&closed=false&series_id=11433&tag_id=100639&live=true&order=startDate',
+      }),
+    );
+    expect(result.current.hasMore).toBe(false);
+    expect(result.current.isFetchingMore).toBe(false);
+  });
+
+  it('requests stage markets with all configured event IDs and no pagination', async () => {
+    const { Wrapper } = createWrapper();
+    const stageMarket = createMarket({ id: 'stage-market' });
+    const config = {
+      ...DEFAULT_PREDICT_WORLD_CUP_FLAG,
+      stages: [{ key: 'group-stage', eventIds: ['123', '456'] }],
+    };
+    mockGetMarkets.mockResolvedValue([stageMarket]);
+
+    const { result } = renderHook(
+      () =>
+        usePredictWorldCupMarkets({
+          tabKey: 'group-stage',
+          config,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() =>
+      expect(result.current.marketData).toEqual([stageMarket]),
+    );
+
+    expect(mockGetMarkets).toHaveBeenCalledWith(
+      expect.objectContaining({
+        customQueryParams:
+          'active=true&archived=false&closed=false&id=123&id=456',
+        limit: 2,
+        offset: 0,
+      }),
+    );
+    expect(result.current.hasMore).toBe(false);
+  });
+
+  it('skips fetching for a stage without configured event IDs', () => {
+    const { Wrapper } = createWrapper();
+    const config = {
+      ...DEFAULT_PREDICT_WORLD_CUP_FLAG,
+      stages: [{ key: 'empty-stage', eventIds: [] }],
+    };
+
+    const { result } = renderHook(
+      () =>
+        usePredictWorldCupMarkets({
+          tabKey: 'empty-stage',
+          config,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    expect(result.current.marketData).toEqual([]);
+    expect(mockGetMarkets).not.toHaveBeenCalled();
+  });
+
+  it('returns cached data when switching back to a previously loaded tab', async () => {
+    const { Wrapper } = createWrapper();
+    const allMarket = createMarket({ id: 'all-market' });
+    const liveMarket = createMarket({ id: 'live-market' });
+    mockGetMarkets
+      .mockResolvedValueOnce([allMarket])
+      .mockResolvedValueOnce([liveMarket]);
+
+    const { result, rerender } = renderHook(
+      ({ tabKey }: { tabKey: 'all' | 'live' }) =>
+        usePredictWorldCupMarkets({
+          tabKey,
+          config: DEFAULT_PREDICT_WORLD_CUP_FLAG,
+        }),
+      { initialProps: { tabKey: 'all' }, wrapper: Wrapper },
+    );
+
+    await waitFor(() => expect(result.current.marketData).toEqual([allMarket]));
+
+    rerender({ tabKey: 'live' });
+
+    await waitFor(() =>
+      expect(result.current.marketData).toEqual([liveMarket]),
+    );
+
+    mockGetMarkets.mockClear();
+    rerender({ tabKey: 'all' });
+
+    expect(result.current.marketData).toEqual([allMarket]);
+    expect(mockGetMarkets).not.toHaveBeenCalled();
+  });
+});