feat(predict): scaffold Crypto Up/Down detail screen with header (#28628)

## **Description**

Scaffolds the new Crypto Up/Down detail screen
(`PredictCryptoUpDownDetails`) with an animated header, laying the
groundwork for the full experience in future tickets.

**What changed:**

- **New `PredictCryptoUpDownDetails` component** — Uses
`HeaderStandardAnimated` + `TitleSubpage` + `Animated.ScrollView` to
match the Perps header pattern. Displays the market's series title,
formatted end date, market image, and a share button.
- **Updated `isCryptoUpDown()`** — Now requires both `up-or-down` AND
`crypto` tags, filtering out non-crypto up-or-down markets.
- **Feature-flagged routing** — `PredictMarketDetails` branches to the
new screen only when `predictUpDown` flag is enabled and
`isCryptoUpDown(market)` is true.
- **Extracted `usePredictShare` hook** — Pulled share logic (tracking,
native share sheet, clipboard toast) out of `PredictShareButton` into a
reusable hook for use with `endButtonIconProps`.
- **Added `formatMarketEndDate`** — Intl-based date formatter using the
user's local timezone.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

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

## **Manual testing steps**

```gherkin
Feature: Crypto Up/Down detail screen scaffold

  Scenario: user navigates to a crypto up-or-down market with the flag enabled
    Given the predictUpDown feature flag is enabled
    And there is a market with series, "up-or-down" tag, and "crypto" tag

    When user taps on that market from the feed
    Then the new Crypto Up/Down detail screen renders
    And the header shows the series title and formatted end date
    And the share button is visible in the header
    And pull-to-refresh works on the scroll view

  Scenario: user navigates to a crypto up-or-down market with the flag disabled
    Given the predictUpDown feature flag is disabled
    And there is a market with series, "up-or-down" tag, and "crypto" tag

    When user taps on that market from the feed
    Then the default market details screen renders

  Scenario: user navigates to a non-crypto up-or-down market
    Given the predictUpDown feature flag is enabled
    And there is a market with series and "up-or-down" tag but no "crypto" tag

    When user taps on that market from the feed
    Then the default market details screen renders
```

## **Screenshots/Recordings**

### **Before**

<!-- N/A - new screen -->

### **After**

<!-- Screenshots to be added -->

DEMO: https://www.loom.com/share/95cf9d133e35439dac7da42ab2ea32a7

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

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

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

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Adds a new feature-flagged navigation branch in `PredictMarketDetails`
and refactors share behavior into a reusable hook, which could affect
which details screen renders and how share events/toasts are triggered.
> 
> **Overview**
> Introduces a new `PredictCryptoUpDownDetails` screen scaffold with an
animated header, pull-to-refresh scroll view, market image/title, and
header share action, plus new test IDs and component/unit tests.
> 
> Updates `PredictMarketDetails` to **conditionally route** crypto
up/down markets to this new screen when `selectPredictUpDownEnabledFlag`
is enabled and `isCryptoUpDown()` matches (now requiring both
`up-or-down` and `crypto` tags).
> 
> Refactors share handling by extracting the native share + analytics +
clipboard toast logic from `PredictShareButton` into a reusable
`usePredictShare` hook (with a JSX helper util), and adds
`formatMarketEndDate` for localized end-date display (with tests).
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
8eaad98. 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/Predict.testIds.ts

@@ -128,6 +128,19 @@ export const PredictMarketDetailsSelectorsIDs = {
     'predict-details-buttons-skeleton-button-1',
 } as const;
 
+// ========================================
+// PREDICT CRYPTO UP/DOWN DETAILS SELECTORS
+// ========================================
+
+export const PredictCryptoUpDownDetailsSelectorsIDs = {
+  SCREEN: 'predict-crypto-up-down-details-screen',
+  HEADER: 'predict-crypto-up-down-details-header',
+  BACK_BUTTON: 'predict-crypto-up-down-details-back-button',
+  SHARE_BUTTON: 'predict-crypto-up-down-details-share-button',
+  SCROLL_VIEW: 'predict-crypto-up-down-details-scroll-view',
+  TITLE_SECTION: 'predict-crypto-up-down-details-title-section',
+} as const;
+
 export const PredictMarketDetailsSelectorsText = {
   // Tab content containers
   ABOUT_TAB_TEXT: 'About',

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

@@ -0,0 +1,273 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import PredictCryptoUpDownDetails from './PredictCryptoUpDownDetails';
+import { PredictCryptoUpDownDetailsSelectorsIDs } from '../../Predict.testIds';
+import type { PredictMarket, PredictSeries } from '../../types';
+import usePredictShare from '../../hooks/usePredictShare';
+
+const mockUsePredictShare = usePredictShare as jest.Mock;
+
+jest.mock('@metamask/design-system-twrnc-preset', () => ({
+  useTailwind: () => ({
+    style: jest.fn(() => ({})),
+  }),
+}));
+
+jest.mock('react-native-reanimated', () => {
+  const { ScrollView } = jest.requireActual('react-native');
+  return {
+    ...jest.requireActual('react-native-reanimated'),
+    Animated: { ScrollView },
+    useSharedValue: jest.fn((initialValue: number) => ({
+      value: initialValue,
+    })),
+    useAnimatedScrollHandler: jest.fn(() => jest.fn()),
+  };
+});
+
+jest.mock('react-native-safe-area-context', () => {
+  const { View } = jest.requireActual('react-native');
+  return {
+    SafeAreaView: View,
+    SafeAreaProvider: ({ children }: { children: React.ReactNode }) => children,
+    useSafeAreaInsets: jest.fn(() => ({
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    })),
+    useSafeAreaFrame: () => ({ x: 0, y: 0, width: 375, height: 812 }),
+  };
+});
+
+jest.mock(
+  '../../../../../component-library/components-temp/HeaderStandardAnimated/useHeaderStandardAnimated',
+  () => ({
+    __esModule: true,
+    default: () => ({
+      scrollY: { value: 0 },
+      titleSectionHeightSv: { value: 0 },
+      setTitleSectionHeight: jest.fn(),
+      onScroll: jest.fn(),
+    }),
+  }),
+);
+
+jest.mock('../../hooks/usePredictShare', () => {
+  const mockUsePredictShareFn = jest.fn(
+    ({ marketId, marketSlug }: { marketId?: string; marketSlug?: string }) => ({
+      handleSharePress: jest.fn(),
+      marketId,
+      marketSlug,
+    }),
+  );
+  return {
+    __esModule: true,
+    default: mockUsePredictShareFn,
+  };
+});
+
+jest.mock('../../utils/format', () => ({
+  formatMarketEndDate: jest.fn(() => 'April 9, 1:45 PM'),
+}));
+
+const createMockMarket = (
+  overrides: Partial<PredictMarket> = {},
+): PredictMarket & { series: PredictSeries } =>
+  ({
+    id: 'market-1',
+    providerId: 'polymarket',
+    slug: 'btc-up-or-down-5m',
+    title: 'BTC Up or Down - 5 Minutes',
+    description: 'Will BTC go up or down?',
+    image: 'https://example.com/btc.png',
+    status: 'open',
+    recurrence: 'NONE',
+    category: 'crypto',
+    tags: ['crypto', 'up-or-down'],
+    outcomes: [],
+    liquidity: 100,
+    volume: 200,
+    endDate: '2026-04-09T19:45:00Z',
+    series: {
+      id: 's1',
+      slug: 'btc-up-or-down-5m',
+      title: 'BTC Up or Down - 5 Minutes',
+      recurrence: '5m',
+    },
+    ...overrides,
+  }) as PredictMarket & { series: PredictSeries };
+
+describe('PredictCryptoUpDownDetails', () => {
+  const mockOnBack = jest.fn();
+  const mockOnRefresh = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the screen container with correct testID', () => {
+    const market = createMockMarket();
+
+    render(
+      <PredictCryptoUpDownDetails
+        market={market}
+        onBack={mockOnBack}
+        onRefresh={mockOnRefresh}
+        refreshing={false}
+      />,
+    );
+
+    expect(
+      screen.getByTestId(PredictCryptoUpDownDetailsSelectorsIDs.SCREEN),
+    ).toBeOnTheScreen();
+  });
+
+  it('renders the header with the series title text', () => {
+    const market = createMockMarket({
+      series: {
+        id: 's1',
+        slug: 'btc-up-or-down-5m',
+        title: 'BTC Up or Down - 5 Minutes',
+        recurrence: '5m',
+      },
+    });
+
+    render(
+      <PredictCryptoUpDownDetails
+        market={market}
+        onBack={mockOnBack}
+        onRefresh={mockOnRefresh}
+        refreshing={false}
+      />,
+    );
+
+    expect(
+      screen.getByTestId(PredictCryptoUpDownDetailsSelectorsIDs.HEADER),
+    ).toBeOnTheScreen();
+    expect(
+      screen.getAllByText('BTC Up or Down - 5 Minutes').length,
+    ).toBeGreaterThan(0);
+  });
+
+  it('renders the formatted endDate as subtitle in the header', () => {
+    const market = createMockMarket({
+      endDate: '2026-04-09T19:45:00Z',
+    });
+
+    render(
+      <PredictCryptoUpDownDetails
+        market={market}
+        onBack={mockOnBack}
+        onRefresh={mockOnRefresh}
+        refreshing={false}
+      />,
+    );
+
+    expect(screen.getAllByText('April 9, 1:45 PM').length).toBeGreaterThan(0);
+  });
+
+  it('renders the share button in the header end area', () => {
+    const market = createMockMarket();
+
+    render(
+      <PredictCryptoUpDownDetails
+        market={market}
+        onBack={mockOnBack}
+        onRefresh={mockOnRefresh}
+        refreshing={false}
+      />,
+    );
+
+    expect(
+      screen.getByTestId(PredictCryptoUpDownDetailsSelectorsIDs.SHARE_BUTTON),
+    ).toBeOnTheScreen();
+  });
+
+  it('calls usePredictShare with market id and slug', () => {
+    const market = createMockMarket({
+      id: 'market-123',
+      slug: 'btc-up-or-down-5m',
+    });
+
+    render(
+      <PredictCryptoUpDownDetails
+        market={market}
+        onBack={mockOnBack}
+        onRefresh={mockOnRefresh}
+        refreshing={false}
+      />,
+    );
+
+    expect(mockUsePredictShare).toHaveBeenCalledWith({
+      marketId: 'market-123',
+      marketSlug: 'btc-up-or-down-5m',
+    });
+  });
+
+  it('renders the title section with the series title text', () => {
+    const market = createMockMarket({
+      series: {
+        id: 's1',
+        slug: 'btc-up-or-down-5m',
+        title: 'BTC Up or Down - 5 Minutes',
+        recurrence: '5m',
+      },
+    });
+
+    render(
+      <PredictCryptoUpDownDetails
+        market={market}
+        onBack={mockOnBack}
+        onRefresh={mockOnRefresh}
+        refreshing={false}
+      />,
+    );
+
+    const titleSection = screen.getByTestId(
+      PredictCryptoUpDownDetailsSelectorsIDs.TITLE_SECTION,
+    );
+    expect(titleSection).toBeOnTheScreen();
+    expect(
+      screen.getAllByText('BTC Up or Down - 5 Minutes').length,
+    ).toBeGreaterThan(0);
+  });
+
+  it('renders the title section with formatted endDate as bottom label', () => {
+    const market = createMockMarket({
+      endDate: '2026-04-09T19:45:00Z',
+    });
+
+    render(
+      <PredictCryptoUpDownDetails
+        market={market}
+        onBack={mockOnBack}
+        onRefresh={mockOnRefresh}
+        refreshing={false}
+      />,
+    );
+
+    const titleSection = screen.getByTestId(
+      PredictCryptoUpDownDetailsSelectorsIDs.TITLE_SECTION,
+    );
+    expect(titleSection).toBeOnTheScreen();
+    expect(screen.getAllByText('April 9, 1:45 PM').length).toBeGreaterThan(0);
+  });
+
+  it('renders no subtitle text when endDate is undefined', () => {
+    const market = createMockMarket({
+      endDate: undefined,
+    });
+
+    render(
+      <PredictCryptoUpDownDetails
+        market={market}
+        onBack={mockOnBack}
+        onRefresh={mockOnRefresh}
+        refreshing={false}
+      />,
+    );
+
+    expect(screen.queryByText('April 9, 1:45 PM')).not.toBeOnTheScreen();
+  });
+});

