Modify import SRP page (#14425)

* Modify Import SRP page

app/_locales/de/messages.json

@@ -1276,13 +1276,6 @@
   "importAccountSeedPhrase": {
     "message": "Ein Konto mit einem Seed-Schlüssel importieren"
   },
-  "importExistingWalletDescription": {
-    "message": "Geben Sie die Geheime Wiederherstellungsphrase (alias Seed Phrase) ein, die Sie beim Erstellen Ihrer Wallet erhalten haben. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "Eine bestehende Wallet mit einer Geheime Wiederherstellungsphrase importieren"
-  },
   "importMyWallet": {
     "message": "Meine Wallet importieren"
   },

app/_locales/el/messages.json

@@ -1270,13 +1270,6 @@
   "importAccountSeedPhrase": {
     "message": "Εισαγωγή λογαριασμού με Μυστική Φράση Ανάκτησης"
   },
-  "importExistingWalletDescription": {
-    "message": "Εισάγετε τη Μυστική Φράση Ανάκτησης (δλδ Seed Phrase) που σας δόθηκε όταν δημιουργήσατε το πορτοφόλι σας. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "Εισαγωγή υπάρχοντος πορτοφολιού με Μυστική Φράση Ανάκτησης"
-  },
   "importMyWallet": {
     "message": "Εισαγωγή Πορτοφολιού μου"
   },

app/_locales/en/messages.json

@@ -62,6 +62,13 @@
     "message": "$1 may access and spend this asset",
     "description": "$1 is the url of the site requesting ability to spend"
   },
+  "accessYourWalletWithSRP": {
+    "message": "Access your wallet with your Secret Recovery Phrase"
+  },
+  "accessYourWalletWithSRPDescription": {
+    "message": "MetaMask cannot recover your password. We will use your Secret Recovery Phrase to validate your ownership, restore your wallet and set up a new password. First, enter the Secret Recovery Phrase that you were given when you created your wallet. $1",
+    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
+  },
   "accessingYourCamera": {
     "message": "Accessing your camera..."
   },
@@ -1480,13 +1487,6 @@
   "importAccountSeedPhrase": {
     "message": "Import a wallet with Secret Recovery Phrase"
   },
-  "importExistingWalletDescription": {
-    "message": "Enter your Secret Recovery Phrase (aka Seed Phrase) that you were given when you created your wallet. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "Import existing wallet with Secret Recovery Phrase"
-  },
   "importMyWallet": {
     "message": "Import My Wallet"
   },
@@ -3773,6 +3773,9 @@
   "typePassword": {
     "message": "Type your MetaMask password"
   },
