Feature/update seed phrase wording

app/components/UI/HintModal/__snapshots__/index.test.js.snap

@@ -83,7 +83,7 @@ exports[`HintModal should render correctly 1`] = `
           }
         }
       >
-        Do not use this to write your seed phrase.
+        Do not use this to write your Secret Recovery phrase.
       </Text>
       <TextInput
         multiline={true}

app/components/UI/SeedPhraseVideo/index.js

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, View, Image, TouchableOpacity } from 'react-native';
+import VideoPlayer from 'react-native-video-controls';
+import { colors } from '../../../styles/common';
+import Logger from '../../../util/Logger';
+import scaling from '../../../util/scaling';
+import Svg, { Circle, Path } from 'react-native-svg';
+
+const styles = StyleSheet.create({
+	videoContainer: {
+		justifyContent: 'center',
+		alignItems: 'center',
+		position: 'relative',
+		borderRadius: 8,
+		overflow: 'hidden',
+		width: '100%',
+		height: 180
+	},
+	image: {
+		zIndex: 0,
+		width: scaling.scale(138),
+		height: scaling.scale(162)
+	},
+	cover: {
+		justifyContent: 'center',
+		alignItems: 'center',
+		zIndex: 1,
+		position: 'absolute',
+		left: 0,
+		top: 0,
+		backgroundColor: colors.grey,
+		opacity: 0.2,
+		width: '100%',
+		height: '100%'
+	}
+});
+
+// eslint-disable-next-line import/no-commonjs
+const explain_backup_seedphrase = require('../../../images/explain-backup-seedphrase.png');
+
+// eslint-disable-next-line import/no-commonjs
+const vid = require('../../../../app/videos/recovery-phrase.mp4');
+
+const SeedPhraseVideo = ({ style }) => {
+	const [isPlaying, setPlaying] = useState(false);
+	const onError = e => Logger.error(e, 'Video failed');
+	const onPlay = () => {
+		Logger.log('User clicked play');
+		setPlaying(true);
+	};
+
+	return (
+		<View style={style ? [styles.videoContainer, style] : styles.videoContainer}>
+			{!isPlaying ? (
+				<>
+					<TouchableOpacity style={styles.cover} onPress={onPlay}>
+						<Svg
+							width="311"
+							height="176"
+							viewBox="0 0 311 176"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<Circle cx="156" cy="88" r="43" fill="white" />
+							<Path d="M185 87.5L140.75 107.852L140.75 67.1484L185 87.5Z" fill="black" />
+						</Svg>
+					</TouchableOpacity>
+					<Image
+						source={explain_backup_seedphrase}
+						style={styles.image}
+						resizeMethod="auto"
+						testID={'carousel-one-image'}
+					/>
+				</>
+			) : (
+				<VideoPlayer
+					disableFullscreen
+					disableBack
+					source={vid}
+					style={StyleSheet.absoluteFill}
+					onError={onError}
+					onPlay={onPlay}
+					resizeMode="cover"
+				/>
+			)}
+		</View>
+	);
+};
+
+SeedPhraseVideo.propTypes = {
+	style: PropTypes.object
+};
+
+export default SeedPhraseVideo;

app/components/UI/SeedphraseModal/__snapshots__/index.test.js.snap

@@ -57,7 +57,7 @@ exports[`SeedphraseModal should render correctly 1`] = `
           }
         }
       >
-        What is a ‘Seed phrase’
+        What is a ‘Secret recovery phrase’
       </Text>
       <TouchableOpacity
         hitSlop={
@@ -101,7 +101,7 @@ exports[`SeedphraseModal should render correctly 1`] = `
           }
         }
       >
-        A seed phrase is a set of twelve words that contains all the information about your wallet, including your funds. It’s like a secret code used to access your entire wallet.
+        A Secret Recovery phrase is a set of twelve words that contains all the information about your wallet, including your funds. It’s like a secret code used to access your entire wallet.
       </Text>
       <Text
         style={
@@ -116,7 +116,7 @@ exports[`SeedphraseModal should render correctly 1`] = `
           }
         }
       >
