fixing the onboarding wording issues and adding missing screens

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 ? (
+          {onboarding.flowType === 'restoreDevice' ? (
-            <Description>{t('onboarding:genuineCheck.descNano')}</Description>
+            <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

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

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

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

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

@@ -20,14 +20,14 @@ export default (props: StepProps) => {
     <FixedTopContainer>
       {onboarding.flowType === 'restoreDevice' ? (
         <Box grow alignItems="center">
-          <Title>{t('onboarding:selectPIN.title')}</Title>
+          <Title>{t('onboarding:selectPIN.restore.title')}</Title>
           <Box align="center" mt={7}>
             {onboarding.isLedgerNano ? <SelectPINrestoreNano /> : <SelectPINrestoreBlue />}
           </Box>
         </Box>
       ) : (
         <Box grow alignItems="center">
-          <Title>{t('onboarding:selectPIN.title')}</Title>
+          <Title>{t('onboarding:selectPIN.initialize.title')}</Title>
           <Box align="center" mt={7}>
             {onboarding.isLedgerNano ? <SelectPINnano /> : <SelectPINblue />}
           </Box>

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>
+          <Title>{t('onboarding:writeSeed.initialize.title')}</Title>
-          <Description>{t('onboarding:writeSeed.desc')}</Description>
+          <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>
+          <Title>{t('onboarding:writeSeed.initialize.title')}</Title>
-          <Description>{t('onboarding:writeSeed.desc')}</Description>
+          <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>
+            {onboarding.isLedgerNano ? (
+              <Box shrink flow={2} m={0}>
+                {stepsNano.map(step => <OptionRow key={step.key} step={step} />)}
+              </Box>
+            ) : (
               <Box shrink flow={2} m={0}>
-              {steps.map(step => <OptionRow key={step.key} step={step} />)}
+                {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,35 +33,36 @@ selectDevice:
   ledgerBlueCard:
     title: Ledger Blue
 selectPIN:
-#  initialize:
+  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.
+  initialize:
     title: Start initialization - Choose your PIN code
     instructions:
-    ledgerNano:
+      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 (✓).'
-    ledgerBlue:
+      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:
+  restore:
-    #     title: Start restoration - Choose your PIN code
+    title: Start restoration - Choose your PIN code
-    #     instructions:
+    instructions:
-    #       nano:
+      nano:
-    #         step1: Connect the Ledger Nano S to your computer.
+        step1: Connect the Ledger Nano S to your computer.
-    #         step2: Press both buttons simultaneously as instructed on the screen.
+        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>.
+        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 (✓).'
+        step4: 'Choose a PIN code between 4 and 8 digits long. Then select the checkmark (✓).'
-    #       blue:
+      blue:
-    #         step1: Connect the Ledger Blue to your computer.
+        step1: Connect the Ledger Blue to your computer.
-    #         step2: Tap on Restore configuration. # <bold>Restore configuration</bold>.
+        step2: Tap on Restore configuration. # <bold>Restore configuration</bold>.
-    #         step3: Choose a PIN code between 4 and 8 digits long.
+        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:
+  initialize:
     title: Save your recovery phrase
     desc: Your device will generate a recovery phrase of 24 words, displayed only once.
     nano:
@@ -80,7 +81,7 @@ writeSeed:
       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:
+    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.
@@ -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
+  descBlue: Your Ledger Blue should now display Your device is now ready. Before getting started, please confirm that
-  steps:
+  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?
-      desc:
   step3:
     title: Check if your Ledger device is genuine
-      desc:
+  isGenuinePassed: Your device is genuine
-  isGenuinePassed: 'Genuine'
   buttons:
     genuineCheck: Genuine check
     contactSupport: Ledger Support