Merge pull request #14085 from MetaMask/Version-v10.11.3

Version v10.11.3 RC
2024-12-23 09:52:26 +01:00 · 2022-03-22 16:36:30 -02:30 · 2022-03-22 16:36:30 -02:30 · a87c84e952
commit a87c84e952
parent f157cecf39 2779756708
76 changed files with 2718 additions and 438 deletions
--- a/.circleci/scripts/chrome-install.sh
+++ b/.circleci/scripts/chrome-install.sh
@ -5,12 +5,12 @@ set -u
 set -o pipefail

 # To get the latest version, see <https://www.ubuntuupdates.org/ppa/google_chrome?dist=stable>
-CHROME_VERSION='98.0.4758.80-1'
+CHROME_VERSION='99.0.4844.51-1'
 CHROME_BINARY="google-chrome-stable_${CHROME_VERSION}_amd64.deb"
 CHROME_BINARY_URL="https://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/${CHROME_BINARY}"

 # To retrieve this checksum, run the `wget` and `shasum` commands below
-CHROME_BINARY_SHA512SUM='83d151f05017ee1f255f4134ee84efdb5c7826d6c64d43e6d402bef1569e4800806be0f87af3cacd240917cacaeedb9cae5833ccbc65740482f6aafbef9b38e7'
+CHROME_BINARY_SHA512SUM='f0fa5c6c23d9e8373aafa14622ed4362cbf3a101691ce309864e4aa0030dc3bf7b8e7c8ce294c06106b26eb6b8dc0f2b80376bf2a49d703fc9f6597961b9432e'

 wget -O "${CHROME_BINARY}" -t 5 "${CHROME_BINARY_URL}"

--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+## [10.11.3]
+### Changed
+- Split secret recovery phrase input into one-field-per-word ([#14016](https://github.com/MetaMask/metamask-extension/pull/14016))
+
 ## [10.11.2]
 ### Fixed
 - Fix bug that users who are connected to another extension would hit when viewing connected sites ([#13974](https://github.com/MetaMask/metamask-extension/pull/13974))
@ -2779,7 +2783,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Uncategorized
 - Added the ability to restore accounts from seed words.

-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.11.2...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.11.3...HEAD
+[10.11.3]: https://github.com/MetaMask/metamask-extension/compare/v10.11.2...v10.11.3
 [10.11.2]: https://github.com/MetaMask/metamask-extension/compare/v10.11.1...v10.11.2
 [10.11.1]: https://github.com/MetaMask/metamask-extension/compare/v10.11.0...v10.11.1
 [10.11.0]: https://github.com/MetaMask/metamask-extension/compare/v10.10.2...v10.11.0
--- a/app/_locales/am/messages.json
+++ b/app/_locales/am/messages.json
@ -804,9 +804,6 @@
  "securityAndPrivacy": {
    "message": "ደህንነት እና ግላዊነት"
  },
-  "seedPhrasePlaceholder": {
-    "message": "እያንዳንዱን ቃል በነጠላ ክፍት ቦታ ይለያዩ"
-  },
  "seedPhraseReq": {
    "message": "የዘር ሐረጋት የ 12 ቃላት ርዝመት አላቸው"
  },
--- a/app/_locales/ar/messages.json
+++ b/app/_locales/ar/messages.json
@ -820,9 +820,6 @@
  "securityAndPrivacy": {
    "message": "الأمن والخصوصية"
  },
-  "seedPhrasePlaceholder": {
-    "message": "يرجى فصل كل كلمة بمسافة واحدة"
-  },
  "seedPhraseReq": {
    "message": "طول الجمل البذرية 12 كلمة"
  },
--- a/app/_locales/bg/messages.json
+++ b/app/_locales/bg/messages.json
@ -815,9 +815,6 @@
  "securityAndPrivacy": {
    "message": "Сигурност и поверителност"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Отделете всяка дума с един интервал"
-  },
  "seedPhraseReq": {
    "message": "Фразите зародиш се състоят от 12 думи"
  },
--- a/app/_locales/bn/messages.json
+++ b/app/_locales/bn/messages.json
@ -819,9 +819,6 @@
  "securityAndPrivacy": {
    "message": "নিরাপত্তা এবং গোপনীয়তা"
  },
-  "seedPhrasePlaceholder": {
-    "message": "প্রতিটি শব্দকে একটি স্পেস দিয়ে আলাদা করুন"
-  },
  "seedPhraseReq": {
    "message": "সীড ফ্রেজগুলি 12 শব্দের"
  },
--- a/app/_locales/ca/messages.json
+++ b/app/_locales/ca/messages.json
@ -797,9 +797,6 @@
  "securityAndPrivacy": {
    "message": "Seguretat i privacitat"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Separa cada paraula amb un únic espai"
-  },
  "seedPhraseReq": {
    "message": "Les frases de recuperació tenen 12 paraules"
  },
--- a/app/_locales/da/messages.json
+++ b/app/_locales/da/messages.json
@ -800,9 +800,6 @@
  "securityAndPrivacy": {
    "message": "Sikkerhed & Privatliv"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Adskil hvert ord med et enkelt mellemrum"
-  },
  "seedPhraseReq": {
    "message": "Backupsætninger er 12 ord lange"
  },
--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@ -2359,9 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Bevor Sie loslegen, schauen Sie sich dieses kurze Video an, um mehr über Ihre Geheime Wiederherstellungsphrase zu erfahren und wie Sie Ihre Wallet sicher halten können."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Trennen Sie jedes Wort durch ein einzelnes Leerzeichen."
-  },
  "seedPhraseReq": {
    "message": "Seed-Wörterfolgen bestehen aus 12 Wörtern"
  },
@ -2469,9 +2466,6 @@
  "showRecommendations": {
    "message": "Empfehlungen anzeigen"
  },
-  "showSeedPhrase": {
-    "message": "Geheime Wiederherstellungsphrase zeigen"
-  },
  "showTestnetNetworks": {
    "message": "Test-Netzwerke anzeigen"
  },
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@ -2359,12 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Πριν ξεκινήσετε, παρακολουθήστε αυτό το σύντομο βίντεο για να μάθετε για τη Μυστική Φράση Ανάκτησης σας και πώς να κρατήσετε το πορτοφόλι σας ασφαλές."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Διαχωρίστε κάθε λέξη μ' ένα κενό"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "Επικόλληση Μυστικής Φράσης Ανάκτησης από το πρόχειρο"
-  },
  "seedPhraseReq": {
    "message": "Οι Μυστικές Φράσεις Ανάκτησης έχουν μήκος 12 λέξεων"
  },
@ -2475,9 +2469,6 @@
  "showRecommendations": {
    "message": "Εμφάνιση Προτάσεων"
  },
-  "showSeedPhrase": {
-    "message": "Εμφάνιση Μυστικής Φράσης Ανάκτησης"
-  },
  "showTestnetNetworks": {
    "message": "Εμφάνιση δοκιμαστικών δικτύων"
  },
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -2588,12 +2588,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Before getting started, watch this short video to learn about your Secret Recovery Phrase and how to keep your wallet safe."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Separate each word with a single space"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "Enter your Secret Recovery Phrase"
-  },
  "seedPhraseReq": {
    "message": "Secret Recovery Phrases contain 12, 15, 18, 21, or 24 words"
  },
@ -2707,9 +2701,6 @@
  "showRecommendations": {
    "message": "Show Recommendations"
  },
-  "showSeedPhrase": {
-    "message": "Show Secret Recovery Phrase"
-  },
  "showTestnetNetworks": {
    "message": "Show test networks"
  },
@ -2831,6 +2822,30 @@
  "spendLimitTooLarge": {
    "message": "Spend limit too large"
  },
+  "srpInputNumberOfWords": {
+    "message": "I have a $1-word phrase",
+    "description": "This is the text for each option in the dropdown where a user selects how many words their secret recovery phrase has during import. The $1 is the number of words (either 12, 15, 18, 21, or 24)."
+  },
+  "srpPasteFailedTooManyWords": {
+    "message": "Paste failed because it contained over 24 words. A secret recovery phrase can have a maximum of 24 words.",
+    "description": "Description of SRP paste erorr when the pasted content has too many words"
+  },
+  "srpPasteTip": {
+    "message": "You can paste your entire secret recovery phrase into any field",
+    "description": "Our secret recovery phrase input is split into one field per word. This message explains to users that they can paste their entire secrete recovery phrase into any field, and we will handle it correctly."
+  },
+  "srpToggleShow": {
+    "message": "Show/Hide this word of the secret recovery phrase",
+    "description": "Describes a toggle that is used to show or hide a single word of the secret recovery phrase"
+  },
+  "srpWordHidden": {
+    "message": "This word is hidden",
+    "description": "Explains that a word in the secret recovery phrase is hidden"
+  },
+  "srpWordShown": {
+    "message": "This word is being shown",
+    "description": "Explains that a word in the secret recovery phrase is being shown"
+  },
  "stable": {
    "message": "Stable"
  },
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@ -1530,12 +1530,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Antes de comenzar, mire este breve video para aprender sobre su frase de recuperación y sobre cómo mantener segura su cartera."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Separar cada palabra con un solo espacio"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "Pegar la frase secreta de recuperación desde el Portapapeles"
-  },
  "seedPhraseReq": {
    "message": "Las frases secretas de recuperación contienen 12, 15, 18, 21 o 24 palabras"
  },
@ -1615,9 +1609,6 @@
  "showPrivateKeys": {
    "message": "Mostrar claves privadas"
  },
-  "showSeedPhrase": {
-    "message": "Mostrar frase secreta de recuperación"
-  },
  "sigRequest": {
    "message": "Solicitud de firma"
  },
