refactor(bridge): use MMDS HeaderStandard (#29700)

## **Description**

Bridge **Default** and **Custom** slippage bottom sheets still used
`HeaderCompactStandard` from `component-library`. This migrates both to
**`HeaderStandard`** from `@metamask/design-system-react-native` so
slippage UI follows the same header pattern as the rest of the app and
reduces reliance on the temporary header component.

---

## **Changelog**

CHANGELOG entry: null 

---

## **Related issues**

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

---

## **Manual testing steps**

```gherkin
Feature: Bridge slippage modal header

  Scenario: Default slippage sheet shows expected header and closes
    Given the user is on the Bridge flow with slippage configurable

    When the user opens the default slippage modal
    Then the sheet title shows the slippage string (same as before)
    And the user can dismiss the sheet with the close control

  Scenario: Custom slippage sheet shows expected header and closes
    Given the user is on the Bridge flow with custom slippage available

    When the user opens the custom slippage modal
    Then the sheet title shows the slippage string (same as before)
    And the user can dismiss the sheet with the close control
```

---

## **Screenshots/Recordings**

### **Before**


### **After**


---

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [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**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] 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 UI refactor limited to swapping header components and
updating accessibility labels/translations; behavior changes should be
confined to close button props and related tests.
> 
> **Overview**
> Bridge slippage bottom sheets (default and custom) now use MMDS
`HeaderStandard` instead of the temporary `HeaderCompactStandard`,
wiring `onClose` through the new header API.
> 
> Adds a localized `bridge.close` string and updates modal tests to
assert the header close button via `accessibilityLabel` from i18n rather
than a hardcoded "Close" mock.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
566ed03. 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/Bridge/components/SlippageModal/CustomSlippageModal.test.tsx

@@ -25,27 +25,6 @@ jest.mock(
   },
 );
 
