Merge pull request #646 from NastiaS/minorFixesBranch

wip selectPIN onboarding skeleton for 4 screens, awaiting wording

src/components/Onboarding/steps/GenuineCheck.js

@@ -156,7 +156,6 @@ class GenuineCheck extends PureComponent<StepProps, State> {
     const { nextStep, prevStep, t, onboarding } = this.props
     const { genuine } = onboarding
     const { cachedPinStepButton, cachedRecoveryStepButton, isGenuineCheckModalOpened } = this.state
-
     if (genuine.displayErrorScreen) {
       return this.renderGenuineFail()
     }
@@ -165,18 +164,21 @@ class GenuineCheck extends PureComponent<StepProps, State> {
       <FixedTopContainer>
         <StepContainerInner>
           <Title>{t('onboarding:genuineCheck.title')}</Title>
-          {onboarding.isLedgerNano ? (
-            <Description>{t('onboarding:genuineCheck.descNano')}</Description>
+          {onboarding.flowType === 'restoreDevice' ? (
+            <Description>{t('onboarding:genuineCheck.descRestore')}</Description>
           ) : (
-            <Description>{t('onboarding:genuineCheck.descBlue')}</Description>
+            <Description>
+              {onboarding.isLedgerNano
+                ? t('onboarding:genuineCheck.descNano')
+                : t('onboarding:genuineCheck.descBlue')}
+            </Description>
           )}
-
           <Box mt={5}>
             <CardWrapper>
               <Box justify="center">
                 <Box horizontal>
                   <IconOptionRow>{'1.'}</IconOptionRow>
-                  <CardTitle>{t('onboarding:genuineCheck.steps.step1.title')}</CardTitle>
+                  <CardTitle>{t('onboarding:genuineCheck.step1.title')}</CardTitle>
                 </Box>
               </Box>
               <Box justify="center">
@@ -195,7 +197,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                   <IconOptionRow color={!genuine.pinStepPass ? 'grey' : 'wallet'}>
                     {'2.'}
                   </IconOptionRow>
-                  <CardTitle>{t('onboarding:genuineCheck.steps.step2.title')}</CardTitle>
+                  <CardTitle>{t('onboarding:genuineCheck.step2.title')}</CardTitle>
                 </Box>
               </Box>
               <Box justify="center">
@@ -216,7 +218,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                   <IconOptionRow color={!genuine.recoveryStepPass ? 'grey' : 'wallet'}>
                     {'3.'}
                   </IconOptionRow>
-                  <CardTitle>{t('onboarding:genuineCheck.steps.step3.title')}</CardTitle>
+                  <CardTitle>{t('onboarding:genuineCheck.step3.title')}</CardTitle>
                 </Box>
               </Box>
               {genuine.recoveryStepPass && (

src/components/Onboarding/steps/SelectPIN/SelectPINblue.js

@@ -24,17 +24,17 @@ class SelectPIN extends PureComponent<Props, *> {
       {
         key: 'step1',
         icon: <IconOptionRow>{'1.'}</IconOptionRow>,
-        desc: t('onboarding:selectPIN.instructions.ledgerBlue.step1'),
+        desc: t('onboarding:selectPIN.initialize.instructions.blue.step1'),
       },
       {
         key: 'step2',
         icon: <IconOptionRow>{'2.'}</IconOptionRow>,
-        desc: t('onboarding:selectPIN.instructions.ledgerBlue.step2'),
+        desc: t('onboarding:selectPIN.initialize.instructions.blue.step2'),
       },
       {
         key: 'step3',
         icon: <IconOptionRow>{'3.'}</IconOptionRow>,
-        desc: t('onboarding:selectPIN.instructions.ledgerBlue.step3'),
+        desc: t('onboarding:selectPIN.initialize.instructions.blue.step3'),
       },
     ]
 

src/components/Onboarding/steps/SelectPIN/SelectPINnano.js

@@ -24,22 +24,22 @@ class SelectPINnano extends PureComponent<Props, *> {
       {
         key: 'step1',
         icon: <IconOptionRow>{'1.'}</IconOptionRow>,
-        desc: t('onboarding:selectPIN.instructions.ledgerNano.step1'),
+        desc: t('onboarding:selectPIN.initialize.instructions.nano.step1'),
       },
       {
         key: 'step2',
         icon: <IconOptionRow>{'2.'}</IconOptionRow>,
-        desc: t('onboarding:selectPIN.instructions.ledgerNano.step2'),
+        desc: t('onboarding:selectPIN.initialize.instructions.nano.step2'),
       },
       {
         key: 'step3',
         icon: <IconOptionRow>{'3.'}</IconOptionRow>,
-        desc: t('onboarding:selectPIN.instructions.ledgerNano.step3'),
+        desc: t('onboarding:selectPIN.initialize.instructions.nano.step3'),
       },
       {
         key: 'step4',
         icon: <IconOptionRow>{'4.'}</IconOptionRow>,
-        desc: t('onboarding:selectPIN.instructions.ledgerNano.step4'),
+        desc: t('onboarding:selectPIN.initialize.instructions.nano.step4'),
       },
     ]
     const disclaimerNotes = [

src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js

@@ -0,0 +1,77 @@
+// @flow
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+import { colors } from 'styles/theme'
+
+import Box from 'components/base/Box'
+
+import type { T } from 'types/common'
+import IconLedgerBlueSelectPIN from 'icons/illustrations/LedgerBlueSelectPIN'
+
+import IconChevronRight from 'icons/ChevronRight'
+
+import { IconOptionRow, DisclaimerBox, OptionRow, Inner } from '../../helperComponents'
+
+type Props = {
+  t: T,
+}
+
+class SelectPINrestoreBlue extends PureComponent<Props, *> {
+  render() {
+    const { t } = this.props
+
+    const stepsLedgerBlue = [
+      {
+        key: 'step1',
+        icon: <IconOptionRow>{'1.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.restore.instructions.blue.step1'),
+      },
+      {
+        key: 'step2',
+        icon: <IconOptionRow>{'2.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.restore.instructions.blue.step2'),
+      },
+      {
+        key: 'step3',
+        icon: <IconOptionRow>{'3.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.restore.instructions.blue.step3'),
+      },
+    ]
+
+    const disclaimerNotes = [
+      {
+        key: 'note1',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note1'),
+      },
+      {
+        key: 'note2',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note2'),
+      },
+      {
+        key: 'note3',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note3'),
+      },
+    ]
+
+    return (
+      <Box align="center">
+        <Inner style={{ width: 550 }}>
+          <Box style={{ width: 180, justifyContent: 'center', alignItems: 'center' }}>
+            <IconLedgerBlueSelectPIN />
+          </Box>
+          <Box>
+            <Box shrink grow flow={4}>
+              {stepsLedgerBlue.map(step => <OptionRow key={step.key} step={step} />)}
+            </Box>
+          </Box>
+        </Inner>
+        <DisclaimerBox mt={6} disclaimerNotes={disclaimerNotes} />
+      </Box>
+    )
+  }
+}
+
+export default translate()(SelectPINrestoreBlue)

src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js

@@ -0,0 +1,77 @@
+// @flow
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+import { colors } from 'styles/theme'
+
+import Box from 'components/base/Box'
+
+import type { T } from 'types/common'
+import IconLedgerNanoSelectPIN from 'icons/illustrations/LedgerNanoSelectPIN'
+
+import IconChevronRight from 'icons/ChevronRight'
+
+import { IconOptionRow, DisclaimerBox, OptionRow, Inner } from '../../helperComponents'
+
+type Props = {
+  t: T,
+}
+
+class SelectPINrestoreNano extends PureComponent<Props, *> {
+  render() {
+    const { t } = this.props
+
+    const stepsLedgerNano = [
+      {
+        key: 'step1',
+        icon: <IconOptionRow>{'1.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.restore.instructions.nano.step1'),
+      },
+      {
+        key: 'step2',
+        icon: <IconOptionRow>{'2.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.restore.instructions.nano.step2'),
+      },
+      {
+        key: 'step3',
+        icon: <IconOptionRow>{'3.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.restore.instructions.nano.step3'),
+      },
+      {
+        key: 'step4',
+        icon: <IconOptionRow>{'4.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.restore.instructions.nano.step4'),
+      },
+    ]
+    const disclaimerNotes = [
+      {
+        key: 'note1',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note1'),
+      },
+      {
+        key: 'note2',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note2'),
+      },
+      {
+        key: 'note3',
+        icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
+        desc: t('onboarding:selectPIN.disclaimer.note3'),
+      },
+    ]
+
+    return (
+      <Box align="center" mt={3}>
+        <Inner style={{ width: 700 }}>
+          <IconLedgerNanoSelectPIN />
+          <Box shrink grow flow={4} style={{ marginLeft: 40 }}>
+            {stepsLedgerNano.map(step => <OptionRow key={step.key} step={step} />)}
+          </Box>
+        </Inner>
+        <DisclaimerBox mt={6} disclaimerNotes={disclaimerNotes} />
+      </Box>
+    )
+  }
+}
+
+export default translate()(SelectPINrestoreNano)

src/components/Onboarding/steps/SelectPIN/index.js

@@ -8,6 +8,8 @@ import { Title, FixedTopContainer } from '../../helperComponents'
 import OnboardingFooter from '../../OnboardingFooter'
 import SelectPINnano from './SelectPINnano'
 import SelectPINblue from './SelectPINblue'
+import SelectPINrestoreNano from './SelectPINrestoreNano'
+import SelectPINrestoreBlue from './SelectPINrestoreBlue'
 
 import type { StepProps } from '../..'
 
@@ -16,12 +18,21 @@ export default (props: StepProps) => {
 
   return (
     <FixedTopContainer>
-      <Box grow alignItems="center">
-        <Title>{t('onboarding:selectPIN.title')}</Title>
-        <Box align="center" mt={7}>
-          {onboarding.isLedgerNano ? <SelectPINnano /> : <SelectPINblue />}
+      {onboarding.flowType === 'restoreDevice' ? (
+        <Box grow alignItems="center">
+          <Title>{t('onboarding:selectPIN.restore.title')}</Title>
+          <Box align="center" mt={7}>
+            {onboarding.isLedgerNano ? <SelectPINrestoreNano /> : <SelectPINrestoreBlue />}
+          </Box>
         </Box>
-      </Box>
+      ) : (
+        <Box grow alignItems="center">
+          <Title>{t('onboarding:selectPIN.initialize.title')}</Title>
+          <Box align="center" mt={7}>
+            {onboarding.isLedgerNano ? <SelectPINnano /> : <SelectPINblue />}
+          </Box>
+        </Box>
+      )}
       <OnboardingFooter horizontal flow={2} t={t} nextStep={nextStep} prevStep={prevStep} />
     </FixedTopContainer>
   )

src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js

@@ -30,17 +30,17 @@ class WriteSeedBlue extends PureComponent<Props, *> {
       {
         key: 'step1',
         icon: <IconOptionRow>{'1.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.blue.step1'),
+        desc: t('onboarding:writeSeed.initialize.blue.step1'),
       },
       {
         key: 'step2',
         icon: <IconOptionRow>{'2.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.blue.step2'),
+        desc: t('onboarding:writeSeed.initialize.blue.step2'),
       },
       {
         key: 'step3',
         icon: <IconOptionRow>{'3.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.blue.step3'),
+        desc: t('onboarding:writeSeed.initialize.blue.step3'),
       },
     ]
     const disclaimerNotes = [
@@ -69,8 +69,8 @@ class WriteSeedBlue extends PureComponent<Props, *> {
     return (
       <Fragment>
         <Box mb={3}>
-          <Title>{t('onboarding:writeSeed.title')}</Title>
-          <Description>{t('onboarding:writeSeed.desc')}</Description>
+          <Title>{t('onboarding:writeSeed.initialize.title')}</Title>
+          <Description>{t('onboarding:writeSeed.initialize.desc')}</Description>
         </Box>
         <Box align="center">
           <Inner style={{ width: 760 }}>

src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js

@@ -30,17 +30,17 @@ class WriteSeedNano extends PureComponent<Props, *> {
       {
         key: 'step1',
         icon: <IconOptionRow>{'1.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.nano.step1'),
+        desc: t('onboarding:writeSeed.initialize.nano.step1'),
       },
       {
         key: 'step2',
         icon: <IconOptionRow>{'2.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.nano.step2'),
+        desc: t('onboarding:writeSeed.initialize.nano.step2'),
       },
       {
         key: 'step3',
         icon: <IconOptionRow>{'3.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.nano.step3'),
+        desc: t('onboarding:writeSeed.initialize.nano.step3'),
       },
     ]
     const disclaimerNotes = [
@@ -69,8 +69,8 @@ class WriteSeedNano extends PureComponent<Props, *> {
     return (
       <Fragment>
         <Box mb={3}>
-          <Title>{t('onboarding:writeSeed.title')}</Title>
-          <Description>{t('onboarding:writeSeed.desc')}</Description>
+          <Title>{t('onboarding:writeSeed.initialize.title')}</Title>
+          <Description>{t('onboarding:writeSeed.initialize.desc')}</Description>
         </Box>
         <Box align="center" mt={3}>
           <Inner style={{ width: 700 }}>

src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js

@@ -7,6 +7,7 @@ import Box from 'components/base/Box'
 
 import type { T } from 'types/common'
 import IconWriteSeed from 'icons/illustrations/WriteSeed'
+import type { OnboardingState } from 'reducers/onboarding'
 
 import IconChevronRight from 'icons/ChevronRight'
 
@@ -21,32 +22,50 @@ import {
 
 type Props = {
   t: T,
+  onboarding: OnboardingState,
 }
 
 class WriteSeedRestore extends PureComponent<Props, *> {
   render() {
-    const { t } = this.props
+    const { t, onboarding } = this.props
 
-    const steps = [
+    const stepsNano = [
       {
         key: 'step1',
         icon: <IconOptionRow>{'1.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.restore.step1'),
+        desc: t('onboarding:writeSeed.restore.nano.step1'),
       },
       {
         key: 'step2',
         icon: <IconOptionRow>{'2.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.restore.step2'),
+        desc: t('onboarding:writeSeed.restore.nano.step2'),
       },
       {
         key: 'step3',
         icon: <IconOptionRow>{'3.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.restore.step3'),
+        desc: t('onboarding:writeSeed.restore.nano.step3'),
       },
       {
         key: 'step4',
         icon: <IconOptionRow>{'4.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.restore.step4'),
+        desc: t('onboarding:writeSeed.restore.nano.step4'),
+      },
+    ]
+    const stepsBlue = [
+      {
+        key: 'step1',
+        icon: <IconOptionRow>{'1.'}</IconOptionRow>,
+        desc: t('onboarding:writeSeed.restore.blue.step1'),
+      },
+      {
+        key: 'step2',
+        icon: <IconOptionRow>{'2.'}</IconOptionRow>,
+        desc: t('onboarding:writeSeed.restore.blue.step2'),
+      },
+      {
+        key: 'step3',
+        icon: <IconOptionRow>{'3.'}</IconOptionRow>,
+        desc: t('onboarding:writeSeed.restore.blue.step3'),
       },
     ]
     const disclaimerNotes = [
@@ -83,9 +102,15 @@ class WriteSeedRestore extends PureComponent<Props, *> {
             <Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }}>
               <IconWriteSeed />
             </Box>
-            <Box shrink flow={2} m={0}>
-              {steps.map(step => <OptionRow key={step.key} step={step} />)}
-            </Box>
+            {onboarding.isLedgerNano ? (
+              <Box shrink flow={2} m={0}>
+                {stepsNano.map(step => <OptionRow key={step.key} step={step} />)}
+              </Box>
+            ) : (
+              <Box shrink flow={2} m={0}>
+                {stepsBlue.map(step => <OptionRow key={step.key} step={step} />)}
+              </Box>
+            )}
           </Inner>
           <DisclaimerBox mt={6} disclaimerNotes={disclaimerNotes} />
         </Box>

src/components/Onboarding/steps/WriteSeed/index.js

@@ -19,7 +19,7 @@ export default (props: StepProps) => {
     <FixedTopContainer>
       <Box grow alignItems="center">
         {onboarding.flowType === 'restoreDevice' ? (
-          <WriteSeedRestore />
+          <WriteSeedRestore onboarding={onboarding} />
         ) : onboarding.isLedgerNano ? (
           <WriteSeedNano />
         ) : (

static/i18n/en/onboarding.yml

@@ -33,57 +33,58 @@ selectDevice:
   ledgerBlueCard:
     title: Ledger Blue
 selectPIN:
-#  initialize:
-  title: Start initialization - Choose your PIN code
-  instructions:
-    ledgerNano:
-      step1: Connect the Ledger Nano S to your computer.
-      step2: Press both buttons simultaneously as instructed on the screen.
-      step3: Press the right button to select Configure as new device?. # <bold>Configure as new device?<bold>.
-      step4: 'Choose a PIN code between 4 and 8 digits long. Then select the checkmark (✓).'
-    ledgerBlue:
-      step1: Connect the Ledger Blue to your computer.
-      step2: Tap on Configure as new device.
-      step3: Choose a PIN code between 4 and 8 digits long.
-    # restore:
-    #     title: Start restoration - Choose your PIN code
-    #     instructions:
-    #       nano:
-    #         step1: Connect the Ledger Nano S to your computer.
-    #         step2: Press both buttons simultaneously as instructed on the screen.
-    #         step3: Press the left button to cancel Initialize as new device?. Press the right button to select Restore configuration?. #  <bold>Initialize as new device?</bold>  <bold>Restore configuration?</bold>.
-    #         step4: 'Choose a PIN code between 4 and 8 digits long. Then select the checkmark (✓).'
-    #       blue:
-    #         step1: Connect the Ledger Blue to your computer.
-    #         step2: Tap on Restore configuration. # <bold>Restore configuration</bold>.
-    #         step3: Choose a PIN code between 4 and 8 digits long.
   disclaimer:
     note1: Choose your own PIN code. This code will unlock your device.
     note2: An 8-digit PIN code offers an optimum level of security.
-    note3: Never use a device supplied with a PIN code or a 24-word recovery phrase.
-writeSeed:
-  title: Save your recovery phrase
-  desc: Your device will generate a recovery phrase of 24 words, displayed only once.
-  nano:
-    step1: 'Copy the word displayed below Word #1 in position 1 on a blank Recovery sheet.' # <bold>Word #1</bold> <italic>Recovery sheet</italic>
-    step2: 'Press the right button to display Word #2 and repeat the process until all 24 words are copied on the Recovery sheet.' # <bold>Word #2</bold> <italic>Recovery sheet</italic>
-    step3: 'Confirm your recovery phrase: select each requested word and press both buttons to validate it.'
-  blue:
-    step1: Copy each word of the recovery phrase on a blank Recovery sheet. Copy the words in the same order. # <i>Recovery sheet</i>
-    step2: Tap Next to move to the next words. Repeat the process until the Confirmation screen appears. # <bold>Next</bold> <bold>Confirmation</bold>
-    step3: Type each requested word to confirm your recovery phrase.
+    note3:   Never use a device supplied with a PIN code or a 24-word recovery phrase.
+  initialize:
+    title: Start initialization - Choose your PIN code
+    instructions:
+      nano:
+        step1: Connect the Ledger Nano S to your computer.
+        step2: Press both buttons simultaneously as instructed on the screen.
+        step3: Press the right button to select Configure as new device?. # <bold>Configure as new device?<bold>.
+        step4: 'Choose a PIN code between 4 and 8 digits long. Then select the checkmark (✓).'
+      blue:
+        step1: Connect the Ledger Blue to your computer.
+        step2: Tap on Configure as new device.
+        step3: Choose a PIN code between 4 and 8 digits long.
   restore:
-      title: Enter your recovery phrase
-      desc: Copy the 24-word recovery phrase from your Recovery sheet on your device.
+    title: Start restoration - Choose your PIN code
+    instructions:
       nano:
-        step1: Select the length of your recovery phrase. Press both buttons to continue.
-        step2: 'Select the first letters of Word #1 by pressing the right or left button. Press both buttons to confirm each letter.' # <bold>Word #1</bold>
-        step3: 'Select Word #1 from the suggested words. Press both buttons to continue.'  # <bold>Word #1</bold>
-        step4: Repeat the process until the last word.
-      ledgerBlue:
-        step1: Select the length of your recovery phrase.
-        step2: Type the first word of your recovery phrase. Select the word when it appears.
-        step3: Repeat the process until the last word.
+        step1: Connect the Ledger Nano S to your computer.
+        step2: Press both buttons simultaneously as instructed on the screen.
+        step3: Press the left button to cancel Initialize as new device?. Press the right button to select Restore configuration?. #  <bold>Initialize as new device?</bold>  <bold>Restore configuration?</bold>.
+        step4: 'Choose a PIN code between 4 and 8 digits long. Then select the checkmark (✓).'
+      blue:
+        step1: Connect the Ledger Blue to your computer.
+        step2: Tap on Restore configuration. # <bold>Restore configuration</bold>.
+        step3: Choose a PIN code between 4 and 8 digits long.
+writeSeed:
+  initialize:
+    title: Save your recovery phrase
+    desc: Your device will generate a recovery phrase of 24 words, displayed only once.
+    nano:
+      step1: 'Copy the word displayed below Word #1 in position 1 on a blank Recovery sheet.' # <bold>Word #1</bold> <italic>Recovery sheet</italic>
+      step2: 'Press the right button to display Word #2 and repeat the process until all 24 words are copied on the Recovery sheet.' # <bold>Word #2</bold> <italic>Recovery sheet</italic>
+      step3: 'Confirm your recovery phrase: select each requested word and press both buttons to validate it.'
+    blue:
+      step1: Copy each word of the recovery phrase on a blank Recovery sheet. Copy the words in the same order. # <i>Recovery sheet</i>
+      step2: Tap Next to move to the next words. Repeat the process until the Confirmation screen appears. # <bold>Next</bold> <bold>Confirmation</bold>
+      step3: Type each requested word to confirm your recovery phrase.
+  restore:
+    title: Enter your recovery phrase
+    desc: Copy the 24-word recovery phrase from your Recovery sheet on your device.
+    nano:
+      step1: Select the length of your recovery phrase. Press both buttons to continue.
+      step2: 'Select the first letters of Word #1 by pressing the right or left button. Press both buttons to confirm each letter.' # <bold>Word #1</bold>
+      step3: 'Select Word #1 from the suggested words. Press both buttons to continue.'  # <bold>Word #1</bold>
+      step4: Repeat the process until the last word.
+    blue:
+      step1: Select the length of your recovery phrase.
+      step2: Type the first word of your recovery phrase. Select the word when it appears.
+      step3: Repeat the process until the last word.
   disclaimer:
     note1: Carefully secure your 24-word recovery phrase out of sight.
     note2: Ledger does not keep any backup of your recovery phrase.
@@ -92,17 +93,15 @@ writeSeed:
 genuineCheck:
   title: Final security check
   descNano: Your Ledger Nano S should now display Your device is now ready. Before getting started, please confirm that
-  descBlue: #Your Ledger Blue should now display Your device is now ready. Before getting started, please confirm that
-  steps:
-    step1:
-      title: Did you choose your PIN code by yourself?
-    step2:
-      title: Did you save your recovery phrase by yourself?
-      desc:
-    step3:
-      title: Check if your Ledger device is genuine
-      desc:
-  isGenuinePassed: 'Genuine'
+  descBlue: Your Ledger Blue should now display Your device is now ready. Before getting started, please confirm that
+  descRestore: Before getting started, please confirm that
+  step1:
+    title: Did you choose your PIN code by yourself?
+  step2:
+    title: Did you save your recovery phrase by yourself?
+  step3:
+    title: Check if your Ledger device is genuine
+  isGenuinePassed: Your device is genuine
   buttons:
     genuineCheck: Genuine check
     contactSupport: Ledger Support