refactor(earn): use MMDS HeaderStandard (#29702)

## **Description**

This change replaces the temporary `HeaderCompactStandard` component
with `HeaderStandard` from `@metamask/design-system-react-native` on
Earn-related surfaces.

**Reason:** Align Earn UI with the MetaMask design system and reduce
reliance on `component-library/components-temp` for standard headers.

**What changed:** `HeaderStandard` is used for the Lending “How it
works” bottom sheet, the Earn input screen header (back button and end
actions), and the Earn token list bottom sheet. Behavior is intended to
match the previous header (title, back/close, analytics-related tests
unchanged aside from naming). Unit test comments and a `describe` block
name were updated to reference `HeaderStandard`.

## **Changelog**

CHANGELOG entry: null 

## **Related issues**

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

## **Manual testing steps**

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

  Scenario: Earn input screen header matches prior behavior
    Given the user is on the Earn flow and opens the amount/input screen (e.g. stake or supply)
    When the user views the screen header and uses the back control
    Then the header shows the expected title and navigation behaves as before

  Scenario: Lending “How it works” modal
    Given the user opens the Lending learn-more / “How it works” bottom sheet from Earn
    When the user views the header and taps close
    Then the sheet dismisses as before

  Scenario: Earn token selection bottom sheet
    Given the user opens the token list bottom sheet (e.g. select token to supply or withdraw)
    When the user views the header title and uses the close control
    Then the sheet closes as before and titles match the prior copy for the flow
```

## **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 header on a few Earn screens; main regression risk is
minor UI/interaction differences in back/close and end-icon rendering.
> 
> **Overview**
> Updates Earn surfaces to use the design-system `HeaderStandard`
instead of the temporary `HeaderCompactStandard`, including the Lending
“How it works” bottom sheet, the `EarnInputView` screen header (back +
optional info icon), and the Earn token list bottom sheet (close button
+ title).
> 
> Adjusts imports accordingly (including `IconName` usage from the
design system) and updates unit test descriptions/comments to reference
`HeaderStandard` while keeping behavioral assertions the same.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
c517a2e. 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/Earn/LendingLearnMoreModal/index.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import styleSheet from './LendingLearnMoreModal.styles';
 import { useStyles } from '../../../hooks/useStyles';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../component-library/components/BottomSheets/BottomSheet';
-import HeaderCompactStandard from '../../../../component-library/components-temp/HeaderCompactStandard';
 import Text, {
   TextColor,
   TextVariant,
@@ -288,7 +288,7 @@ export const LendingLearnMoreModal = () => {
 
   return (
     <BottomSheet ref={sheetRef} isInteractable={false}>
-      <HeaderCompactStandard
+      <HeaderStandard
         title={strings('earn.how_it_works')}
         onClose={handleClose}
       />

app/components/UI/Earn/Views/EarnInputView/EarnInputView.test.tsx

@@ -527,7 +527,7 @@ describe('EarnInputView', () => {
         name: 'params',
       });
 
-      // Verify the title is rendered in the HeaderCompactStandard component
+      // Verify the title is rendered in the HeaderStandard component
       expect(getByText('Supply USDC')).toBeOnTheScreen();
 
       // "0" in the input display and on the keypad
@@ -1202,7 +1202,7 @@ describe('EarnInputView', () => {
       // Default mock returns ETH with POOLED_STAKING experience
       const { getByText } = renderComponent();
 
-      // Verify the title is rendered in the HeaderCompactStandard component
+      // Verify the title is rendered in the HeaderStandard component
       expect(getByText('Stake ETH')).toBeOnTheScreen();
     });
   });
@@ -1845,7 +1845,7 @@ describe('EarnInputView', () => {
     });
   });
 
-  describe('HeaderCompactStandard interactions', () => {
+  describe('HeaderStandard interactions', () => {
     it('tracks STAKE_CANCEL_CLICKED event with token property when back button is pressed for staking', async () => {
       selectStablecoinLendingEnabledFlagMock.mockReturnValue(false);
 

app/components/UI/Earn/Views/EarnInputView/EarnInputView.tsx

@@ -45,8 +45,7 @@ import Keypad from '../../../../Base/Keypad';
 import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import { useStyles } from '../../../../hooks/useStyles';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
-import { IconName } from '@metamask/design-system-react-native';
+import { HeaderStandard, IconName } from '@metamask/design-system-react-native';
 import ScreenLayout from '../../../Ramp/Aggregator/components/ScreenLayout';
 import QuickAmounts from '../../../Stake/components/QuickAmounts';
 import { EVENT_PROVIDERS } from '../../../Stake/constants/events';
@@ -1005,7 +1004,7 @@ const EarnInputView = () => {
 
   return (
     <ScreenLayout style={styles.container}>
-      <HeaderCompactStandard
+      <HeaderStandard
         title={headerTitle}
         onBack={handleBackPress}
         endButtonIconProps={

app/components/UI/Earn/components/EarnTokenList/EarnTokenList.test.tsx

@@ -947,7 +947,7 @@ describe('EarnTokenList', () => {
     });
   });
 
-  describe('HeaderCompactStandard close button', () => {
+  describe('HeaderStandard close button', () => {
     it('invokes handleClose when close button is pressed', async () => {
       const { getByTestId } = renderWithProvider(
         <SafeAreaProvider initialMetrics={initialMetrics}>

app/components/UI/Earn/components/EarnTokenList/index.tsx

@@ -5,11 +5,11 @@ import React, {
   useReducer,
   useMemo,
 } from 'react';
+import { HeaderStandard } from '@metamask/design-system-react-native';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
 import { TextColor } from '../../../../../component-library/components/Texts/Text';
-import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import { View } from 'react-native';
 import { useStyles } from '../../../../hooks/useStyles';
 import styleSheet from './EarnTokenList.styles';
@@ -380,7 +380,7 @@ const EarnTokenList = () => {
 
   return (
     <BottomSheet ref={bottomSheetRef}>
-      <HeaderCompactStandard
+      <HeaderStandard
         title={
           params?.onItemPressScreen === EARN_INPUT_VIEW_ACTIONS.WITHDRAW
             ? strings('stake.select_a_token_to_withdraw')