refactor(perps): use MMDS HeaderStandard (#29703)

## **Description**

This PR replaces the temporary `HeaderCompactStandard` component with
`HeaderStandard` from `@metamask/design-system-react-native` across
Perps surfaces.

**Reason:** Standardize Perps headers on the MetaMask design system and
reduce dependence on `component-library/components-temp` for common
header patterns.

**What changed:** `HeaderStandard` is now used for the Perps markets
list, withdrawal flow, transaction detail screens (funding, order,
position—including the “not found” states), and the default header
inside `PerpsBottomSheetTooltip` when no custom header is supplied.
Existing props such as `includesTopInset`, `onBack`, `onClose`, `title`,
`backButtonProps`, and `testID` are preserved so behavior should match
the previous implementation.

**Tests:** `PerpsMarketListHeader.test.tsx` was updated to spread
`jest.requireActual('@metamask/design-system-react-native')` into the
design-system mock and to remove the dedicated `HeaderCompactStandard`
mock, so tests exercise the real `HeaderStandard` behavior from the
design system package.

## **Changelog**

CHANGELOG entry: null 

## **Related issues**

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

## **Manual testing steps**

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

  Scenario: Markets list header
    Given the user opens Perps and navigates to the markets list
    When they view the header and use back or any trailing actions (e.g. watchlist) as before
    Then layout and navigation match prior behavior

  Scenario: Transaction detail screens
    Given the user opens a Perps funding, order, or position transaction from history
    When they view the header title and tap back
    Then they return to the previous screen and titles match expectations

  Scenario: Missing transaction
    Given a transaction id resolves to no data
    When the user lands on the not-found state
    Then a minimal header with back is shown and back navigates away

  Scenario: Withdraw screen
    Given the user opens Perps withdraw
    When they view the withdrawal title and use the back control
    Then behavior matches the previous screen

  Scenario: Bottom sheet tooltip
    Given a Perps tooltip bottom sheet that uses the default (non-custom) header
    When the user views the title and closes the sheet
    Then the sheet dismisses 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 that swaps a temporary header component for the
design-system `HeaderStandard`; main risk is minor UI/layout or testID
regressions across Perps screens.
> 
> **Overview**
> Standardizes Perps UI headers by replacing the temporary
`HeaderCompactStandard` with MMDS `HeaderStandard` across the markets
list, withdraw flow, transaction detail screens (including “not found”
states), the default header in `PerpsBottomSheetTooltip`, and the shared
`ListHeaderWithSearch`.
> 
> Updates the `PerpsMarketListHeader` test setup to rely on the real
design-system exports (spreading
`jest.requireActual('@metamask/design-system-react-native')`) and
removes the dedicated `HeaderCompactStandard` mock so tests exercise
`HeaderStandard` behavior.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
5e55753. 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/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx

@@ -5,13 +5,13 @@ import React, {
   useMemo,
   useCallback,
 } from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import { View, Animated } from 'react-native';
 import { useStyles } from '../../../../../component-library/hooks';
 import Icon, {
   IconName,
   IconSize,
 } from '../../../../../component-library/components/Icons/Icon';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import TextFieldSearch from '../../../../../component-library/components/Form/TextFieldSearch/TextFieldSearch';
 import { strings } from '../../../../../../locales/i18n';
 import Text, {
@@ -317,7 +317,7 @@ const PerpsMarketListView = ({
 
   return (
     <SafeAreaView style={styles.container}>
-      <HeaderCompactStandard
+      <HeaderStandard
         title={title || strings('perps.home.markets')}
         onBack={handleBackPressed}
         backButtonProps={{

app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.tsx

@@ -9,6 +9,7 @@ import {
   Button,
   ButtonVariant,
   ButtonSize,
+  HeaderStandard,
 } from '@metamask/design-system-react-native';
 import Text, {
   TextColor,
@@ -17,7 +18,6 @@ import Text, {
 import { useStyles } from '../../../../../component-library/hooks';
 import { selectSelectedInternalAccountByScope } from '../../../../../selectors/multichainAccounts/accounts';
 import ScreenView from '../../../../Base/ScreenView';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import PerpsTransactionDetailAssetHero from '../../components/PerpsTransactionDetailAssetHero';
 import { usePerpsBlockExplorerUrl } from '../../hooks';
 import {
@@ -54,10 +54,7 @@ const PerpsFundingTransactionView: React.FC = () => {
   if (!transaction) {
     return (
       <ScreenView>
-        <HeaderCompactStandard
-          includesTopInset
-          onBack={() => navigation.goBack()}
-        />
+        <HeaderStandard includesTopInset onBack={() => navigation.goBack()} />
         <View style={styles.content}>
           <Text>{strings('perps.transactions.not_found')}</Text>
         </View>
@@ -109,7 +106,7 @@ const PerpsFundingTransactionView: React.FC = () => {
 
   return (
     <ScreenView>
-      <HeaderCompactStandard
+      <HeaderStandard
         includesTopInset
         title={transaction.title}
         onBack={() => navigation.goBack()}

app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.tsx

@@ -13,11 +13,11 @@ import {
   Button,
   ButtonVariant,
   ButtonSize,
+  HeaderStandard,
 } from '@metamask/design-system-react-native';
 import { useStyles } from '../../../../../component-library/hooks';
 import { selectSelectedInternalAccountByScope } from '../../../../../selectors/multichainAccounts/accounts';
 import ScreenView from '../../../../Base/ScreenView';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import PerpsTransactionDetailAssetHero from '../../components/PerpsTransactionDetailAssetHero';
 import { usePerpsBlockExplorerUrl, usePerpsOrderFees } from '../../hooks';
 import { PerpsOrderTransactionRouteProp } from '../../types/transactionHistory';
@@ -54,10 +54,7 @@ const PerpsOrderTransactionView: React.FC = () => {
   if (!transaction) {
     return (
       <ScreenView>
-        <HeaderCompactStandard
-          includesTopInset
-          onBack={() => navigation.goBack()}
-        />
+        <HeaderStandard includesTopInset onBack={() => navigation.goBack()} />
         <View style={styles.content}>
           <Text>{strings('perps.transactions.not_found')}</Text>
         </View>
@@ -127,7 +124,7 @@ const PerpsOrderTransactionView: React.FC = () => {
 
   return (
     <ScreenView>
-      <HeaderCompactStandard
+      <HeaderStandard
         includesTopInset
         title={transaction.title}
         onBack={() => navigation.goBack()}

app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.tsx

@@ -13,12 +13,12 @@ import {
   Button,
   ButtonVariant,
   ButtonSize,
+  HeaderStandard,
 } from '@metamask/design-system-react-native';
 import { useStyles } from '../../../../../component-library/hooks';
 import { selectSelectedInternalAccountByScope } from '../../../../../selectors/multichainAccounts/accounts';
 import Routes from '../../../../../constants/navigation/Routes';
 import ScreenView from '../../../../Base/ScreenView';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import PerpsTransactionDetailAssetHero from '../../components/PerpsTransactionDetailAssetHero';
 import { usePerpsBlockExplorerUrl } from '../../hooks';
 import {
@@ -69,10 +69,7 @@ const PerpsPositionTransactionView: React.FC = () => {
     // Handle missing transaction data
     return (
       <ScreenView>
-        <HeaderCompactStandard
-          includesTopInset
-          onBack={() => navigation.goBack()}
-        />
+        <HeaderStandard includesTopInset onBack={() => navigation.goBack()} />
         <View style={styles.content}>
           <Text>{strings('perps.transactions.not_found')}</Text>
         </View>
@@ -174,7 +171,7 @@ const PerpsPositionTransactionView: React.FC = () => {
 
   return (
     <ScreenView>
-      <HeaderCompactStandard
+      <HeaderStandard
         title={transaction?.fill?.shortTitle || ''}
         onBack={() => navigation.goBack()}
         includesTopInset

app/components/UI/Perps/Views/PerpsWithdrawView/PerpsWithdrawView.tsx

@@ -17,8 +17,8 @@ import {
   Button,
   ButtonVariant,
   ButtonSize,
+  HeaderStandard,
 } from '@metamask/design-system-react-native';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { PerpsWithdrawViewSelectorsIDs } from '../../Perps.testIds';
 import { strings } from '../../../../../../locales/i18n';
@@ -371,7 +371,7 @@ const PerpsWithdrawView: React.FC = () => {
     <SafeAreaView style={tw.style('flex-1 bg-default')}>
       <Box twClassName="flex-1 bg-default">
         {/* Header */}
-        <HeaderCompactStandard
+        <HeaderStandard
           title={strings('perps.withdrawal.title')}
           onBack={handleBack}
           backButtonProps={{

app/components/UI/Perps/components/PerpsBottomSheetTooltip/PerpsBottomSheetTooltip.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable jsdoc/check-indentation */
 import React, { useRef, useCallback, useMemo } from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import { View } from 'react-native';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import BottomSheetFooter, {
   ButtonsAlignment,
 } from '../../../../../component-library/components/BottomSheets/BottomSheetFooter';
@@ -147,7 +147,7 @@ const PerpsBottomSheetTooltip = React.memo<PerpsBottomSheetTooltipProps>(
         testID={testID}
       >
         {!hasCustomHeader && (
-          <HeaderCompactStandard
+          <HeaderStandard
             title={title}
             testID={PerpsBottomSheetTooltipSelectorsIDs.TITLE}
             onClose={handleClose}

app/components/UI/Perps/components/PerpsMarketListHeader/PerpsMarketListHeader.test.tsx

@@ -20,8 +20,10 @@ jest.mock('../../../../../../locales/i18n', () => ({
 }));
 
 jest.mock('@metamask/design-system-react-native', () => {
+  const actual = jest.requireActual('@metamask/design-system-react-native');
   const { View, Text: RNText } = jest.requireActual('react-native');
   return {
+    ...actual,
     Box: View,
     Text: RNText,
     BoxFlexDirection: { Row: 'row' },
@@ -89,55 +91,6 @@ jest.mock('../../../../../component-library/hooks', () => ({
   }),
 }));
 
-jest.mock(
-  '../../../../../component-library/components-temp/HeaderCompactStandard',
-  () => {
-    const { View, Text, TouchableOpacity } = jest.requireActual('react-native');
-    return {
-      __esModule: true,
-      default: ({
-        title,
-        onBack,
-        endButtonIconProps,
-        testID,
-      }: {
-        title: string;
-        onBack: () => void;
-        endButtonIconProps?: {
-          iconName: string;
-          onPress: () => void;
-          testID?: string;
-        }[];
-        testID?: string;
-      }) => (
-        <View testID={testID}>
-          <TouchableOpacity
-            testID={testID ? `${testID}-back-button` : undefined}
-            onPress={onBack}
-          >
-            <Text>Back</Text>
-          </TouchableOpacity>
-          <Text>{title}</Text>
-          {endButtonIconProps?.map(
-            (
-              props: { iconName: string; onPress: () => void; testID?: string },
-              index: number,
-            ) => (
-              <TouchableOpacity
-                key={index}
-                testID={props.testID}
-                onPress={props.onPress}
-              >
-                <Text>{props.iconName}</Text>
-              </TouchableOpacity>
-            ),
-          )}
-        </View>
-      ),
-    };
-  },
-);
-
 describe('PerpsMarketListHeader', () => {
   const mockGoBack = jest.fn();
   const mockCanGoBack = jest.fn();

app/components/UI/shared/ListHeaderWithSearch/ListHeaderWithSearch.tsx

@@ -14,6 +14,7 @@ import {
   BoxFlexDirection,
   BoxAlignItems,
   IconName as DSIconName,
+  HeaderStandard,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import Icon, {
@@ -25,7 +26,6 @@ import Text, {
   TextVariant,
   TextColor,
 } from '../../../../component-library/components/Texts/Text';
-import HeaderCompactStandard from '../../../../component-library/components-temp/HeaderCompactStandard';
 import { useTheme } from '../../../../util/theme';
 import type { ListHeaderWithSearchProps } from './ListHeaderWithSearch.types';
 import styleSheet from './ListHeaderWithSearch.styles';
@@ -140,7 +140,7 @@ const ListHeaderWithSearch: React.FC<ListHeaderWithSearchProps> = ({
   }
 
   return (
-    <HeaderCompactStandard
+    <HeaderStandard
       title={title || defaultTitle}
       onBack={handleBack}
       backButtonProps={{