m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Split SRP input by word (#14016)

Browse Source 
* Initial implementation of new SrpInput component

This new version of the SrpInput component uses a separate field for
each word of the SRP. Only one field can be revealed at a time, making
it less likely that it gets accidentally revealed to somebody.

* Fix copy mistakes

* Move container div from 'create vault' to 'srp-input', and setup grid layout

* Increase size of title

* Remove hard-coded width in Storybook to allow testing different viewport sizes

* Improve layout

* Improve margins

* Update dropdown text

* Expand SRP input section

* Remove unused localized messages

* Update dropdown option names in unit tests

* Replace checkbox with show/hide toggle

* Remove unused localized message

* Fix 'data-testid' prop name

* Fix e2e test imports using paste

* Use 'ActionableMessage' component for error message

* Convert error popover to actionable message

* Add tip about pasting the SRP

* Remove invalid prop

The "info" style of `ActionableMessage` is the default, so no type is
required.

* Use more readable test convenience methods

The method `toBeInTheDocument()` is now used over `not.toBeNull()` to
improve the readability of tests. Likewise, the convenience method
`.clear` is now used to clear fields rather than manually entering the
key combination to clear a field.

* Fix misspelled word
This commit is contained in:
Mark Stacey 2022-03-21 16:39:26 -02:30
parent 4adadd3325
commit 00341cd3b3
54 changed files with 1634 additions and 557 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/_locales/am/messages.json generated
View File

@ -804,9 +804,6 @@
"securityAndPrivacy": {
"message": "ደህንነት እና ግላዊነት"
},
"seedPhrasePlaceholder": {
"message": "እያንዳንዱን ቃል በነጠላ ክፍት ቦታ ይለያዩ"
},
"seedPhraseReq": {
"message": "የዘር ሐረጋት የ 12 ቃላት ርዝመት አላቸው"
},

3
app/_locales/ar/messages.json generated
View File

@ -820,9 +820,6 @@
"securityAndPrivacy": {
"message": "الأمن والخصوصية"
},
"seedPhrasePlaceholder": {
"message": "يرجى فصل كل كلمة بمسافة واحدة"
},
"seedPhraseReq": {
"message": "طول الجمل البذرية 12 كلمة"
},

3
app/_locales/bg/messages.json generated
View File

@ -815,9 +815,6 @@
"securityAndPrivacy": {
"message": "Сигурност и поверителност"
},
"seedPhrasePlaceholder": {
"message": "Отделете всяка дума с един интервал"
},
"seedPhraseReq": {
"message": "Фразите зародиш се състоят от 12 думи"
},

3
app/_locales/bn/messages.json generated
View File

@ -819,9 +819,6 @@
"securityAndPrivacy": {
"message": "নিরাপত্তা এবং গোপনীয়তা"
},
"seedPhrasePlaceholder": {
"message": "প্রতিটি শব্দকে একটি স্পেস দিয়ে আলাদা করুন"
},
"seedPhraseReq": {
"message": "সীড ফ্রেজগুলি 12 শব্দের"
},

3
app/_locales/ca/messages.json generated
View File

@ -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"
},

3
app/_locales/da/messages.json generated
View File

@ -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"
},

6
app/_locales/de/messages.json generated
View File

@ -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"
},

9
app/_locales/el/messages.json generated
View File

@ -2359,12 +2359,6 @@
"seedPhraseIntroTitleCopy": {
"message": "Πριν ξεκινήσετε, παρακολουθήστε αυτό το σύντομο βίντεο για να μάθετε για τη Μυστική Φράση Ανάκτησης σας και πώς να κρατήσετε το πορτοφόλι σας ασφαλές."
},
"seedPhrasePlaceholder": {
"message": "Διαχωρίστε κάθε λέξη μ' ένα κενό"
},
"seedPhrasePlaceholderPaste": {
"message": "Επικόλληση Μυστικής Φράσης Ανάκτησης από το πρόχειρο"
},
"seedPhraseReq": {
"message": "Οι Μυστικές Φράσεις Ανάκτησης έχουν μήκος 12 λέξεων"
},
@ -2475,9 +2469,6 @@
"showRecommendations": {
"message": "Εμφάνιση Προτάσεων"
},
"showSeedPhrase": {
"message": "Εμφάνιση Μυστικής Φράσης Ανάκτησης"
},
"showTestnetNetworks": {
"message": "Εμφάνιση δοκιμαστικών δικτύων"
},

