Skip to content

Commit f6ff107

Browse files
przemyslaw-wlodekprzemyslaw-wlodek
committed
[DDW-409] Use old Mnemonic Input for wallet verification feature (wallet settings)
1 parent ef0e2b9 commit f6ff107

File tree

6 files changed

+79
-30
lines changed

6 files changed

+79
-30
lines changed

‎source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep2Dialog.tsx‎

Lines changed: 50 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
import React, { Component } from 'react';
22
import { observer } from 'mobx-react';
3+
import { Autocomplete } from 'react-polymorph/lib/components/Autocomplete';
4+
import { AutocompleteSkin } from 'react-polymorph/lib/skins/simple/AutocompleteSkin';
35
import { defineMessages, intlShape } from 'react-intl';
46
import vjf from 'mobx-react-form/lib/validators/VJF';
57
import suggestedMnemonics from '../../../../../common/config/crypto/valid-words.en';
68
import { isValidMnemonic } from '../../../../../common/config/crypto/decrypt';
79
import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
8-
import { validateMnemonics } from '../../../utils/validations';
10+
import {
11+
INCOMPLETE_MNEMONIC_MARKER,
12+
validateMnemonics,
13+
} from '../../../utils/validations';
914
import DialogCloseButton from '../../widgets/DialogCloseButton';
1015
import Dialog from '../../widgets/Dialog';
1116
import styles from './WalletRecoveryPhraseStepDialogs.scss';
12-
import { MnemonicInput } from '../mnemonic-input';
17+
import globalMessages from '../../../i18n/global-messages';
1318

