diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js index 7b366498..24a2af7c 100644 --- a/src/components/Onboarding/steps/GenuineCheck.js +++ b/src/components/Onboarding/steps/GenuineCheck.js @@ -156,7 +156,6 @@ class GenuineCheck extends PureComponent { 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 { {t('onboarding:genuineCheck.title')} - {onboarding.isLedgerNano ? ( - {t('onboarding:genuineCheck.descNano')} + {onboarding.flowType === 'restoreDevice' ? ( + {t('onboarding:genuineCheck.descRestore')} ) : ( - {t('onboarding:genuineCheck.descBlue')} + + {onboarding.isLedgerNano + ? t('onboarding:genuineCheck.descNano') + : t('onboarding:genuineCheck.descBlue')} + )} - {'1.'} - {t('onboarding:genuineCheck.steps.step1.title')} + {t('onboarding:genuineCheck.step1.title')} @@ -195,7 +197,7 @@ class GenuineCheck extends PureComponent { {'2.'} - {t('onboarding:genuineCheck.steps.step2.title')} + {t('onboarding:genuineCheck.step2.title')} @@ -216,7 +218,7 @@ class GenuineCheck extends PureComponent { {'3.'} - {t('onboarding:genuineCheck.steps.step3.title')} + {t('onboarding:genuineCheck.step3.title')} {genuine.recoveryStepPass && ( diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js index 5fa2e34e..a47cced6 100644 --- a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js +++ b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js @@ -24,17 +24,17 @@ class SelectPIN extends PureComponent { { key: 'step1', icon: {'1.'}, - desc: t('onboarding:selectPIN.instructions.ledgerBlue.step1'), + desc: t('onboarding:selectPIN.initialize.instructions.blue.step1'), }, { key: 'step2', icon: {'2.'}, - desc: t('onboarding:selectPIN.instructions.ledgerBlue.step2'), + desc: t('onboarding:selectPIN.initialize.instructions.blue.step2'), }, { key: 'step3', icon: {'3.'}, - desc: t('onboarding:selectPIN.instructions.ledgerBlue.step3'), + desc: t('onboarding:selectPIN.initialize.instructions.blue.step3'), }, ] diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js index 4b4f4d0f..b19bbd0b 100644 --- a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js +++ b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js @@ -24,22 +24,22 @@ class SelectPINnano extends PureComponent { { key: 'step1', icon: {'1.'}, - desc: t('onboarding:selectPIN.instructions.ledgerNano.step1'), + desc: t('onboarding:selectPIN.initialize.instructions.nano.step1'), }, { key: 'step2', icon: {'2.'}, - desc: t('onboarding:selectPIN.instructions.ledgerNano.step2'), + desc: t('onboarding:selectPIN.initialize.instructions.nano.step2'), }, { key: 'step3', icon: {'3.'}, - desc: t('onboarding:selectPIN.instructions.ledgerNano.step3'), + desc: t('onboarding:selectPIN.initialize.instructions.nano.step3'), }, { key: 'step4', icon: {'4.'}, - desc: t('onboarding:selectPIN.instructions.ledgerNano.step4'), + desc: t('onboarding:selectPIN.initialize.instructions.nano.step4'), }, ] const disclaimerNotes = [ diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js new file mode 100644 index 00000000..5bbc8767 --- /dev/null +++ b/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 { + render() { + const { t } = this.props + + const stepsLedgerBlue = [ + { + key: 'step1', + icon: {'1.'}, + desc: t('onboarding:selectPIN.restore.instructions.blue.step1'), + }, + { + key: 'step2', + icon: {'2.'}, + desc: t('onboarding:selectPIN.restore.instructions.blue.step2'), + }, + { + key: 'step3', + icon: {'3.'}, + desc: t('onboarding:selectPIN.restore.instructions.blue.step3'), + }, + ] + + const disclaimerNotes = [ + { + key: 'note1', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note1'), + }, + { + key: 'note2', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note2'), + }, + { + key: 'note3', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note3'), + }, + ] + + return ( + + + + + + + + {stepsLedgerBlue.map(step => )} + + + + + + ) + } +} + +export default translate()(SelectPINrestoreBlue) diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js new file mode 100644 index 00000000..ebf20881 --- /dev/null +++ b/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 { + render() { + const { t } = this.props + + const stepsLedgerNano = [ + { + key: 'step1', + icon: {'1.'}, + desc: t('onboarding:selectPIN.restore.instructions.nano.step1'), + }, + { + key: 'step2', + icon: {'2.'}, + desc: t('onboarding:selectPIN.restore.instructions.nano.step2'), + }, + { + key: 'step3', + icon: {'3.'}, + desc: t('onboarding:selectPIN.restore.instructions.nano.step3'), + }, + { + key: 'step4', + icon: {'4.'}, + desc: t('onboarding:selectPIN.restore.instructions.nano.step4'), + }, + ] + const disclaimerNotes = [ + { + key: 'note1', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note1'), + }, + { + key: 'note2', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note2'), + }, + { + key: 'note3', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note3'), + }, + ] + + return ( + + + + + {stepsLedgerNano.map(step => )} + + + + + ) + } +} + +export default translate()(SelectPINrestoreNano) diff --git a/src/components/Onboarding/steps/SelectPIN/index.js b/src/components/Onboarding/steps/SelectPIN/index.js index 11da362c..1d1fd14e 100644 --- a/src/components/Onboarding/steps/SelectPIN/index.js +++ b/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 ( - - {t('onboarding:selectPIN.title')} - - {onboarding.isLedgerNano ? : } + {onboarding.flowType === 'restoreDevice' ? ( + + {t('onboarding:selectPIN.restore.title')} + + {onboarding.isLedgerNano ? : } + - + ) : ( + + {t('onboarding:selectPIN.initialize.title')} + + {onboarding.isLedgerNano ? : } + + + )} ) diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js index 4e8d5e35..f0db2baf 100644 --- a/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js +++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js @@ -30,17 +30,17 @@ class WriteSeedBlue extends PureComponent { { key: 'step1', icon: {'1.'}, - desc: t('onboarding:writeSeed.blue.step1'), + desc: t('onboarding:writeSeed.initialize.blue.step1'), }, { key: 'step2', icon: {'2.'}, - desc: t('onboarding:writeSeed.blue.step2'), + desc: t('onboarding:writeSeed.initialize.blue.step2'), }, { key: 'step3', icon: {'3.'}, - desc: t('onboarding:writeSeed.blue.step3'), + desc: t('onboarding:writeSeed.initialize.blue.step3'), }, ] const disclaimerNotes = [ @@ -69,8 +69,8 @@ class WriteSeedBlue extends PureComponent { return ( - {t('onboarding:writeSeed.title')} - {t('onboarding:writeSeed.desc')} + {t('onboarding:writeSeed.initialize.title')} + {t('onboarding:writeSeed.initialize.desc')} diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js index 2a412a31..b472fce0 100644 --- a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js +++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js @@ -30,17 +30,17 @@ class WriteSeedNano extends PureComponent { { key: 'step1', icon: {'1.'}, - desc: t('onboarding:writeSeed.nano.step1'), + desc: t('onboarding:writeSeed.initialize.nano.step1'), }, { key: 'step2', icon: {'2.'}, - desc: t('onboarding:writeSeed.nano.step2'), + desc: t('onboarding:writeSeed.initialize.nano.step2'), }, { key: 'step3', icon: {'3.'}, - desc: t('onboarding:writeSeed.nano.step3'), + desc: t('onboarding:writeSeed.initialize.nano.step3'), }, ] const disclaimerNotes = [ @@ -69,8 +69,8 @@ class WriteSeedNano extends PureComponent { return ( - {t('onboarding:writeSeed.title')} - {t('onboarding:writeSeed.desc')} + {t('onboarding:writeSeed.initialize.title')} + {t('onboarding:writeSeed.initialize.desc')} diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js index 53de3ce5..2d319b6b 100644 --- a/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js +++ b/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 { render() { - const { t } = this.props + const { t, onboarding } = this.props - const steps = [ + const stepsNano = [ { key: 'step1', icon: {'1.'}, - desc: t('onboarding:writeSeed.restore.step1'), + desc: t('onboarding:writeSeed.restore.nano.step1'), }, { key: 'step2', icon: {'2.'}, - desc: t('onboarding:writeSeed.restore.step2'), + desc: t('onboarding:writeSeed.restore.nano.step2'), }, { key: 'step3', icon: {'3.'}, - desc: t('onboarding:writeSeed.restore.step3'), + desc: t('onboarding:writeSeed.restore.nano.step3'), }, { key: 'step4', icon: {'4.'}, - desc: t('onboarding:writeSeed.restore.step4'), + desc: t('onboarding:writeSeed.restore.nano.step4'), + }, + ] + const stepsBlue = [ + { + key: 'step1', + icon: {'1.'}, + desc: t('onboarding:writeSeed.restore.blue.step1'), + }, + { + key: 'step2', + icon: {'2.'}, + desc: t('onboarding:writeSeed.restore.blue.step2'), + }, + { + key: 'step3', + icon: {'3.'}, + desc: t('onboarding:writeSeed.restore.blue.step3'), }, ] const disclaimerNotes = [ @@ -83,9 +102,15 @@ class WriteSeedRestore extends PureComponent { - - {steps.map(step => )} - + {onboarding.isLedgerNano ? ( + + {stepsNano.map(step => )} + + ) : ( + + {stepsBlue.map(step => )} + + )} diff --git a/src/components/Onboarding/steps/WriteSeed/index.js b/src/components/Onboarding/steps/WriteSeed/index.js index 0933233e..8d1c08d5 100644 --- a/src/components/Onboarding/steps/WriteSeed/index.js +++ b/src/components/Onboarding/steps/WriteSeed/index.js @@ -19,7 +19,7 @@ export default (props: StepProps) => { {onboarding.flowType === 'restoreDevice' ? ( - + ) : onboarding.isLedgerNano ? ( ) : ( diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml index 5f9793b5..5d08add9 100644 --- a/static/i18n/en/onboarding.yml +++ b/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?. # Configure as new device?. - 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?. # Initialize as new device? Restore configuration?. - # 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. # Restore configuration. - # 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.' # Word #1 Recovery sheet - step2: 'Press the right button to display Word #2 and repeat the process until all 24 words are copied on the Recovery sheet.' # Word #2 Recovery sheet - 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. # Recovery sheet - step2: Tap Next to move to the next words. Repeat the process until the Confirmation screen appears. # Next Confirmation - 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?. # Configure as new device?. + 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.' # Word #1 - step3: 'Select Word #1 from the suggested words. Press both buttons to continue.' # Word #1 - 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?. # Initialize as new device? Restore configuration?. + 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. # Restore configuration. + 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.' # Word #1 Recovery sheet + step2: 'Press the right button to display Word #2 and repeat the process until all 24 words are copied on the Recovery sheet.' # Word #2 Recovery sheet + 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. # Recovery sheet + step2: Tap Next to move to the next words. Repeat the process until the Confirmation screen appears. # Next Confirmation + 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.' # Word #1 + step3: 'Select Word #1 from the suggested words. Press both buttons to continue.' # Word #1 + 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