--- a/app/_locales/es_419/messages.json
+++ b/app/_locales/es_419/messages.json
@ -2408,12 +2408,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Antes de comenzar, mire este breve video para aprender sobre su frase de recuperación y sobre cómo proteger su cartera."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Separar cada palabra con un solo espacio"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "Pegar la frase secreta de recuperación desde el Portapapeles"
-  },
  "seedPhraseReq": {
    "message": "Las frases secretas de recuperación contienen 12, 15, 18, 21 o 24 palabras"
  },
@ -2527,9 +2521,6 @@
  "showRecommendations": {
    "message": "Mostrar recomendaciones"
  },
-  "showSeedPhrase": {
-    "message": "Mostrar frase secreta de recuperación"
-  },
  "showTestnetNetworks": {
    "message": "Mostrar redes de prueba"
  },
--- a/app/_locales/et/messages.json
+++ b/app/_locales/et/messages.json
@ -809,9 +809,6 @@
  "securityAndPrivacy": {
    "message": "Turvalisus ja privaatsus"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Eraldage iga sõna ühe tühikuga"
-  },
  "seedPhraseReq": {
    "message": "Seemnefraasid on 12 sõna pikad"
  },
--- a/app/_locales/fa/messages.json
+++ b/app/_locales/fa/messages.json
@ -819,9 +819,6 @@
  "securityAndPrivacy": {
    "message": "امنیت و حریم خصوصی"
  },
-  "seedPhrasePlaceholder": {
-    "message": "هر کلمه را با یک فاصله واحد جدا سازید"
-  },
  "seedPhraseReq": {
    "message": "عبارات بازیاب 12 کلمه اند"
  },
--- a/app/_locales/fi/messages.json
+++ b/app/_locales/fi/messages.json
@ -816,9 +816,6 @@
  "securityAndPrivacy": {
    "message": "Turva & yksityisyys"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Erota kukin sana yhdellä välilyönnillä"
-  },
  "seedPhraseReq": {
    "message": "Juurilauseet ovat 12 sanan pituisia"
  },
--- a/app/_locales/fil/messages.json
+++ b/app/_locales/fil/messages.json
@ -737,9 +737,6 @@
  "securityAndPrivacy": {
    "message": "Seguridad at Privacy"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Paghiwa-hiwalayin ang bawat salita gamit ang isang space"
-  },
  "seedPhraseReq": {
    "message": "Ang mga seed phrase ay may habang 12 salita"
  },
--- a/app/_locales/fr/messages.json
+++ b/app/_locales/fr/messages.json
@ -2359,12 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Avant de commencer, regardez cette courte vidéo pour vous informer sur votre phrase secrète de récupération et sur la manière de sécuriser votre portefeuille."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Séparez chaque mot par un espace simple"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "Collez la Phrase secrète de récupération depuis le presse-papiers"
-  },
  "seedPhraseReq": {
    "message": "Les phrases secrètes de récupération sont composées de 12, 15, 18, 21 ou 24 mots"
  },
@ -2475,9 +2469,6 @@
  "showRecommendations": {
    "message": "Afficher les recommandations"
  },
-  "showSeedPhrase": {
-    "message": "Afficher la phrase secrète de récupération"
-  },
  "showTestnetNetworks": {
    "message": "Afficher les réseaux de test"
  },
--- a/app/_locales/he/messages.json
+++ b/app/_locales/he/messages.json
@ -813,9 +813,6 @@
  "securityAndPrivacy": {
    "message": "אבטחה ופרטיות"
  },
-  "seedPhrasePlaceholder": {
-    "message": "הפרד/י בין המילים ברווח אחד"
-  },
  "seedPhraseReq": {
    "message": "צירופי גרעין מורכבים מ-12 מילים"
  },
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@ -2359,12 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "शुरुआत करने से पहले, अपने गुप्त रिकवरी फ्रेज और अपने वॉलेट को सुरक्षित रखने के तरीके के बारे में जानने के लिए यह छोटा-सा वीडियो देखें।"
  },
-  "seedPhrasePlaceholder": {
-    "message": "प्रत्येक शब्द को एक रिक्ति से अलग करें"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "क्लिपबोर्ड से गुप्त रिकवरी फ्रेज़ को चिपकाएँ"
-  },
  "seedPhraseReq": {
    "message": "गुप्त रिकवरी फ्रेज में 12, 15, 18, 21 या 24 शब्द होते हैं"
  },
@ -2475,9 +2469,6 @@
  "showRecommendations": {
    "message": "अनुशंसा दिखाएं"
  },
-  "showSeedPhrase": {
-    "message": "गुप्त रिकवरी फ्रेज दिखाएं"
-  },
  "showTestnetNetworks": {
    "message": "परीक्षण नेटवर्क दिखाएं"
  },
--- a/app/_locales/hr/messages.json
+++ b/app/_locales/hr/messages.json
@ -812,9 +812,6 @@
  "securityAndPrivacy": {
    "message": "Sigurnost i privatnost"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Odvojite pojedinačne riječi jednim razmakom"
-  },
  "seedPhraseReq": {
    "message": "Početne rečenice imaju 12 riječi"
  },
--- a/app/_locales/hu/messages.json
+++ b/app/_locales/hu/messages.json
@ -812,9 +812,6 @@
  "securityAndPrivacy": {
    "message": "Biztonság és adatvédelem"
  },
-  "seedPhrasePlaceholder": {
-    "message": "A szavakat egy-egy szóközzel válassza el"
-  },
  "seedPhraseReq": {
    "message": "A seed mondat 12 szóból áll"
  },
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@ -2359,12 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Sebelum memulai, lihat video singkat ini untuk mempelajari tentang Frasa Pemulihan Rahasia Anda dan cara menjaga keamanan dompet Anda."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Pisahkan setiap kata dengan satu spasi"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "Tempel Frasa Pemulihan Rahasia dari clipboard"
-  },
  "seedPhraseReq": {
    "message": "Frasa Pemulihan Rahasia berisi 12, 15, 18, 21, atau 24 kata"
  },
@ -2475,9 +2469,6 @@
  "showRecommendations": {
    "message": "Tampilkan Rekomendasi"
  },
-  "showSeedPhrase": {
-    "message": "Tampilkan Frasa Pemulihan Rahasia"
-  },
  "showTestnetNetworks": {
    "message": "Tampilkan jaringan pengujian"
  },
--- a/app/_locales/it/messages.json
+++ b/app/_locales/it/messages.json
@ -1219,12 +1219,6 @@
  "securityAndPrivacy": {
    "message": "Sicurezza & Privacy"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Separa ogni parola con un singolo spazio"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "Incolla frase seed dagli appunti"
-  },
  "seedPhraseReq": {
    "message": "le frasi seed sono lunghe 12 parole"
  },
@ -1301,9 +1295,6 @@
  "showPrivateKeys": {
    "message": "Mostra Chiave Privata"
  },
-  "showSeedPhrase": {
-    "message": "Mostra frase seed"
-  },
  "sigRequest": {
    "message": "Firma Richiesta"
  },
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@ -2359,12 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "始める前に、この短いビデオを見て、シークレットリカバリーフレーズとウォレットを安全に保つ方法について確認してください。"
  },
-  "seedPhrasePlaceholder": {
-    "message": "単語ごとにスペースを1つ置いて分離します"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "クリップボードからシークレット リカバリー フレーズを貼り付けます"
-  },
  "seedPhraseReq": {
    "message": "シークレットリカバリーフレーズは、12、15、18、21、24語で構成されます"
  },
@ -2475,9 +2469,6 @@
  "showRecommendations": {
    "message": "推奨を表示"
  },
-  "showSeedPhrase": {
-    "message": "シークレットリカバリーフレーズを表示"
-  },
  "showTestnetNetworks": {
    "message": "テストネットワークを表示"
  },
--- a/app/_locales/kn/messages.json
+++ b/app/_locales/kn/messages.json
@ -819,9 +819,6 @@
  "securityAndPrivacy": {
    "message": "ಭದ್ರತೆ ಮತ್ತು ಗೌಪ್ಯತೆ"
  },
-  "seedPhrasePlaceholder": {
-    "message": "ಒಂದು ಸ್ಪೇಸ್ ಮೂಲಕ ಪ್ರತಿ ಪದವನ್ನು ಬೇರ್ಪಡಿಸಿ"
-  },
  "seedPhraseReq": {
    "message": "ಸೀಡ್ ಫ್ರೇಸ್‌ಗಳು 12 ಪದಗಳಷ್ಟು ದೀರ್ಘವಾಗಿವೆ"
  },
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@ -2359,12 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "시작하기 전에 이 짧은 동영상을 보고 비밀 복구 구문과 지갑을 안전하게 보호하는 방법에 대해 알아보세요."
  },
-  "seedPhrasePlaceholder": {
-    "message": "공백 한 칸으로 각 단어를 구분하세요."
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "클립보드에서 비밀 복구 구문 붙여넣기"
-  },
  "seedPhraseReq": {
    "message": "비밀 복구 구문은 12, 15, 18, 21 또는 24개의 단어로 구성됩니다"
  },
@ -2475,9 +2469,6 @@
  "showRecommendations": {
    "message": "추천 보기"
  },
-  "showSeedPhrase": {
-    "message": "비밀 복구 구문 표시"
-  },
  "showTestnetNetworks": {
    "message": "테스트 네트워크 보기"
  },
--- a/app/_locales/lt/messages.json
+++ b/app/_locales/lt/messages.json
@ -819,9 +819,6 @@
  "securityAndPrivacy": {
    "message": "Sauga ir privatumas"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Kiekvieną žodį atskirkite viengubu tarpu"
-  },
  "seedPhraseReq": {
    "message": "Atkūrimo frazės yra 12 žodžių ilgio"
  },