1419
export const messages = defineMessages({
1520
recoveryPhraseStep2Title: {
@@ -35,6 +40,12 @@ export const messages = defineMessages({
3540
defaultMessage: '!!!Verify',
3641
description: 'Label for the recoveryPhraseStep2Button on wallet settings.',
3742
},
43+
recoveryPhraseInputPlaceholder: {
44+
id: 'wallet.settings.recoveryPhraseInputPlaceholder',
45+
defaultMessage: '!!!Enter word #{wordNumber}',
46+
description:
47+
'Placeholder "Enter word #{wordNumber}" for the recovery phrase input on the verification dialog.',
48+
},
3849
recoveryPhraseNoResults: {
3950
id: 'wallet.settings.recoveryPhraseInputNoResults',
4051
defaultMessage: '!!!No results',
@@ -124,7 +135,7 @@ class WalletRecoveryPhraseStep2Dialog extends Component<Props, State> {
124135
(Array.isArray(expectedWordCount)
125136
? expectedWordCount.includes(enteredWordCount)
126137
: enteredWordCount === expectedWordCount);
127-
const { reset, ...mnemonicInputProps } = recoveryPhraseField.bind();
138+
// const { reset, ...mnemonicInputProps } = recoveryPhraseField.bind();
128139
const actions = [
129140
{
130141
className: isVerifying ? styles.isVerifying : null,
@@ -150,13 +161,43 @@ class WalletRecoveryPhraseStep2Dialog extends Component<Props, State> {
150161
<div className={styles.subtitle}>
151162
<p>{intl.formatMessage(messages.recoveryPhraseStep2Description)}</p>
152163
</div>
153-
<MnemonicInput
154-
{...mnemonicInputProps}
164+
{/* TODO https://input-output.atlassian.net/browse/DDW-1119 */}
165+
<Autocomplete
166+
{...recoveryPhraseField.bind()}
155167
label={intl.formatMessage(messages.recoveryPhraseStep2Subtitle)}
156-
availableWords={suggestedMnemonics}
157-
wordCount={maxSelections}
158-
error={recoveryPhraseField.error}
159-
reset={form.resetting}
168+
placeholder={intl.formatMessage(
169+
messages.recoveryPhraseInputPlaceholder,
170+
{
171+
wordNumber: enteredWordCount + 1,
172+
}
173+
)}
174+
options={suggestedMnemonics}
175+
requiredSelections={
176+
Array.isArray(expectedWordCount)
177+
? expectedWordCount
178+
: [expectedWordCount]
179+
}
180+
requiredSelectionsInfo={(required, actual) =>
181+
Array.isArray(expectedWordCount)
182+
? intl.formatMessage(globalMessages.unknownMnemonicWordCount, {
183+
actual,
184+
})
185+
: intl.formatMessage(globalMessages.knownMnemonicWordCount, {
186+
actual,
187+
required,
188+
})
189+
}
190+
maxSelections={maxSelections}
191+
error={
192+
recoveryPhraseField.error !== INCOMPLETE_MNEMONIC_MARKER &&
193+
recoveryPhraseField.error
194+
}
195+
maxVisibleOptions={5}
196+
noResultsMessage={intl.formatMessage(
197+
messages.recoveryPhraseNoResults
198+
)}
199+
skin={AutocompleteSkin}
200+
optionHeight={50}
160201
/>
161202
</Dialog>
162203
);

‎source/renderer/app/components/wallet/settings/WalletSettings.tsx‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -334,27 +334,23 @@ class WalletSettings extends Component<Props, State> {
334334
/>
335335
)}
336336

337-
{/* TODO This feature is temporarily disabled and waiting for the new design.
338-
At this point we don't know how many words are required for the recovery phrase,
339-
to pass it down to the Mnemonic Input. We will probably need to introduce
340-
the same picker that's being used during wallet restoration. */}
341-
{/* {shouldDisplayRecoveryPhrase && ( */}
342-
{/* <WalletRecoveryPhraseVerificationWidget */}
343-
{/* onVerify={onVerifyRecoveryPhrase} */}
344-
{/* recoveryPhraseVerificationDate={recoveryPhraseVerificationDate} */}
345-
{/* // @ts-ignore ts-migrate(2769) FIXME: No overload matches this call. */}
346-
{/* recoveryPhraseVerificationStatus={ */}
347-
{/* recoveryPhraseVerificationStatus */}
348-
{/* } */}
349-
{/* recoveryPhraseVerificationStatusType={ */}
350-
{/* recoveryPhraseVerificationStatusType */}
351-
{/* } */}
352-
{/* creationDate={creationDate} */}
353-
{/* locale={locale} */}
354-
{/* wordCount={wordCount} */}
355-
{/* isLegacy={isLegacy} */}
356-
{/* /> */}
357-
{/* )} */}
337+
{shouldDisplayRecoveryPhrase && (
338+
<WalletRecoveryPhraseVerificationWidget
339+
onVerify={onVerifyRecoveryPhrase}
340+
recoveryPhraseVerificationDate={recoveryPhraseVerificationDate}
341+
// @ts-ignore ts-migrate(2769) FIXME: No overload matches this call.
342+
recoveryPhraseVerificationStatus={
343+
recoveryPhraseVerificationStatus
344+
}
345+
recoveryPhraseVerificationStatusType={
346+
recoveryPhraseVerificationStatusType
347+
}
348+
creationDate={creationDate}
349+
locale={locale}
350+
wordCount={wordCount}
351+
isLegacy={isLegacy}
352+
/>
353+
)}
358354

359355
{error && <p className={styles.error}>{intl.formatMessage(error)}</p>}
360356
</BorderedBox>

‎source/renderer/app/i18n/locales/defaultMessages.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5846,6 +5846,11 @@
58465846
"description": "Label for the recoveryPhraseStep2Button on wallet settings.",
58475847
"id": "wallet.settings.recoveryPhraseStep2Button"
58485848
},
5849+
{
5850+
"defaultMessage": "!!!Enter word #{wordNumber}",
5851+
"description": "Placeholder \"Enter word #{wordNumber}\" for the recovery phrase input on the verification dialog.",
5852+
"id": "wallet.settings.recoveryPhraseInputPlaceholder"
5853+
},
58495854
{
58505855
"defaultMessage": "!!!No results",
58515856
"description": "\"No results\" message for the recovery phrase input search results.",

‎source/renderer/app/i18n/locales/en-US.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1108,6 +1108,7 @@
11081108
"wallet.settings.passwordLastUpdated": "Last updated {lastUpdated}",
11091109
"wallet.settings.passwordNotSet": "You still don't have password",
11101110
"wallet.settings.recoveryPhraseInputNoResults": "No results",
1111+
"wallet.settings.recoveryPhraseInputPlaceholder": "Enter word #{wordNumber}",
11111112
"wallet.settings.recoveryPhraseStep1Button": "Continue",
11121113
"wallet.settings.recoveryPhraseStep1Paragraph1": "To verify that you have the correct recovery phrase for this wallet, you can enter it on the following screen.",
11131114
"wallet.settings.recoveryPhraseStep1Paragraph2": "Are you being watched? Please make sure that nobody can see your screen while you are entering your wallet recovery phrase.",

‎source/renderer/app/i18n/locales/ja-JP.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1108,6 +1108,7 @@
11081108
"wallet.settings.passwordLastUpdated": "最終更新 {lastUpdated}",
11091109
"wallet.settings.passwordNotSet": "パスワードが設定されていません",
11101110
"wallet.settings.recoveryPhraseInputNoResults": "該当するフレーズは見つかりませんでした",
1111+
"wallet.settings.recoveryPhraseInputPlaceholder": "!!!Enter word #{wordNumber}",
11111112
"wallet.settings.recoveryPhraseStep1Button": "続ける",
11121113
"wallet.settings.recoveryPhraseStep1Paragraph1": "お持ちの復元フレーズが正しいかどうか確認するには、次の画面で復元フレーズを入力してください。",
11131114
"wallet.settings.recoveryPhraseStep1Paragraph2": "誰かに見られていませんか。ウォレット復元フレーズを入力する際には、画面を誰にも見られないように注意してください。",

‎translations/messages.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5846,6 +5846,11 @@
58465846
"description": "Label for the recoveryPhraseStep2Button on wallet settings.",
58475847
"id": "wallet.settings.recoveryPhraseStep2Button"
58485848
},
5849+
{
5850+
"defaultMessage": "!!!Enter word #{wordNumber}",
5851+
"description": "Placeholder \"Enter word #{wordNumber}\" for the recovery phrase input on the verification dialog.",
5852+
"id": "wallet.settings.recoveryPhraseInputPlaceholder"
5853+
},
58495854
{
58505855
"defaultMessage": "!!!No results",
58515856
"description": "\"No results\" message for the recovery phrase input search results.",

0 commit comments

Comments
 (0)