refactor(ProtectYourWalletModal): migrate to design system components (#27584)

## **Description**

Replaces legacy styling and icon primitives in `ProtectYourWalletModal`
with design system components, keeping the existing `PureComponent` +
`connect()` + `withAnalyticsAwareness` architecture unchanged.

**What changed (visual layer only):**
- `View` → `Box` from `@metamask/design-system-react-native`
- `StyleSheet.create()` + theme-based color styles → `twClassName`
Tailwind utilities (DS handles theming internally)
- Raw `Text` with `fontStyles` → DS `Text` with `TextVariant`,
`TextColor`, `FontWeight`
- `FontAwesome` icon + `TouchableOpacity` (close button) → DS
`ButtonIcon`
- `TouchableOpacity` + `Text` (Learn more) → DS `Button`
(`ButtonVariant.Tertiary`)
- Remove `ThemeContext` / `mockTheme` imports (no longer needed)
- Remove `fontStyles` import (no longer needed)
- PNG `require()` + `eslint-disable` comment → clean ES module import



## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: <!-- no linked issue -->

## **Manual testing steps**

```gherkin
Feature: Protect Your Wallet Modal — visual regression check

  Scenario: Modal renders correctly (light + dark mode)
    Given the user has a wallet without a backed-up seed phrase
    When the wallet home screen loads
    Then the Protect Your Wallet modal appears
    And the title, lock image, body text, close button, and Learn more button are visible
    And the layout matches the before/after screenshots in both light and dark mode

  Scenario: All interactions still work
    Given the modal is visible
    When user taps the X close button — modal dismisses
    When user taps "Protect wallet" — navigates to backup SRP flow
    When user taps "Learn more" — opens MetaMask safety tips webview
    When user taps "Remind me later" — modal dismisses
```


|             | Before | After |
|-------------|--------|-------|
| **Light** | <img
src="https://github.com/user-attachments/assets/58fded8f-b1e3-46c7-a2ab-a7d873268c23"
width="300"/> | <img
src="https://github.com/user-attachments/assets/d3c4ee2f-8806-4803-ab6d-2b71bdc87b3c"
width="300"/> |
| **Dark** | <img
src="https://github.com/user-attachments/assets/ff9d2404-6b35-487a-85c6-81eeafe6af9f"
width="300"/> | <img
src="https://github.com/user-attachments/assets/342f01a9-a860-49f9-ae8f-5404946dff3a"
width="300"/> |


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

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk UI refactor that replaces legacy styling/components with
design-system `Box`/`Text`/`Button` variants while keeping the same
navigation and analytics flows.
> 
> **Overview**
> Refactors `ProtectYourWalletModal` to use MetaMask design-system
components and Tailwind-style `twClassName` layout instead of legacy
`StyleSheet` + `View`/`TouchableOpacity` + FontAwesome close icon.
> 
> The modal’s structure is preserved (same cancel/confirm handlers,
navigation targets, analytics events, and seedless-onboarding
suppression), but the header close control is now a DS `ButtonIcon`, the
“Learn more” action is a DS `Button` (`Tertiary`), and the image is
imported via ES module rather than `require()`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
8571195. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: tylerc-consensys

app/components/UI/ProtectYourWalletModal/index.js

@@ -1,102 +1,42 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
+import { Image } from 'react-native';
+import {
+  Box,
+  Text,
+  TextVariant,
+  TextColor,
+  FontWeight,
+  BoxFlexDirection,
+  BoxAlignItems,
+  BoxJustifyContent,
+  IconName,
+  IconSize,
+  IconColor,
+  Button,
+  ButtonVariant,
+  ButtonIcon,
+  ButtonIconSize,
+} from '@metamask/design-system-react-native';
 import ActionModal from '../ActionModal';
-import { fontStyles } from '../../../styles/common';
 import { connect } from 'react-redux';
 import { protectWalletModalNotVisible } from '../../../actions/user';
-import Icon from 'react-native-vector-icons/FontAwesome';
 import { strings } from '../../../../locales/i18n';
 import scaling from '../../../util/scaling';
 import { MetaMetricsEvents } from '../../../core/Analytics/MetaMetrics.events';
-
-import { ThemeContext, mockTheme } from '../../../util/theme';
 import { ProtectWalletModalSelectorsIDs } from './ProtectWalletModal.testIds';
 import { withAnalyticsAwareness } from '../../../components/hooks/useAnalytics/withAnalyticsAwareness';
 import { selectSeedlessOnboardingLoginFlow } from '../../../selectors/seedlessOnboardingController';
 
-const protectWalletImage = require('../../../images/explain-backup-seedphrase.png'); // eslint-disable-line
-
-const createStyles = (colors) =>
-  StyleSheet.create({
-    wrapper: {
-      marginTop: 24,
-      marginHorizontal: 24,
-      flex: 1,
-    },
-    title: {
-      ...fontStyles.bold,
-      color: colors.text.default,
-      textAlign: 'center',
-      fontSize: 20,
-      flex: 1,
-    },
-    imageWrapper: {
-      flexDirection: 'column',
-      alignItems: 'center',
-      marginBottom: 12,
-      marginTop: 30,
-    },
-    image: {
-      width: scaling.scale(135, { baseModel: 1 }),
-      height: scaling.scale(160, { baseModel: 1 }),
-    },
-    text: {
-      ...fontStyles.normal,
-      color: colors.text.default,
-      textAlign: 'center',
-      fontSize: 14,
-      marginBottom: 24,
-    },
-    closeIcon: {
-      padding: 5,
-    },
-    learnMoreText: {
-      textAlign: 'center',
-      ...fontStyles.normal,
-      color: colors.primary.default,
-      marginBottom: 14,
-      fontSize: 14,
-    },
-    modalXIcon: {
-      fontSize: 16,
-      color: colors.text.default,
-    },
-    titleWrapper: {
-      flexDirection: 'row',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    auxCenter: {
-      width: 26,
-    },
-  });
+import protectWalletImage from '../../../images/explain-backup-seedphrase.png';
 
-/**
- * View that renders an action modal
- */
 class ProtectYourWalletModal extends PureComponent {
   static propTypes = {
     navigation: PropTypes.object,
-    /**
-     * Hide this modal
-     */
     protectWalletModalNotVisible: PropTypes.func,
-    /**
-     * Whether this modal is visible
-     */
     protectWalletModalVisible: PropTypes.bool,
-    /**
-     * Boolean that determines if the user has set a password before
-     */
     passwordSet: PropTypes.bool,
-    /**
-     * Analytics injected by withAnalyticsAwareness HOC
-     */
     analytics: PropTypes.object,
-    /**
-     * A boolean representing if the user is in the seedless onboarding login flow
-     */
     isSeedlessOnboardingLoginFlow: PropTypes.bool,
   };
 
@@ -142,10 +82,6 @@ class ProtectYourWalletModal extends PureComponent {
   };
 
   render() {
-    const colors = this.context.colors || mockTheme.colors;
-    const styles = createStyles(colors);
-
-    // will not render if the user is in the seedless onboarding login flow
     if (this.props.isSeedlessOnboardingLoginFlow) {
       return null;
     }
@@ -164,43 +100,62 @@ class ProtectYourWalletModal extends PureComponent {
         cancelTestID={ProtectWalletModalSelectorsIDs.CANCEL_BUTTON}
         confirmTestID={ProtectWalletModalSelectorsIDs.CONFIRM_BUTTON}
       >
-        <View
-          style={styles.wrapper}
+        <Box
+          twClassName="mt-6 mx-6 flex-1"
           testID={ProtectWalletModalSelectorsIDs.CONTAINER}
         >
-          <View style={styles.titleWrapper}>
-            <View style={styles.auxCenter} />
-            <Text style={styles.title}>
+          <Box
+            flexDirection={BoxFlexDirection.Row}
+            justifyContent={BoxJustifyContent.Center}
+            alignItems={BoxAlignItems.Center}
+          >
+            <Box twClassName="w-6" />
+            <Text
+              variant={TextVariant.HeadingMd}
+              fontWeight={FontWeight.Bold}
+              color={TextColor.TextDefault}
+              twClassName="text-center flex-1"
+            >
               {strings('protect_wallet_modal.title')}
             </Text>
-            <TouchableOpacity
+            <ButtonIcon
+              iconName={IconName.Close}
+              size={ButtonIconSize.Sm}
+              iconProps={{ color: IconColor.IconDefault, size: IconSize.Sm }}
               onPress={this.onDismiss}
-              style={styles.closeIcon}
-              hitSlop={{ top: 10, left: 10, bottom: 10, right: 10 }}
-            >
-              <Icon name="times" style={styles.modalXIcon} />
-            </TouchableOpacity>
-          </View>
-          <View style={styles.imageWrapper}>
-            <Image source={protectWalletImage} style={styles.image} />
-          </View>
-
-          <Text style={styles.text}>
+            />
+          </Box>
+
+          <Box alignItems={BoxAlignItems.Center} twClassName="mb-3 mt-8">
+            <Image
+              source={protectWalletImage}
+              style={{
+                width: scaling.scale(135, { baseModel: 1 }),
+                height: scaling.scale(160, { baseModel: 1 }),
+              }}
+            />
+          </Box>
+
+          <Text
+            variant={TextVariant.BodySm}
+            color={TextColor.TextDefault}
+            twClassName="text-center mb-6"
+          >
             {strings('protect_wallet_modal.text')}
-            <Text style={{ ...fontStyles.bold }}>
+            <Text variant={TextVariant.BodySm} fontWeight={FontWeight.Bold}>
               {' ' + strings('protect_wallet_modal.text_bold')}
             </Text>
           </Text>
 
-          <TouchableOpacity
+          <Button
+            variant={ButtonVariant.Tertiary}
             onPress={this.onLearnMore}
             testID={ProtectWalletModalSelectorsIDs.LEARN_MORE_BUTTON}
+            twClassName="w-full mb-3.5"
           >
-            <Text style={styles.learnMoreText}>
-              {strings('protect_wallet_modal.action')}
-            </Text>
-          </TouchableOpacity>
-        </View>
+            {strings('protect_wallet_modal.action')}
+          </Button>
+        </Box>
       </ActionModal>
     );
   }
@@ -213,12 +168,9 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  protectWalletModalNotVisible: (enable) =>
-    dispatch(protectWalletModalNotVisible()),
+  protectWalletModalNotVisible: () => dispatch(protectWalletModalNotVisible()),
 });
 
-ProtectYourWalletModal.contextType = ThemeContext;
-
 export default connect(
   mapStateToProps,
   mapDispatchToProps,