--- a/app/_locales/lv/messages.json
+++ b/app/_locales/lv/messages.json
@ -815,9 +815,6 @@
  "securityAndPrivacy": {
    "message": "Drošība un konfidencialitāte"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Atdaliet katru vārdu ar vienu atstarpi"
-  },
  "seedPhraseReq": {
    "message": "Atkopšanas frāzes ir 12 vārdus garas"
  },
--- a/app/_locales/ms/messages.json
+++ b/app/_locales/ms/messages.json
@ -799,9 +799,6 @@
  "securityAndPrivacy": {
    "message": "Keselamatan & Privasi"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Pisahkan setiap perkataan dengan satu ruang"
-  },
  "seedPhraseReq": {
    "message": "Frasa benih panjangnya 12 patah perkataan"
  },
--- a/app/_locales/no/messages.json
+++ b/app/_locales/no/messages.json
@ -803,9 +803,6 @@
  "securityAndPrivacy": {
    "message": "Sikkerhet og personvern"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Skill hvert ord med ett enkelt mellomrom"
-  },
  "seedPhraseReq": {
    "message": "Mnemoniske gjenopprettingsfraser består av 12 ord "
  },
--- a/app/_locales/ph/messages.json
+++ b/app/_locales/ph/messages.json
@ -1555,12 +1555,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Bago magsimula, panoorin ang maikling video na ito para matuto tungkol sa recovery phrase at kung paano panatilihing ligtas ang iyong wallet."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Paghiwa-hiwalayin ang bawat salita gamit ang isang space"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "I-paste ang Secret Recovery Phrase mula sa clipboard"
-  },
  "seedPhraseReq": {
    "message": "Ang mga Secret Recovery Phrase ay naglalaman ng 12, 15, 18, 21, o 24 na salita"
  },
@ -1640,9 +1634,6 @@
  "showPrivateKeys": {
    "message": "Ipakita ang Mga Private Key"
  },
-  "showSeedPhrase": {
-    "message": "Ipakita ang Secret Recovery Phrase"
-  },
  "sigRequest": {
    "message": "Request ng Signature"
  },
--- a/app/_locales/pl/messages.json
+++ b/app/_locales/pl/messages.json
@ -813,9 +813,6 @@
  "securityAndPrivacy": {
    "message": "Bezpieczeństwo i prywatność"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Oddziel słowa pojedynczą spacją"
-  },
  "seedPhraseReq": {
    "message": "Frazy seed mają 12 słów"
  },
--- a/app/_locales/pt_BR/messages.json
+++ b/app/_locales/pt_BR/messages.json
@ -2392,12 +2392,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Antes de iniciar, assista a esse vídeo curto para aprender sobre sua Frase de Recuperação Secreta e sobre como manter sua carteira segura."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Separe cada palavra com um único espaço"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "Cole a Frase de recuperação secreta da área de transferência"
-  },
  "seedPhraseReq": {
    "message": "As Frases de Recuperação Secretas contêm 12, 15, 18, 21 ou 24 palavras"
  },
@ -2511,9 +2505,6 @@
  "showRecommendations": {
    "message": "Mostrar recomendações"
  },
-  "showSeedPhrase": {
-    "message": "Mostrar Frase de Recuperação Secreta"
-  },
  "showTestnetNetworks": {
    "message": "Mostrar redes de teste"
  },
--- a/app/_locales/ro/messages.json
+++ b/app/_locales/ro/messages.json
@ -806,9 +806,6 @@
  "securityAndPrivacy": {
    "message": "Securitate și confidențialitate"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Despărțiți fiecare cuvânt cu un spațiu"
-  },
  "seedPhraseReq": {
    "message": "Expresiile seed sunt lungi de 12 cuvinte"
  },
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@ -2359,12 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Прежде чем приступить к делу, посмотрите это короткое видео о секретной фразе для восстановления и споособах обезопасить кошелек."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Отделяйте каждое слово одним пробелом"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "Вставить секретную фразу восстановления из буфера обмена"
-  },
  "seedPhraseReq": {
    "message": "Секретные фразы для восстановления содержат 12, 15, 18, 21 или 24 слова"
  },
@ -2475,9 +2469,6 @@
  "showRecommendations": {
    "message": "Показать рекомендации"
  },
-  "showSeedPhrase": {
-    "message": "Показать секретную фразу для восстановления"
-  },
  "showTestnetNetworks": {
    "message": "Показать тестовые сети"
  },
--- a/app/_locales/sk/messages.json
+++ b/app/_locales/sk/messages.json
@ -782,9 +782,6 @@
  "securityAndPrivacy": {
    "message": "Bezpečnosť a súkromie"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Každé slovo oddeľte jednou medzerou"
-  },
  "seedPhraseReq": {
    "message": "klíčové fráze mají 12 slov"
  },
--- a/app/_locales/sl/messages.json
+++ b/app/_locales/sl/messages.json
@ -807,9 +807,6 @@
  "securityAndPrivacy": {
    "message": "Varnost in zasebnost"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Vsako besedo ločite z enim presledkom"
-  },
  "seedPhraseReq": {
    "message": "Seed phrase mora biti dolg 12 besed"
  },
--- a/app/_locales/sr/messages.json
+++ b/app/_locales/sr/messages.json
@ -810,9 +810,6 @@
  "securityAndPrivacy": {
    "message": "Bezbednost i privatnost"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Odvojite svaku reč jednim razmakom"
-  },
  "seedPhraseReq": {
    "message": "Šifre za oporavak naloga (seed phrases) imaju 12 reči"
  },
--- a/app/_locales/sv/messages.json
+++ b/app/_locales/sv/messages.json
@ -803,9 +803,6 @@
  "securityAndPrivacy": {
    "message": "Säkerhet och integritet"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Separera varje ord med ett enda mellanslag."
-  },
  "seedPhraseReq": {
    "message": "Nyckelfraser är 12 ord långa."
  },
--- a/app/_locales/sw/messages.json
+++ b/app/_locales/sw/messages.json
@ -797,9 +797,6 @@
  "securityAndPrivacy": {
    "message": "Ulinzi na Faragha"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Tenganisha kila neno kwa nafasi moja"
-  },
  "seedPhraseReq": {
    "message": "Virai vianzio vina urefu wa maneno 12"
  },
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@ -2359,12 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Bago magsimula, panoorin ang maikling video na ito upang malaman ang tungkol sa iyong Secret Recovery Phrase at paano mapapanatiling ligtas ang wallet mo."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Paghiwa-hiwalayin ang bawat salita gamit ang espasyo"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "I-paste ang Secret Recovery Phrase mula sa clipboard"
-  },
  "seedPhraseReq": {
    "message": "Ang mga Secret Recovery Phrase ay naglalaman ng 12, 15, 18, 21, o 24 na salita"
  },
@ -2475,9 +2469,6 @@
  "showRecommendations": {
    "message": "Ipakita ang mga Rekomendasyon"
  },
-  "showSeedPhrase": {
-    "message": "Ipakita ang Secret Recovery Phrase"
-  },
  "showTestnetNetworks": {
    "message": "Ipakita ang mga test network"
  },
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@ -2359,12 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Başlamadan önce Gizli Kurtarma İfadeniz ve cüzdanınızı nasıl güvende tutacağınız hakkında bilgi edinmek için bu kısa videoyu izleyin."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Her kelimeyi tek bir boşluk ile ayırın"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "Hafıza panosundan Gizli Kurtarma İfadesini yapıştır"
-  },
  "seedPhraseReq": {
    "message": "Gizli Kurtarma İfadeleri 12, 15, 18, 21 veya 24 kelimeden oluşur"
  },
@ -2475,9 +2469,6 @@
  "showRecommendations": {
    "message": "Önerileri Göster"
  },
-  "showSeedPhrase": {
-    "message": "Gizli Kurtarma İfadesini Göster"
-  },
  "showTestnetNetworks": {
    "message": "Test ağlarını göster"
  },
--- a/app/_locales/uk/messages.json
+++ b/app/_locales/uk/messages.json
@ -819,9 +819,6 @@
  "securityAndPrivacy": {
    "message": "Безпека й конфіденційність"
  },
-  "seedPhrasePlaceholder": {
-    "message": "Відділіть кожне слово одним пробілом"
-  },
  "seedPhraseReq": {
    "message": "Початкові фрази мають 12 слів"
  },
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@ -2359,12 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "Trước khi bắt đầu, hãy xem video ngắn này để tìm hiểu thêm về cụm mật khẩu khôi phục bí mật của bạn và cách bảo vệ ví của bạn."
  },
-  "seedPhrasePlaceholder": {
-    "message": "Phân tách mỗi từ bằng một dấu cách"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "Dán Cụm mật khẩu khôi phục bí mật từ khay nhớ tạm"
-  },
  "seedPhraseReq": {
    "message": "Cụm mật khẩu khôi phục bí mật gồm 12, 15, 18, 21 hoặc 24 từ"
  },
@ -2475,9 +2469,6 @@
  "showRecommendations": {
    "message": "Hiển Thị Đề Xuất"
  },
-  "showSeedPhrase": {
-    "message": "Hiển thị Cụm mật khẩu khôi phục bí mật"
-  },
  "showTestnetNetworks": {
    "message": "Hiển thị các mạng thử nghiệm"
  },
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@ -2359,12 +2359,6 @@
  "seedPhraseIntroTitleCopy": {
    "message": "在开始之前，观看这个简短的视频来了解您的账户助记词以及如何保护您的钱包安全。"
  },
