chore: remove Text component wrappers from BottomSheetHeader children (#22173)

## **Description**

Removed `Text` component wrappers from `BottomSheetHeader` children
across the codebase to ensure consistency with the new API pattern where
`BottomSheetHeader` handles text styling internally.

This refactoring removes redundant `Text` components that were wrapping
string content inside `BottomSheetHeader`. The `BottomSheetHeader`
component now handles the text styling directly, ensuring a consistent
appearance across all bottom sheet headers in the app.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Part of: https://consensyssoftware.atlassian.net/browse/MDP-343

## **Manual testing steps**

```gherkin
Feature: Bottom Sheet Headers Display Correctly

  Scenario: user views various bottom sheets with headers
    Given the app is running
    
    When user opens any bottom sheet modal with a header (e.g., network selector, payment method selector, region selector, account permissions, etc.)
    Then the header text should display correctly with proper styling
    And the header should be visually consistent with other bottom sheet headers
```

## **Screenshots/Recordings**

### **Before**

N/A - Internal refactoring, no visual changes. We can trust the
component to handle styling correctly.

### **After**

N/A - Internal refactoring, no visual changes. We can trust the
component to handle styling correctly.

## **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.

## **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.

---

### **Changes Summary**

**11 component files updated:**
- NetworkSettings/index.js (4 instances)
- NetworkListBottomSheet.tsx
- TooltipModal/index.tsx
- AccountPermissionsConfirmRevokeAll.tsx
- NetworkSelector/NetworkSelector.tsx
- RpcSelectionModal/RpcSelectionModal.tsx
- NetworkManager/index.tsx
- PermittedNetworksInfoSheet.tsx
- ConnectionDetails/ConnectionDetails.tsx
- RegionSelectorModal/RegionSelectorModal.tsx
- PaymentMethodSelectorModal.tsx

**5 test snapshots updated:**
- RegionSelectorModal (8 snapshots)
- PaymentMethodSelectorModal (1 snapshot)
- AccountPermissionsConfirmRevokeAll (1 snapshot)
- ConnectionDetails (1 snapshot)
- PermittedNetworksInfoSheet (1 snapshot)

**Total:** 16 files changed, 54 insertions(+), 60 deletions(-)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Refactors BottomSheetHeader to take raw string children across
modals/selectors and updates tests/snapshots and small header style
expectations.
> 
> - **UI/BottomSheetHeader refactor**:
> - Replace `<Text>` wrappers with raw string children in
`BottomSheetHeader` across:
> - Bridge: `BlockaidModal`, `BridgeNetworkSelectorBase`,
`BridgeTokenSelectorBase`, `QuoteExpiredModal`, `SlippageModal`,
`TransactionDetails/BlockExplorersModal`.
> - Ramp (Deposit): `PaymentMethodSelectorModal`, `RegionSelectorModal`.
> - Account Permissions: `AccountPermissionsConfirmRevokeAll`,
`ConnectionDetails`, `PermittedNetworksInfoSheet`.
> - Networks: `NetworkManager`, `AddAsset/NetworkListBottomSheet`,
`NetworkSelector`.
>     - Misc: `TooltipModal`.
> - **Tests/Snapshots**:
> - Update snapshots to new header structure: add
`testID="header-title"`, center text, and expect fontSize 16.
> - Adjust NetworkManager tests to assert `testID="header"` instead of
mocked header ID; extend icon mocks.
> - **Styles**:
> - Remove unused `heading` style in `NetworkSettings` styles; align
header typography via `BottomSheetHeader`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ddcd7e7. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: georgewrmarshall

app/components/UI/Bridge/components/BlockaidModal/BlockaidModal.tsx

@@ -59,9 +59,7 @@ const BlockaidModal = () => {
   return (
     <BottomSheet ref={sheetRef}>
       <BottomSheetHeader onClose={handleClose}>
-        <Text variant={TextVariant.HeadingMD}>
-          {strings(`blockaid_modal.${errorType}_title`)}
-        </Text>
+        {strings(`blockaid_modal.${errorType}_title`)}
       </BottomSheetHeader>
       <View style={styles.container}>
         <Text variant={TextVariant.BodyMD} style={styles.errorMessage}>

app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap

@@ -468,14 +468,14 @@ exports[`BridgeDestNetworkSelector renders with initial state and displays netwo
                                 style={
                                   {
                                     "color": "#121314",
-                                    "flex": 1,
                                     "fontFamily": "Geist Bold",
-                                    "fontSize": 18,
+                                    "fontSize": 16,
                                     "letterSpacing": 0,
                                     "lineHeight": 24,
                                     "textAlign": "center",
                                   }
                                 }
+                                testID="header-title"
                               >
                                 Select network
                               </Text>

app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap

@@ -469,11 +469,13 @@ exports[`BridgeDestTokenSelector renders with initial state and displays tokens
                                   {
                                     "color": "#121314",
                                     "fontFamily": "Geist Bold",
-                                    "fontSize": 18,
+                                    "fontSize": 16,
                                     "letterSpacing": 0,
                                     "lineHeight": 24,
+                                    "textAlign": "center",
                                   }
                                 }
+                                testID="header-title"
                               >
                                 Select token
                               </Text>

app/components/UI/Bridge/components/BridgeNetworkSelectorBase.tsx

@@ -1,21 +1,12 @@
 import React from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-import Text, {
-  TextVariant,
-} from '../../../../component-library/components/Texts/Text';
+import { ScrollView } from 'react-native';
+
 import BottomSheetHeader from '../../../../component-library/components/BottomSheets/BottomSheetHeader';
 import BottomSheet from '../../../../component-library/components/BottomSheets/BottomSheet';
 import { strings } from '../../../../../locales/i18n';
 import { ButtonIconSizes } from '../../../../component-library/components/Buttons/ButtonIcon';
 import { useNavigation } from '@react-navigation/native';
 
-const styles = StyleSheet.create({
-  headerTitle: {
-    flex: 1,
-    textAlign: 'center',
-  },
-});
-
 interface BridgeNetworkSelectorBaseProps {
   children: React.ReactNode;
 }
@@ -34,9 +25,7 @@ export const BridgeNetworkSelectorBase: React.FC<
           size: ButtonIconSizes.Lg,
         }}
       >
-        <Text variant={TextVariant.HeadingMD} style={styles.headerTitle}>
-          {strings('bridge.select_network')}
-        </Text>
+        {strings('bridge.select_network')}
       </BottomSheetHeader>
 
       <ScrollView>{children}</ScrollView>

app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap

@@ -468,14 +468,14 @@ exports[`BridgeSourceNetworkSelector renders with initial state and displays net
                                 style={
                                   {
                                     "color": "#121314",
-                                    "flex": 1,
                                     "fontFamily": "Geist Bold",
-                                    "fontSize": 18,
+                                    "fontSize": 16,
                                     "letterSpacing": 0,
                                     "lineHeight": 24,
                                     "textAlign": "center",
                                   }
                                 }
+                                testID="header-title"
                               >
                                 Select network
                               </Text>

app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap

@@ -469,11 +469,13 @@ exports[`BridgeSourceTokenSelector renders with initial state and displays token
                                   {
                                     "color": "#121314",
                                     "fontFamily": "Geist Bold",
-                                    "fontSize": 18,
+                                    "fontSize": 16,
                                     "letterSpacing": 0,
                                     "lineHeight": 24,
+                                    "textAlign": "center",
                                   }
                                 }
+                                testID="header-title"
                               >
                                 Select token
                               </Text>

app/components/UI/Bridge/components/BridgeTokenSelectorBase.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Box } from '../../Box/Box';
 import Text, {
-  TextVariant,
   TextColor,
 } from '../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../component-library/hooks';