33
app/_locales/en/messages.json generated
View File

@ -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"
},

9
app/_locales/es/messages.json generated
View File

@ -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"
},

9
app/_locales/es_419/messages.json generated
View File

@ -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"
},

3
app/_locales/et/messages.json generated
View File

@ -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"
},

3
app/_locales/fa/messages.json generated
View File

@ -819,9 +819,6 @@
"securityAndPrivacy": {
"message": "امنیت و حریم خصوصی"
},
"seedPhrasePlaceholder": {
"message": "هر کلمه را با یک فاصله واحد جدا سازید"
},
"seedPhraseReq": {
"message": "عبارات بازیاب 12 کلمه اند"
},

3
app/_locales/fi/messages.json generated
View File

@ -816,9 +816,6 @@
"securityAndPrivacy": {
"message": "Turva & yksityisyys"
},
"seedPhrasePlaceholder": {
"message": "Erota kukin sana yhdellä välilyönnillä"
},
"seedPhraseReq": {
"message": "Juurilauseet ovat 12 sanan pituisia"
},

3
app/_locales/fil/messages.json generated
View File

@ -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"
},

9
app/_locales/fr/messages.json generated
View File

@ -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"
},

3
app/_locales/he/messages.json generated
View File

@ -813,9 +813,6 @@
"securityAndPrivacy": {
"message": "אבטחה ופרטיות"
},
"seedPhrasePlaceholder": {
"message": "הפרד/י בין המילים ברווח אחד"
},
"seedPhraseReq": {
"message": "צירופי גרעין מורכבים מ-12 מילים"
},

9
app/_locales/hi/messages.json generated
View File

@ -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": "परीक्षण नेटवर्क दिखाएं"
},

3
app/_locales/hr/messages.json generated
View File

@ -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"
},

3
app/_locales/hu/messages.json generated
View File

@ -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"
},

9
app/_locales/id/messages.json generated
View File

@ -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"
},

9
app/_locales/it/messages.json generated
View File

@ -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"
},

9
app/_locales/ja/messages.json generated
View File

@ -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": "テストネットワークを表示"
},

3
app/_locales/kn/messages.json generated
View File

@ -819,9 +819,6 @@
"securityAndPrivacy": {
"message": "ಭದ್ರತೆ ಮತ್ತು ಗೌಪ್ಯತೆ"
},
"seedPhrasePlaceholder": {
"message": "ಒಂದು ಸ್ಪೇಸ್ ಮೂಲಕ ಪ್ರತಿ ಪದವನ್ನು ಬೇರ್ಪಡಿಸಿ"
},
"seedPhraseReq": {
"message": "ಸೀಡ್ ಫ್ರೇಸ್‌ಗಳು 12 ಪದಗಳಷ್ಟು ದೀರ್ಘವಾಗಿವೆ"
},

9
app/_locales/ko/messages.json generated
View File

@ -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": "테스트 네트워크 보기"
},

3
app/_locales/lt/messages.json generated
View File

@ -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"
},

3
app/_locales/lv/messages.json generated
View File

@ -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"
},

3
app/_locales/ms/messages.json generated
View File

@ -799,9 +799,6 @@
"securityAndPrivacy": {
"message": "Keselamatan & Privasi"
},
"seedPhrasePlaceholder": {
"message": "Pisahkan setiap perkataan dengan satu ruang"
},
"seedPhraseReq": {
"message": "Frasa benih panjangnya 12 patah perkataan"
},

3
app/_locales/no/messages.json generated
View File

@ -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 "
},

9
app/_locales/ph/messages.json generated
View File

@ -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"
},

3
app/_locales/pl/messages.json generated
View File

@ -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"
},

9
app/_locales/pt_BR/messages.json generated
View File

@ -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"
},

