From 429451de236b28cf30b53362a07bad58b7b3a22a Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Thu, 3 Feb 2022 10:36:43 -0330 Subject: [PATCH 01/94] Extract "create vault" form to separate component (#13461) The form used for creating a vault on the "Import" page of onboarding and on the "Restore vault" page is nearly identical, yet the implementation is totally separate. It has now been extracted to a separate component, consolidating the two implementations. There is a "terms of use" checkbox on the import page that isn't on the restore vault page, so that part has been made optional. The "submit" button text differs between the two uses as well, so that is customizable. There are slight styling differences between the old and new versions of this form. The fonts and spacing are all using our new standard design system guidelines, and we're using our standard checkbox now as well. The spacing and font sizes were chosen somewhat arbitrarily by me to resemble the old styles, so please feel free to suggest changes if you think they can be improved upon. There are some slight copy changes to the "Restore vault" page as well; the placeholder text and the label for the "Secret Recovery Phrase" field now matches the "Import" page copy. --- app/_locales/am/messages.json | 3 - app/_locales/ar/messages.json | 3 - app/_locales/bg/messages.json | 3 - app/_locales/bn/messages.json | 3 - app/_locales/ca/messages.json | 3 - app/_locales/da/messages.json | 3 - app/_locales/de/messages.json | 3 - app/_locales/el/messages.json | 6 - app/_locales/en/messages.json | 6 - app/_locales/es/messages.json | 6 - app/_locales/es_419/messages.json | 6 - app/_locales/et/messages.json | 3 - app/_locales/fa/messages.json | 3 - app/_locales/fi/messages.json | 3 - app/_locales/fil/messages.json | 3 - app/_locales/fr/messages.json | 6 - app/_locales/he/messages.json | 3 - app/_locales/hi/messages.json | 6 - app/_locales/hr/messages.json | 3 - app/_locales/ht/messages.json | 3 - app/_locales/hu/messages.json | 3 - app/_locales/id/messages.json | 6 - app/_locales/it/messages.json | 3 - app/_locales/ja/messages.json | 6 - app/_locales/kn/messages.json | 3 - app/_locales/ko/messages.json | 6 - app/_locales/lt/messages.json | 3 - app/_locales/lv/messages.json | 3 - app/_locales/ms/messages.json | 3 - app/_locales/no/messages.json | 3 - app/_locales/ph/messages.json | 6 - app/_locales/pl/messages.json | 3 - app/_locales/pt_BR/messages.json | 6 - app/_locales/ro/messages.json | 3 - app/_locales/ru/messages.json | 6 - app/_locales/sk/messages.json | 3 - app/_locales/sl/messages.json | 3 - app/_locales/sr/messages.json | 3 - app/_locales/sv/messages.json | 3 - app/_locales/sw/messages.json | 3 - app/_locales/tl/messages.json | 6 - app/_locales/tr/messages.json | 6 - app/_locales/uk/messages.json | 3 - app/_locales/vi/messages.json | 6 - app/_locales/zh_CN/messages.json | 6 - app/_locales/zh_TW/messages.json | 3 - test/e2e/metamask-ui.spec.js | 7 +- test/e2e/tests/from-import-ui.spec.js | 4 +- test/e2e/tests/metamask-responsive-ui.spec.js | 7 +- ui/components/app/app-components.scss | 1 + .../app/create-new-vault/create-new-vault.js | 249 ++++++++++++++++ .../create-new-vault/create-new-vault.scss | 53 ++++ .../create-new-vault.stories.js | 29 ++ ui/components/app/create-new-vault/index.js | 1 + .../parse-secret-recovery-phrase'.test.js | 40 +++ .../parse-secret-recovery-phrase.js | 2 + .../import-with-seed-phrase.component.js | 281 +----------------- .../import-with-seed-phrase.component.test.js | 99 ------ ui/pages/first-time-flow/index.scss | 43 +-- ui/pages/keychains/index.scss | 88 +----- ui/pages/keychains/restore-vault.js | 210 +------------ 61 files changed, 416 insertions(+), 884 deletions(-) create mode 100644 ui/components/app/create-new-vault/create-new-vault.js create mode 100644 ui/components/app/create-new-vault/create-new-vault.scss create mode 100644 ui/components/app/create-new-vault/create-new-vault.stories.js create mode 100644 ui/components/app/create-new-vault/index.js create mode 100644 ui/components/app/create-new-vault/parse-secret-recovery-phrase'.test.js create mode 100644 ui/components/app/create-new-vault/parse-secret-recovery-phrase.js delete mode 100644 ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.test.js diff --git a/app/_locales/am/messages.json b/app/_locales/am/messages.json index 6c747ac6e..b07f467b1 100644 --- a/app/_locales/am/messages.json +++ b/app/_locales/am/messages.json @@ -861,9 +861,6 @@ "sendTokens": { "message": "ተለዋጭ ስሞችን ላክ" }, - "separateEachWord": { - "message": "እያንዳንዱን ቃል በነጠላ ክፍት ቦታ ይለያዩ" - }, "settings": { "message": "ቅንብሮች" }, diff --git a/app/_locales/ar/messages.json b/app/_locales/ar/messages.json index b64d23ccb..d84d78738 100644 --- a/app/_locales/ar/messages.json +++ b/app/_locales/ar/messages.json @@ -877,9 +877,6 @@ "sendTokens": { "message": "إرسال عملات رمزية" }, - "separateEachWord": { - "message": "افصل كل كلمة بمسافة واحدة" - }, "settings": { "message": "الإعدادات" }, diff --git a/app/_locales/bg/messages.json b/app/_locales/bg/messages.json index ee655931b..3147c8d4a 100644 --- a/app/_locales/bg/messages.json +++ b/app/_locales/bg/messages.json @@ -872,9 +872,6 @@ "sendTokens": { "message": "Изпращане на жетони" }, - "separateEachWord": { - "message": "Отделете всяка дума с интервал" - }, "settings": { "message": "Настройки" }, diff --git a/app/_locales/bn/messages.json b/app/_locales/bn/messages.json index df49e9050..3c18a2b2c 100644 --- a/app/_locales/bn/messages.json +++ b/app/_locales/bn/messages.json @@ -876,9 +876,6 @@ "sendTokens": { "message": "টোকেনগুলি পাঠান" }, - "separateEachWord": { - "message": "প্রতিটি শব্দকে একটি স্পেস দিয়ে আলাদা করুন" - }, "settings": { "message": "সেটিংস" }, diff --git a/app/_locales/ca/messages.json b/app/_locales/ca/messages.json index bebf48582..bda94d4c1 100644 --- a/app/_locales/ca/messages.json +++ b/app/_locales/ca/messages.json @@ -854,9 +854,6 @@ "sendTokens": { "message": "Enviar Fitxes" }, - "separateEachWord": { - "message": "Separa cada paraula amb un sol espai" - }, "settings": { "message": "Configuració" }, diff --git a/app/_locales/da/messages.json b/app/_locales/da/messages.json index 4a45e5e43..9106e784e 100644 --- a/app/_locales/da/messages.json +++ b/app/_locales/da/messages.json @@ -854,9 +854,6 @@ "sendTokens": { "message": "Send tokens" }, - "separateEachWord": { - "message": "Separer hvert ord med et enkelt mellemrum" - }, "settings": { "message": "Indstillinger " }, diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 19e5ecf54..d4f963ee6 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -838,9 +838,6 @@ "sendTokens": { "message": "Token senden" }, - "separateEachWord": { - "message": "Trennen Sie die Wörter mit einem einzelnen Leerzeichen voneinander" - }, "settings": { "message": "Einstellungen" }, diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 84c2c8c6d..4b51d9658 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -2460,9 +2460,6 @@ "message": "Αποστολή $1", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "Διαχωρίστε κάθε λέξη με ένα μόνο κενό" - }, "setAdvancedPrivacySettings": { "message": "Ορίστε ρυθμίσεις απορρήτου για προχωρημένους" }, @@ -3375,9 +3372,6 @@ "walletCreationSuccessTitle": { "message": "Επιτυχής δημιουργία πορτοφολιού" }, - "walletSeedRestore": { - "message": "Μυστικής Φράσης Ανάκτησης Πορτοφολιού" - }, "web3ShimUsageNotification": { "message": "Παρατηρήσαμε ότι η τρέχουσα ιστοσελίδα προσπάθησε να χρησιμοποιήσει το αφαιρεθέν window.web3 API. Αν η ιστοσελίδα φαίνεται να έχει παραβιαστεί, κάντε κλικ στο $1 για περισσότερες πληροφορίες.", "description": "$1 is a clickable link." diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 9ee9a52a9..258bcdc50 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -2582,9 +2582,6 @@ "message": "Sending $1", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "Separate each word with a single space" - }, "setAdvancedPrivacySettings": { "message": "Set advanced privacy settings" }, @@ -3503,9 +3500,6 @@ "walletCreationSuccessTitle": { "message": "Wallet creation successful" }, - "walletSeedRestore": { - "message": "Wallet Secret Recovery Phrase" - }, "web3ShimUsageNotification": { "message": "We noticed that the current website tried to use the removed window.web3 API. If the site appears to be broken, please click $1 for more information.", "description": "$1 is a clickable link." diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index 110ff0fee..b2c8eb472 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -1612,9 +1612,6 @@ "sendTokens": { "message": "Enviar tokens" }, - "separateEachWord": { - "message": "Separar cada palabra con un solo espacio" - }, "settings": { "message": "Configuración" }, @@ -2263,9 +2260,6 @@ "walletConnectionGuide": { "message": "nuestra guía de conexión de la cartera de hardware" }, - "walletSeedRestore": { - "message": "Frase secreta de recuperación de la cartera" - }, "web3ShimUsageNotification": { "message": "Parece que el sitio web actual intentó utilizar la API de window.web3 que se eliminó. Si el sitio no funciona, haga clic en $1 para obtener más información.", "description": "$1 is a clickable link." diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json index 2d0b0c652..a30565aaa 100644 --- a/app/_locales/es_419/messages.json +++ b/app/_locales/es_419/messages.json @@ -1624,9 +1624,6 @@ "sendTokens": { "message": "Enviar tokens" }, - "separateEachWord": { - "message": "Separar cada palabra con un solo espacio" - }, "settings": { "message": "Configuración" }, @@ -2275,9 +2272,6 @@ "walletConnectionGuide": { "message": "nuestra guía de conexión de la cartera de hardware" }, - "walletSeedRestore": { - "message": "Frase secreta de recuperación de la cartera" - }, "web3ShimUsageNotification": { "message": "Parece que el sitio web actual intentó utilizar la API de window.web3 que se eliminó. Si el sitio no funciona, haga clic en $1 para obtener más información.", "description": "$1 is a clickable link." diff --git a/app/_locales/et/messages.json b/app/_locales/et/messages.json index 9e60e88de..416754b7e 100644 --- a/app/_locales/et/messages.json +++ b/app/_locales/et/messages.json @@ -866,9 +866,6 @@ "sendTokens": { "message": "Saada lube" }, - "separateEachWord": { - "message": "Eraldage iga sõna ühe tühikuga" - }, "settings": { "message": "Seaded" }, diff --git a/app/_locales/fa/messages.json b/app/_locales/fa/messages.json index 8f875e8f9..94e76b94f 100644 --- a/app/_locales/fa/messages.json +++ b/app/_locales/fa/messages.json @@ -876,9 +876,6 @@ "sendTokens": { "message": "رمزیاب ها را ارسال کنید" }, - "separateEachWord": { - "message": "هر کلمه را با یک فاصله واحد جدا سازید" - }, "settings": { "message": "تنظیمات" }, diff --git a/app/_locales/fi/messages.json b/app/_locales/fi/messages.json index ef644d7ba..e0beecfee 100644 --- a/app/_locales/fi/messages.json +++ b/app/_locales/fi/messages.json @@ -873,9 +873,6 @@ "sendTokens": { "message": "Lähetä tietueita" }, - "separateEachWord": { - "message": "Erottele sanat toisistaan yhdellä välilyönnillä" - }, "settings": { "message": "Asetukset" }, diff --git a/app/_locales/fil/messages.json b/app/_locales/fil/messages.json index b712d7644..7ad87f6a4 100644 --- a/app/_locales/fil/messages.json +++ b/app/_locales/fil/messages.json @@ -794,9 +794,6 @@ "sendTokens": { "message": "Magpadala ng Mga Token" }, - "separateEachWord": { - "message": "Paghiwa-hiwalayin ang bawat salita gamit ang isang space" - }, "settings": { "message": "Mga Setting" }, diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index e27785877..05db3511f 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -2460,9 +2460,6 @@ "message": "Envoi de $1", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "Separez chaque mot avec un espace simple" - }, "setAdvancedPrivacySettings": { "message": "Définir des paramètres de confidentialité avancés" }, @@ -3375,9 +3372,6 @@ "walletCreationSuccessTitle": { "message": "Portefeuille créé avec succès" }, - "walletSeedRestore": { - "message": "Phrase secrète de récupération du portefeuille" - }, "web3ShimUsageNotification": { "message": "Nous avons remarqué que ce site Web a essayé d’utiliser l’API window.web3 supprimée. Si le site semble être défectueux, veuillez cliquer sur $1 pour plus d’informations.", "description": "$1 is a clickable link." diff --git a/app/_locales/he/messages.json b/app/_locales/he/messages.json index 5a8a936b3..da929cd5a 100644 --- a/app/_locales/he/messages.json +++ b/app/_locales/he/messages.json @@ -870,9 +870,6 @@ "sendTokens": { "message": "שלח טוקנים" }, - "separateEachWord": { - "message": "יש להפריד כל מילה עם רווח יחיד" - }, "settings": { "message": "הגדרות" }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index 9dfa6f75b..e314198e6 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -2460,9 +2460,6 @@ "message": "$1 भेजा जा रहा है", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "प्रत्येक शब्द को एक रिक्ति से अलग करें" - }, "setAdvancedPrivacySettings": { "message": "एडवांस गोपनीयता सेटिंग्स निर्धारित करें" }, @@ -3375,9 +3372,6 @@ "walletCreationSuccessTitle": { "message": "वॉलेट का निर्माण सफल हुआ" }, - "walletSeedRestore": { - "message": "वॉलेट का गुप्त रिकवरी फ्रेज़" - }, "web3ShimUsageNotification": { "message": "हमने देखा है कि वर्तमान वेबसाइट ने हटाए गए window.web3 API का उपयोग करने की कोशिश की। यदि साइट में गड़बड़ी लगती है, तो कृपया अधिक जानकारी के लिए $1 पर क्लिक करें।", "description": "$1 is a clickable link." diff --git a/app/_locales/hr/messages.json b/app/_locales/hr/messages.json index ea8254d9d..1562e2e73 100644 --- a/app/_locales/hr/messages.json +++ b/app/_locales/hr/messages.json @@ -869,9 +869,6 @@ "sendTokens": { "message": "Pošalji tokene" }, - "separateEachWord": { - "message": "Odvojite pojedinačne riječi jednim razmakom" - }, "settings": { "message": "Postavke" }, diff --git a/app/_locales/ht/messages.json b/app/_locales/ht/messages.json index 60edde94d..2e80f5b5c 100644 --- a/app/_locales/ht/messages.json +++ b/app/_locales/ht/messages.json @@ -551,9 +551,6 @@ "sendTokens": { "message": "Voye Tokens" }, - "separateEachWord": { - "message": "Separe chak mo ak yon sèl espas" - }, "settings": { "message": "Paramèt" }, diff --git a/app/_locales/hu/messages.json b/app/_locales/hu/messages.json index c13dcc19b..0f7883a60 100644 --- a/app/_locales/hu/messages.json +++ b/app/_locales/hu/messages.json @@ -869,9 +869,6 @@ "sendTokens": { "message": "Token küldése" }, - "separateEachWord": { - "message": "Minden egyes szavat szóközzel válasszon el" - }, "settings": { "message": "Beállítások" }, diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index 6148f18f9..1762d3a43 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -2460,9 +2460,6 @@ "message": "Mengirim $1", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "Pisahkan setiap kata dengan satu spasi" - }, "setAdvancedPrivacySettings": { "message": "Atur pengaturan privasi lanjutan" }, @@ -3375,9 +3372,6 @@ "walletCreationSuccessTitle": { "message": "Dompet berhasil dibuat" }, - "walletSeedRestore": { - "message": "Frasa Pemulihan Rahasia Dompet" - }, "web3ShimUsageNotification": { "message": "Kami melihat situs web saat ini mencoba menggunakan API window.web3 yang dihapus. Jika situs tersebut tampak bermasalah, silakan klik $1 untuk informasi selengkapnya.", "description": "$1 is a clickable link." diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json index 7bad7940d..b37948744 100644 --- a/app/_locales/it/messages.json +++ b/app/_locales/it/messages.json @@ -1298,9 +1298,6 @@ "sendTokens": { "message": "Invia Tokens" }, - "separateEachWord": { - "message": "Separa ogni parola con un solo spazio" - }, "settings": { "message": "Impostazioni" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index b1fae7296..2e009a113 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -2460,9 +2460,6 @@ "message": "$1を送信中", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "単語ごとにスペースを 1 つ置いて分離します" - }, "setAdvancedPrivacySettings": { "message": "高度なプライバシー設定を設定" }, @@ -3375,9 +3372,6 @@ "walletCreationSuccessTitle": { "message": "ウォレットが作成されました" }, - "walletSeedRestore": { - "message": "ウォレット シークレット リカバリー フレーズ" - }, "web3ShimUsageNotification": { "message": "現在のウェブサイトが、削除済の window.web3 API の使用を検知しました。サイトが壊れているようであれば、$1 をクリックして詳細を確認してください。", "description": "$1 is a clickable link." diff --git a/app/_locales/kn/messages.json b/app/_locales/kn/messages.json index 5126c5b97..a03cfb633 100644 --- a/app/_locales/kn/messages.json +++ b/app/_locales/kn/messages.json @@ -876,9 +876,6 @@ "sendTokens": { "message": "ಟೋಕನ್‌ಗಳನ್ನು ಕಳುಹಿಸಿ" }, - "separateEachWord": { - "message": "ಒಂದು ಸ್ಪೇಸ್ ಮೂಲಕ ಪ್ರತಿ ಪದವನ್ನು ಬೇರ್ಪಡಿಸಿ" - }, "settings": { "message": "ಸೆಟ್ಟಿಂಗ್‌ಗಳು" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index 3cffd545f..f49a3fadf 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -2460,9 +2460,6 @@ "message": "$1 보내기", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "공백 한 칸으로 각 단어를 구분하세요." - }, "setAdvancedPrivacySettings": { "message": "개인정보 설정 고급 지정" }, @@ -3375,9 +3372,6 @@ "walletCreationSuccessTitle": { "message": "지갑 생성 성공" }, - "walletSeedRestore": { - "message": "지갑 비밀 복구 구문" - }, "web3ShimUsageNotification": { "message": "현재의 웹사이트가 제거된 window.web3 API를 이용하려고 합니다. 이 사이트가 제대로 작동하지 않는 경우, $1을(를) 클릭해 자세히 알아보세요.", "description": "$1 is a clickable link." diff --git a/app/_locales/lt/messages.json b/app/_locales/lt/messages.json index 9a6df90fd..641ae4c38 100644 --- a/app/_locales/lt/messages.json +++ b/app/_locales/lt/messages.json @@ -876,9 +876,6 @@ "sendTokens": { "message": "Siųsti žetonus" }, - "separateEachWord": { - "message": "Kiekvieną žodį atskirkite viengubu tarpu" - }, "settings": { "message": "Nustatymai" }, diff --git a/app/_locales/lv/messages.json b/app/_locales/lv/messages.json index fea8634a8..294417151 100644 --- a/app/_locales/lv/messages.json +++ b/app/_locales/lv/messages.json @@ -872,9 +872,6 @@ "sendTokens": { "message": "Nosūtīt marķierus" }, - "separateEachWord": { - "message": "Atdaliet katru vārdu ar vienu atstarpi" - }, "settings": { "message": "Iestatījumi" }, diff --git a/app/_locales/ms/messages.json b/app/_locales/ms/messages.json index af2f7244e..a35c4cdee 100644 --- a/app/_locales/ms/messages.json +++ b/app/_locales/ms/messages.json @@ -856,9 +856,6 @@ "sendTokens": { "message": "Hantar Token" }, - "separateEachWord": { - "message": "Pisahkan setiap perkataan dengan ruang tunggal" - }, "settings": { "message": "Tetapan" }, diff --git a/app/_locales/no/messages.json b/app/_locales/no/messages.json index 4c17be907..331ba4405 100644 --- a/app/_locales/no/messages.json +++ b/app/_locales/no/messages.json @@ -857,9 +857,6 @@ "sendTokens": { "message": "Send tokener" }, - "separateEachWord": { - "message": "Del hvert ord med et enkelt mellomrom " - }, "settings": { "message": "Innstillinger" }, diff --git a/app/_locales/ph/messages.json b/app/_locales/ph/messages.json index 5aff3d204..2c39ffd62 100644 --- a/app/_locales/ph/messages.json +++ b/app/_locales/ph/messages.json @@ -1637,9 +1637,6 @@ "sendTokens": { "message": "Magpadala ng Mga Token" }, - "separateEachWord": { - "message": "Paghiwa-hiwalayin ang bawat salita gamit ang isang space" - }, "settings": { "message": "Mga Setting" }, @@ -2294,9 +2291,6 @@ "walletConnectionGuide": { "message": "ang aming gabay sa pagkonekta ng hardware wallet" }, - "walletSeedRestore": { - "message": "Recovery Phrase ng Wallet Secret" - }, "web3ShimUsageNotification": { "message": "Napansin naming sinubukang gamitin ng kasalukuyang website ang tinanggal na window.web3 API. Kung mukhang sira ang site, paki-click ang $1 para sa higit pang impormasyon.", "description": "$1 is a clickable link." diff --git a/app/_locales/pl/messages.json b/app/_locales/pl/messages.json index 13a43808b..a16bfdf3b 100644 --- a/app/_locales/pl/messages.json +++ b/app/_locales/pl/messages.json @@ -870,9 +870,6 @@ "sendTokens": { "message": "Wyślij tokeny" }, - "separateEachWord": { - "message": "Oddziel słowa pojedynczą spacją" - }, "settings": { "message": "Ustawienia" }, diff --git a/app/_locales/pt_BR/messages.json b/app/_locales/pt_BR/messages.json index d0570be1a..346bd2166 100644 --- a/app/_locales/pt_BR/messages.json +++ b/app/_locales/pt_BR/messages.json @@ -1612,9 +1612,6 @@ "sendTokens": { "message": "Enviar tokens" }, - "separateEachWord": { - "message": "Separe cada palavra com um único espaço" - }, "settings": { "message": "Configurações" }, @@ -2260,9 +2257,6 @@ "walletConnectionGuide": { "message": "nosso guia de conexão com a carteira de hardware" }, - "walletSeedRestore": { - "message": "Frase de recuperação secreta da carteira" - }, "web3ShimUsageNotification": { "message": "Percebemos que o site atual tentou usar a API window.web3 removida. Se o site parecer estar corrompido, clique em $1 para obter mais informações.", "description": "$1 is a clickable link." diff --git a/app/_locales/ro/messages.json b/app/_locales/ro/messages.json index 21fe2cafe..fadf0ec66 100644 --- a/app/_locales/ro/messages.json +++ b/app/_locales/ro/messages.json @@ -863,9 +863,6 @@ "sendTokens": { "message": "Trimiteți indicative" }, - "separateEachWord": { - "message": "Despărțiți fiecare cuvânt cu un spațiu" - }, "settings": { "message": "Setări" }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index 94cf6bc5d..a4e213e6a 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -2460,9 +2460,6 @@ "message": "Отправка $1...", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "Отделяйте каждое слово одним пробелом" - }, "setAdvancedPrivacySettings": { "message": "Задать дополнительные настройки конфиденциальности" }, @@ -3375,9 +3372,6 @@ "walletCreationSuccessTitle": { "message": "Кошелек создан" }, - "walletSeedRestore": { - "message": "Секретная фраза восстановления кошелька" - }, "web3ShimUsageNotification": { "message": "Мы заметили, что текущий веб-сайт пытался использовать удаленный API window.web3. Если сайт не работает, нажмите $1 для получения дополнительной информации.", "description": "$1 is a clickable link." diff --git a/app/_locales/sk/messages.json b/app/_locales/sk/messages.json index 1b7217cad..05076ce66 100644 --- a/app/_locales/sk/messages.json +++ b/app/_locales/sk/messages.json @@ -839,9 +839,6 @@ "sendTokens": { "message": "Odeslat tokeny" }, - "separateEachWord": { - "message": "Každé slovo oddeľte jednou medzerou" - }, "settings": { "message": "Nastavení" }, diff --git a/app/_locales/sl/messages.json b/app/_locales/sl/messages.json index 75ce873a5..c4354dbb5 100644 --- a/app/_locales/sl/messages.json +++ b/app/_locales/sl/messages.json @@ -864,9 +864,6 @@ "sendTokens": { "message": "Pošlji žetone" }, - "separateEachWord": { - "message": "Vsako besedo ločite z enim presledkom" - }, "settings": { "message": "Nastavitve" }, diff --git a/app/_locales/sr/messages.json b/app/_locales/sr/messages.json index 7f6354378..809e44c23 100644 --- a/app/_locales/sr/messages.json +++ b/app/_locales/sr/messages.json @@ -867,9 +867,6 @@ "sendTokens": { "message": "Pošalji tokene" }, - "separateEachWord": { - "message": "Razdvojite svaku reč jednim mestom razmaka" - }, "settings": { "message": "Podešavanja" }, diff --git a/app/_locales/sv/messages.json b/app/_locales/sv/messages.json index 22930ea92..21ee8520d 100644 --- a/app/_locales/sv/messages.json +++ b/app/_locales/sv/messages.json @@ -860,9 +860,6 @@ "sendTokens": { "message": "Skicka tokens" }, - "separateEachWord": { - "message": "Lägg in ett mellanslag mellan varje ord" - }, "settings": { "message": "Inställningar" }, diff --git a/app/_locales/sw/messages.json b/app/_locales/sw/messages.json index 01ad96959..c854540da 100644 --- a/app/_locales/sw/messages.json +++ b/app/_locales/sw/messages.json @@ -854,9 +854,6 @@ "sendTokens": { "message": "Tuma Vianzio" }, - "separateEachWord": { - "message": "Tenganisha kila neno kwa nafasi moja" - }, "settings": { "message": "Mipangilio" }, diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index 91d3afe05..0eb671b15 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -2460,9 +2460,6 @@ "message": "Nagpapadala ng $1", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "Paghiwa-hiwalayin ang bawat salita gamit ang espasyo" - }, "setAdvancedPrivacySettings": { "message": "Magtakda ng advanced privacy settings" }, @@ -3375,9 +3372,6 @@ "walletCreationSuccessTitle": { "message": "Matagumpay ang paggawa ng wallet" }, - "walletSeedRestore": { - "message": "Recovery Phrase ng Wallet Secret" - }, "web3ShimUsageNotification": { "message": "Napansin namin na sinubukan ng kasalukuyang website na gamitin ang inalis na window.web3 API. Kung mukhang sira ang site, paki-click ang $1 para sa karagdagang impormasyon.", "description": "$1 is a clickable link." diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 664f13ee9..0e4b73f85 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -2460,9 +2460,6 @@ "message": "$1 gönderiliyor", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "Her kelimeyi tek bir boşluk ile ayırın" - }, "setAdvancedPrivacySettings": { "message": "Gelişmiş gizlilik ayarlarını ayarlayın" }, @@ -3375,9 +3372,6 @@ "walletCreationSuccessTitle": { "message": "Cüzdan oluşturma başarılı" }, - "walletSeedRestore": { - "message": "Cüzdan Gizli Kurtarma İfadesi" - }, "web3ShimUsageNotification": { "message": "Mevcut web sitesinin kaldırılmış olan window.web3 API'sini kullanmaya çalıştığını fark ettik. Site bozuk olarak görülüyorsa daha fazla bilgi için lütfen şuna tıklayın: $1.", "description": "$1 is a clickable link." diff --git a/app/_locales/uk/messages.json b/app/_locales/uk/messages.json index 89c53568d..d61757b54 100644 --- a/app/_locales/uk/messages.json +++ b/app/_locales/uk/messages.json @@ -876,9 +876,6 @@ "sendTokens": { "message": "Надіслати токени" }, - "separateEachWord": { - "message": "Відділіть кожне слово одним пробілом" - }, "settings": { "message": "Налаштування" }, diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index 24d61f173..fc40fff39 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -2460,9 +2460,6 @@ "message": "Gửi $1", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "Phân tách mỗi từ bằng một dấu cách" - }, "setAdvancedPrivacySettings": { "message": "Thiết lập cài đặt quyền riêng tư nâng cao" }, @@ -3375,9 +3372,6 @@ "walletCreationSuccessTitle": { "message": "Tạo ví thành công" }, - "walletSeedRestore": { - "message": "Cụm mật khẩu khôi phục bí mật của ví" - }, "web3ShimUsageNotification": { "message": "Chúng tôi nhận thấy rằng trang web hiện tại đã cố dùng API window.web3 đã bị xóa. Nếu trang web có vẻ như đã bị lỗi, vui lòng nhấp vào $1 để biết thêm thông tin.", "description": "$1 is a clickable link." diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 42c8f7b6f..dd380c079 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -2460,9 +2460,6 @@ "message": "正在发送$1", "description": "$1 represents the native currency symbol for the current network (e.g. ETH or BNB)" }, - "separateEachWord": { - "message": "用空格分隔每个单词" - }, "setAdvancedPrivacySettings": { "message": "设置高级隐私设置" }, @@ -3375,9 +3372,6 @@ "walletCreationSuccessTitle": { "message": "钱包创建成功" }, - "walletSeedRestore": { - "message": "钱包账户助记词" - }, "web3ShimUsageNotification": { "message": "我们发现当前的网站尝试使用已经删除的 window.web3 API。如果这个网站网站已经无法正常使用，请点击 $1 获取更多信息。", "description": "$1 is a clickable link." diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json index c662ad2e8..3e281b358 100644 --- a/app/_locales/zh_TW/messages.json +++ b/app/_locales/zh_TW/messages.json @@ -855,9 +855,6 @@ "sendTokens": { "message": "發送代幣" }, - "separateEachWord": { - "message": "單詞之間請以空白間隔" - }, "settings": { "message": "設定" }, diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index 5ffd36c7f..69b5e6353 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -200,9 +200,10 @@ describe('MetaMask', function () { await restoreSeedLink.click(); await driver.delay(regularDelayMs); - await driver.clickElement('.import-account__checkbox-container'); - - await driver.fill('.import-account__secret-phrase', testSeedPhrase); + await driver.fill( + 'input[placeholder="Enter your Secret Recovery Phrase"]', + testSeedPhrase, + ); await driver.delay(regularDelayMs); await driver.fill('#password', 'correct horse battery staple'); diff --git a/test/e2e/tests/from-import-ui.spec.js b/test/e2e/tests/from-import-ui.spec.js index fc34a2f78..a1a8e1da4 100644 --- a/test/e2e/tests/from-import-ui.spec.js +++ b/test/e2e/tests/from-import-ui.spec.js @@ -87,7 +87,9 @@ describe('Metamask Import UI', function () { 'correct horse battery staple', ); - await driver.clickElement('.first-time-flow__terms'); + await driver.clickElement( + '[data-testid="create-new-vault__terms-checkbox"]', + ); await driver.clickElement({ text: 'Import', tag: 'button' }); diff --git a/test/e2e/tests/metamask-responsive-ui.spec.js b/test/e2e/tests/metamask-responsive-ui.spec.js index cff4f6fb1..3bf8684fb 100644 --- a/test/e2e/tests/metamask-responsive-ui.spec.js +++ b/test/e2e/tests/metamask-responsive-ui.spec.js @@ -172,9 +172,10 @@ describe('Metamask Responsive UI', function () { ); await restoreSeedLink.click(); - await driver.clickElement('.import-account__checkbox-container'); - - await driver.fill('.import-account__secret-phrase', testSeedPhrase); + await driver.fill( + 'input[placeholder="Enter your Secret Recovery Phrase"]', + testSeedPhrase, + ); await driver.fill('#password', 'correct horse battery staple'); await driver.fill('#confirm-password', 'correct horse battery staple'); diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index 17653fee7..69bdcf240 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -19,6 +19,7 @@ @import 'connected-accounts-permissions/index'; @import 'connected-sites-list/index'; @import 'connected-status-indicator/index'; +@import 'create-new-vault/create-new-vault.scss'; @import 'edit-gas-display/index'; @import 'edit-gas-display-education/index'; @import 'edit-gas-fee-button/index'; diff --git a/ui/components/app/create-new-vault/create-new-vault.js b/ui/components/app/create-new-vault/create-new-vault.js new file mode 100644 index 000000000..3c2b5007b --- /dev/null +++ b/ui/components/app/create-new-vault/create-new-vault.js @@ -0,0 +1,249 @@ +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; + +export default function CreateNewVault({ + disabled = false, + includeTerms = false, + onSubmit, + submitText, +}) { + const [confirmPassword, setConfirmPassword] = useState(''); + const [confirmPasswordError, setConfirmPasswordError] = useState(''); + 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 = ''; + let newPasswordError = ''; + + if (newPassword && newPassword.length < 8) { + newPasswordError = t('passwordNotLongEnough'); + } + + if (confirmPassword && newPassword !== confirmPassword) { + newConfirmPasswordError = t('passwordsDontMatch'); + } + + setPassword(newPassword); + setPasswordError(newPasswordError); + setConfirmPasswordError(newConfirmPasswordError); + }, + [confirmPassword, t], + ); + + const onConfirmPasswordChange = useCallback( + (newConfirmPassword) => { + let newConfirmPasswordError = ''; + + if (password !== newConfirmPassword) { + newConfirmPasswordError = t('passwordsDontMatch'); + } + + setConfirmPassword(newConfirmPassword); + setConfirmPasswordError(newConfirmPasswordError); + }, + [password, t], + ); + + const isValid = + !disabled && + password && + confirmPassword && + password === confirmPassword && + seedPhrase && + (!includeTerms || termsChecked) && + !passwordError && + !confirmPasswordError && + !seedPhraseError; + + const onImport = useCallback( + async (event) => { + event.preventDefault(); + + if (!isValid) { + return; + } + + await onSubmit(password, parseSecretRecoveryPhrase(seedPhrase)); + }, + [isValid, onSubmit, password, seedPhrase], + ); + + const toggleTermsCheck = useCallback(() => { + metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Import Seed Phrase', + name: 'Check ToS', + }, + }); + + setTermsChecked((currentTermsChecked) => !currentTermsChecked); + }, [metricsEvent]); + + const toggleShowSeedPhrase = useCallback(() => { + setShowSeedPhrase((currentShowSeedPhrase) => !currentShowSeedPhrase); + }, []); + + const termsOfUse = t('acceptTermsOfUse', [ + + {t('terms')} + , + ]); + + return ( +
+
+ + {showSeedPhrase ? ( +