feat(rewards): add Perps Trading campaign participant outcome support

- Add `PERPS_TRADING` to `CampaignType` enum
- Add `PerpsTradingCampaignParticipantOutcomeDto` type
- Add `getPerpsTradingCampaignParticipantOutcome` to data service, controller (10 min cache), action types, and messenger
- Add `usePerpsTradingCampaignParticipantOutcome` hook for fetching outcome
- Add `usePerpsTradingCampaignEndedOutcomeToast` hook: shows winner toast (→ winning view) or participant_finalized toast (→ campaigns)
- Add `PerpsTradingCampaignWinningView` screen: displays rank and verification code, with copy/mail actions
- Add `formatOrdinalRank` utility to formatUtils
- Wire navigator with new screen and toast hook
- Add en.json strings for toast and winning view

Co-authored-by: VGR-GIT <vangulckrik@gmail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

app/components/UI/Rewards/RewardsNavigator.tsx

@@ -37,9 +37,9 @@ import { useReferralDetails } from './hooks/useReferralDetails';
 import { useRewardsNotificationsNudge } from './hooks/useRewardsNotificationsNudge';
 import useRewardsToast from './hooks/useRewardsToast';
 import { strings } from '../../../../locales/i18n';
+import PerpsTradingCampaignWinningView from './Views/PerpsTradingCampaignWinningView';
 
 let sessionNotificationsNudgeShown = false;