-        You must keep your seed phrase secret and safe. If someone gets your seed phrase, they’ll gain control over your accounts.
+        You must keep your Secret Recovery phrase secret and safe. If someone gets your Secret Recovery phrase, they’ll gain control over your accounts.
       </Text>
       <Text
         style={

app/components/UI/SkipAccountSecurityModal/__snapshots__/index.test.js.snap

@@ -130,7 +130,7 @@ exports[`HintModal should render correctly 1`] = `
         }
         testID="skip-backup-text"
       >
-        I understand that if I lose my seed phrase I will not be able to access my wallet.
+        I understand that if I lose my Secret Recovery phrase I will not be able to access my wallet.
       </Text>
     </View>
   </View>

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

@@ -40,7 +40,7 @@ exports[`AccountBackupStep1 should render correctly 1`] = `
           Array [
             "Create password",
             "Secure wallet",
-            "Confirm seed phrase",
+            "Confirm Secret Recovery phrase",
           ]
         }
       />
@@ -68,21 +68,7 @@ exports[`AccountBackupStep1 should render correctly 1`] = `
         >
           Secure your wallet
         </Text>
-        <Image
-          resizeMethod="auto"
-          source={
-            Object {
-              "testUri": "../../../app/images/explain-backup-seedphrase.png",
-            }
-          }
-          style={
-            Object {
-              "height": 162,
-              "width": 138,
-            }
-          }
-          testID="carousel-one-image"
-        />
+        <SeedPhraseVideo />
         <View
           style={
             Object {
@@ -113,7 +99,7 @@ exports[`AccountBackupStep1 should render correctly 1`] = `
                 }
               }
             >
-              seed phrase
+              Secret Recovery phrase
             </Text>
 
             in a place you trust.

app/components/Views/AccountBackupStep1/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ScrollView, TouchableOpacity, Text, View, SafeAreaView, StyleSheet, Image, BackHandler } from 'react-native';
+import { ScrollView, TouchableOpacity, Text, View, SafeAreaView, StyleSheet, BackHandler } from 'react-native';
 import PropTypes from 'prop-types';
 import AsyncStorage from '@react-native-community/async-storage';
 import { colors, fontStyles } from '../../../styles/common';
@@ -15,8 +15,7 @@ import Engine from '../../../core/Engine';
 import { ONBOARDING_WIZARD, METRICS_OPT_IN } from '../../../constants/storage';
 import { CHOOSE_PASSWORD_STEPS } from '../../../constants/onboarding';
 import SkipAccountSecurityModal from '../../UI/SkipAccountSecurityModal';
-
-const explain_backup_seedphrase = require('../../../images/explain-backup-seedphrase.png'); // eslint-disable-line
+import SeedPhraseVideo from '../../UI/SeedPhraseVideo';
 
 const styles = StyleSheet.create({
 	mainWrapper: {
@@ -96,10 +95,6 @@ const styles = StyleSheet.create({
 	},
 	ctaContainer: {
 		marginBottom: 30
-	},
-	image: {
-		width: scaling.scale(138),
-		height: scaling.scale(162)
 	}
 });
 
@@ -186,12 +181,7 @@ const AccountBackupStep1 = props => {
 					<OnboardingProgress steps={CHOOSE_PASSWORD_STEPS} currentStep={1} />
 					<View style={styles.content}>
 						<Text style={styles.title}>{strings('account_backup_step_1.title')}</Text>
-						<Image
-							source={explain_backup_seedphrase}
-							style={styles.image}
-							resizeMethod={'auto'}
-							testID={'carousel-one-image'}
-						/>
+						<SeedPhraseVideo />
 						<View style={styles.text}>
 							<Text style={styles.label}>
 								{strings('account_backup_step_1.info_text_1_1')}{' '}

app/components/Views/AccountBackupStep1B/__snapshots__/index.test.js.snap

@@ -40,7 +40,7 @@ exports[`AccountBackupStep1B should render correctly 1`] = `
           Array [
             "Create password",
             "Secure wallet",
-            "Confirm seed phrase",
+            "Confirm Secret Recovery phrase",
           ]
         }
       />
@@ -107,7 +107,7 @@ exports[`AccountBackupStep1B should render correctly 1`] = `
                 }
               }
             >
-              seed phrase.
+              Secret Recovery phrase.
             </Text>
           </Text>
         </View>
@@ -189,7 +189,7 @@ exports[`AccountBackupStep1B should render correctly 1`] = `
             }
           }
         >
-          Write down your seed phrase on a piece of paper and store in a safe place.
+          Write down your Secret Recovery phrase on a piece of paper and store in a safe place.
         </Text>
         <Text
           style={
@@ -496,7 +496,7 @@ exports[`AccountBackupStep1B should render correctly 1`] = `
             }
           }
         >