-// Mock HeaderCompactStandard
-jest.mock(
-  '../../../../../component-library/components-temp/HeaderCompactStandard',
-  () => {
-    const ReactNative = jest.requireActual('react-native');
-    const { View, Text, TouchableOpacity } = ReactNative;
-
-    return {
-      __esModule: true,
-      default: (props: { title: string; onClose: () => void }) => (
-        <View testID="header-center">
-          <Text>{props.title}</Text>
-          <TouchableOpacity onPress={props.onClose} accessibilityLabel="Close">
-            <Text>Close</Text>
-          </TouchableOpacity>
-        </View>
-      ),
-    };
-  },
-);
-
 // Mock InputStepper
 jest.mock('../InputStepper', () => ({
   InputStepper: jest.fn(
@@ -172,6 +151,7 @@ jest.mock('../../../../../../locales/i18n', () => ({
       'bridge.slippage': 'Slippage',
       'bridge.cancel': 'Cancel',
       'bridge.confirm': 'Confirm',
+      'bridge.close': 'Close',
     };
     return translations[key] || key;
   }),
@@ -183,6 +163,7 @@ import { useSlippageStepperDescription } from '../../hooks/useSlippageStepperDes
 import { useParams } from '../../../../../util/navigation/navUtils';
 import { InputStepper } from '../InputStepper';
 import Keypad from '../../../../Base/Keypad';
+import { strings } from '../../../../../../locales/i18n';
 
 const mockUseSlippageConfig = useSlippageConfig as jest.MockedFunction<
   typeof useSlippageConfig
@@ -1041,7 +1022,7 @@ describe('CustomSlippageModal', () => {
     it('closes modal via header close button', () => {
       const { getByLabelText } = render(<CustomSlippageModal />);
 
-      const closeButton = getByLabelText('Close');
+      const closeButton = getByLabelText(strings('bridge.close'));
       fireEvent.press(closeButton);
 
       // Verify it doesn't throw and component handles close
@@ -1051,7 +1032,7 @@ describe('CustomSlippageModal', () => {
     it('does not dispatch slippage when closing without confirm', () => {
       const { getByLabelText } = render(<CustomSlippageModal />);
 
-      const closeButton = getByLabelText('Close');
+      const closeButton = getByLabelText(strings('bridge.close'));
       fireEvent.press(closeButton);
 
       expect(mockDispatch).not.toHaveBeenCalled();

app/components/UI/Bridge/components/SlippageModal/CustomSlippageModal.tsx

@@ -2,13 +2,13 @@ import React, { useCallback, useRef, useState } from 'react';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import { strings } from '../../../../../../locales/i18n';
 import { View } from 'react-native';
 import {
   Button,
   ButtonSize,
   ButtonVariant,
+  HeaderStandard,
 } from '@metamask/design-system-react-native';
 import Keypad from '../../../../Base/Keypad';
 import { InputStepper } from '../InputStepper';
@@ -97,9 +97,12 @@ export const CustomSlippageModal = () => {
 
   return (
     <BottomSheet ref={sheetRef}>
-      <HeaderCompactStandard
+      <HeaderStandard
         title={strings('bridge.slippage')}
         onClose={handleClose}
+        closeButtonProps={{
+          accessibilityLabel: strings('bridge.close'),
+        }}
       />
       <View style={customSlippageModalStyles.stepperContainer}>
         <InputStepper

app/components/UI/Bridge/components/SlippageModal/DefaultSlippageModal.test.tsx

@@ -22,27 +22,6 @@ jest.mock(
   },
 );
 
-// Mock HeaderCompactStandard
-jest.mock(
-  '../../../../../component-library/components-temp/HeaderCompactStandard',
-  () => {
-    const ReactNative = jest.requireActual('react-native');
-    const { View, Text, TouchableOpacity } = ReactNative;
-
-    return {
-      __esModule: true,
-      default: (props: { title: string; onClose: () => void }) => (
-        <View testID="header-center">
-          <Text>{props.title}</Text>
-          <TouchableOpacity onPress={props.onClose} accessibilityLabel="Close">
-            <Text>Close</Text>
-          </TouchableOpacity>
-        </View>
-      ),
-    };
-  },
-);
-
 // Mock dependencies
 jest.mock('./DefaultSlippageButtonGroup', () => ({
   DefaultSlippageButtonGroup: jest.fn(({ options }) => {
@@ -106,6 +85,7 @@ jest.mock('../../../../../../locales/i18n', () => ({
       'bridge.slippage': 'Slippage',
       'bridge.default_slippage_description': 'Set your slippage tolerance',
       'bridge.submit': 'Submit',
+      'bridge.close': 'Close',
     };
     return translations[key] || key;
   }),
@@ -115,6 +95,7 @@ import { useGetSlippageOptions } from '../../hooks/useGetSlippageOptions';
 import { useSlippageConfig } from '../../hooks/useSlippageConfig';
 import { useParams } from '../../../../../util/navigation/navUtils';
 import { AUTO_SLIPPAGE_VALUE } from './constants';
+import { strings } from '../../../../../../locales/i18n';
 
 const mockUseGetSlippageOptions = useGetSlippageOptions as jest.MockedFunction<
   typeof useGetSlippageOptions
@@ -215,7 +196,7 @@ describe('DefaultSlippageModal', () => {
     it('closes bottom sheet when close is called', () => {
       const { getByLabelText } = render(<DefaultSlippageModal />);
 
-      const closeButton = getByLabelText('Close');
+      const closeButton = getByLabelText(strings('bridge.close'));
       fireEvent.press(closeButton);
 
       // Bottom sheet close is handled internally by ref

app/components/UI/Bridge/components/SlippageModal/DefaultSlippageModal.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useRef, useState } from 'react';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
@@ -9,6 +8,7 @@ import {
   Button,
   ButtonSize,
   ButtonVariant,
+  HeaderStandard,
   Text,
 } from '@metamask/design-system-react-native';
 import { DefaultSlippageButtonGroup } from './DefaultSlippageButtonGroup';
@@ -80,9 +80,12 @@ export const DefaultSlippageModal = () => {
 
   return (
     <BottomSheet ref={sheetRef}>
-      <HeaderCompactStandard
+      <HeaderStandard
         title={strings('bridge.slippage')}
         onClose={handleClose}
+        closeButtonProps={{
+          accessibilityLabel: strings('bridge.close'),
+        }}
       />
       <View style={styles.descriptionContainer}>
         <Text style={styles.descriptionText}>

locales/languages/en.json

@@ -7368,6 +7368,7 @@
     "price_impact_execution_description": "You'll lose approximately {{priceImpact}} of your token's value on this swap. Try lowering the amount or choosing a more liquid route.",
     "proceed": "Proceed",
     "cancel": "Cancel",
+    "close": "Close",
     "slippage_info_title": "Slippage",
     "slippage_info_description": "The % change in price you're willing to allow before your transaction is canceled.",
     "blockaid_error_title": "This transaction will be reverted",