+  "typeYourSRP": {
+    "message": "Type your Secret Recovery Phrase"
+  },
   "u2f": {
     "message": "U2F",
     "description": "A name on an API for the browser to interact with devices that support the U2F protocol. On some browsers we use it to connect MetaMask to Ledger devices."

app/_locales/es_419/messages.json

@@ -1319,13 +1319,6 @@
   "importAccountSeedPhrase": {
     "message": "Importar una cartera con la frase secreta de recuperación"
   },
-  "importExistingWalletDescription": {
-    "message": "Ingrese su frase secreta de recuperación (también conocida como Frase Semilla) que recibió al crear su cartera. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "Importar la cartera existente con la frase secreta de recuperación"
-  },
   "importMyWallet": {
     "message": "Importar Mi cartera"
   },

app/_locales/fr/messages.json

@@ -1270,13 +1270,6 @@
   "importAccountSeedPhrase": {
     "message": "Importez un compte avec une phrase mnémotechnique"
   },
-  "importExistingWalletDescription": {
-    "message": "Saisissez la phrase secrète de récupération (aussi appelée « phrase mnémonique » ou « seed ») qui vous a été attribuée lors de la création de votre portefeuille. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "Importer un portefeuille existant avec la phrase secrète de récupération"
-  },
   "importMyWallet": {
     "message": "Importer mon portefeuille"
   },

app/_locales/hi/messages.json

@@ -1270,13 +1270,6 @@
   "importAccountSeedPhrase": {
     "message": "गुप्त रिकवरी फ्रेज के साथ एक खाता आयात करें"
   },
-  "importExistingWalletDescription": {
-    "message": "अपना सीक्रेट रिकवरी फ्रेज (उर्फ सीड फ्रेज) दर्ज करें जो आपको अपना वॉलेट बनाने पर दिया गया था। $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "सीक्रेट रिकवरी फ्रेज के साथ मौजूदा वॉलेट आयात करें"
-  },
   "importMyWallet": {
     "message": "मेरा वॉलेट आयात करें"
   },

app/_locales/id/messages.json

@@ -1270,13 +1270,6 @@
   "importAccountSeedPhrase": {
     "message": "Impor dompet dengan Frasa Pemulihan Rahasia"
   },
-  "importExistingWalletDescription": {
-    "message": "Masukkan Frasa Pemulihan Rahasia Anda (alias Frasa Benih) yang diberikan saat Anda membuat dompet. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "Impor dompet yang ada dengan Frasa Pemulihan Rahasia"
-  },
   "importMyWallet": {
     "message": "Impor Dompet Saya"
   },

app/_locales/ja/messages.json

@@ -1270,13 +1270,6 @@
   "importAccountSeedPhrase": {
     "message": "シークレットリカバリーフレーズを使用してウォレットをインポート"
   },
-  "importExistingWalletDescription": {
-    "message": "ウォレットの作成時に提供されたシークレットリカバリーフレーズ (シードフレーズ) を入力してください。$1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "シークレットリカバリーフレーズで既存のウォレットをインポート"
-  },
   "importMyWallet": {
     "message": "ウォレットをインポート"
   },

app/_locales/ko/messages.json

@@ -1270,13 +1270,6 @@
   "importAccountSeedPhrase": {
     "message": "비밀 복구 구문으로 계정 가져오기"
   },
-  "importExistingWalletDescription": {
-    "message": "지갑을 만들 때 받은 비밀 복구 구문(시드 구문)을 입력하세요. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "비밀 복구 구문을 사용하여 기존 지갑 가져오기"
-  },
   "importMyWallet": {
     "message": "내 지갑 가져오기"
   },

app/_locales/pt_BR/messages.json

@@ -1303,13 +1303,6 @@
   "importAccountSeedPhrase": {
     "message": "Importe uma carteira com a Frase de Recuperação Secreta"
   },
-  "importExistingWalletDescription": {
-    "message": "Digite sua Frase de Recuperação Secreta (ou seja, a frase seed) que lhe foi dada quando você criou a sua carteira. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "Importar carteira existente com Frase de Recuperação Secreta"
-  },
   "importMyWallet": {
     "message": "Importar minha carteira"
   },

app/_locales/ru/messages.json

@@ -1270,13 +1270,6 @@
   "importAccountSeedPhrase": {
     "message": "Импорт кошелька с помощью секретной фразы для восстановления"
   },
-  "importExistingWalletDescription": {
-    "message": "Введите секретную фразу для восстановления (также известную как «сид-фраза»), которую вы получили при создании кошелька. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "Импортируйте существующий кошелек с помощью секретной фразы для восстановления"
-  },
   "importMyWallet": {
     "message": "Импорт моего кошелька"
   },

app/_locales/tl/messages.json

@@ -1270,13 +1270,6 @@
   "importAccountSeedPhrase": {
     "message": "Mag-import ng account gamit ang Secret Recovery Phrase"
   },
-  "importExistingWalletDescription": {
-    "message": "Ilagay ang iyong Secret Recovery Phrase (kilala rin bilang Seed Phrase) na ibinigay sa iyo noong gumawa ka ng iyong wallet. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "Mag-import ng umiiral na wallet gamit ang Secret Recovery Phrase"
-  },
   "importMyWallet": {
     "message": "I-import ang Wallet Ko"
   },

app/_locales/tr/messages.json

@@ -1270,13 +1270,6 @@
   "importAccountSeedPhrase": {
     "message": "Gizli Kurtarma İfadesi ile bir cüzdanı içe aktarın"
   },
-  "importExistingWalletDescription": {
-    "message": "Cüzdanınızı oluşturduğunuzda size verilen Gizli Kurtarma İfadenizi (başka bir deyişle Tohum İfadesi) girin. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "Gizli Kurtarma İfadesi ile mevcut cüzdanı içe aktarın"
-  },
   "importMyWallet": {
     "message": "Cüzdanımı İçe Aktar"
   },

app/_locales/vi/messages.json

@@ -1270,13 +1270,6 @@
   "importAccountSeedPhrase": {
     "message": "Nhập một ví bằng Cụm mật khẩu khôi phục bí mật"
   },
-  "importExistingWalletDescription": {
-    "message": "Nhập Cụm Mật Khẩu Khôi Phục Bí Mật (còn được gọi là Cụm Mật Khẩu Gốc) mà bạn được cấp khi tạo ví. $1",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "Nhập ví hiện tại bằng Cụm Mật Khẩu Khôi Phục Bí Mật"
-  },
   "importMyWallet": {
     "message": "Nhập Ví Của Tôi"
   },

app/_locales/zh_CN/messages.json

@@ -1270,13 +1270,6 @@
   "importAccountSeedPhrase": {
     "message": "使用账户助记词导入账户"
   },
-  "importExistingWalletDescription": {
-    "message": "输入您创建$1钱包时提供的保密恢复短语（或Seed Phrase）。",
-    "description": "$1 is the words 'Learn More' from key 'learnMore', separated here so that it can be added as a link"
-  },
-  "importExistingWalletTitle": {
-    "message": "使用账户助记词导入现有钱包"
-  },
   "importMyWallet": {
     "message": "导入我的钱包"
   },

ui/components/app/create-new-vault/create-new-vault.js

@@ -108,7 +108,7 @@ export default function CreateNewVault({
 
   return (
     <form className="create-new-vault__form" onSubmit={onImport}>
-      <SrpInput onChange={setSeedPhrase} />
+      <SrpInput onChange={setSeedPhrase} srpText={t('secretRecoveryPhrase')} />
       <div className="create-new-vault__create-password">
         <TextField
           id="password"

ui/components/app/srp-input/srp-input.js

@@ -8,14 +8,17 @@ import ActionableMessage from '../../ui/actionable-message';
 import Dropdown from '../../ui/dropdown';
 import Typography from '../../ui/typography';
 import ShowHideToggle from '../../ui/show-hide-toggle';
-import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
+import {
+  FONT_WEIGHT,
+  TYPOGRAPHY,
+} from '../../../helpers/constants/design-system';
 import { parseSecretRecoveryPhrase } from './parse-secret-recovery-phrase';
 
 const { isValidMnemonic } = ethers.utils;
 
 const defaultNumberOfWords = 12;
 
-export default function SrpInput({ onChange }) {
+export default function SrpInput({ onChange, srpText }) {
   const [srpError, setSrpError] = useState('');
   const [pasteFailed, setPasteFailed] = useState(false);
   const [draftSrp, setDraftSrp] = useState(
@@ -121,8 +124,8 @@ export default function SrpInput({ onChange }) {
   return (
     <div className="import-srp__container">
       <label className="import-srp__srp-label">
-        <Typography variant={TYPOGRAPHY.H4}>
+        <Typography variant={TYPOGRAPHY.H4} fontWeight={FONT_WEIGHT.BOLD}>
-          {t('secretRecoveryPhrase')}
+          {srpText}
         </Typography>
       </label>
       <ActionableMessage
@@ -232,4 +235,8 @@ SrpInput.propTypes = {
    * Otherwise, this is called with an empty string.
    */
   onChange: PropTypes.func.isRequired,
+  /**
+   * Text to show on the left of the Dropdown component. Wrapped in Typography component.
+   */
+  srpText: PropTypes.string.isRequired,
 };

ui/components/app/srp-input/srp-input.test.js

@@ -44,7 +44,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { getByText } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       await waitFor(() => getByText(enLocale.secretRecoveryPhrase.message));
 
@@ -56,7 +59,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.keyboard('test');
@@ -68,7 +74,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         for (const index of new Array(11).keys()) {
@@ -83,7 +92,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         for (const index of new Array(11).keys()) {
@@ -100,7 +112,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         for (const index of new Array(10).keys()) {
@@ -117,7 +132,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         const srpParts = invalidChecksum.split(' ');
@@ -133,7 +151,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         const srpParts = invalidWordCorrectChecksum.split(' ');
@@ -149,7 +170,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         const srpParts = correct.split(' ');
@@ -166,7 +190,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         const srpParts = correct.split(' ');
@@ -185,7 +212,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         getByTestId('import-srp__srp-word-0').focus();
@@ -205,7 +235,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste('test');
@@ -217,7 +250,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         for (const index of new Array(11).keys()) {
@@ -232,7 +268,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         const srpParts = invalidChecksum.split(' ');
@@ -248,7 +287,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         const srpParts = invalidWordCorrectChecksum.split(' ');
@@ -264,7 +306,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         const srpParts = correct.split(' ');
@@ -281,7 +326,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         const srpParts = correct.split(' ');
@@ -300,7 +348,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
 
         getByTestId('import-srp__srp-word-0').focus();
@@ -320,7 +371,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste('test');
@@ -332,7 +386,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste(tooManyWords);
@@ -345,7 +402,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           getByTestId('import-srp__srp-word-0').focus();
           await userEvent.paste(invalidInput);
@@ -357,7 +417,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           getByTestId('import-srp__srp-word-1').focus();
           await userEvent.paste(invalidInput);
@@ -369,7 +432,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           getByTestId('import-srp__srp-word-1').focus();
           await userEvent.paste(correct);
@@ -383,7 +449,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-1').focus();
         await userEvent.paste(correct);
@@ -398,7 +467,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -414,7 +486,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -433,7 +508,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -452,7 +530,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -472,7 +553,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -487,7 +571,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -504,7 +591,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -523,7 +613,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -542,7 +635,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -560,7 +656,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste(correct);
@@ -572,7 +671,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste(invalidChecksum);
@@ -586,7 +688,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           getByTestId('import-srp__srp-word-0').focus();
           await userEvent.paste(poorlyFormattedInput);
@@ -598,7 +703,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           getByTestId('import-srp__srp-word-1').focus();
           await userEvent.paste(poorlyFormattedInput);
@@ -614,7 +722,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { getByText, queryByText } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       await waitFor(() => getByText(enLocale.secretRecoveryPhrase.message));
 
@@ -631,7 +742,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = tooFewWords.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -649,7 +763,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByRole, getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         await userEvent.selectOptions(getByRole('combobox'), '15');
         const srpParts = invalidWordCount.split(' ');
@@ -668,7 +785,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = invalidChecksum.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -688,7 +808,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = invalidWordCorrectChecksum.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -708,7 +831,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -729,7 +855,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId, queryByText } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -753,7 +882,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId, queryByText } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -777,7 +909,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId, queryByText } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -802,7 +937,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = tooFewWords.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -820,7 +958,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, getByRole, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         await userEvent.selectOptions(getByRole('combobox'), '15');
         const srpParts = invalidWordCount.split(' ');
@@ -839,7 +980,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = invalidChecksum.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -859,7 +1003,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = invalidWordCorrectChecksum.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -879,7 +1026,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -900,7 +1050,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId, queryByText } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -924,7 +1077,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId, queryByText } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -948,7 +1104,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId, queryByText } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           const srpParts = correct.split(' ');
           for (const index of new Array(srpParts.length).keys()) {
@@ -971,7 +1130,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste(tooFewWords);
@@ -986,7 +1148,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste(invalidWordCount);
@@ -1001,7 +1166,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste(invalidChecksum);
@@ -1018,7 +1186,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste(invalidWordCorrectChecksum);
@@ -1035,7 +1206,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryByText } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste(correct);
@@ -1053,7 +1227,10 @@ describe('srp-input', () => {
           const onChange = jest.fn();
 
           const { getByTestId, queryByText } = renderWithLocalization(
-            <SrpInput onChange={onChange} />,
+            <SrpInput
+              onChange={onChange}
+              srpText={enLocale.secretRecoveryPhrase.message}
+            />,
           );
           getByTestId('import-srp__srp-word-0').focus();
           await userEvent.paste(poorlyFormattedInput);
@@ -1074,7 +1251,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { getByTestId } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
 
       for (const index of new Array(12).keys()) {
@@ -1093,7 +1273,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryAllByRole } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -1108,7 +1291,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryAllByRole } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -1123,7 +1309,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryAllByRole } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste(correct);
@@ -1137,7 +1326,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -1161,7 +1353,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -1187,7 +1382,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -1217,7 +1415,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -1247,7 +1448,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         getByTestId('import-srp__srp-word-0').focus();
         await userEvent.paste(correct);
@@ -1277,7 +1481,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -1304,7 +1511,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         const srpParts = correct.split(' ');
         for (const index of new Array(srpParts.length).keys()) {
@@ -1333,7 +1543,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryAllByRole } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         await userEvent.click(getByTestId('import-srp__srp-word-0-checkbox'));
         getByTestId('import-srp__srp-word-0').focus();
@@ -1353,7 +1566,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryAllByRole } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         await userEvent.click(getByTestId('import-srp__srp-word-0-checkbox'));
         getByTestId('import-srp__srp-word-0').focus();
@@ -1373,7 +1589,10 @@ describe('srp-input', () => {
         const onChange = jest.fn();
 
         const { getByTestId, queryAllByRole } = renderWithLocalization(
-          <SrpInput onChange={onChange} />,
+          <SrpInput
+            onChange={onChange}
+            srpText={enLocale.secretRecoveryPhrase.message}
+          />,
         );
         await userEvent.click(getByTestId('import-srp__srp-word-0-checkbox'));
         getByTestId('import-srp__srp-word-0').focus();
@@ -1390,7 +1609,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { getByTestId, queryAllByRole } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(correct);
@@ -1410,7 +1632,10 @@ describe('srp-input', () => {
       const writeTextSpy = jest.spyOn(window.navigator.clipboard, 'writeText');
 
       const { getByTestId } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       const srpParts = correct.split(' ');
       for (const index of new Array(srpParts.length).keys()) {
@@ -1426,7 +1651,10 @@ describe('srp-input', () => {
       const writeTextSpy = jest.spyOn(window.navigator.clipboard, 'writeText');
 
       const { getByTestId } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       const srpParts = correct.split(' ');
       for (const index of new Array(srpParts.length).keys()) {
@@ -1442,7 +1670,10 @@ describe('srp-input', () => {
       const writeTextSpy = jest.spyOn(window.navigator.clipboard, 'writeText');
 
       const { getByTestId } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(tooManyWords);
@@ -1455,7 +1686,10 @@ describe('srp-input', () => {
       const writeTextSpy = jest.spyOn(window.navigator.clipboard, 'writeText');
 
       const { getByTestId } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(tooFewWords);
@@ -1468,7 +1702,10 @@ describe('srp-input', () => {
       const writeTextSpy = jest.spyOn(window.navigator.clipboard, 'writeText');
 
       const { getByTestId } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(correct);
@@ -1482,7 +1719,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { queryByTestId, queryByRole } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
 
       expect(
@@ -1502,7 +1742,12 @@ describe('srp-input', () => {
         getByTestId,
         queryByTestId,
         queryByRole,
-      } = renderWithLocalization(<SrpInput onChange={onChange} />);
+      } = renderWithLocalization(
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
+      );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(new Array(15).fill('test').join(' '));
 
@@ -1524,7 +1769,12 @@ describe('srp-input', () => {
         getByTestId,
         queryByTestId,
         queryByRole,
-      } = renderWithLocalization(<SrpInput onChange={onChange} />);
+      } = renderWithLocalization(
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
+      );
       await userEvent.selectOptions(getByRole('combobox'), '15');
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(correct);
@@ -1546,7 +1796,12 @@ describe('srp-input', () => {
         getByTestId,
         queryByTestId,
         queryByRole,
-      } = renderWithLocalization(<SrpInput onChange={onChange} />);
+      } = renderWithLocalization(
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
+      );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(invalidWordCount);
 
@@ -1564,7 +1819,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { getByRole, queryByTestId, queryByRole } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       await userEvent.selectOptions(getByRole('combobox'), '24');
 
@@ -1582,7 +1840,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { getByRole, getByTestId, queryByTestId } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(new Array(15).fill('test').join(' '));
@@ -1603,7 +1864,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { getByTestId, queryByText } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(tooManyWords);
@@ -1617,7 +1881,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { getByTestId, getByText, queryByText } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(tooManyWords);
@@ -1632,7 +1899,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { getByTestId, queryByText } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(tooManyWords);
@@ -1647,7 +1917,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { getByTestId, queryByText } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(tooManyWords);
@@ -1662,7 +1935,10 @@ describe('srp-input', () => {
       const onChange = jest.fn();
 
       const { getByTestId, queryByText } = renderWithLocalization(
-        <SrpInput onChange={onChange} />,
+        <SrpInput
+          onChange={onChange}
+          srpText={enLocale.secretRecoveryPhrase.message}
+        />,
       );
       getByTestId('import-srp__srp-word-0').focus();
       await userEvent.paste(tooManyWords);

ui/pages/onboarding-flow/import-srp/import-srp.js

@@ -1,7 +1,5 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { ethers } from 'ethers';
-import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import {
   TwoStepProgressBar,
@@ -16,44 +14,26 @@ import {
   TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
 import { ONBOARDING_CREATE_PASSWORD_ROUTE } from '../../../helpers/constants/routes';
-import { clearClipboard } from '../../../helpers/utils/util';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
+import SrpInput from '../../../components/app/srp-input';
 
 export default function ImportSRP({ submitSecretRecoveryPhrase }) {
   const [secretRecoveryPhrase, setSecretRecoveryPhrase] = useState('');
-  const [revealSRP, setRevealSRP] = useState(false);
-  const [error, setError] = useState('');
   const history = useHistory();
   const t = useI18nContext();
-  const { isValidMnemonic } = ethers.utils;
-
-  const parseSeedPhrase = (seedPhrase) =>
-    (seedPhrase || '').trim().toLowerCase().match(/\w+/gu)?.join(' ') || '';
-
-  const handleSecretRecoveryPhraseChange = (recoveryPhrase) => {
-    setError('');
-    if (recoveryPhrase) {
-      const parsedSecretRecoveryPhrase = parseSeedPhrase(recoveryPhrase);
-      const wordCount = parsedSecretRecoveryPhrase.split(/\s/u).length;
-      if (wordCount % 3 !== 0 || wordCount > 24 || wordCount < 12) {
-        setError(t('seedPhraseReq'));
-      } else if (!isValidMnemonic(parsedSecretRecoveryPhrase)) {
-        setError(t('invalidSeedPhrase'));
-      }
-    }
-    setSecretRecoveryPhrase(recoveryPhrase);
-  };
 
   return (
     <div className="import-srp">
       <TwoStepProgressBar stage={twoStepStages.RECOVERY_PHRASE_CONFIRM} />
       <div className="import-srp__header">
         <Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
-          {t('importExistingWalletTitle')}
+          {t('accessYourWalletWithSRP')}
         </Typography>
+      </div>
+      <div className="import-srp__description">
         <Typography variant={TYPOGRAPHY.H4}>
-          {t('importExistingWalletDescription', [
+          {t('accessYourWalletWithSRPDescription', [
             <a
               key="learnMore"
               type="link"
@@ -68,45 +48,20 @@ export default function ImportSRP({ submitSecretRecoveryPhrase }) {
       </div>
       <div className="import-srp__actions">
         <Box textAlign={TEXT_ALIGN.LEFT}>
-          <Typography variant={TYPOGRAPHY.H4}>
+          <SrpInput
-            {t('secretRecoveryPhrase')}
+            onChange={setSecretRecoveryPhrase}
-          </Typography>
+            srpText={t('typeYourSRP')}
-
+          />
-          <div className="srp-text-area">
-            <button onClick={() => setRevealSRP(!revealSRP)}>
-              <i
-                className={`far fa-eye${revealSRP ? '-slash' : ''}`}
-                style={{ color: 'var(--color-icon-default' }}
-              />
-            </button>
-            <textarea
-              data-testid="import-srp-text"
-              className={classnames('srp-text-area__textarea', {
-                'srp-text-area__textarea--blur': !revealSRP,
-                'srp-text-area__textarea--error': error,
-              })}
-              onChange={({ target: { value } }) =>
-                handleSecretRecoveryPhraseChange(value)
-              }
-              onPaste={clearClipboard}
-              autoComplete="off"
-              autoCorrect="off"
-            />
-            {error && (
-              <span className="srp-text-area__textarea__error-message">
-                {error}
-              </span>
-            )}
-          </div>
           <Button
             type="primary"
             data-testid="import-srp-confirm"
             large
+            className="import-srp__confirm-button"
             onClick={() => {
               submitSecretRecoveryPhrase(secretRecoveryPhrase);
               history.replace(ONBOARDING_CREATE_PASSWORD_ROUTE);
             }}
-            disabled={error || secretRecoveryPhrase.length === 0}
+            disabled={!secretRecoveryPhrase.trim()}
           >
             {t('confirmRecoveryPhrase')}
           </Button>

ui/pages/onboarding-flow/import-srp/index.scss

@@ -1,5 +1,21 @@
 .import-srp {
-  width: 625px;
+  width: 840px;
+
+  @media screen and (max-width: 349px) {
+    width: 300px;
+  }
+
+  @media screen and (min-width: 350px) and (max-width: 460px) {
+    width: 357px;
+  }
+
+  @media screen and (min-width: 461px) and (max-width: $break-small) {
+    width: 450px;
+  }
+
+  @media screen and (min-width: $break-small) and (max-width: 840px) {
+    width: 580px;
+  }
 
   &__header {
     display: flex;
@@ -8,6 +24,14 @@
     text-align: center;
     margin: 20px auto;
     max-width: 500px;
+  }
+
+  &__description {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    margin-bottom: 40px;
 
     a {
       color: var(--color-primary-default);
@@ -25,7 +49,6 @@
     justify-content: center;
     align-items: center;
     text-align: left;
-    max-width: 400px;
     margin: auto;
 
     &--link {
@@ -34,46 +57,10 @@
       margin-bottom: 12px;
     }
   }
-}
 
-.srp-text-area {
+  &__confirm-button {
-  position: relative;
+    width: 327px;
-  height: 100px;
+    margin: auto;
-  width: 325px;
+    margin-top: 59px;
-  margin: 12px 0 42px 0;
-
-  &__textarea {
-    @include Paragraph;
-
-    border: 1px solid var(--color-border-muted);
-    border-radius: 10px;
-    background-color: var(--color-background-default);
-    color: var(--color-text-default);
-    padding: 12px 24px 12px 12px;
-    resize: none;
-    width: 100%;
-    height: 100%;
-
-    &--blur {
-      color: transparent;
-      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
-    }
-
-    &--error {
-      border: 1px solid var(--color-error-default);
-    }
-
-    &__error-message {
-      @include H7;
-
-      color: var(--color-error-default);
-    }
-  }
-
-  button {
-    background-color: transparent;
-    position: absolute;
-    right: 0;
-    top: 5px;
   }
 }

ui/pages/onboarding-flow/index.scss

@@ -14,7 +14,6 @@
   background-color: var(--color-background-default);
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
 
   &__wrapper {