@@ -227,9 +226,7 @@ export const BridgeTokenSelectorBase: React.FC<
           size: ButtonIconSizes.Lg,
         }}
       >
-        <Text variant={TextVariant.HeadingMD}>
-          {title ?? strings('bridge.select_token')}
-        </Text>
+        {title ?? strings('bridge.select_token')}
       </BottomSheetHeader>
 
       <Box style={styles.buttonContainer} gap={20}>

app/components/UI/Bridge/components/QuoteExpiredModal/QuoteExpiredModal.tsx

@@ -72,9 +72,7 @@ const QuoteExpiredModal = () => {
   return (
     <BottomSheet ref={sheetRef}>
       <BottomSheetHeader onClose={handleClose}>
-        <Text variant={TextVariant.HeadingMD}>
-          {strings('quote_expired_modal.title')}
-        </Text>
+        {strings('quote_expired_modal.title')}
       </BottomSheetHeader>
       <View style={styles.container}>
         <Text variant={TextVariant.BodyMD}>

app/components/UI/Bridge/components/QuoteExpiredModal/__snapshots__/QuoteExpiredModal.test.tsx.snap

@@ -168,11 +168,13 @@ exports[`QuoteExpiredModal renders correctly 1`] = `
                 {
                   "color": "#121314",
                   "fontFamily": "Geist Bold",
-                  "fontSize": 18,
+                  "fontSize": 16,
                   "letterSpacing": 0,
                   "lineHeight": 24,
+                  "textAlign": "center",
                 }
               }
+              testID="header-title"
             >
               New quotes are available
             </Text>

app/components/UI/Bridge/components/SlippageModal/__snapshots__/SlippageModal.test.tsx.snap

@@ -168,11 +168,13 @@ exports[`SlippageModal renders all UI elements with the proper slippage options
                 {
                   "color": "#121314",
                   "fontFamily": "Geist Bold",
-                  "fontSize": 18,
+                  "fontSize": 16,
                   "letterSpacing": 0,
                   "lineHeight": 24,
+                  "textAlign": "center",
                 }
               }
+              testID="header-title"
             >
               Slippage
             </Text>