app/components/UI/Predict/components/PredictCryptoUpDownDetails/PredictCryptoUpDownDetails.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Image, RefreshControl } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Box, IconName } from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import HeaderStandardAnimated from '../../../../../component-library/components-temp/HeaderStandardAnimated';
+import useHeaderStandardAnimated from '../../../../../component-library/components-temp/HeaderStandardAnimated/useHeaderStandardAnimated';
+import TitleSubpage from '../../../../../component-library/components-temp/TitleSubpage';
+import type { PredictMarket, PredictSeries } from '../../types';
+import { formatMarketEndDate } from '../../utils/format';
+import usePredictShare from '../../hooks/usePredictShare';
+import { PredictCryptoUpDownDetailsSelectorsIDs } from '../../Predict.testIds';
+
+export interface PredictCryptoUpDownDetailsProps {
+  market: PredictMarket & { series: PredictSeries };
+  onBack: () => void;
+  onRefresh: () => void;
+  refreshing: boolean;
+}
+
+const PredictCryptoUpDownDetails: React.FC<PredictCryptoUpDownDetailsProps> = ({
+  market,
+  onBack,
+  onRefresh,
+  refreshing,
+}) => {
+  const tw = useTailwind();
+  const { scrollY, titleSectionHeightSv, setTitleSectionHeight, onScroll } =
+    useHeaderStandardAnimated();
+  const { handleSharePress } = usePredictShare({
+    marketId: market.id,
+    marketSlug: market.slug,
+  });
+
+  const title = market.series.title;
+  const subtitle = market.endDate
+    ? formatMarketEndDate(market.endDate)
+    : undefined;
+
+  return (
+    <SafeAreaView
+      style={tw.style('flex-1 bg-default')}
+      edges={['left', 'right', 'top']}
+      testID={PredictCryptoUpDownDetailsSelectorsIDs.SCREEN}
+    >
+      <HeaderStandardAnimated
+        scrollY={scrollY}
+        titleSectionHeight={titleSectionHeightSv}
+        title={title}
+        subtitle={subtitle}
+        onBack={onBack}
+        backButtonProps={{
+          testID: PredictCryptoUpDownDetailsSelectorsIDs.BACK_BUTTON,
+        }}
+        endButtonIconProps={[
+          {
+            iconName: IconName.Share,
+            onPress: handleSharePress,
+            testID: PredictCryptoUpDownDetailsSelectorsIDs.SHARE_BUTTON,
+          },
+        ]}
+        testID={PredictCryptoUpDownDetailsSelectorsIDs.HEADER}
+      />
+
+      <Animated.ScrollView
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+        showsVerticalScrollIndicator={false}
+        testID={PredictCryptoUpDownDetailsSelectorsIDs.SCROLL_VIEW}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+      >
+        <Box
+          testID={PredictCryptoUpDownDetailsSelectorsIDs.TITLE_SECTION}
+          onLayout={(e) => setTitleSectionHeight(e.nativeEvent.layout.height)}
+        >
+          <TitleSubpage
+            startAccessory={
+              <Box twClassName="w-10 h-10 rounded-lg bg-muted overflow-hidden">
+                {market.image ? (
+                  <Image
+                    source={{ uri: market.image }}
+                    style={tw.style('w-full h-full')}
+                    resizeMode="cover"
+                  />
+                ) : (
+                  <Box twClassName="w-full h-full bg-muted" />
+                )}
+              </Box>
+            }
+            title={title}
+            bottomLabel={subtitle}
+            twClassName="px-4 pt-1 pb-3"
+          />
+        </Box>
+      </Animated.ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default PredictCryptoUpDownDetails;