chore: remove SRP videos (#13507)

## **Description**

Removing the SRP video (saving 7.5 mb) and replaced with new designs
[here](https://www.figma.com/design/pViOUcmjwhEzFsdrwknpNc/Onboarding-redesign?node-id=1-117&t=SrTBBEz0dgAQsaoU-1)
In the future we are doing a bigger redesign. This is a small step
towards it

## **Related issues**

Fixes:

## **Manual testing steps**

1. Fresh install of the app
2. Create a new wallet and going through onboarding flow, make sure the
new design is there and fits on all devices
3. Afterwards goto settings and goto "Security and Privacy" to make sure
its removed altogether (no design)

## **Screenshots/Recordings**

### Larger Devices
iPhone 16

<img
src="https://github.com/user-attachments/assets/a470060d-292f-46fc-acbe-2d3eea859557"
width="250px" />

### Smaller Devices

iPhone SE


https://github.com/user-attachments/assets/f2f45941-1b1d-4f2b-8151-c0028183f1f0

Pixel 2

<img
src="https://github.com/user-attachments/assets/94ebea2e-100b-469a-afbc-f61369e2ee5f"
width="250px" />

### **Before**

<img
src="https://github.com/user-attachments/assets/a9c9011c-a466-4d1b-bcac-fcf930e1c5c1"
width="250px" />


### **After**

<img
src="https://github.com/user-attachments/assets/20f44bf9-17fe-440e-984e-69ce18a2b70f"
width="250px" />


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

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

Author: vinnyhoward

app/components/UI/SeedPhraseVideo/index.js

@@ -775,17 +775,19 @@ exports[`AccountBackupStep1 should render correctly 1`] = `
                                     "fontSize": 24,
                                     "fontWeight": "600",
                                     "marginBottom": 24,
+                                    "marginTop": 24,
                                     "textAlign": "center",
                                   }
                                 }
                               >
                                 Secure your wallet
                               </Text>
-                              <View
+                              <Image
+                                source={1}
                                 style={
                                   {
-                                    "height": 240,
-                                    "width": "100%",
+                                    "height": 225,
+                                    "width": 200,
                                   }
                                 }
                               />
@@ -805,7 +807,7 @@ exports[`AccountBackupStep1 should render correctly 1`] = `
                                       "fontSize": 14,
                                       "fontWeight": "400",
                                       "lineHeight": 20,
-                                      "textAlign": "center",
+                                      "textAlign": "left",
                                     }
                                   }
                                 >

app/components/Views/AccountBackupStep1/__snapshots__/index.test.tsx.snap

@@ -7,6 +7,7 @@ import {
   SafeAreaView,
   StyleSheet,
   BackHandler,
+  Image,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { fontStyles } from '../../../styles/common';
@@ -22,7 +23,6 @@ import Engine from '../../../core/Engine';
 import { ONBOARDING_WIZARD } from '../../../constants/storage';
 import { CHOOSE_PASSWORD_STEPS } from '../../../constants/onboarding';
 import SkipAccountSecurityModal from '../../UI/SkipAccountSecurityModal';
-import SeedPhraseVideo from '../../UI/SeedPhraseVideo';
 import { connect } from 'react-redux';
 import setOnboardingWizardStep from '../../../actions/wizard';
 import { MetaMetricsEvents } from '../../../core/Analytics';
@@ -33,6 +33,7 @@ import { ManualBackUpStepsSelectorsIDs } from '../../../../e2e/selectors/Onboard
 import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 import Routes from '../../../../app/constants/navigation/Routes';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
+import SRPDesign from '../../../images/srp-lock-design.png';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -59,6 +60,7 @@ const createStyles = (colors) =>
     title: {
       fontSize: 24,
       marginBottom: 24,
+      marginTop: 24,
       color: colors.text.default,
       textAlign: 'center',
       ...fontStyles.bold,
@@ -71,7 +73,7 @@ const createStyles = (colors) =>
       lineHeight: scaling.scale(20),
       fontSize: scaling.scale(14),
       color: colors.text.default,
-      textAlign: 'center',
+      textAlign: 'left',
       ...fontStyles.normal,
     },
     buttonWrapper: {
@@ -115,6 +117,10 @@ const createStyles = (colors) =>
     ctaContainer: {
       marginBottom: 30,
     },
+    srpDesign: {
+      width: 200,
+      height: 225,
+    },
   });
 
 /**
@@ -221,7 +227,8 @@ const AccountBackupStep1 = (props) => {
             <Text style={styles.title}>
               {strings('account_backup_step_1.title')}
             </Text>
-            <SeedPhraseVideo onClose={skip} />
+
+            <Image source={SRPDesign} style={styles.srpDesign} />
             <View style={styles.text}>
               <Text style={styles.label}>
                 {strings('account_backup_step_1.info_text_1_1')}{' '}

app/components/Views/AccountBackupStep1/index.js

@@ -10,7 +10,6 @@ import Text, {
   TextVariant,
   TextColor,
 } from '../../../../../../component-library/components/Texts/Text';
-import SeedPhraseVideo from '../../../../../UI/SeedPhraseVideo';
 import { MetaMetricsEvents } from '../../../../../../core/Analytics';
 import { useTheme } from '../../../../../../util/theme';
 import { strings } from '../../../../../../../locales/i18n';
@@ -58,16 +57,11 @@ const ProtectYourWallet = ({
     );
   };
 
-  const onBack = (): void => navigation.goBack();
-
   return (
     <View style={[styles.setting, styles.firstSetting]}>
       <Text variant={TextVariant.BodyLGMedium}>
         {strings('app_settings.protect_title')}
       </Text>
-      <View style={styles.video}>
-        <SeedPhraseVideo onClose={onBack} />
-      </View>
 
       <Text
         variant={TextVariant.BodyMD}

app/components/Views/Settings/SecuritySettings/Sections/ProtectYourWallet/ProtectYourWallet.tsx

@@ -37,7 +37,4 @@ export const createStyles = (colors: any) =>
     accessory: {
       marginTop: 16,
     },
-    video: {
-      marginTop: 16,
-    },
   });

app/components/Views/Settings/SecuritySettings/Sections/ProtectYourWallet/styles.ts

@@ -76,22 +76,6 @@ exports[`SecuritySettings should render correctly 1`] = `
         >
           Protect your wallet
         </Text>
-        <View
-          style={
-            {
-              "marginTop": 16,
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "height": 240,
-                "width": "100%",
-              }
-            }
-          />
-        </View>
         <Text
           accessibilityRole="text"
           style={