Include words numbers on recovery phrase text UI

locales/resources/en.json

@@ -18,7 +18,7 @@
     "pasteFromClipboard": "Paste from clipboard",
     "pastedFromClipboard": "Pasted",
     "recoveryPhrase": {
-      "writeDownInstructions": "Writing it down manually offers greater security compared to copying and pasting the recovery phrase."      
+      "writeDownInstructions": "Writing it down manually offers greater security compared to copying and pasting the recovery phrase."
     }
   },
   "fallbackScreens": {

src/modules/Auth/components/RecoveryPhraseQuiz/RecoveryPhraseQuiz.js

@@ -47,7 +47,7 @@ export default function RecoveryPhraseQuiz({
 
   const generateTest = useCallback(() => {
     const words = recoveryPhrase.match(/\w+/g);
-    const _missing = chooseRandomWords(2, words);
+    const _missing = chooseRandomWords(2, words).sort();
 
     setMissing(_missing);
     setVisibleOptions(0);
@@ -89,7 +89,7 @@ export default function RecoveryPhraseQuiz({
       }
       const finalAnswers = _answers.map((item) => ({
         value: item.value,
-        style: styles.noBorderBottom,
+        style: isCorrect ? styles.placeHolderCorrect : styles.placeHolderIncorrect,
         textStyle: isCorrect ? styles.labelCorrect : styles.labelIncorrect,
       }));
       setAnswers(finalAnswers);
@@ -115,32 +115,54 @@ export default function RecoveryPhraseQuiz({
 
   const generatePlaceholder = (index, optionIndex, value) => {
     const style = visibleOptions === optionIndex ? null : styles.deActivePlaceholder;
+
     return (
-      <Button
-        noPredefinedStyle
-        testID={`recoveryPhrasePlaceholderFor-${value}`}
-        key={index}
-        title={answers[optionIndex].value}
-        onClick={() => toggleOptions(optionIndex)}
-        textStyle={[styles.label, styles.theme.label, answers[optionIndex].textStyle]}
-        style={[styles.placeholder, style, answers[optionIndex].style]}
-      />
+      <View style={styles.recoveryPhraseWordContainer}>
+        <P
+          style={
+            visibleOptions === optionIndex
+              ? styles.theme.recoveryPhraseSelectedIndexText
+              : styles.theme.recoveryPhraseIndexText
+          }
+        >
+          {index + 1}.
+        </P>
+
+        <Button
+          noPredefinedStyle
+          testID={`recoveryPhrasePlaceholderFor-${value}`}
+          key={index}
+          onClick={() => toggleOptions(optionIndex)}
+          textStyle={[styles.label, styles.theme.label, answers[optionIndex].textStyle]}
+          style={[styles.placeholder, style, answers[optionIndex].style]}
+        >
+          {answers[optionIndex].value}
+        </Button>
+      </View>
     );
   };
 
   const renderRecoveryPhrase = () => {
     const phrase = recoveryPhrase.split(' ');
+
     return missing.length > 0
       ? phrase.map((val, index) => {
-          const optionIndex = missing.indexOf(index);
+          const sortedMissing = missing.sort();
+          const optionIndex = sortedMissing.indexOf(index);
+
           const element =
             optionIndex >= 0 ? (
               generatePlaceholder(index, optionIndex, val)
             ) : (
-              <P key={index} style={[styles.recoveryPhraseText, styles.theme.recoveryPhraseText]}>
-                {val}
-              </P>
+              <View key={index} style={styles.recoveryPhraseWordContainer}>
+                <P style={[styles.recoveryPhraseText, styles.theme.recoveryPhraseIndexText]}>
+                  {index + 1}.
+                </P>
+
+                <P style={[styles.recoveryPhraseText, styles.theme.recoveryPhraseText]}>{val} </P>
+              </View>
             );
+
           return element;
         })
       : null;

src/modules/Auth/components/RecoveryPhraseQuiz/RecoveryPhraseQuiz.styles.js

@@ -38,9 +38,14 @@ export default function getRecoveryPhraseQuizStyles() {
         justifyContent: 'center',
         marginBottom: 32,
       },
+      recoveryPhraseWordContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
       recoveryPhraseText: {
+        lineHeight: 33,
         fontSize: fonts.size.base,
-        margin: 8,
         fontFamily: fonts.family.recoveryPhraseText,
       },
       placeholder: {
@@ -53,20 +58,24 @@ export default function getRecoveryPhraseQuizStyles() {
         alignItems: 'center',
         fontFamily: fonts.family.recoveryPhraseText,
         fontSize: fonts.size.base,
+        borderBottomColor: colors.light.ultramarineBlue,
       },
       deActivePlaceholder: {
         borderBottomColor: colors.light.ghost,
       },
-      noBorderBottom: {
-        borderBottomWidth: 0,
+      placeHolderCorrect: {
+        borderBottomColor: colors.light.ufoGreen,
+      },
+      placeHolderIncorrect: {
+        borderBottomColor: colors.light.burntSieanna,
       },
       selectedPlaceholder: {
         borderBottomColor: colors.light.ultramarineBlue,
       },
       filledOutPlaceholder: {
-        justifyContent: 'center',
+        justifyContent: 'flex-start',
         alignItems: 'center',
-        borderBottomWidth: 0,
+        borderBottomColor: colors.light.ultramarineBlue,
       },
       optionsContainer: {
         flexDirection: 'row',
@@ -127,6 +136,12 @@ export default function getRecoveryPhraseQuizStyles() {
       label: {
         color: colors.light.zodiacBlue,
       },
+      recoveryPhraseIndexText: {
+        color: colors.light.smoothGray,
+      },
+      recoveryPhraseSelectedIndexText: {
+        color: colors.light.ultramarineBlue,
+      },
     },
     [themes.dark]: {
       container: {
@@ -144,6 +159,12 @@ export default function getRecoveryPhraseQuizStyles() {
       label: {
         color: colors.dark.white,
       },
+      recoveryPhraseIndexText: {
+        color: colors.light.mountainMist,
+      },
+      recoveryPhraseSelectedIndexText: {
+        color: colors.light.ultramarineBlue,
+      },
     },
   };
 }

src/modules/Auth/components/RegisterForm/RecoveryPhraseSafeKeepingScreen/RecoveryPhraseSafeKeepingScreen.js

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { View, SafeAreaView } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
 import i18next from 'i18next';
 
 import { useTheme } from 'contexts/ThemeContext';
@@ -42,30 +41,37 @@ export default function RecoveryPhraseSafeKeepingScreen({
           length={length}
         />
       )}
-      <ScrollView>
-        <View style={[styles.body]}>
-          <H4 style={[styles.title, styles.theme.title]}>
-            {i18next.t('auth.register.safeKeeping.title')}
-          </H4>
+      <View style={[styles.body]}>
+        <H4 style={[styles.title, styles.theme.title]}>
+          {i18next.t('auth.register.safeKeeping.title')}
+        </H4>
 
-          <P style={[styles.description, styles.theme.description]}>
-            {i18next.t('auth.register.safeKeeping.description')}
-          </P>
+        <P style={[styles.description, styles.theme.description]}>
+          {i18next.t('auth.register.safeKeeping.description')}
+        </P>
 
-          <View style={styles.recoveryPhraseContainer}>
-            <RecoveryPhraseSecurityAdviceCard style={{ container: styles.securityAdviceCard }} />
+        <View style={styles.recoveryPhraseContainer}>
+          <RecoveryPhraseSecurityAdviceCard style={{ container: styles.securityAdviceCard }} />
 
-            <P
-              style={[styles.recoveryPhraseText, styles.theme.recoveryPhraseText]}
-              testID="recoveryPhraseText"
-            >
-              {recoveryPhrase.replace(/\s+/g, '  ')}
-            </P>
+          <View style={styles.recoveryPhraseWordsContainer}>
+            {recoveryPhrase.split(' ').map((word, index) => (
+              <View
+                key={index}
+                testID="recoveryPhraseText"
+                style={styles.recoveryPhraseWordContainer}
+              >
+                <P style={[styles.recoveryPhraseText, styles.theme.recoveryPhraseIndexText]}>
+                  {index + 1}.
+                </P>
 
-            <CopyRecoveryPhraseToClipboard recoveryPhrase={recoveryPhrase} />
+                <P style={[styles.recoveryPhraseText, styles.theme.recoveryPhraseText]}>{word} </P>
+              </View>
+            ))}
           </View>
+
+          <CopyRecoveryPhraseToClipboard recoveryPhrase={recoveryPhrase} />
         </View>
-      </ScrollView>
+      </View>
 
       <View style={[styles.footer]}>
         <View style={[styles.switchContainer]}>

src/modules/Auth/components/RegisterForm/RecoveryPhraseSafeKeepingScreen/RecoveryPhraseSafeKeepingScreen.styles.js

@@ -31,12 +31,21 @@ export default function getRegisterSafeKeepingStyles() {
         justifyContent: 'space-between',
         alignItems: 'center',
       },
+      recoveryPhraseWordsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        marginBottom: 8,
+      },
+      recoveryPhraseWordContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
       recoveryPhraseText: {
         lineHeight: 33,
         fontSize: fonts.size.base,
         fontFamily: fonts.family.recoveryPhraseText,
-        textAlign: 'center',
-        marginBottom: 24,
       },
       copyContainer: {
         alignItems: 'center',
@@ -79,6 +88,9 @@ export default function getRegisterSafeKeepingStyles() {
       recoveryPhraseText: {
         color: colors.light.zodiacBlue,
       },
+      recoveryPhraseIndexText: {
+        color: colors.light.smoothGray,
+      },
     },
     [themes.dark]: {
       container: {
@@ -93,6 +105,9 @@ export default function getRegisterSafeKeepingStyles() {
       recoveryPhraseText: {
         color: colors.dark.white,
       },
+      recoveryPhraseIndexText: {
+        color: colors.light.mountainMist,
+      },
     },
   };
 }

src/modules/Settings/components/BackupRecoveryPhrase/components/CopyRecoveryPhrase.js

@@ -11,9 +11,9 @@ import { PrimaryButton } from 'components/shared/toolBox/button';
 import CopyRecoveryPhraseToClipboard from 'components/shared/CopyRecoveryPhraseToClipboard/CopyRecoveryPhraseToClipboard';
 import { P, A } from 'components/shared/toolBox/typography';
 import HeaderBackButton from 'components/navigation/headerBackButton';
+import RecoveryPhraseSecurityAdviceCard from 'modules/Auth/components/RecoveryPhraseSecurityAdviceCard/RecoveryPhraseSecurityAdviceCard';
 
 import { getCopyRecoveryPhraseStyles } from './CopyRecoveryPhrase.styles';
-import RecoveryPhraseSecurityAdviceCard from '../../../../Auth/components/RecoveryPhraseSecurityAdviceCard/RecoveryPhraseSecurityAdviceCard';
 
 const isSmallScreen = deviceHeight() < SCREEN_HEIGHTS.MD;
 const qrCodeSize = deviceWidth() * (isSmallScreen ? 0.64 : 0.72);