Display error for words in wrong order

Emurgo · Mar 16, 2023 · c19a366 · c19a366
1 parent 488cee9
commit c19a366
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/packages/yoroi-extension/app/components/wallet/create-wallet/VerifyRecoveryPhraseStep.js b/packages/yoroi-extension/app/components/wallet/create-wallet/VerifyRecoveryPhraseStep.js
@@ -3,7 +3,7 @@ import { Node, ComponentType, useState } from 'react';
 import { defineMessages, injectIntl, FormattedHTMLMessage } from 'react-intl';
 import { observer } from 'mobx-react';
 import type { $npm$ReactIntl$IntlShape } from 'react-intl';
-import { Stack, Box, Typography, Grid } from '@mui/material'
+import { Stack, Box, Typography } from '@mui/material'
 import StepController from './StepController';
 import { CREATE_WALLET_SETPS } from './steps';
 import styles from './VerifyRecoveryPhraseStep.scss';
@@ -14,6 +14,10 @@ const messages: * = defineMessages({
     id: 'wallet.create.thirdStep.description',
     defaultMessage: '!!!<strong>Select</strong> each word in <strong>the correct order</strong> to confirm your recovery phrase.',
   },
+  incorrectOrder: {
+    id: 'wallet.create.thirdStep.incorrectOrder',
+    defineMessages: '!!!Incorrect order. Try again',
+  }
 });
 
 type Intl = {|
@@ -25,25 +29,44 @@ type Props = {|
 |};
 
 function VerifyRecoveryPhraseStep(props: Props & Intl): Node {
-  const { recoveryPhrase, setCurrentStep } = props;
+  const { intl, recoveryPhrase, setCurrentStep } = props;
   if (!recoveryPhrase) throw new Error('Missing recovery phrase, should never happen');
 
   const [enteredRecoveryPhrase, setRecoveryPhrase] = useState<Array<string>>(
     new Array(recoveryPhrase.length).fill(null),
   );
+  const [wrongWord, setWrongWord] = useState<string | null>(null)
 
   function onAddWord(word: string, idx: number): void {
+    if (isWordAdded(word)) return;
+
+    const nextWordIdx = enteredRecoveryPhrase.findIndex(w => w === null);
+    if (nextWordIdx === -1) throw new Error('Entered recovery phrase words list is full');
+
+    const isInCorrectOrder = recoveryPhrase[nextWordIdx] === word;
+    if (!isInCorrectOrder) {
+      return setWrongWord(word);
+    };
+
     setRecoveryPhrase(prev => {
       const copy = [...prev];
       copy[idx] = word;
       return copy;
     });
+    setWrongWord(null);
   };
 
   function isWordAdded(word) {
     return enteredRecoveryPhrase.some(w => w === word);
   }
 
+  const isValidPhrase = !recoveryPhrase.some((word, idx) => word !== enteredRecoveryPhrase[idx]);
+
+  function goNextStepCallback() {
+    if (!isValidPhrase) return;
+    return () => setCurrentStep(CREATE_WALLET_SETPS.ADD_WALLET_DETAILS)
+  };
+
   return (
     <Stack alignItems='center' justifyContent='center' className={styles.component}>
       <Stack direction='column' alignItems='left' justifyContent='center' maxWidth='690px'>
@@ -130,12 +153,13 @@ function VerifyRecoveryPhraseStep(props: Props & Intl): Node {
                 key={word}
                 className={classnames(styles.wordChip, {
                   [styles.wordAdded]: isWordAdded(word),
+                  [styles.wrongWord]: wrongWord === word,
                 })}
                 onClick={() => onAddWord(word, idx)}
               >
                 <Typography
                   sx={{
-                  width: '129px',
+                  width: '127px',
                   whiteSpace: 'nowrap',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
@@ -151,13 +175,17 @@ function VerifyRecoveryPhraseStep(props: Props & Intl): Node {
           })}
         </Stack>
 
+        <Typography variant='body2' color='error.100' height='20px' mt='16px'>
+          {wrongWord !== null && intl.formatMessage(messages.incorrectOrder)}
+        </Typography>
+
         <StepController
-          goNext={() => setCurrentStep(CREATE_WALLET_SETPS.ADD_WALLET_DETAILS)}
+          goNext={goNextStepCallback()}
           goBack={() => setCurrentStep(CREATE_WALLET_SETPS.SAVE_RECOVERY_PHRASE)}
         />
       </Stack>
     </Stack>
   );
 }
 
-export default (observer(VerifyRecoveryPhraseStep) : ComponentType<Props>);
+export default (injectIntl(observer(VerifyRecoveryPhraseStep)) : ComponentType<Props>);
diff --git a/packages/yoroi-extension/app/components/wallet/create-wallet/VerifyRecoveryPhraseStep.scss b/packages/yoroi-extension/app/components/wallet/create-wallet/VerifyRecoveryPhraseStep.scss
@@ -20,15 +20,22 @@
         height: 40px;
         cursor: pointer;
 
-        border: double 2px transparent;
+        border: double 2px var(--yoroi-palette-gray-50);
         background-image: linear-gradient(269deg, #E4E8F7 0%, #C6F7ED 99%), 
                           linear-gradient(180deg, #E4E8F7 0%, #C6F7F7 100%);
         background-origin: border-box;
         background-clip: content-box, border-box;
 
         &.wordAdded {
+            border: double 2px transparent;
             background-image: linear-gradient(0deg, var(--yoroi-palette-gray-50), var(--yoroi-palette-gray-50)), 
                               linear-gradient(180deg, #E4E8F7 0%, #C6F7F7 100%);
+            cursor: not-allowed;
+        }
+
+        &.wrongWord {
+            border: 2px solid #FF1351;
+            background: transparent;
         }
     }
 }
diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json
@@ -446,6 +446,7 @@
   "wallet.create.secondStep.showRecoveryPhraseBtn": "Show recovery phrase",
   "wallet.create.thirdStep": "Verify recovery phrase",
   "wallet.create.thirdStep.description": "<strong>Select</strong> each word in <strong>the correct order</strong> to confirm your recovery phrase.",
+  "wallet.create.thirdStep.incorrectOrder": "Incorrect order. Try again",
   "wallet.create.forthStep": "Add wallet details",
   "wallet.create.page.title": "Create a Wallet",
   "wallet.create.dialog.saveRecoveryPhrase.title": "Read this before saving your recovery phrase",