-  "seedPhrasePlaceholder": {
-    "message": "用空格分隔每个单词"
-  },
-  "seedPhrasePlaceholderPaste": {
-    "message": "从剪贴板粘贴账户助记词"
-  },
  "seedPhraseReq": {
    "message": "账户助记词由 12、15、18、21 或 24 个单词组成"
  },
@ -2475,9 +2469,6 @@
  "showRecommendations": {
    "message": "显示建议"
  },
-  "showSeedPhrase": {
-    "message": "显示账户助记词"
-  },
  "showTestnetNetworks": {
    "message": "显示测试网络"
  },
--- a/app/_locales/zh_TW/messages.json
+++ b/app/_locales/zh_TW/messages.json
@ -801,9 +801,6 @@
  "securityAndPrivacy": {
    "message": "安全＆隱私"
  },
-  "seedPhrasePlaceholder": {
-    "message": "單詞之間請用空白分隔"
-  },
  "seedPhraseReq": {
    "message": "助憶詞為 12 個詞語"
  },
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "metamask-crx",
-  "version": "10.11.2",
+  "version": "10.11.3",
  "private": true,
  "repository": {
    "type": "git",
@ -83,8 +83,8 @@
    "3box/ipfs/ipld-zcash/zcash-bitcore-lib/elliptic": "^6.5.4",
    "3box/ipfs/libp2p-mdns/multicast-dns/dns-packet": "^5.2.2",
    "3box/ipfs/prometheus-gc-stats/gc-stats/node-pre-gyp/tar": "^6.1.2",
-    "3box/**/libp2p-crypto/node-forge": "^1.0.0",
-    "3box/**/libp2p-keychain/node-forge": "^1.0.0",
+    "3box/**/libp2p-crypto/node-forge": "^1.3.0",
+    "3box/**/libp2p-keychain/node-forge": "^1.3.0",
    "3box/ipfs/libp2p-webrtc-star/socket.io/engine.io": "^4.0.0",
    "analytics-node/axios": "^0.21.2",
    "ganache-core/lodash": "^4.17.21",
@ -261,6 +261,7 @@
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^10.4.8",
    "@testing-library/react-hooks": "^3.2.1",
+    "@testing-library/user-event": "^14.0.0-beta.12",
    "@types/react": "^16.9.53",
    "addons-linter": "1.14.0",
    "babelify": "^10.0.0",
@ -269,7 +270,7 @@
    "browser-util-inspect": "^0.2.0",
    "browserify": "^16.5.1",
    "chalk": "^3.0.0",
-    "chromedriver": "^98.0.0",
+    "chromedriver": "^99.0.0",
    "concurrently": "^5.2.0",
    "copy-webpack-plugin": "^6.0.3",
    "cross-spawn": "^7.0.3",
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@ -200,11 +200,10 @@ describe('MetaMask', function () {
      await restoreSeedLink.click();
      await driver.delay(regularDelayMs);

-      await driver.fill(
-        'input[placeholder="Enter your Secret Recovery Phrase"]',
+      await driver.pasteIntoField(
+        '[data-testid="import-srp__srp-word-0"]',
        testSeedPhrase,
      );
-      await driver.delay(regularDelayMs);

      await driver.fill('#password', 'correct horse battery staple');
      await driver.fill('#confirm-password', 'correct horse battery staple');
--- a/test/e2e/tests/from-import-ui.spec.js
+++ b/test/e2e/tests/from-import-ui.spec.js
@ -76,8 +76,8 @@ describe('Metamask Import UI', function () {
          await driver.clickElement('.btn-secondary');

          // Import Secret Recovery Phrase
-          await driver.fill(
-            'input[placeholder="Enter your Secret Recovery Phrase"]',
+          await driver.pasteIntoField(
+            '[data-testid="import-srp__srp-word-0"]',
            testSeedPhrase,
          );

--- a/test/e2e/tests/metamask-responsive-ui.spec.js
+++ b/test/e2e/tests/metamask-responsive-ui.spec.js
@ -172,8 +172,8 @@ describe('Metamask Responsive UI', function () {
        );
        await restoreSeedLink.click();

-        await driver.fill(
-          'input[placeholder="Enter your Secret Recovery Phrase"]',
+        await driver.pasteIntoField(
+          '[data-testid="import-srp__srp-word-0"]',
          testSeedPhrase,
        );

--- a/test/e2e/webdriver/driver.js
+++ b/test/e2e/webdriver/driver.js
@ -1,6 +1,6 @@
 const { promises: fs } = require('fs');
 const { strict: assert } = require('assert');
-const { until, error: webdriverError, By } = require('selenium-webdriver');
+const { until, error: webdriverError, By, Key } = require('selenium-webdriver');
 const cssToXPath = require('css-to-xpath');

 /**
@ -248,6 +248,26 @@ class Driver {
    assert.ok(!dataTab, 'Found element that should not be present');
  }

+  /**
+   * Paste a string into a field.
+   *
+   * @param {string} element - The element locator.
+   * @param {string} contentToPaste - The content to paste.
+   */
+  async pasteIntoField(element, contentToPaste) {
+    // Throw if double-quote is present in content to paste
+    // so that we don't have to worry about escaping double-quotes
+    if (contentToPaste.includes('"')) {
+      throw new Error('Cannot paste content with double-quote');
+    }
+    // Click to focus the field
+    await this.clickElement(element);
+    await this.executeScript(
+      `navigator.clipboard.writeText("${contentToPaste}")`,
+    );
+    await this.fill(element, Key.chord(Key.CONTROL, 'v'));
+  }
+
  // Navigation

  async navigate(page = Driver.PAGES.HOME) {
--- a/test/helpers/setup-helper.js
+++ b/test/helpers/setup-helper.js
@ -79,3 +79,11 @@ if (!window.crypto.getRandomValues) {
  // eslint-disable-next-line node/global-require
  window.crypto.getRandomValues = require('polyfill-crypto.getrandomvalues');
 }
+
+// Used to test `clearClipboard` function
+if (!window.navigator.clipboard) {
+  window.navigator.clipboard = {};
+}
+if (!window.navigator.clipboard.writeText) {
+  window.navigator.clipboard.writeText = () => undefined;
+}
--- a/test/lib/render-helpers.js
+++ b/test/lib/render-helpers.js
@ -95,3 +95,17 @@ export function renderWithProvider(component, store) {

  return render(component, { wrapper: Wrapper });
 }
+
+export function renderWithLocalization(component) {
+  const Wrapper = ({ children }) => (
+    <I18nProvider currentLocale="en" current={en} en={en}>
+      <LegacyI18nProvider>{children}</LegacyI18nProvider>
+    </I18nProvider>
+  );
+
+  Wrapper.propTypes = {
+    children: PropTypes.node,
+  };
+
+  return render(component, { wrapper: Wrapper });
+}
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@ -54,6 +54,7 @@
@import 'selected-account/index';
@import 'signature-request/index';
@import 'signature-request-original/index';
+@import 'srp-input/srp-input';
@import 'tab-bar/index';
@import 'token-cell/token-cell';
@import 'token-list-display/token-list-display';
--- a/ui/components/app/create-new-vault/create-new-vault.js
+++ b/ui/components/app/create-new-vault/create-new-vault.js
@ -1,17 +1,12 @@
-import { ethers } from 'ethers';
 import React, { useCallback, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import TextField from '../../ui/text-field';
 import Button from '../../ui/button';
-import { clearClipboard } from '../../../helpers/utils/util';
 import CheckBox from '../../ui/check-box';
 import Typography from '../../ui/typography';
-import { COLORS } from '../../../helpers/constants/design-system';
-import { parseSecretRecoveryPhrase } from './parse-secret-recovery-phrase';
-
-const { isValidMnemonic } = ethers.utils;
+import SrpInput from '../srp-input';

 export default function CreateNewVault({
  disabled = false,
@ -24,33 +19,11 @@ export default function CreateNewVault({
  const [password, setPassword] = useState('');
  const [passwordError, setPasswordError] = useState('');
  const [seedPhrase, setSeedPhrase] = useState('');
-  const [seedPhraseError, setSeedPhraseError] = useState('');
-  const [showSeedPhrase, setShowSeedPhrase] = useState(false);
  const [termsChecked, setTermsChecked] = useState(false);

  const t = useI18nContext();
  const metricsEvent = useContext(MetaMetricsContext);

-  const onSeedPhraseChange = useCallback(
-    (rawSeedPhrase) => {
-      let newSeedPhraseError = '';
-
-      if (rawSeedPhrase) {
-        const parsedSeedPhrase = parseSecretRecoveryPhrase(rawSeedPhrase);
-        const wordCount = parsedSeedPhrase.split(/\s/u).length;
-        if (wordCount % 3 !== 0 || wordCount > 24 || wordCount < 12) {
-          newSeedPhraseError = t('seedPhraseReq');
-        } else if (!isValidMnemonic(parsedSeedPhrase)) {
-          newSeedPhraseError = t('invalidSeedPhrase');
-        }
-      }
-
-      setSeedPhrase(rawSeedPhrase);
-      setSeedPhraseError(newSeedPhraseError);
-    },
-    [setSeedPhrase, setSeedPhraseError, t],
-  );
-
  const onPasswordChange = useCallback(
    (newPassword) => {
      let newConfirmPasswordError = '';
@ -93,8 +66,7 @@ export default function CreateNewVault({
    seedPhrase &&
    (!includeTerms || termsChecked) &&
    !passwordError &&
-    !confirmPasswordError &&
-    !seedPhraseError;
+    !confirmPasswordError;

  const onImport = useCallback(
    async (event) => {
@ -104,7 +76,7 @@ export default function CreateNewVault({
        return;
      }

-      await onSubmit(password, parseSecretRecoveryPhrase(seedPhrase));
+      await onSubmit(password, seedPhrase);
    },
    [isValid, onSubmit, password, seedPhrase],
  );
@ -121,10 +93,6 @@ export default function CreateNewVault({
    setTermsChecked((currentTermsChecked) => !currentTermsChecked);
  }, [metricsEvent]);

-  const toggleShowSeedPhrase = useCallback(() => {
-    setShowSeedPhrase((currentShowSeedPhrase) => !currentShowSeedPhrase);
-  }, []);
-
  const termsOfUse = t('acceptTermsOfUse', [
    <a
      className="create-new-vault__terms-link"
@ -139,80 +107,31 @@ export default function CreateNewVault({

  return (
    <form className="create-new-vault__form" onSubmit={onImport}>
-      <div className="create-new-vault__srp-section">
-        <label
-          htmlFor="create-new-vault__srp"
-          className="create-new-vault__srp-label"
-        >
-          <Typography>{t('secretRecoveryPhrase')}</Typography>
-        </label>
-        {showSeedPhrase ? (
-          <textarea
-            id="create-new-vault__srp"
-            className="create-new-vault__srp-shown"
-            onChange={(e) => onSeedPhraseChange(e.target.value)}
-            onPaste={clearClipboard}
-            value={seedPhrase}
-            placeholder={t('seedPhrasePlaceholder')}
-            autoComplete="off"
-          />
-        ) : (
-          <TextField
-            id="create-new-vault__srp"
-            type="password"
-            onChange={(e) => onSeedPhraseChange(e.target.value)}
-            value={seedPhrase}
-            placeholder={t('seedPhrasePlaceholderPaste')}
-            autoComplete="off"
-            onPaste={clearClipboard}
-          />
-        )}
-        {seedPhraseError ? (
-          <Typography
-            color={COLORS.ERROR1}
-            tag="span"
-            className="create-new-vault__srp-error"
-          >
-            {seedPhraseError}
-          </Typography>
-        ) : null}
-        <div className="create-new-vault__show-srp">
-          <CheckBox
-            id="create-new-vault__show-srp-checkbox"
-            checked={showSeedPhrase}
-            onClick={toggleShowSeedPhrase}
-            title={t('showSeedPhrase')}
-          />
-          <label
-            className="create-new-vault__show-srp-label"
-            htmlFor="create-new-vault__show-srp-checkbox"
-          >
-            <Typography tag="span">{t('showSeedPhrase')}</Typography>
-          </label>
-        </div>
+      <SrpInput onChange={setSeedPhrase} />
+      <div className="create-new-vault__create-password">
+        <TextField
+          id="password"
+          label={t('newPassword')}
+          type="password"
+          value={password}
+          onChange={(event) => onPasswordChange(event.target.value)}
+          error={passwordError}
+          autoComplete="new-password"
+          margin="normal"
+          largeLabel
+        />
+        <TextField
+          id="confirm-password"
+          label={t('confirmPassword')}
+          type="password"
+          value={confirmPassword}
+          onChange={(event) => onConfirmPasswordChange(event.target.value)}
+          error={confirmPasswordError}
+          autoComplete="new-password"
+          margin="normal"
+          largeLabel
+        />
      </div>
-      <TextField
-        id="password"
-        label={t('newPassword')}
-        type="password"
-        value={password}
-        onChange={(event) => onPasswordChange(event.target.value)}
-        error={passwordError}
-        autoComplete="new-password"
-        margin="normal"
-        largeLabel
-      />
-      <TextField
-        id="confirm-password"
-        label={t('confirmPassword')}
-        type="password"
-        value={confirmPassword}
-        onChange={(event) => onConfirmPasswordChange(event.target.value)}
-        error={confirmPasswordError}
-        autoComplete="new-password"
-        margin="normal"
-        largeLabel
-      />
      {includeTerms ? (
        <div className="create-new-vault__terms">
          <CheckBox
--- a/ui/components/app/create-new-vault/create-new-vault.scss
+++ b/ui/components/app/create-new-vault/create-new-vault.scss
@ -2,35 +2,12 @@
  &__form {
    display: flex;
    flex-direction: column;
-    width: 360px;
  }

-  &__srp-shown {
-    @include Paragraph;
-
-    padding: 8px 16px;
-  }
-
-  &__srp-section {
+  &__create-password {
    display: flex;
    flex-direction: column;
-  }
-
-  &__srp-label {
-    margin-bottom: 8px;
-  }
-
-  &__srp-error {
-    margin-top: 4px;
-  }
-
-  &__show-srp {
-    margin-top: 16px;
-    margin-bottom: 16px;
-  }
-
-  &__show-srp-label {
-    margin-left: 8px;
+    width: 360px;
  }

  &__terms {
--- a/ui/components/app/srp-input/index.js
+++ b/ui/components/app/srp-input/index.js
@ -0,0 +1 @@
+export { default } from './srp-input';
--- a/ui/components/app/create-new-vault/parse-secret-recovery-phrase'.test.js
+++ b/ui/components/app/create-new-vault/parse-secret-recovery-phrase'.test.js
--- a/ui/components/app/create-new-vault/parse-secret-recovery-phrase.js
+++ b/ui/components/app/create-new-vault/parse-secret-recovery-phrase.js
--- a/ui/components/app/srp-input/srp-input.js
+++ b/ui/components/app/srp-input/srp-input.js
@ -0,0 +1,235 @@
+import { ethers } from 'ethers';
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import TextField from '../../ui/text-field';
+import { clearClipboard } from '../../../helpers/utils/util';
+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 { parseSecretRecoveryPhrase } from './parse-secret-recovery-phrase';
+
+const { isValidMnemonic } = ethers.utils;
+
+const defaultNumberOfWords = 12;
+
+export default function SrpInput({ onChange }) {
+  const [srpError, setSrpError] = useState('');
+  const [pasteFailed, setPasteFailed] = useState(false);
+  const [draftSrp, setDraftSrp] = useState(
+    new Array(defaultNumberOfWords).fill(''),
+  );
+  const [showSrp, setShowSrp] = useState(
+    new Array(defaultNumberOfWords).fill(false),
+  );
+  const [numberOfWords, setNumberOfWords] = useState(defaultNumberOfWords);
+
+  const t = useI18nContext();
+
+  const onSrpChange = useCallback(
+    (newDraftSrp) => {
+      let newSrpError = '';
+      const joinedDraftSrp = newDraftSrp.join(' ');
+
+      if (newDraftSrp.some((word) => word !== '')) {
+        if (newDraftSrp.some((word) => word === '')) {
+          newSrpError = t('seedPhraseReq');
+        } else if (!isValidMnemonic(joinedDraftSrp)) {
+          newSrpError = t('invalidSeedPhrase');
+        }
+      }
+
+      setDraftSrp(newDraftSrp);
+      setSrpError(newSrpError);
+      onChange(newSrpError ? '' : joinedDraftSrp);
+    },
+    [setDraftSrp, setSrpError, t, onChange],
+  );
+
+  const toggleShowSrp = useCallback((index) => {
+    setShowSrp((currentShowSrp) => {
+      const newShowSrp = currentShowSrp.slice();
+      if (newShowSrp[index]) {
+        newShowSrp[index] = false;
+      } else {
+        newShowSrp.fill(false);
+        newShowSrp[index] = true;
+      }
+      return newShowSrp;
+    });
+  }, []);
+
+  const onSrpWordChange = useCallback(
+    (index, newWord) => {
+      if (pasteFailed) {
+        setPasteFailed(false);
+      }
+      const newSrp = draftSrp.slice();
+      newSrp[index] = newWord.trim();
+      onSrpChange(newSrp);
+    },
+    [draftSrp, onSrpChange, pasteFailed],
+  );
+
+  const onSrpPaste = useCallback(
+    (rawSrp) => {
+      const parsedSrp = parseSecretRecoveryPhrase(rawSrp);
+      let newDraftSrp = parsedSrp.split(' ');
+
+      if (newDraftSrp.length > 24) {
+        setPasteFailed(true);
+        return;
+      } else if (pasteFailed) {
+        setPasteFailed(false);
+      }
+
+      let newNumberOfWords = numberOfWords;
+      if (newDraftSrp.length !== numberOfWords) {
+        if (newDraftSrp.length < 12) {
+          newNumberOfWords = 12;
+        } else if (newDraftSrp.length % 3 === 0) {
+          newNumberOfWords = newDraftSrp.length;
+        } else {
+          newNumberOfWords =
+            newDraftSrp.length + (3 - (newDraftSrp.length % 3));
+        }
+        setNumberOfWords(newNumberOfWords);
+      }
+
+      if (newDraftSrp.length < newNumberOfWords) {
+        newDraftSrp = newDraftSrp.concat(
+          new Array(newNumberOfWords - newDraftSrp.length).fill(''),
+        );
+      }
+      setShowSrp(new Array(newNumberOfWords).fill(false));
+      onSrpChange(newDraftSrp);
+      clearClipboard();
+    },
+    [numberOfWords, onSrpChange, pasteFailed, setPasteFailed],
+  );
+
+  const numberOfWordsOptions = [];
+  for (let i = 12; i <= 24; i += 3) {
+    numberOfWordsOptions.push({
+      name: t('srpInputNumberOfWords', [`${i}`]),
+      value: `${i}`,
+    });
+  }
+
+  return (
+    <div className="import-srp__container">
+      <label className="import-srp__srp-label">
+        <Typography variant={TYPOGRAPHY.H4}>
+          {t('secretRecoveryPhrase')}
+        </Typography>
+      </label>
+      <ActionableMessage
+        className="import-srp__paste-tip"
+        iconFillColor="#037dd6" // This is `--color-info-default`
+        message={t('srpPasteTip')}
+        useIcon
+      />
+      <Dropdown
+        className="import-srp__number-of-words-dropdown"
+        onChange={(newSelectedOption) => {
+          const newNumberOfWords = parseInt(newSelectedOption, 10);
+          if (Number.isNaN(newNumberOfWords)) {
+            throw new Error('Unable to parse option as integer');
+          }
+
+          let newDraftSrp = draftSrp.slice(0, newNumberOfWords);
+          if (newDraftSrp.length < newNumberOfWords) {
+            newDraftSrp = newDraftSrp.concat(
+              new Array(newNumberOfWords - newDraftSrp.length).fill(''),
+            );
+          }
+          setNumberOfWords(newNumberOfWords);
+          setShowSrp(new Array(newNumberOfWords).fill(false));
+          onSrpChange(newDraftSrp);
+        }}
+        options={numberOfWordsOptions}
+        selectedOption={`${numberOfWords}`}
+      />
+      <div className="import-srp__srp">
+        {[...Array(numberOfWords).keys()].map((index) => {
+          const id = `import-srp__srp-word-${index}`;
+          return (
+            <div key={index} className="import-srp__srp-word">
+              <label htmlFor={id} className="import-srp__srp-word-label">
+                <Typography>{`${index + 1}.`}</Typography>
+              </label>
+              <TextField
+                id={id}
+                data-testid={id}
+                type={showSrp[index] ? 'text' : 'password'}
+                onChange={(e) => {
+                  e.preventDefault();
+                  onSrpWordChange(index, e.target.value);
+                }}
+                value={draftSrp[index]}
+                autoComplete="off"
+                onPaste={(event) => {
+                  const newSrp = event.clipboardData.getData('text');
+
+                  if (newSrp.trim().match(/\s/u)) {
+                    event.preventDefault();
+                    onSrpPaste(newSrp);
+                  } else {
+                    onSrpWordChange(index, newSrp);
+                  }
+                }}
+              />
+              <ShowHideToggle
+                id={`${id}-checkbox`}
+                ariaLabelHidden={t('srpWordHidden')}
+                ariaLabelShown={t('srpWordShown')}
+                shown={showSrp[index]}
+                data-testid={`${id}-checkbox`}
+                onChange={() => toggleShowSrp(index)}
+                title={t('srpToggleShow')}
+              />
+            </div>
+          );
+        })}
+      </div>
+      {srpError ? (
+        <ActionableMessage
+          className="import-srp__srp-error"
+          iconFillColor="#d73a49" // This is `--color-error-default`
+          message={srpError}
+          type="danger"
+          useIcon
+        />
+      ) : null}
+      {pasteFailed ? (
+        <ActionableMessage
+          className="import-srp__srp-too-many-words-error"
+          iconFillColor="#d73a49" // This is `--color-error-default`
+          message={t('srpPasteFailedTooManyWords')}
+          primaryAction={{
+            label: t('dismiss'),
+            onClick: () => setPasteFailed(false),
+          }}
+          type="danger"
+          useIcon
+        />
+      ) : null}
+    </div>
+  );
+}
+
+SrpInput.propTypes = {
+  /**
+   * Event handler for SRP changes.
+   *
+   * This is only called with a valid, well-formated (i.e. exactly one space
+   * between each word) SRP or with an empty string.
+   *
+   * This is called each time the draft SRP is updated. If the draft SRP is
+   * valid, this is called with a well-formatted version of that draft SRP.
+   * Otherwise, this is called with an empty string.
+   */
+  onChange: PropTypes.func.isRequired,
+};
--- a/ui/components/app/srp-input/srp-input.scss
+++ b/ui/components/app/srp-input/srp-input.scss
@ -0,0 +1,71 @@
+.import-srp {
+  &__container {
+    display: grid;
+    grid-template-areas:
+      "title dropdown"
+      "paste-tip paste-tip"
+      "input input"
+      "error error"
+      "too-many-words-error too-many-words-error";
+  }
+
+  @media (max-width: 767px) {
+    &__container {
+      grid-template-areas:
+        "title"
+        "dropdown"
+        "paste-tip"
+        "input"
+        "error"
+        "too-many-words-error";
+    }
+  }
+
+  &__srp-label {
+    grid-area: title;
+  }
+
+  &__number-of-words-dropdown {
+    grid-area: dropdown;
+  }
+
+  &__paste-tip {
+    margin-bottom: 8px;
+    grid-area: paste-tip;
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &__srp {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-area: input;
+  }
+
+  @media (max-width: 767px) {
+    &__srp {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &__srp-word {
+    display: flex;
+    align-items: center;
+    margin: 8px;
+  }
+
+  &__srp-word-label {
+    width: 2em;
+  }
+
+  &__srp-error {
+    margin-top: 4px;
+    grid-area: error;
+  }
+
+  &__srp-too-many-words-error {
+    margin-top: 4px;
+    grid-area: too-many-words-error;
+  }
+}
--- a/ui/components/app/srp-input/srp-input.stories.js
+++ b/ui/components/app/srp-input/srp-input.stories.js
@ -0,0 +1,19 @@
+import React from 'react';
+import SrpInput from '.';
+
+export default {
+  title: 'Components/App/SrpInput',
+  id: __filename,
+  component: SrpInput,
+  argTypes: {
+    onChange: { action: 'changed' },
+  },
+};
+
+const Template = (args) => {
+  return <SrpInput {...args} />;
+};
+
+export const DefaultStory = Template.bind({});
+
+DefaultStory.storyName = 'Default';
--- a/ui/components/app/srp-input/srp-input.test.js
+++ b/ui/components/app/srp-input/srp-input.test.js
--- a/ui/components/ui/icon/icon-eye-slash.js
+++ b/ui/components/ui/icon/icon-eye-slash.js
@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const IconEyeSlash = ({
+  size = 24,
+  color = 'currentColor',
+  ariaLabel,
+  className,
+}) => (
+  // This SVG is copied from `@fortawesome/fontawesome-free@5.13.0/regular/eye-slash.svg`.
+  <svg
+    width={size}
+    height={size}
+    fill={color}
+    className={className}
+    aria-label={ariaLabel}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 640 512"
+  >
+    <path d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z" />
+  </svg>
+);
+
+IconEyeSlash.propTypes = {
+  /**
+   * The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
+   */
+  size: PropTypes.number,
+  /**
+   * The color of the icon accepts design token css variables
+   */
+  color: PropTypes.string,
+  /**
+   * An additional className to assign the Icon
+   */
+  className: PropTypes.string,
+  /**
+   * The aria-label of the icon for accessibility purposes
+   */
+  ariaLabel: PropTypes.string,
+};
+
+export default IconEyeSlash;
--- a/ui/components/ui/icon/icon-eye.js
+++ b/ui/components/ui/icon/icon-eye.js
@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const IconEye = ({
+  size = 24,
+  color = 'currentColor',
+  ariaLabel,
+  className,
+}) => (
+  // This SVG copied from `@fortawesome/fontawesome-free@5.13.0/regular/eye.svg`.
+  <svg
+    width={size}
+    height={size}
+    fill={color}
+    className={className}
+    aria-label={ariaLabel}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 576 512"
+  >
+    <path d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z" />
+  </svg>
+);
+
+IconEye.propTypes = {
+  /**
+   * The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
+   */
+  size: PropTypes.number,
+  /**
+   * The color of the icon accepts design token css variables
+   */
+  color: PropTypes.string,
+  /**
+   * An additional className to assign the Icon
+   */
+  className: PropTypes.string,
+  /**
+   * The aria-label of the icon for accessibility purposes
+   */
+  ariaLabel: PropTypes.string,
+};
+
+export default IconEye;
--- a/ui/components/ui/icon/icon.stories.js
+++ b/ui/components/ui/icon/icon.stories.js
@ -22,6 +22,8 @@ import SunCheck from './sun-check-icon.component';
 import Swap from './swap-icon-for-list.component';
 import SwapIcon from './overview-send-icon.component';
 import SwapIconComponent from './swap-icon.component';
+import IconEye from './icon-eye';
+import IconEyeSlash from './icon-eye-slash';

 export default {
  title: 'Components/UI/Icon',
@ -104,6 +106,8 @@ export const DefaultStory = (args) => (
        <IconItem Component={<PaperAirplane {...args} />} />
        <IconItem Component={<CopyIcon {...args} />} />
        <IconItem Component={<Preloader {...args} />} />
+        <IconItem Component={<IconEye {...args} />} />
+        <IconItem Component={<IconEyeSlash {...args} />} />
      </div>
    </Box>
  </div>
--- a/ui/components/ui/show-hide-toggle/index.js
+++ b/ui/components/ui/show-hide-toggle/index.js
@ -0,0 +1 @@
+export { default } from './show-hide-toggle';
--- a/ui/components/ui/show-hide-toggle/index.scss
+++ b/ui/components/ui/show-hide-toggle/index.scss
@ -0,0 +1,34 @@
+.show-hide-toggle {
+  position: relative;
+  display: inline-flex;
+
+  &__input {
+    appearance: none;
+
+    + .show-hide-toggle__label {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    /* Focused when tabbing with keyboard */
+    &:focus,
+    &:focus-visible {
+      outline: none;
+
+      + .show-hide-toggle__label {
+        outline: Highlight auto 1px;
+      }
+    }
+
+    &:disabled {
+      + label {
+        opacity: 0.5;
+        cursor: auto;
+      }
+    }
+  }
+
+  &__icon {
+    color: var(--color-icon-default);
+  }
+}
--- a/ui/components/ui/show-hide-toggle/show-hide-toggle.js
+++ b/ui/components/ui/show-hide-toggle/show-hide-toggle.js
@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import IconEye from '../icon/icon-eye';
+import IconEyeSlash from '../icon/icon-eye-slash';
+
+const ShowHideToggle = ({
+  id,
+  shown,
+  onChange,
+  ariaLabelHidden,
+  ariaLabelShown,
+  className,
+  'data-testid': dataTestId,
+  disabled,
+  title,
+}) => {
+  return (
+    <div className={classnames('show-hide-toggle', className)}>
+      <input
+        className="show-hide-toggle__input"
+        id={id}
+        type="checkbox"
+        checked={shown}
+        onChange={onChange}
+        data-testid={dataTestId}
+        disabled={disabled}
+      />
+      <label htmlFor={id} className="show-hide-toggle__label" title={title}>
+        {shown ? (
+          <IconEye
+            ariaLabel={ariaLabelShown}
+            className="show-hide-toggle__icon"
+          />
+        ) : (
+          <IconEyeSlash
+            ariaLabel={ariaLabelHidden}
+            className="show-hide-toggle__icon"
+          />
+        )}
+      </label>
+    </div>
+  );
+};
+
+ShowHideToggle.propTypes = {
+  /**
+   * The id of the ShowHideToggle for htmlFor
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * If the ShowHideToggle is in the "shown" state or not
+   */
+  shown: PropTypes.bool.isRequired,
+  /**
+   * The onChange handler of the ShowHideToggle
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * The aria-label of the icon representing the "hidden" state
+   */
+  ariaLabelHidden: PropTypes.string.isRequired,
+  /**
+   * The aria-label of the icon representing the "shown" state
+   */
+  ariaLabelShown: PropTypes.string.isRequired,
+  /**
+   * An additional className to give the ShowHideToggle
+   */
+  className: PropTypes.string,
+  /**
+   * The data test id of the input
+   */
+  'data-testid': PropTypes.string,
+  /**
+   * Whether the input is disabled or not
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The title for the toggle. This is shown in a tooltip on hover.
+   */
+  title: PropTypes.string,
+};
+
+export default ShowHideToggle;
--- a/ui/components/ui/show-hide-toggle/show-hide-toggle.stories.js
+++ b/ui/components/ui/show-hide-toggle/show-hide-toggle.stories.js
@ -0,0 +1,51 @@
+import React from 'react';
+import { useArgs } from '@storybook/client-api';
+import ShowHideToggle from '.';
+
+export default {
+  title: 'Components/UI/ShowHideToggle', // title should follow the folder structure location of the component. Don't use spaces.
+  id: __filename,
+  argTypes: {
+    id: {
+      control: 'text',
+    },
+    ariaLabelHidden: {
+      control: 'text',
+    },
+    ariaLabelShown: {
+      control: 'text',
+    },
+    className: {
+      control: 'text',
+    },
+    dataTestId: {
+      control: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    onChange: {
+      action: 'onChange',
+    },
+    shown: {
+      control: 'boolean',
+    },
+  },
+};
+
+export const DefaultStory = (args) => {
+  const [{ shown }, updateArgs] = useArgs();
+  const handleOnToggle = () => {
+    updateArgs({ shown: !shown });
+  };
+  return <ShowHideToggle {...args} shown={shown} onChange={handleOnToggle} />;
+};
+
+DefaultStory.args = {
+  id: 'showHideToggle',
+  ariaLabelHidden: 'hidden',
+  ariaLabelShown: 'shown',
+  shown: false,
+};
+
+DefaultStory.storyName = 'Default';
--- a/ui/components/ui/show-hide-toggle/show-hide-toggle.test.js
+++ b/ui/components/ui/show-hide-toggle/show-hide-toggle.test.js
@ -0,0 +1,314 @@
+import React from 'react';
+import { isInaccessible, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ShowHideToggle from '.';
+
+describe('ShowHideToggle', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should set title', async () => {
+    const onChange = jest.fn();
+    const { queryByTitle } = render(
+      <ShowHideToggle
+        id="example"
+        ariaLabelHidden="hidden"
+        ariaLabelShown="shown"
+        shown
+        onChange={onChange}
+        title="example-title"
+      />,
+    );
+
+    expect(queryByTitle('example-title')).toBeInTheDocument();
+  });
+
+  it('should set test ID', async () => {
+    const onChange = jest.fn();
+    const { queryByTestId } = render(
+      <ShowHideToggle
+        id="example"
+        ariaLabelHidden="hidden"
+        ariaLabelShown="shown"
+        shown
+        onChange={onChange}
+        data-testid="example-test-id"
+      />,
+    );
+
+    expect(queryByTestId('example-test-id')).toBeInTheDocument();
+  });
+
+  it('should show correct aria-label when shown', () => {
+    const onChange = jest.fn();
+    const { queryByLabelText } = render(
+      <ShowHideToggle
+        id="example"
+        ariaLabelHidden="hidden"
+        ariaLabelShown="shown"
+        shown
+        onChange={onChange}
+      />,
+    );
+
+    expect(queryByLabelText('hidden')).not.toBeInTheDocument();
+    expect(queryByLabelText('shown')).toBeInTheDocument();
+  });
+
+  it('should show correct aria-label when hidden', () => {
+    const onChange = jest.fn();
+    const { queryByLabelText } = render(
+      <ShowHideToggle
+        id="example"
+        ariaLabelHidden="hidden"
+        ariaLabelShown="shown"
+        shown={false}
+        onChange={onChange}
+      />,
+    );
+
+    expect(queryByLabelText('hidden')).toBeInTheDocument();
+    expect(queryByLabelText('shown')).not.toBeInTheDocument();
+  });
+
+  it('should show correct checkbox state when shown', () => {
+    const onChange = jest.fn();
+    const { queryByRole } = render(
+      <ShowHideToggle
+        id="example"
+        ariaLabelHidden="hidden"
+        ariaLabelShown="shown"
+        shown
+        onChange={onChange}
+      />,
+    );
+
+    expect(queryByRole('checkbox')).toBeChecked();
+  });
+
+  it('should show correct checkbox state when hidden', () => {
+    const onChange = jest.fn();
+    const { queryByRole } = render(
+      <ShowHideToggle
+        id="example"
+        ariaLabelHidden="hidden"
+        ariaLabelShown="shown"
+        shown={false}
+        onChange={onChange}
+      />,
+    );
+
+    expect(queryByRole('checkbox')).not.toBeChecked();
+  });
+
+  describe('enabled', () => {
+    it('should show checkbox as enabled', () => {
+      const onChange = jest.fn();
+      const { queryByRole } = render(
+        <ShowHideToggle
+          id="example"
+          ariaLabelHidden="hidden"
+          ariaLabelShown="shown"
+          shown
+          onChange={onChange}
+        />,
+      );
+
+      expect(queryByRole('checkbox')).toBeEnabled();
+    });
+
+    it('should be accessible', () => {
+      const onChange = jest.fn();
+      const { queryByRole } = render(
+        <ShowHideToggle
+          id="example"
+          ariaLabelHidden="hidden"
+          ariaLabelShown="shown"
+          shown
+          onChange={onChange}
+        />,
+      );
+
+      expect(isInaccessible(queryByRole('checkbox'))).toBeFalsy();
+    });
+
+    describe('shown', () => {
+      it('should call onChange when clicked', async () => {
+        const onChange = jest.fn();
+        const { queryByRole } = render(
+          <ShowHideToggle
+            id="example"
+            ariaLabelHidden="hidden"
+            ariaLabelShown="shown"
+            shown
+            onChange={onChange}
+          />,
+        );
+        await userEvent.click(queryByRole('checkbox'));
+
+        expect(onChange).toHaveBeenCalledTimes(1);
+      });
+
+      it('should call onChange on space', async () => {
+        const onChange = jest.fn();
+        const { queryByRole } = render(
+          <ShowHideToggle
+            id="example"
+            ariaLabelHidden="hidden"
+            ariaLabelShown="shown"
+            shown
+            onChange={onChange}
+          />,
+        );
+        queryByRole('checkbox').focus();
+        await userEvent.keyboard('[Space]');
+
+        expect(onChange).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('hidden', () => {
+      it('should call onChange when clicked', async () => {
+        const onChange = jest.fn();
+        const { queryByRole } = render(
+          <ShowHideToggle
+            id="example"
+            ariaLabelHidden="hidden"
+            ariaLabelShown="shown"
+            shown={false}
+            onChange={onChange}
+          />,
+        );
+        await userEvent.click(queryByRole('checkbox'));
+
+        expect(onChange).toHaveBeenCalledTimes(1);
+      });
+
+      it('should call onChange on space', async () => {
+        const onChange = jest.fn();
+        const { queryByRole } = render(
+          <ShowHideToggle
+            id="example"
+            ariaLabelHidden="hidden"
+            ariaLabelShown="shown"
+            shown={false}
+            onChange={onChange}
+          />,
+        );
+        queryByRole('checkbox').focus();
+        await userEvent.keyboard('[Space]');
+
+        expect(onChange).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  describe('disabled', () => {
+    it('should show checkbox as disabled', () => {
+      const onChange = jest.fn();
+      const { queryByRole } = render(
+        <ShowHideToggle
+          id="example"
+          ariaLabelHidden="hidden"
+          ariaLabelShown="shown"
+          shown
+          disabled
+          onChange={onChange}
+        />,
+      );
+
+      expect(queryByRole('checkbox')).toBeDisabled();
+    });
+
+    it('should be accessible', () => {
+      const onChange = jest.fn();
+      const { queryByRole } = render(
+        <ShowHideToggle
+          id="example"
+          ariaLabelHidden="hidden"
+          ariaLabelShown="shown"
+          shown
+          disabled
+          onChange={onChange}
+        />,
+      );
+
+      expect(isInaccessible(queryByRole('checkbox'))).toBeFalsy();
+    });
+
+    describe('shown', () => {
+      it('should not call onChange when clicked', async () => {
+        const onChange = jest.fn();
+        const { queryByRole } = render(
+          <ShowHideToggle
+            id="example"
+            ariaLabelHidden="hidden"
+            ariaLabelShown="shown"
+            shown
+            disabled
+            onChange={onChange}
+          />,
+        );
+        await userEvent.click(queryByRole('checkbox'));
+
+        expect(onChange).not.toHaveBeenCalled();
+      });
+
+      it('should not call onChange on space', async () => {
+        const onChange = jest.fn();
+        const { queryByRole } = render(
+          <ShowHideToggle
+            id="example"
+            ariaLabelHidden="hidden"
+            ariaLabelShown="shown"
+            shown
+            disabled
+            onChange={onChange}
+          />,
+        );
+        queryByRole('checkbox').focus();
+        await userEvent.keyboard('[Space]');
+
+        expect(onChange).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('hidden', () => {
+      it('should not call onChange when clicked', async () => {
+        const onChange = jest.fn();
+        const { queryByRole } = render(
+          <ShowHideToggle
+            id="example"
+            ariaLabelHidden="hidden"
+            ariaLabelShown="shown"
+            shown={false}
+            disabled
+            onChange={onChange}
+          />,
+        );
+        await userEvent.click(queryByRole('checkbox'));
+
+        expect(onChange).not.toHaveBeenCalled();
+      });
+
+      it('should not call onChange on space', async () => {
+        const onChange = jest.fn();
+        const { queryByRole } = render(
+          <ShowHideToggle
+            id="example"
+            ariaLabelHidden="hidden"
+            ariaLabelShown="shown"
+            shown={false}
+            disabled
+            onChange={onChange}
+          />,
+        );
+        queryByRole('checkbox').focus();
+        await userEvent.keyboard('[Space]');
+
+        expect(onChange).not.toHaveBeenCalled();
+      });
+    });
+  });
+});
--- a/ui/components/ui/text-field/text-field.component.js
+++ b/ui/components/ui/text-field/text-field.component.js
@ -194,6 +194,7 @@ const themeToInputProps = {
 };

 const TextField = ({
+  'data-testid': dataTestId,
  error,
  classes,
  theme,
@ -216,7 +217,7 @@ const TextField = ({
    autoComplete,
  });

-  if (onPaste) {
+  if (onPaste || dataTestId) {
    if (!inputProps.InputProps) {
      inputProps.InputProps = {};
    }
@ -224,6 +225,7 @@ const TextField = ({
      inputProps.InputProps.inputProps = {};
    }
    inputProps.InputProps.inputProps.onPaste = onPaste;
+    inputProps.InputProps.inputProps['data-testid'] = dataTestId;
  }

  return (
@ -243,6 +245,10 @@ TextField.defaultProps = {
 };

 TextField.propTypes = {
+  /**
+   * A test ID that gets set on the input element
+   */
+  'data-testid': PropTypes.string,
  /**
   * Show error message
   */
--- a/ui/components/ui/ui-components.scss
+++ b/ui/components/ui/ui-components.scss
@ -44,6 +44,7 @@
@import 'radio-group/index';
@import 'readonly-input/index';
@import 'sender-to-recipient/index';
+@import 'show-hide-toggle/index.scss';
@import 'snackbar/index';
@import 'site-origin/index';
@import 'slider/index';
--- a/ui/pages/swaps/searchable-item-list/snapshots/searchable-item-list.test.js.snap
+++ b/ui/pages/swaps/searchable-item-list/snapshots/searchable-item-list.test.js.snap
@ -3,7 +3,6 @@
 exports[`SearchableItemList renders the component with initial props 1`] = `
 <div
  class="MuiFormControl-root MuiTextField-root searchable-item-list__search MuiFormControl-fullWidth"
-  data-testid="search-list-items"
 >
  <div
    class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth Mui-focused Mui-focused TextField-inputFocused-11 MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
@ -23,6 +22,7 @@ exports[`SearchableItemList renders the component with initial props 1`] = `
      aria-invalid="false"
      autocomplete="off"
      class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart"
+      data-testid="search-list-items"
      dir="auto"
      type="text"
      value=""
--- a/yarn.lock
+++ b/yarn.lock
@ -2707,46 +2707,6 @@
    web3 "^0.20.7"
    web3-provider-engine "^16.0.3"

-"@metamask/controllers@^26.0.0":
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-26.0.0.tgz#3df4a3071ffb26d357ba99f288d52fb9d913c35a"
-  integrity sha512-iAWDoP/omxGzPfYyBFRNPJ32zcYvZHnUhIM2LyWoCwQj9ZYC1qh+dDX6I0O5jEeQcBrEb+Nl6AcnwHKVdEUz5Q==
-  dependencies:
-    "@ethereumjs/common" "^2.3.1"
-    "@ethereumjs/tx" "^3.2.1"
-    "@metamask/contract-metadata" "^1.31.0"
-    "@metamask/metamask-eth-abis" "3.0.0"
-    "@metamask/types" "^1.1.0"
-    "@types/uuid" "^8.3.0"
-    abort-controller "^3.0.0"
-    async-mutex "^0.2.6"
-    babel-runtime "^6.26.0"
-    deep-freeze-strict "^1.1.1"
-    eth-ens-namehash "^2.0.8"
-    eth-json-rpc-infura "^5.1.0"
-    eth-keyring-controller "^6.2.1"
-    eth-method-registry "1.1.0"
-    eth-phishing-detect "^1.1.14"
-    eth-query "^2.1.2"
-    eth-rpc-errors "^4.0.0"
-    eth-sig-util "^3.0.0"
-    ethereumjs-util "^7.0.10"
-    ethereumjs-wallet "^1.0.1"
-    ethers "^5.4.1"
-    ethjs-unit "^0.1.6"
-    fast-deep-equal "^3.1.3"
-    immer "^9.0.6"
-    isomorphic-fetch "^3.0.0"
-    json-rpc-engine "^6.1.0"
-    jsonschema "^1.2.4"
-    multiformats "^9.5.2"
-    nanoid "^3.1.31"
-    punycode "^2.1.1"
-    single-call-balance-checker-abi "^1.0.0"
-    uuid "^8.3.2"
-    web3 "^0.20.7"
-    web3-provider-engine "^16.0.3"
-
 "@metamask/controllers@^27.0.0":
  version "27.0.0"
  resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-27.0.0.tgz#23fb24960880047635a7e0b226375b843f385ad1"
@ -4176,6 +4136,13 @@
    "@babel/runtime" "^7.10.3"
    "@testing-library/dom" "^7.17.1"

+"@testing-library/user-event@^14.0.0-beta.12":
+  version "14.0.0-beta.12"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.0.0-beta.12.tgz#8df662578e49371fd80d5923d92f3c378f7dd927"
+  integrity sha512-vFZQBBzO14bJseKAS78Ae/coSuJbgrs7ywRZw88Hc52Le8RJGehdxR4w25Oj7QVNpZZpz0R6q1zMVdYGtPbd2A==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 "@tootallnate/once@1":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@ -7957,10 +7924,10 @@ chrome-trace-event@^1.0.2:
  dependencies:
    tslib "^1.9.0"

-chromedriver@^98.0.0:
-  version "98.0.0"
-  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-98.0.0.tgz#b2c3c1941fad4cdfadad5d4c46923e02f089fd30"
-  integrity sha512-Oi6Th5teK+VI4nti+423/dFkENYHEMOdUvqwJHzOaNwXqLwZ8FuSaKBybgALCctGapwJbd+tmPv3qSd6tUUIHQ==
+chromedriver@^99.0.0:
+  version "99.0.0"
+  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-99.0.0.tgz#fbfcc7e74991dd50962e7dd456d78eaf49f56774"
+  integrity sha512-pyB+5LuyZdb7EBPL3i5D5yucZUD+SlkdiUtmpjaEnLd9zAXp+SvD/hP5xF4l/ZmWvUo/1ZLxAI1YBdhazGTpgA==
  dependencies:
    "@testim/chrome-version" "^1.1.2"
    axios "^0.24.0"
@ -19759,10 +19726,10 @@ node-fetch@^2.3.0, node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@~2.6.1:
  dependencies:
    whatwg-url "^5.0.0"

-node-forge@^0.7.1, node-forge@^0.7.5, node-forge@^1.0.0, node-forge@^1.2.1, node-forge@~0.7.6:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.2.1.tgz#82794919071ef2eb5c509293325cec8afd0fd53c"
-  integrity sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==
+node-forge@^0.7.1, node-forge@^0.7.5, node-forge@^1.2.1, node-forge@^1.3.0, node-forge@~0.7.6:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.0.tgz#37a874ea723855f37db091e6c186e5b67a01d4b2"
+  integrity sha512-08ARB91bUi6zNKzVmaj3QO7cr397uiDT2nJ63cHjyNtCTWIgvS47j3eT0WfzUwS9+6Z5YshRaoasFkXCKrIYbA==

 node-gyp-build@4.3.0, node-gyp-build@^4.2.0, node-gyp-build@^4.2.2, node-gyp-build@^4.2.3, node-gyp-build@^4.3.0:
  version "4.3.0"
				`@ -0,0 +1 @@`
				`export { default } from './show-hide-toggle';`