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

Modify import SRP page (#14425)

Browse Source 
* Modify Import SRP page
This commit is contained in:
VSaric 2022-04-18 22:12:16 +02:00 committed by GitHub
parent bcdd52f55a
commit e702da2194
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 428 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

67
ui/pages/onboarding-flow/import-srp/import-srp.js
View File

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

71
ui/pages/onboarding-flow/import-srp/index.scss
View File

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

1
ui/pages/onboarding-flow/index.scss
View File

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