3
app/_locales/ro/messages.json generated
View File

@ -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"
},

9
app/_locales/ru/messages.json generated
View File

@ -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": "Показать тестовые сети"
},

3
app/_locales/sk/messages.json generated
View File

@ -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"
},

3
app/_locales/sl/messages.json generated
View File

@ -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"
},

3
app/_locales/sr/messages.json generated
View File

@ -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"
},

3
app/_locales/sv/messages.json generated
View File

@ -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."
},

3
app/_locales/sw/messages.json generated
View File

@ -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"
},

9
app/_locales/tl/messages.json generated
View File

@ -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"
},

9
app/_locales/tr/messages.json generated
View File

@ -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"
},

3
app/_locales/uk/messages.json generated
View File

@ -819,9 +819,6 @@
"securityAndPrivacy": {
"message": "Безпека й конфіденційність"
},
"seedPhrasePlaceholder": {
"message": "Відділіть кожне слово одним пробілом"
},
"seedPhraseReq": {
"message": "Початкові фрази мають 12 слів"
},

9
app/_locales/vi/messages.json generated
View File

@ -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"
},

9
app/_locales/zh_CN/messages.json generated
View File

@ -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": "显示测试网络"
},

3
app/_locales/zh_TW/messages.json generated
View File

@ -801,9 +801,6 @@
"securityAndPrivacy": {
"message": "安全＆隱私"
},
"seedPhrasePlaceholder": {
"message": "單詞之間請用空白分隔"
},
"seedPhraseReq": {
"message": "助憶詞為 12 個詞語"
},

2
test/e2e/metamask-ui.spec.js
View File

