refactor(views): use MMDS HeaderStandard

app/components/Views/AccountSelector/AccountSelector.tsx

@@ -7,6 +7,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import {
   KeyboardAvoidingView,
   Platform,
@@ -30,7 +31,6 @@ import Animated, {
 // External dependencies.
 import MultichainAccountSelectorList from '../../../component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList';
 import { MultichainAddWalletActions } from '../../../component-library/components-temp/MultichainAccounts';
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 import Engine from '../../../core/Engine';
 import { store } from '../../../store';
 import { MetaMetricsEvents } from '../../../core/Analytics';
@@ -354,7 +354,7 @@ const AccountSelector = ({ route }: AccountSelectorProps) => {
             animatedStyle,
           ]}
         >
-          <HeaderCompactStandard
+          <HeaderStandard
             title={strings('accounts.accounts_title')}
             onBack={closeModal}
             backButtonProps={{
@@ -380,7 +380,7 @@ const AccountSelector = ({ route }: AccountSelectorProps) => {
               },
             ]}
           >
-            <HeaderCompactStandard
+            <HeaderStandard
               title={
                 screen === AccountSelectorScreens.AddAccountActions
                   ? strings('account_actions.add_account')

app/components/Views/AccountsMenu/AccountsMenu.tsx

@@ -4,6 +4,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import {
+  HeaderStandard,
   Icon,
   IconName,
   IconSize,
@@ -15,7 +16,6 @@ import {
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import MainActionButton from '../../../component-library/components-temp/MainActionButton';
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard/HeaderCompactStandard';
 import ActionListItem from '../../../component-library/components-temp/ActionListItem';
 import { IconName as LocalIconName } from '../../../component-library/components/Icons/Icon';
 import { EVENT_NAME } from '../../../core/Analytics/MetaMetrics.events';
@@ -357,7 +357,7 @@ const AccountsMenu = () => {
       edges={{ bottom: 'additive' }}
       style={tw.style('flex-1', { backgroundColor: colors.background.default })}
     >
-      <HeaderCompactStandard
+      <HeaderStandard
         onBack={handleBack}
         backButtonProps={{ testID: AccountsMenuSelectorsIDs.BACK_BUTTON }}
         includesTopInset

app/components/Views/ActivityView/index.js

@@ -10,9 +10,8 @@ import Avatar, {
   AvatarSize,
   AvatarVariant,
 } from '../../../component-library/components/Avatars/Avatar';
-import { Box } from '@metamask/design-system-react-native';
+import { Box, HeaderStandard } from '@metamask/design-system-react-native';
 import ButtonBase from '../../../component-library/components/Buttons/Button/foundation/ButtonBase';
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 import HeaderRoot from '../../../component-library/components-temp/HeaderRoot';
 import { IconName } from '../../../component-library/components/Icons/Icon';
 import TextComponent, {
@@ -188,7 +187,7 @@ const ActivityView = () => {
         testID={ActivitiesViewSelectorsIDs.SAFE_AREA_VIEW}
       >
         {showBackButton ? (
-          <HeaderCompactStandard
+          <HeaderStandard
             title={strings('activity_view.title')}
             onBack={handleBackPress}
             backButtonProps={{ testID: 'activity-view-back-button' }}

app/components/Views/ActivityView/index.test.tsx

@@ -427,7 +427,7 @@ describe('ActivityView', () => {
       expect(getByText('Activity')).toBeOnTheScreen();
     });
 
-    it('renders HeaderCompactStandard with back button when showBackButton is true', () => {
+    it('renders HeaderStandard with back button when showBackButton is true', () => {
       mockRoute.params = { showBackButton: true };
 
       const { getByTestId } = renderComponent(mockInitialState);
@@ -446,7 +446,7 @@ describe('ActivityView', () => {
       expect(queryByTestId(ActivitiesViewSelectorsIDs.HEADER_ROOT)).toBeNull();
     });
 
-    it('does not render HeaderCompactStandard when showBackButton is false', () => {
+    it('does not render HeaderStandard when showBackButton is false', () => {
       mockRoute.params = { showBackButton: false };
 
       const { queryByTestId } = renderComponent(mockInitialState);

app/components/Views/AddAsset/AddAsset.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import {
   SafeAreaView,
   useSafeAreaInsets,
@@ -14,7 +15,6 @@ import Engine from '../../../core/Engine';
 import { SupportedCaipChainId } from '@metamask/multichain-network-controller';
 import { isNonEvmChainId } from '../../../core/Multichain/utils';
 import { useNetworkEnablement } from '../../hooks/useNetworkEnablement/useNetworkEnablement';
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 import NetworkListBottomSheet from './components/NetworkListBottomSheet/NetworkListBottomSheet';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import TokenView from './Views/TokenView/TokenView';
@@ -76,7 +76,7 @@ const AddAsset = () => {
       testID={`add-${assetType}-screen`}
     >
       {/* Header */}
-      <HeaderCompactStandard
+      <HeaderStandard
         title={strings(
           `add_asset.${assetType === 'token' ? 'title' : 'title_nft'}`,
         )}

app/components/Views/AddAsset/components/NetworkListBottomSheet/NetworkListBottomSheet.tsx

@@ -7,7 +7,7 @@ import { strings } from '../../../../../../locales/i18n';
 import { useSelector } from 'react-redux';
 import { selectNetworkConfigurations } from '../../../../../selectors/networkController';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { Box } from '@metamask/design-system-react-native';
+import { Box, HeaderStandard } from '@metamask/design-system-react-native';
 import Device from '../../../../../util/device';
 import Cell, {
   CellVariant,
@@ -18,7 +18,6 @@ import {
 } from '../../../../../component-library/components/Avatars/Avatar';
 import { CaipChainId, Hex } from '@metamask/utils';
 import { getNetworkImageSource } from '../../../../../util/networks';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import {
   MultichainNetworkConfiguration,
   SupportedCaipChainId,
@@ -83,7 +82,7 @@ export default function NetworkListBottomSheet({
       )}
       testID={NETWORK_LIST_BOTTOM_SHEET}
     >
-      <HeaderCompactStandard
+      <HeaderStandard
         title={strings('networks.select_network')}
         onClose={() => {
           sheetRef.current?.onCloseBottomSheet(() => {

app/components/Views/AddWallet/AddWallet.tsx

@@ -8,6 +8,7 @@ import {
   BoxFlexDirection,
   BoxJustifyContent,
   FontWeight,
+  HeaderStandard,
   Icon,
   IconColor,
   IconName,
@@ -24,8 +25,6 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
 import { IMetaMetricsEvent } from '../../../core/Analytics/MetaMetrics.types';
 import { useAnalytics } from '../../../components/hooks/useAnalytics/useAnalytics';
 import { AddWalletTestIds } from './AddWallet.testIds';
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
-
 interface ActionConfig {
   analyticsEvent: IMetaMetricsEvent;
   description: string;
@@ -87,7 +86,7 @@ const AddWallet = () => {
   return (
     <SafeAreaView style={tw`flex-1 bg-default`} edges={['top', 'bottom']}>
       <Box testID={AddWalletTestIds.SCREEN} twClassName="flex-1 bg-default">
-        <HeaderCompactStandard
+        <HeaderStandard
           backButtonProps={{
             accessibilityLabel: strings('navigation.back'),
             onPress: handleBack,

app/components/Views/AesCryptoTestForm/AesCryptoTestForm.test.tsx

@@ -41,7 +41,7 @@ describe('AesCryptoTestForm', () => {
     expect(safeArea.props.edges).toMatchObject({ bottom: 'additive' });
   });
 
-  it('renders HeaderCompactStandard with title and back button', () => {
+  it('renders HeaderStandard with title and back button', () => {
     const { getByTestId, getByText } = render(<AesCryptoTestForm />);
 
     expect(getByTestId(aesCryptoFormHeader)).toBeOnTheScreen();

app/components/Views/AesCryptoTestForm/AesCryptoTestForm.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useCallback } from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import { ScrollView } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useNavigation } from '@react-navigation/native';
 
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 import {
   Encryptor,
   ENCRYPTION_LIBRARY,
@@ -142,7 +142,7 @@ const AesCryptoTestForm = () => {
       style={styles.container}
       testID={aesCryptoFormSafeArea}
     >
-      <HeaderCompactStandard
+      <HeaderStandard
         title={strings('app_settings.aes_crypto_test_form_title')}
         onBack={() => navigation.goBack()}
         includesTopInset

app/components/Views/ConnectHardware/SelectHardware/index.tsx

@@ -5,6 +5,7 @@ import {
   BoxFlexDirection,
   BoxJustifyContent,
   FontWeight,
+  HeaderStandard,
   Icon,
   IconName,
   IconSize,
@@ -17,7 +18,6 @@ import React, { ReactNode, useEffect } from 'react';
 import { Image, Pressable } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { strings } from '../../../../../locales/i18n';
-import HeaderCompactStandard from '../../../../component-library/components-temp/HeaderCompactStandard';
 import TitleStandard from '../../../../component-library/components-temp/TitleStandard';
 import Routes from '../../../../constants/navigation/Routes';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
@@ -187,7 +187,7 @@ const SelectHardwareWallet = () => {
         backgroundColor: colors.background.default,
       })}
     >
-      <HeaderCompactStandard includesTopInset onBack={navigation.goBack} />
+      <HeaderStandard includesTopInset onBack={navigation.goBack} />
       <TitleStandard
         title={strings('connect_hardware.title_select_hardware')}
         twClassName="px-4 pb-6"

app/components/Views/FeatureFlagOverride/FeatureFlagOverride.test.tsx

@@ -336,7 +336,7 @@ describe('FeatureFlagOverride', () => {
       ).toBeOnTheScreen();
     });
 
-    it('renders HeaderCompactStandard with title', () => {
+    it('renders HeaderStandard with title', () => {
       renderWithProviders();
 
       expect(

app/components/Views/FeatureFlagOverride/FeatureFlagOverride.tsx

@@ -20,9 +20,9 @@ import {
   Button,
   ButtonVariant,
   ButtonSize,
+  HeaderStandard,
 } from '@metamask/design-system-react-native';
 
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 import { useTheme } from '../../../util/theme';
 import {
   FeatureFlagInfo,
@@ -500,7 +500,7 @@ const FeatureFlagOverride: React.FC = () => {
       testID="feature-flag-override-screen"
       edges={['top', 'left', 'right']}
     >
-      <HeaderCompactStandard
+      <HeaderStandard
         title="Feature Flag Override"
         onBack={handleGoBack}
         includesTopInset={false}

app/components/Views/ImportNewSecretRecoveryPhrase/index.tsx

@@ -26,6 +26,7 @@ import {
   ButtonIcon,
   ButtonSize,
   ButtonVariant,
+  HeaderStandard,
   IconName,
   IconColor,
   Text,
@@ -35,7 +36,6 @@ import {
 import { ImportSRPIDs } from './SRPImport.testIds';
 import { importNewSecretRecoveryPhrase } from '../../../actions/multiSrp';
 import { IconName as ComponentIconName } from '../../../component-library/components/Icons/Icon';
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 import TitleStandard from '../../../component-library/components-temp/TitleStandard';
 import {
   ToastContext,
@@ -241,7 +241,7 @@ const ImportNewSecretRecoveryPhrase = () => {
       edges={{ bottom: 'additive' }}
       style={tw.style('flex-1 bg-default')}
     >
-      <HeaderCompactStandard
+      <HeaderStandard
         includesTopInset
         backButtonProps={{
           onPress: dismiss,

app/components/Views/ImportPrivateKey/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import { useSelector } from 'react-redux';
 import { Alert, TextInput, View, DimensionValue } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -23,7 +24,6 @@ import Button, {
   ButtonSize,
   ButtonWidthTypes,
 } from '../../../component-library/components/Buttons/Button';
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 import TitleStandard from '../../../component-library/components-temp/TitleStandard';
 import { selectSeedlessOnboardingAuthConnection } from '../../../selectors/seedlessOnboardingController';
 import { AuthConnection } from '@metamask/seedless-onboarding-controller';
@@ -156,7 +156,7 @@ const ImportPrivateKey = () => {
         showsVerticalScrollIndicator={false}
       >
         <View testID={ImportAccountFromPrivateKeyIDs.CONTAINER}>
-          <HeaderCompactStandard
+          <HeaderStandard
             includesTopInset
             backButtonProps={{
               onPress: dismiss,

app/components/Views/MultichainAccounts/sheets/ShareAddressQR/ShareAddressQR.tsx

@@ -4,7 +4,6 @@ import { AccountGroupId } from '@metamask/account-api';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import { strings } from '../../../../../../locales/i18n';
 import {
   ParamListBase,
@@ -19,6 +18,7 @@ import {
   Button,
   ButtonVariant,
   ButtonSize,
+  HeaderStandard,
   TextVariant,
   TextColor,
   FontWeight,
@@ -73,7 +73,7 @@ export const ShareAddressQR = () => {
 
   return (
     <BottomSheet ref={sheetRef}>
-      <HeaderCompactStandard
+      <HeaderStandard
         title={`${accountGroupName} / ${networkName}`}
         onClose={handleOnBack}
         closeButtonProps={{ testID: ShareAddressQRIds.GO_BACK }}

app/components/Views/NetworksManagement/NetworkDetailsView/NetworkDetailsView.tsx

@@ -21,6 +21,7 @@ import {
   Text,
   TextVariant,
   FontWeight,
+  HeaderStandard,
 } from '@metamask/design-system-react-native';
 
 import { CaipChainId } from '@metamask/utils';
@@ -33,7 +34,6 @@ import {
 } from '../../../../util/networks';
 import { useNetworkEnablement } from '../../../hooks/useNetworkEnablement/useNetworkEnablement';
 import { selectIsRpcFailoverEnabled } from '../../../../selectors/featureFlagController/walletFramework';
-import HeaderCompactStandard from '../../../../component-library/components-temp/HeaderCompactStandard';
 import AvatarNetwork from '../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork';
 import { AvatarSize } from '../../../../component-library/components/Avatars/Avatar';
 import Icon, {
@@ -268,7 +268,7 @@ const NetworkDetailsView = () => {
       edges={['top', 'bottom']}
       testID={NetworkDetailsViewSelectorsIDs.CONTAINER}
     >
-      <HeaderCompactStandard
+      <HeaderStandard
         onBack={handleBack}
         endAccessory={
           !formHook.form.addMode &&
@@ -311,7 +311,7 @@ const NetworkDetailsView = () => {
             {headerTitle}
           </Text>
         </Box>
-      </HeaderCompactStandard>
+      </HeaderStandard>
       <KeyboardAwareScrollView
         contentContainerStyle={tw.style('flex-grow px-4')}
         showsVerticalScrollIndicator={false}

app/components/Views/NetworksManagement/NetworksManagementView.tsx

@@ -1,23 +1,23 @@
 import React, { useCallback, useState, useMemo } from 'react';
-import { ScrollView } from '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 {
+  HeaderStandard,
   Box,
   Text,
   TextVariant,
   TextColor,
   FontWeight,
 } from '@metamask/design-system-react-native';
+import { ScrollView } from '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 { strings } from '../../../../locales/i18n';
 import Routes from '../../../constants/navigation/Routes';
 import { formatRpcUrlForDisplay } from './NetworksManagementView.utils';
 import { useAddPopularNetwork } from '../../hooks/useAddPopularNetwork';
 import { PopularList } from '../../../util/networks/customNetworks';
 
-import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
 import Button, {
   ButtonVariants,
   ButtonSize,
@@ -121,7 +121,7 @@ const NetworksManagementView = () => {
       style={tw.style('flex-1 bg-background-default')}
       testID={NetworksManagementViewSelectorsIDs.CONTAINER}
     >
-      <HeaderCompactStandard
+      <HeaderStandard
         title={strings('app_settings.networks_title')}
         onBack={handleBack}
         includesTopInset