refactor(bridge): use MMDS HeaderStandard

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",