@ -201,7 +201,7 @@ describe('MetaMask', function () {
await driver.delay(regularDelayMs);
await driver.pasteIntoField(
'input[placeholder="Enter your Secret Recovery Phrase"]',
'[data-testid="import-srp__srp-word-0"]',
testSeedPhrase,
);

2
test/e2e/tests/from-import-ui.spec.js
View File

@ -77,7 +77,7 @@ describe('Metamask Import UI', function () {
// Import Secret Recovery Phrase
await driver.pasteIntoField(
'input[placeholder="Enter your Secret Recovery Phrase"]',
'[data-testid="import-srp__srp-word-0"]',
testSeedPhrase,
);

2
test/e2e/tests/metamask-responsive-ui.spec.js
View File

@ -173,7 +173,7 @@ describe('Metamask Responsive UI', function () {
await restoreSeedLink.click();
await driver.pasteIntoField(
'input[placeholder="Enter your Secret Recovery Phrase"]',
'[data-testid="import-srp__srp-word-0"]',
testSeedPhrase,
);

48
ui/components/app/create-new-vault/create-new-vault.js
View File

@ -107,31 +107,31 @@ export default function CreateNewVault({
return (
<form className="create-new-vault__form" onSubmit={onImport}>
<div className="create-new-vault__srp-section">
<SrpInput onChange={setSeedPhrase} />
<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

4
ui/components/app/create-new-vault/create-new-vault.scss
View File

@ -2,12 +2,12 @@
&__form {
display: flex;
flex-direction: column;
width: 360px;
}
&__srp-section {
&__create-password {
display: flex;
flex-direction: column;
width: 360px;
}
&__terms {

247
ui/components/app/srp-input/srp-input.js
View File

@ -4,96 +4,219 @@ import PropTypes from 'prop-types';
import { useI18nContext } from '../../../hooks/useI18nContext';
import TextField from '../../ui/text-field';
import { clearClipboard } from '../../../helpers/utils/util';
import CheckBox from '../../ui/check-box';
import ActionableMessage from '../../ui/actionable-message';
import Dropdown from '../../ui/dropdown';
import Typography from '../../ui/typography';
import { COLORS } from '../../../helpers/constants/design-system';
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 [draftSrp, setDraftSrp] = useState('');
const [showSrp, setShowSrp] = useState(false);
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(
(event) => {
const rawSrp = event.target.value;
(newDraftSrp) => {
let newSrpError = '';
const parsedSeedPhrase = parseSecretRecoveryPhrase(rawSrp);
const joinedDraftSrp = newDraftSrp.join(' ');
if (rawSrp) {
const wordCount = parsedSeedPhrase.split(/\s/u).length;
if (wordCount % 3 !== 0 || wordCount > 24 || wordCount < 12) {
if (newDraftSrp.some((word) => word !== '')) {
if (newDraftSrp.some((word) => word === '')) {
newSrpError = t('seedPhraseReq');
} else if (!isValidMnemonic(parsedSeedPhrase)) {
} else if (!isValidMnemonic(joinedDraftSrp)) {
newSrpError = t('invalidSeedPhrase');
}
}
setDraftSrp(rawSrp);
setDraftSrp(newDraftSrp);
setSrpError(newSrpError);
onChange(newSrpError ? '' : parsedSeedPhrase);
onChange(newSrpError ? '' : joinedDraftSrp);
},
[setDraftSrp, setSrpError, t, onChange],
);
const toggleShowSrp = useCallback(() => {
setShowSrp((currentShowSrp) => !currentShowSrp);
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 (
<>
<label htmlFor="import-srp__srp" className="import-srp__srp-label">
<Typography>{t('secretRecoveryPhrase')}</Typography>
</label>
{showSrp ? (
<textarea
id="import-srp__srp"
className="import-srp__srp-shown"
onChange={onSrpChange}
onPaste={clearClipboard}
value={draftSrp}
placeholder={t('seedPhrasePlaceholder')}
autoComplete="off"
/>
) : (
<TextField
id="import-srp__srp"
type="password"
onChange={onSrpChange}
value={draftSrp}
placeholder={t('seedPhrasePlaceholderPaste')}
autoComplete="off"
onPaste={clearClipboard}
/>
)}
{srpError ? (
<Typography
color={COLORS.ERROR1}
tag="span"
className="import-srp__srp-error"
>
{srpError}
<div className="import-srp__container">
<label className="import-srp__srp-label">
<Typography variant={TYPOGRAPHY.H4}>
{t('secretRecoveryPhrase')}
</Typography>
) : null}
<div className="import-srp__show-srp">
<CheckBox
id="import-srp__show-srp-checkbox"
checked={showSrp}
onClick={toggleShowSrp}
title={t('showSeedPhrase')}
/>
<label
className="import-srp__show-srp-label"
htmlFor="import-srp__show-srp-checkbox"
>
<Typography tag="span">{t('showSeedPhrase')}</Typography>
</label>
</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>
);
}

65
ui/components/app/srp-input/srp-input.scss
View File

@ -1,24 +1,65 @@
.import-srp {
&__srp-label {
margin-bottom: 8px;
&__container {
display: grid;
grid-template-areas:
"title dropdown"
"paste-tip paste-tip"
"input input"
"error error"
"too-many-words-error too-many-words-error";
}
&__srp-shown {
@include Paragraph;
@media (max-width: 767px) {
&__container {
grid-template-areas: "title" "dropdown" "input" "error";
}
}
padding: 8px 16px;
&__srp-label {
grid-area: title;
}
&__number-of-words-dropdown {
grid-area: dropdown;
}
&__paste-tip {
margin-bottom: 8px;
grid-area: paste-tip;
width: max-content;
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;
}
&__show-srp {
margin-top: 16px;
margin-bottom: 16px;
}
&__show-srp-label {
margin-left: 8px;
&__srp-too-many-words-error {
margin-top: 4px;
grid-area: too-many-words-error;
}
}

8
ui/components/app/srp-input/srp-input.stories.js
View File

@ -4,18 +4,14 @@ import SrpInput from '.';
export default {
title: 'Components/App/SrpInput',
id: __filename,
component: SrpInput,
argTypes: {
onChange: { action: 'changed' },
},
component: SrpInput,
};
const Template = (args) => {
return (
<div style={{ width: '600px' }}>
<SrpInput {...args} />
</div>
);
return <SrpInput {...args} />;
};
export const DefaultStory = Template.bind({});

1549
ui/components/app/srp-input/srp-input.test.js
View File

File diff suppressed because it is too large Load Diff