[DDW-548] Update recovery phrase input placeholder (#2334)

* [DDW-548]: Update receovery phrase input placeholder

* [DDW-548]: Update changelog

* [DDW-548]: Update receovery phrase input placeholder

* [DDW-548]: Update recovery phrase input placeholder on verification dialog

Co-authored-by: Nikola Glumac <niglumac@gmail.com>

Author: Yakov Karavelov

CHANGELOG.md

@@ -13,7 +13,8 @@ Changelog
 
 ### Chores
 
-- Adjusted sorting on rewards ([PR 2333](https://github.com/input-output-hk/daedalus/pull/2333))
+- Updated recovery phrase entry ([PR 2334](https://github.com/input-output-hk/daedalus/pull/2334))
+- Adjusted sorting of table values on the "Rewards" screen ([PR 2333](https://github.com/input-output-hk/daedalus/pull/2333))
 - Fixed error thrown when closing delegation wizard while transaction fees are being calculated ([PR 2330](https://github.com/input-output-hk/daedalus/pull/2330))
 - Fixed number format for syncing percentage and stake pools count ([PR 2313](https://github.com/input-output-hk/daedalus/pull/2313))
 - Updated `cardano-wallet` to version `2021-01-28` and `cardano-node` to version `1.25.1` ([PR 2270](https://github.com/input-output-hk/daedalus/pull/2270))

source/renderer/app/components/wallet/WalletRestoreDialog.js

@@ -34,7 +34,6 @@ import {
 } from '../../config/walletsConfig';
 import {
   LEGACY_WALLET_RECOVERY_PHRASE_WORD_COUNT,
-  PAPER_WALLET_RECOVERY_PHRASE_WORD_COUNT,
   WALLET_RECOVERY_PHRASE_WORD_COUNT,
   YOROI_WALLET_RECOVERY_PHRASE_WORD_COUNT,
 } from '../../config/cryptoConfig';
@@ -176,6 +175,12 @@ const messages = defineMessages({
     description:
       'Hint "Enter your 27-word paper wallet recovery phrase." for the recovery phrase input on the wallet restore dialog.',
   },
+  shieldedRecoveryPhraseInputPlaceholder: {
+    id: 'wallet.restore.dialog.shielded.recovery.phrase.input.placeholder',
+    defaultMessage: '!!!Enter word #{wordNumber}',
+    description:
+      'Placeholder "Enter word #" for the recovery phrase input on the wallet restore dialog.',
+  },
   restorePaperWalletButtonLabel: {
     id: 'wallet.restore.dialog.paper.wallet.button.label',
     defaultMessage: '!!!Restore paper wallet',
@@ -387,9 +392,7 @@ export default class WalletRestoreDialog extends Component<Props, State> {
     const label = this.isCertificate()
       ? this.context.intl.formatMessage(messages.restorePaperWalletButtonLabel)
       : this.context.intl.formatMessage(messages.importButtonLabel);
-
     const buttonLabel = !isSubmitting ? label : <LoadingSpinner />;
-
     const actions = [
       {
         label: buttonLabel,
@@ -576,9 +579,12 @@ export default class WalletRestoreDialog extends Component<Props, State> {
           placeholder={
             !this.isCertificate()
               ? intl.formatMessage(messages.recoveryPhraseInputHint)
-              : intl.formatMessage(messages.shieldedRecoveryPhraseInputHint, {
-                  numberOfWords: PAPER_WALLET_RECOVERY_PHRASE_WORD_COUNT,
-                })
+              : intl.formatMessage(
+                  messages.shieldedRecoveryPhraseInputPlaceholder,
+                  {
+                    wordNumber: recoveryPhraseField.value.length + 1,
+                  }
+                )
           }
           options={suggestedMnemonics}
           requiredSelections={[RECOVERY_PHRASE_WORD_COUNT_OPTIONS[walletType]]}

source/renderer/app/components/wallet/backup-recovery/WalletRecoveryPhraseEntryDialog.js

@@ -42,6 +42,12 @@ const messages = defineMessages({
   recoveryPhraseInputHint: {
     id: 'wallet.backup.recovery.phrase.entry.dialog.recoveryPhraseInputHint',
     defaultMessage: '!!!Enter your {numberOfWords}-word recovery phrase',
+    description: 'Placeholder hint for the mnemonics autocomplete.',
+  },
+  recoveryPhraseInputPlaceholder: {
+    id:
+      'wallet.backup.recovery.phrase.entry.dialog.recoveryPhraseInputPlaceholder',
+    defaultMessage: '!!!Enter word #{wordNumber}',
     description: 'Placeholder for the mnemonics autocomplete.',
   },
   recoveryPhraseNoResults: {
@@ -169,7 +175,6 @@ export default class WalletRecoveryPhraseEntryDialog extends Component<Props> {
     ]);
     const wordCount = WALLET_RECOVERY_PHRASE_WORD_COUNT;
     const enteredPhraseString = enteredPhrase.join(' ');
-
     const buttonLabel = !isSubmitting ? (
       intl.formatMessage(messages.buttonLabelConfirm)
     ) : (
@@ -212,9 +217,9 @@ export default class WalletRecoveryPhraseEntryDialog extends Component<Props> {
               {...recoveryPhraseField.bind()}
               label={intl.formatMessage(messages.recoveryPhraseInputLabel)}
               placeholder={intl.formatMessage(
-                messages.recoveryPhraseInputHint,
+                messages.recoveryPhraseInputPlaceholder,
                 {
-                  numberOfWords: wordCount,
+                  wordNumber: enteredPhrase.length + 1,
                 }
               )}
               options={suggestedMnemonics}

source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep2Dialog.js

@@ -41,11 +41,11 @@ export const messages = defineMessages({
     defaultMessage: '!!!Verify',
     description: 'Label for the recoveryPhraseStep2Button on wallet settings.',
   },
-  recoveryPhraseInputHint: {
-    id: 'wallet.settings.recoveryPhraseInputHint',
-    defaultMessage: '!!!Enter recovery phrase',
+  recoveryPhraseInputPlaceholder: {
+    id: 'wallet.settings.recoveryPhraseInputPlaceholder',
+    defaultMessage: '!!!Enter word #{wordNumber}',
     description:
-      'Hint "Enter recovery phrase" for the recovery phrase input on the wallet restore dialog.',
+      'Placeholder "Enter word #{wordNumber}" for the recovery phrase input on the verification dialog.',
   },
   recoveryPhraseNoResults: {
     id: 'wallet.settings.recoveryPhraseInputNoResults',
@@ -155,11 +155,15 @@ export default class WalletRecoveryPhraseStep2Dialog extends Component<
         <div className={styles.subtitle}>
           <p>{intl.formatMessage(messages.recoveryPhraseStep2Description)}</p>
         </div>
-
         <Autocomplete
           {...recoveryPhraseField.bind()}
           label={intl.formatMessage(messages.recoveryPhraseStep2Subtitle)}
-          placeholder={intl.formatMessage(messages.recoveryPhraseInputHint)}
+          placeholder={intl.formatMessage(
+            messages.recoveryPhraseInputPlaceholder,
+            {
+              wordNumber: enteredWordCount + 1,
+            }
+          )}
           options={suggestedMnemonics}
           requiredSelections={
             Array.isArray(expectedWordCount)

source/renderer/app/components/wallet/wallet-restore/MnemonicsDialog.js

@@ -23,7 +23,7 @@ import type {
 const messages = defineMessages({
   autocompletePlaceholder: {
     id: 'wallet.restore.dialog.step.mnemonics.autocomplete.placeholder',
-    defaultMessage: '!!!Enter your {numberOfWords}-word recovery phrase',
+    defaultMessage: '!!!Enter word #{wordNumber}',
     description: 'Placeholder for the mnemonics autocomplete.',
   },
   autocompleteMultiLengthPhrase: {
@@ -138,7 +138,7 @@ export default class MnemonicsDialog extends Component<Props> {
               Array.isArray(expectedWordCount)
                 ? intl.formatMessage(messages.autocompleteMultiLengthPhrase)
                 : intl.formatMessage(messages.autocompletePlaceholder, {
-                    numberOfWords: expectedWordCount,
+                    wordNumber: mnemonics.length + 1,
                   })
             }
             options={validWords}