refactor(rewards): use MMDS HeaderStandard (#29706)

## **Description**

This PR replaces `HeaderCompactStandard` with `HeaderStandard` from
`@metamask/design-system-react-native` across Rewards screens and
related sheets, and updates unit tests to match.

**Reason:** Align Rewards with the MetaMask design system and reduce use
of `component-library/components-temp` for standard headers.

## **Changelog**

CHANGELOG entry: null 

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-703

<!-- Add issue link(s) if applicable. -->

## **Manual testing steps**

```gherkin
Feature: Rewards headers use design system HeaderStandard

  Scenario: Benefits and campaigns
    Given the user opens Rewards benefits (list or single benefit), campaigns list, or campaign mechanics
    When they use the header back control and read titles
    Then navigation and copy match prior behavior

  Scenario: Ondo and Season One campaign flows
    Given the user opens Ondo campaign details, portfolio, or Season One campaign details
    When they navigate back from the header
    Then behavior matches the previous implementation

  Scenario: Rewards settings and auxiliary sheets
    Given the user opens Rewards settings, referral, MUSD calculator, end-of-season claim, linked off-device accounts, opt-in modal, or environment toggle surfaces touched by this PR
    When they dismiss or navigate via the header
    Then sheets and screens behave as before
```

## **Screenshots/Recordings**

### **Before**


### **After**


## **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]
> **Low Risk**
> Low risk refactor limited to UI header component swaps and
corresponding test updates; main risk is minor visual/layout or `testID`
regressions affecting navigation/back-button automation.
> 
> **Overview**
> Rewards screens and sheets now use **MMDS `HeaderStandard`** instead
of the legacy `HeaderCompactStandard` component, including benefits,
campaigns, referral, settings, calculators, and multiple bottom
sheets/modals.
> 
> Unit tests were updated to remove `HeaderCompactStandard` mocks, align
back/close button `testID`s (e.g., campaign mechanics/details), and add
missing Safe Area hook stubs (notably `useSafeAreaInsets`) so
`HeaderStandard` can render cleanly in Jest.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
d6a8c44. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: brianacnguyen

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

@@ -69,27 +69,6 @@ jest.mock('@metamask/design-system-twrnc-preset', () => ({
   useTailwind: () => ({ style: (...args: unknown[]) => args }),
 }));
 
-jest.mock(
-  '../../../../component-library/components-temp/HeaderCompactStandard',
-  () => {
-    const ReactActual = jest.requireActual('react');
-    const { Pressable, Text, View } = jest.requireActual('react-native');
-    return {
-      __esModule: true,
-      default: ({ title, onBack }: { title: string; onBack: () => void }) =>
-        ReactActual.createElement(
-          View,
-          { testID: 'header' },
-          ReactActual.createElement(Text, null, title),
-          ReactActual.createElement(Pressable, {
-            onPress: onBack,
-            testID: 'header-back-button',
-          }),
-        ),
-    };
-  },
-);
-
 jest.mock('../../../Views/ErrorBoundary', () => ({
   __esModule: true,
   default: ({ children }: { children: React.ReactNode }) => children,
@@ -104,6 +83,7 @@ jest.mock('react-native-safe-area-context', () => {
       testID,
     }: React.PropsWithChildren<{ testID?: string }>) =>
       ReactActual.createElement(View, { testID }, children),
+    useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   };
 });
 

app/components/UI/Rewards/Views/BenefitFullView.tsx

@@ -18,12 +18,12 @@ import {
   Text,
   TextColor,
   TextVariant,
+  HeaderStandard,
 } from '@metamask/design-system-react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { BenefitFullViewRouteProp } from './BenefitFullView.types.ts';
 import { REWARDS_VIEW_SELECTORS } from './RewardsView.constants.ts';
 import { formatDateRemaining } from '../utils/formatUtils.ts';
-import HeaderCompactStandard from '../../../../component-library/components-temp/HeaderCompactStandard';
 import { strings } from '../../../../../locales/i18n';
 import ErrorBoundary from '../../../Views/ErrorBoundary';
 import Routes from '../../../../constants/navigation/Routes.ts';
@@ -80,7 +80,7 @@ const BenefitFullView = () => {
         style={tw.style('flex-1')}
         testID={REWARDS_VIEW_SELECTORS.DETAIL_BENEFIT_VIEW}
       >
-        <HeaderCompactStandard
+        <HeaderStandard
           title={strings('rewards.benefits.title_claim')}
           onBack={() => navigation.goBack()}
           backButtonProps={{ testID: 'header-back-button' }}

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

@@ -43,32 +43,6 @@ jest.mock('@metamask/design-system-twrnc-preset', () => ({
   useTailwind: () => ({ style: (...args: unknown[]) => args }),
 }));
 
-jest.mock('@metamask/design-system-react-native', () => {
-  const actual = jest.requireActual('@metamask/design-system-react-native');
-  return { ...actual };
-});
-
-jest.mock(
-  '../../../../component-library/components-temp/HeaderCompactStandard',
-  () => {
-    const ReactActual = jest.requireActual('react');
-    const { Pressable, Text, View } = jest.requireActual('react-native');
-    return {
-      __esModule: true,
-      default: ({ title, onBack }: { title: string; onBack: () => void }) =>
-        ReactActual.createElement(
-          View,
-          { testID: 'header' },
-          ReactActual.createElement(Text, null, title),
-          ReactActual.createElement(Pressable, {
-            onPress: onBack,
-            testID: 'header-back-button',
-          }),
-        ),
-    };
-  },
-);
-
 jest.mock('../../../Views/ErrorBoundary', () => ({
   __esModule: true,
   default: ({ children }: { children: React.ReactNode }) => children,
@@ -123,6 +97,7 @@ jest.mock('react-native-safe-area-context', () => {
       testID,
     }: React.PropsWithChildren<{ testID?: string }>) =>
       ReactActual.createElement(View, { testID }, children),
+    useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
   };
 });
 

app/components/UI/Rewards/Views/BenefitsFullView.tsx

@@ -1,4 +1,8 @@
-import { Text, TextVariant } from '@metamask/design-system-react-native';
+import {
+  HeaderStandard,
+  Text,
+  TextVariant,
+} from '@metamask/design-system-react-native';
 import React, { useState } from 'react';
 import useTrackRewardsPageView from '../hooks/useTrackRewardsPageView';
 import { strings } from '../../../../../locales/i18n';
@@ -12,7 +16,6 @@ import { useBenefits } from '../hooks/useBenefits.ts';
 import { SubscriptionBenefitDto } from '../../../../core/Engine/controllers/rewards-controller/types.ts';
 import BenefitCard from '../components/Benefits/BenefitCard.tsx';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import HeaderCompactStandard from '../../../../component-library/components-temp/HeaderCompactStandard';
 import { useNavigation } from '@react-navigation/native';
 import ErrorBoundary from '../../../Views/ErrorBoundary';
 import TheMiracleFooter from '../components/Benefits/TheMiracleFooter.tsx';
@@ -59,7 +62,7 @@ const BenefitsFullView = () => {
         style={tw.style('flex-1 bg-default')}
         testID={REWARDS_VIEW_SELECTORS.LIST_BENEFIT_VIEW}
       >
-        <HeaderCompactStandard
+        <HeaderStandard
           title={strings('rewards.benefits.title')}
           onBack={() => navigation.goBack()}
           backButtonProps={{ testID: 'header-back-button' }}

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

@@ -16,36 +16,10 @@ jest.mock('@react-navigation/native', () => ({
   useRoute: () => ({ params: { campaignId: 'campaign-1' } }),
 }));
 
-jest.mock('@metamask/design-system-react-native', () => {
-  const actual = jest.requireActual('@metamask/design-system-react-native');
-  return { ...actual };
-});
-
 jest.mock('@metamask/design-system-twrnc-preset', () => ({
   useTailwind: () => ({ style: (...args: unknown[]) => args }),
 }));
 
-jest.mock(
-  '../../../../component-library/components-temp/HeaderCompactStandard',
-  () => {
-    const ReactActual = jest.requireActual('react');
-    const { View, Text, Pressable } = jest.requireActual('react-native');
-    return {
-      __esModule: true,
-      default: ({ title, onBack }: { title: string; onBack: () => void }) =>
-        ReactActual.createElement(
-          View,
-          { testID: 'header' },
-          ReactActual.createElement(Text, null, title),
-          ReactActual.createElement(Pressable, {
-            onPress: onBack,
-            testID: 'header-back-button',
-          }),
-        ),
-    };
-  },
-);
-
 jest.mock('../../../Views/ErrorBoundary', () => {
   const ReactActual = jest.requireActual('react');
   return {
@@ -151,7 +125,7 @@ describe('CampaignMechanicsView', () => {
 
   it('navigates back when the back button is pressed', () => {
     const { getByTestId } = render(<CampaignMechanicsView />);
-    fireEvent.press(getByTestId('header-back-button'));
+    fireEvent.press(getByTestId('campaign-mechanics-back-button'));
     expect(mockGoBack).toHaveBeenCalledTimes(1);
   });
 

app/components/UI/Rewards/Views/CampaignMechanicsView.tsx

@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react';
 import { ScrollView } from 'react-native';
 import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
-import { Box } from '@metamask/design-system-react-native';
+import { Box, HeaderStandard } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import HeaderCompactStandard from '../../../../component-library/components-temp/HeaderCompactStandard';
 import ErrorBoundary from '../../../Views/ErrorBoundary';
 import CampaignHowItWorks from '../components/Campaigns/CampaignHowItWorks';
 import ContentfulRichText, {
@@ -54,7 +53,7 @@ const CampaignMechanicsView: React.FC = () => {
         style={tw.style('flex-1 bg-default')}
         testID={CAMPAIGN_MECHANICS_TEST_IDS.CONTAINER}
       >
-        <HeaderCompactStandard
+        <HeaderStandard
           title={strings('rewards.campaign_mechanics.title')}
           onBack={() => navigation.goBack()}
           backButtonProps={{ testID: 'campaign-mechanics-back-button' }}

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

@@ -15,11 +15,6 @@ jest.mock('@react-navigation/native', () => ({
   useNavigation: () => ({ goBack: mockGoBack }),
 }));
 
-jest.mock('@metamask/design-system-react-native', () => {
-  const actual = jest.requireActual('@metamask/design-system-react-native');
-  return { ...actual };
-});
-
 jest.mock('@metamask/design-system-twrnc-preset', () => ({
   useTailwind: () => ({ style: (...args: unknown[]) => args }),
 }));
@@ -102,27 +97,6 @@ jest.mock('../components/RewardsErrorBanner', () => {
   };
 });
 
-jest.mock(
-  '../../../../component-library/components-temp/HeaderCompactStandard',
-  () => {
-    const ReactActual = jest.requireActual('react');
-    const { View, Text, Pressable } = jest.requireActual('react-native');
-    return {
-      __esModule: true,
-      default: ({ title, onBack }: { title: string; onBack: () => void }) =>
-        ReactActual.createElement(
-          View,
-          { testID: 'header' },
-          ReactActual.createElement(Text, null, title),
-          ReactActual.createElement(Pressable, {
-            onPress: onBack,
-            testID: 'header-back-button',
-          }),
-        ),
-    };
-  },
-);
-
 jest.mock('../../../Views/ErrorBoundary', () => {
   const ReactActual = jest.requireActual('react');
   return {

app/components/UI/Rewards/Views/CampaignsView.tsx

@@ -9,12 +9,12 @@ import {
   TextVariant,
   BoxFlexDirection,
   BoxAlignItems,
+  HeaderStandard,
   Skeleton,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import ErrorBoundary from '../../../Views/ErrorBoundary';
-import HeaderCompactStandard from '../../../../component-library/components-temp/HeaderCompactStandard';
 import { useRewardCampaigns } from '../hooks/useRewardCampaigns';
 import RewardsErrorBanner from '../components/RewardsErrorBanner';
 import { REWARDS_VIEW_SELECTORS } from './RewardsView.constants';
@@ -110,7 +110,7 @@ const CampaignsView: React.FC = () => {
         style={tw.style('flex-1 bg-default')}
         testID={REWARDS_VIEW_SELECTORS.CAMPAIGNS_VIEW}
       >
-        <HeaderCompactStandard
+        <HeaderStandard
           title={strings('rewards.campaigns_view.title')}
           onBack={() => navigation.goBack()}
           backButtonProps={{ testID: 'header-back-button' }}

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

@@ -29,26 +29,6 @@ jest.mock('../../../Views/ErrorBoundary', () => ({
   default: ({ children }: { children: React.ReactNode }) => children,
 }));
 
-jest.mock(
-  '../../../../component-library/components-temp/HeaderCompactStandard',
-  () => {
-    const ReactActual = jest.requireActual('react');
-    const { View, Pressable } = jest.requireActual('react-native');
-    return {
-      __esModule: true,
-      default: ({ onBack }: { title: string; onBack: () => void }) =>
-        ReactActual.createElement(
-          View,
-          { testID: 'header' },
-          ReactActual.createElement(Pressable, {
-            onPress: onBack,
-            testID: 'header-back-button',
-          }),
-        ),
-    };
-  },
-);
-
 jest.mock('../components/Tabs/MusdCalculatorTab/MusdCalculatorTab', () => {
   const ReactActual = jest.requireActual('react');
   const { View } = jest.requireActual('react-native');

app/components/UI/Rewards/Views/MusdCalculatorView.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import { useNavigation } from '@react-navigation/native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import ErrorBoundary from '../../../Views/ErrorBoundary';
-import HeaderCompactStandard from '../../../../component-library/components-temp/HeaderCompactStandard';
 import MusdCalculatorTab from '../components/Tabs/MusdCalculatorTab/MusdCalculatorTab';
 import { strings } from '../../../../../locales/i18n';
 import useTrackRewardsPageView from '../hooks/useTrackRewardsPageView';
@@ -20,9 +20,10 @@ const MusdCalculatorView: React.FC = () => {
         edges={{ top: 'additive' }}
         style={tw.style('flex-1 bg-default')}
       >
-        <HeaderCompactStandard
+        <HeaderStandard
           title={strings('rewards.musd.page_title')}
           onBack={() => navigation.goBack()}
+          backButtonProps={{ testID: 'header-back-button' }}
         />
         <MusdCalculatorTab />
       </SafeAreaView>