-          Don’t risk losing your funds. Protect your wallet by saving your seed phrase in a place you trust.
+          Don’t risk losing your funds. Protect your wallet by saving your Secret Recovery phrase in a place you trust.
           <Text
             style={
               Object {

app/components/Views/ChoosePassword/__snapshots__/index.test.js.snap

@@ -24,7 +24,7 @@ exports[`ChoosePassword should render correctly 1`] = `
         Array [
           "Create password",
           "Secure wallet",
-          "Confirm seed phrase",
+          "Confirm Secret Recovery phrase",
         ]
       }
     />

app/components/Views/ImportFromSeed/__snapshots__/index.test.js.snap

@@ -75,7 +75,7 @@ exports[`ImportFromSeed should render correctly 1`] = `
               }
             }
           >
-            Seed phrase
+            Secret recovery phrase
           </Text>
         </View>
         <View
@@ -136,7 +136,7 @@ exports[`ImportFromSeed should render correctly 1`] = `
         lineWidth={1}
         onChangeText={[Function]}
         onSubmitEditing={[Function]}
-        placeholder="Enter your seed phrase here"
+        placeholder="Enter your Secret Recovery phrase here"
         returnKeyType="next"
         secureTextEntry={true}
         style={

app/components/Views/ImportPrivateKey/__snapshots__/index.test.js.snap

@@ -121,7 +121,7 @@ exports[`ImportPrivateKey should render correctly 1`] = `
               }
             }
           >
-            Imported accounts are viewable in your wallet but are not recoverable with your MetaMask seed phrase.
+            Imported accounts are viewable in your wallet but are not recoverable with your MetaMask Secret Recovery phrase.
           </Text>
         </View>
         <View

app/components/Views/Login/index.js

@@ -183,13 +183,11 @@ const styles = StyleSheet.create({
 	}
 });
 
-/* TODO: we should have translation strings for these */
-const PASSCODE_NOT_SET_ERROR = 'Error: Passcode not set.';
-const WRONG_PASSWORD_ERROR = 'Error: Decrypt failed';
-const WRONG_PASSWORD_ERROR_ANDROID = 'Error: error:1e000065:Cipher functions:OPENSSL_internal:BAD_DECRYPT';
-const VAULT_ERROR = 'Error: Cannot unlock without a previous vault.';
-const CLEAN_VAULT_ERROR =
-	'MetaMask encountered an error due to reaching a storage limit. The local data has been corrupted. Please reinstall MetaMask and restore with your seed phrase.';
+const PASSCODE_NOT_SET_ERROR = strings('login.passcode_not_set_error');
+const WRONG_PASSWORD_ERROR = strings('login.wrong_password_error');
+const WRONG_PASSWORD_ERROR_ANDROID = strings('login.wrong_password_error_android');
+const VAULT_ERROR = strings('login.vault_error');
+const CLEAN_VAULT_ERROR = strings('login.clean_vault_error');
 
 /**
  * View where returning users can authenticate

app/components/Views/ManualBackupStep1/__snapshots__/index.test.js.snap

@@ -22,7 +22,7 @@ exports[`ManualBackupStep1 should render correctly 1`] = `
         Array [
           "Create Password",
           "Secure wallet",
-          "Confirm seed phrase",
+          "Confirm Secret Recovery phrase",
         ]
       }
     />
@@ -61,7 +61,7 @@ exports[`ManualBackupStep1 should render correctly 1`] = `
           }
         }
       >
-        Write down your seed phrase
+        Write down your Secret Recovery phrase
       </Text>
       <View
         style={
@@ -83,7 +83,7 @@ exports[`ManualBackupStep1 should render correctly 1`] = `
             }
           }
         >
-          This is your seed phrase. Write it down on a paper and keep it in a safe place. You'll be asked to re-enter this phrase (in order) on the next step.
+          This is your Secret Recovery phrase. Write it down on a paper and keep it in a safe place. You'll be asked to re-enter this phrase (in order) on the next step.
         </Text>
       </View>
       <View
@@ -538,7 +538,7 @@ exports[`ManualBackupStep1 should render correctly 1`] = `
                 }
               }
             >
-              Tap to reveal your seed phrase
+              Tap to reveal your Secret Recovery phrase
             </Text>
             <Text
               style={

app/components/Views/ManualBackupStep2/__snapshots__/index.test.js.snap

@@ -61,7 +61,7 @@ exports[`ManualBackupStep2 should render correctly 1`] = `
           }
         }
       >
-        Confirm seed phrase
+        Confirm Secret Recovery phrase
       </Text>
       <View
         style={