refactor(ui): use MMDS HeaderStandard in misc UI surfaces

app/components/UI/Card/components/Onboarding/RegionSelectorModal.tsx

@@ -11,7 +11,6 @@ import Fuse from 'fuse.js';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import ListItemSelect from '../../../../../component-library/components/List/ListItemSelect';
 import ListItemColumn, {
   WidthType,
@@ -27,6 +26,7 @@ import {
   Box,
   BoxAlignItems,
   BoxFlexDirection,
+  HeaderStandard,
   Text,
   TextVariant,
 } from '@metamask/design-system-react-native';
@@ -209,7 +209,7 @@ function RegionSelectorModal() {
       keyboardAvoidingViewEnabled={false}
       testID="region-selector-modal"
     >
-      <HeaderCompactStandard
+      <HeaderStandard
         title={strings('card.card_onboarding.region_selector.title')}
         onClose={handleClose}
         closeButtonProps={{ testID: 'region-selector-close-button' }}

app/components/UI/NetworkManager/index.tsx

@@ -1,5 +1,6 @@
 // third party dependencies
 import { View } from 'react-native';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import React, { useRef, useMemo, useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
@@ -18,7 +19,6 @@ import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
 import { MetaMetricsEvents } from '../../../core/Analytics/MetaMetrics.events';
 import { strings } from '../../../../locales/i18n';
 import BottomSheetHeader from '../../../component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader';
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 import BottomSheetFooter from '../../../component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter';
 import { ButtonsAlignment } from '../../../component-library/components/BottomSheets/BottomSheetFooter';
 import { ButtonProps } from '../../../component-library/components/Buttons/Button/Button.types';
@@ -351,7 +351,7 @@ const NetworkManager = () => {
         shouldNavigateBack
       >
         <View style={containerStyle}>
-          <HeaderCompactStandard
+          <HeaderStandard
             title={strings('wallet.networks')}
             onClose={() => sheetRef.current?.onCloseBottomSheet()}
           />

app/components/UI/OTAUpdatesModal/OTAUpdatesModal.test.tsx

@@ -27,32 +27,6 @@ jest.mock('@metamask/design-system-twrnc-preset', () => ({
   useTailwind: () => mockTw,
 }));
 
-// Mock HeaderCompactStandard
-jest.mock(
-  '../../../component-library/components-temp/HeaderCompactStandard',
-  () => {
-    const ReactActual = jest.requireActual('react');
-    const {
-      View: ReactNativeView,
-      Pressable: ReactNativePressable,
-      Text: ReactNativeText,
-    } = jest.requireActual('react-native');
-
-    return (props: { children: React.ReactNode; onClose?: () => void }) =>
-      ReactActual.createElement(
-        ReactNativeView,
-        { testID: 'header' },
-        props.children,
-        props.onClose &&
-          ReactActual.createElement(
-            ReactNativePressable,
-            { testID: 'close-button', onPress: props.onClose },
-            ReactActual.createElement(ReactNativeText, {}, 'Close'),
-          ),
-      );
-  },
-);
-
 // Mock for BottomSheet onCloseBottomSheet
 const mockOnCloseBottomSheet = jest.fn((callback?: () => void) => {
   if (callback) callback();

app/components/UI/OTAUpdatesModal/OTAUpdatesModal.tsx

@@ -4,8 +4,9 @@ import { reloadAsync } from 'expo-updates';
 import {
   Box,
   Button,
-  ButtonVariant,
   ButtonSize,
+  ButtonVariant,
+  HeaderStandard,
   Text,
   TextVariant,
 } from '@metamask/design-system-react-native';
@@ -21,8 +22,6 @@ import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../component-library/components/BottomSheets/BottomSheet';
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
-
 /* eslint-disable import-x/no-commonjs, @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */
 const foxLogo = require('../../../images/branding/fox.png');
 const metamaskNameLightMode = require('../../../images/branding/metamask-name.png');
@@ -96,16 +95,17 @@ const OTAUpdatesModal = () => {
       shouldNavigateBack
       style={tw.style('bg-default')}
     >
-      <HeaderCompactStandard
+      <HeaderStandard
         twClassName="px-4"
         onClose={() => dismissBottomSheet()}
+        closeButtonProps={{ testID: 'close-button' }}
       >
         <Image
           style={tw.style('h-8')}
           source={metamaskName}
           resizeMode="contain"
         />
-      </HeaderCompactStandard>
+      </HeaderStandard>
       <Box twClassName="px-6 pt-2 items-center">
         <Box twClassName="items-center py-6">
           <Box twClassName="items-center mb-6">

app/components/UI/SeedphraseModal/index.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import { View, StyleSheet, Platform } from 'react-native';
-import { fontStyles } from '../../../styles/common';
 import { strings } from '../../../../locales/i18n';
 import { useTheme } from '../../../util/theme';
 import BottomSheet from '../../../component-library/components/BottomSheets/BottomSheet';
@@ -13,7 +13,6 @@ import Button, {
   ButtonWidthTypes,
   ButtonSize,
 } from '../../../component-library/components/Buttons/Button';
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 import { useNavigation } from '@react-navigation/native';
 
 const createStyles = (colors) =>
@@ -68,7 +67,7 @@ const SeedphraseModal = () => {
   return (
     <BottomSheet ref={bottomSheetRef}>
       <View style={styles.modalContainer}>
-        <HeaderCompactStandard
+        <HeaderStandard
           title={strings('account_backup_step_1.what_is_seedphrase_title')}
           onClose={hideWhatIsSeedphrase}
         />

app/components/UI/SelectComponent/index.js

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import PropTypes from 'prop-types';
 import {
   ScrollView,
@@ -14,8 +15,6 @@ import dismissKeyboard from 'react-native/Libraries/Utilities/dismissKeyboard';
 import IconCheck from 'react-native-vector-icons/MaterialCommunityIcons';
 import Device from '../../../util/device';
 import { ThemeContext, mockTheme } from '../../../util/theme';
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
-
 const ROW_HEIGHT = 35;
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -182,7 +181,7 @@ export default class SelectComponent extends PureComponent {
           backdropOpacity={1}
         >
           <View style={styles.modalView}>
-            <HeaderCompactStandard
+            <HeaderStandard
               title={this.props.label}
               onClose={this.hidePicker}
             />

app/components/UI/Stake/components/PoolStakingLearnMoreModal/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
 import { ScrollView } from 'react-native';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import { useTheme } from '../../../../../util/theme';
 
 import { useRoute, RouteProp } from '@react-navigation/native';
@@ -125,7 +125,7 @@ const PoolStakingLearnMoreModal = () => {
   return (
     <BottomSheet ref={sheetRef} isInteractable={false}>
       <ScrollView bounces={false}>
-        <HeaderCompactStandard
+        <HeaderStandard
           title={strings('stake.stake_eth_and_earn')}
           onClose={handleClose}
         />