-
 const Stack = createStackNavigator();
 
 const RewardsNavigator: React.FC = () => {
@@ -294,6 +294,10 @@ const RewardsNavigator: React.FC = () => {
           <Stack.Screen
             name={Routes.REWARDS_PERPS_TRADING_CAMPAIGN_STATS}
             component={PerpsTradingCampaignStatsView}
+          />
+          <Stack.Screen
+            name={Routes.REWARDS_PERPS_TRADING_CAMPAIGN_WINNING_VIEW}
+            component={PerpsTradingCampaignWinningView}
             options={{ headerShown: false }}
           />
         </>

app/components/UI/Rewards/Views/PerpsTradingCampaignWinningView.test.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Linking } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+import PerpsTradingCampaignWinningView, {
+  PERPS_TRADING_CAMPAIGN_WINNING_VIEW_TEST_IDS,
+} from './PerpsTradingCampaignWinningView';
+import { usePerpsTradingCampaignParticipantOutcome } from '../hooks/usePerpsTradingCampaignParticipantOutcome';
+
+jest.mock('../../../../images/rewards/campaign_winning.png', () => ({
+  __esModule: true,
+  default: 1,
+}));
+
+const mockGoBack = jest.fn();
+const mockNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: () => ({ goBack: mockGoBack, navigate: mockNavigate }),
+  useRoute: () => ({
+    params: { campaignId: 'campaign-perps-1', campaignName: 'Perps Campaign' },
+  }),
+}));
+
+jest.mock('@metamask/design-system-twrnc-preset', () => {
+  const tw = (...args: unknown[]) => args;
+  tw.style = (...args: unknown[]) => args;
+  return { useTailwind: () => tw };
+});
+
+jest.mock('react-native-safe-area-context', () => {
+  const actual = jest.requireActual('react-native-safe-area-context');
+  return {
+    ...actual,
+    useSafeAreaInsets: () => ({ top: 44, bottom: 34, left: 0, right: 0 }),
+  };
+});
+
+jest.mock('../hooks/usePerpsTradingCampaignParticipantOutcome', () => ({
+  usePerpsTradingCampaignParticipantOutcome: jest.fn(),
+}));
+
+const mockUseOutcome =
+  usePerpsTradingCampaignParticipantOutcome as jest.MockedFunction<
+    typeof usePerpsTradingCampaignParticipantOutcome
+  >;
+
+jest.mock('../../../Views/ErrorBoundary', () => {
+  const ReactActual = jest.requireActual('react');
+  const { View } = jest.requireActual('react-native');
+  return {
+    __esModule: true,
+    default: ({ children }: { children: React.ReactNode }) =>
+      ReactActual.createElement(View, null, children),
+  };
+});
+
+jest.mock('../hooks/useTrackRewardsPageView', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+jest.mock('../../../../core/Analytics', () => ({
+  MetaMetricsEvents: {
+    REWARDS_PAGE_BUTTON_CLICKED: 'REWARDS_PAGE_BUTTON_CLICKED',
+  },
+}));
+
+jest.mock('../utils', () => ({
+  RewardsMetricsButtons: {
+    COPY_REFERRAL_CODE: 'copy_referral_code',
+  },
+}));
+
+const mockTrackEvent = jest.fn();
+const mockBuild = jest.fn(() => ({}));
+jest.mock('../../../hooks/useAnalytics/useAnalytics', () => ({
+  useAnalytics: () => ({
+    trackEvent: mockTrackEvent,
+    createEventBuilder: () => ({
+      addProperties: () => ({ build: mockBuild }),
+    }),
+  }),
+}));
+
+jest.mock('../components/ReferralDetails/CopyableField', () => {
+  const ReactActual = jest.requireActual('react');
+  const { View, Text, Pressable } = jest.requireActual('react-native');
+  return {
+    __esModule: true,
+    default: ({
+      label,
+      value,
+      onCopy,
+    }: {
+      label: string;
+      value?: string | null;
+      onCopy?: () => void;
+    }) =>
+      ReactActual.createElement(
+        View,
+        { testID: 'copyable-field' },
+        ReactActual.createElement(Text, null, label),
+        ReactActual.createElement(
+          Text,
+          { testID: 'copyable-value' },
+          value ?? '',
+        ),
+        ReactActual.createElement(Pressable, {
+          testID: 'copyable-trigger',
+          onPress: onCopy,
+        }),
+      ),
+  };
+});
+
+jest.mock('../../../../../locales/i18n', () => ({
+  strings: jest.fn(
+    (key: string, params?: { place?: string; code?: string }) => {
+      const map: Record<string, string> = {
+        'rewards.perps_trading_campaign_winning.you_won': 'You won',
+        'rewards.perps_trading_campaign_winning.email_instructions':
+          'Email perpscampaign@consensys.net with your code to claim your prize.',
+        'rewards.perps_trading_campaign_winning.open_mail': 'Open mail',
+        'rewards.perps_trading_campaign_winning.skip_for_now': 'Skip for now',
+        'rewards.perps_trading_campaign_winning.mail_subject':
+          'Perps Trading campaign prize claim',
+        'rewards.perps_trading_campaign_winning.mail_body': `My winning code: ${params?.code ?? ''}`,
+        'rewards.perps_trading_campaign_winning.winning_code': 'Winning code',
+        'rewards.perps_trading_campaign_winning.close_a11y': 'Close',
+      };
+      if (
+        key === 'rewards.perps_trading_campaign_winning.rank_label' &&
+        params?.place
+      ) {
+        return `${params.place} place`;
+      }
+      return map[key] ?? key;
+    },
+  ),
+}));
+
+describe('PerpsTradingCampaignWinningView', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseOutcome.mockReturnValue({
+      outcome: {
+        subscriptionId: 'sub-1',
+        outcomeStatus: 'pending',
+        winnerVerificationCode: 'PERPS-WIN-99',
+        rank: 3,
+      },
+      isLoading: false,
+      hasError: false,
+    });
+  });
+
+  it('renders the main container', () => {
+    const { getByTestId } = render(<PerpsTradingCampaignWinningView />);
+    expect(
+      getByTestId(PERPS_TRADING_CAMPAIGN_WINNING_VIEW_TEST_IDS.CONTAINER),
+    ).toBeTruthy();
+  });
+
+  it('shows "You won" and the rank from outcome', () => {
+    const { getByText } = render(<PerpsTradingCampaignWinningView />);
+    expect(getByText('You won')).toBeTruthy();
+    expect(getByText('3rd place')).toBeTruthy();
+  });
+
+  it('shows dash rank when outcome has no rank', () => {
+    mockUseOutcome.mockReturnValue({
+      outcome: {
+        subscriptionId: 'sub-1',
+        outcomeStatus: 'pending',
+        winnerVerificationCode: 'PERPS-WIN-99',
+        rank: null,
+      },
+      isLoading: false,
+      hasError: false,
+    });
+    const { getByText } = render(<PerpsTradingCampaignWinningView />);
+    expect(getByText('—')).toBeTruthy();
+  });
+
+  it('calls goBack when Skip for now is pressed', () => {
+    const { getByText } = render(<PerpsTradingCampaignWinningView />);
+    fireEvent.press(getByText('Skip for now'));
+    expect(mockGoBack).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls goBack when close button is pressed', () => {
+    const { getByLabelText } = render(<PerpsTradingCampaignWinningView />);
+    fireEvent.press(getByLabelText('Close'));
+    expect(mockGoBack).toHaveBeenCalledTimes(1);
+  });
+
+  it('copies winning code and tracks analytics when copy is triggered', () => {
+    const setStringSpy = jest.spyOn(Clipboard, 'setString');
+    const { getByTestId } = render(<PerpsTradingCampaignWinningView />);
+    fireEvent.press(getByTestId('copyable-trigger'));
+    expect(setStringSpy).toHaveBeenCalledWith('PERPS-WIN-99');
+    expect(mockTrackEvent).toHaveBeenCalled();
+  });
+
+  it('opens mailto with the correct email and code when Open mail is pressed', async () => {
+    const openSpy = jest.spyOn(Linking, 'openURL').mockResolvedValue(undefined);
+    const { getByText } = render(<PerpsTradingCampaignWinningView />);
+    fireEvent.press(getByText('Open mail'));
+    expect(openSpy).toHaveBeenCalled();
+    const url = openSpy.mock.calls[0][0] as string;
+    expect(url).toContain('mailto:perpscampaign@consensys.net');
+    expect(url).toContain(encodeURIComponent('PERPS-WIN-99'));
+    openSpy.mockRestore();
+  });
+
+  it('navigates to campaigns view when outcome has no verification code after loading', () => {
+    mockUseOutcome.mockReturnValue({
+      outcome: {
+        subscriptionId: 'sub-1',
+        outcomeStatus: 'finalized',
+        winnerVerificationCode: null,
+        rank: 21,
+      },
+      isLoading: false,
+      hasError: false,
+    });
+    render(<PerpsTradingCampaignWinningView />);
+    expect(mockNavigate).toHaveBeenCalledWith(
+      expect.stringContaining('Campaigns'),
+    );
+  });
+});