LL-636 recover nano x from passphrase in onboarding

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

@@ -0,0 +1,82 @@
+// @flow
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
+
+import Box from 'components/base/Box'
+
+import type { T } from 'types/common'
+
+import IconChevronRight from 'icons/ChevronRight'
+
+import { IconOptionRow, DisclaimerBox, OptionRow, Inner } from '../../helperComponents'
+
+type Props = {
+  t: T,
+}
+
+class SelectPINrestoreNanoX extends PureComponent<Props, *> {
+  render() {
+    const { t } = this.props
+
+    const stepsLedgerNano = [
+      {
+        key: 'step1',
+        icon: <IconOptionRow>{'1.'}</IconOptionRow>,
+        desc: t('onboarding.selectPIN.restore.instructions.nanoX.step1'),
+      },
+      {
+        key: 'step2',
+        icon: <IconOptionRow>{'2.'}</IconOptionRow>,
+        desc: t('onboarding.selectPIN.restore.instructions.nanoX.step2'),
+      },
+      {
+        key: 'step3',
+        icon: <IconOptionRow>{'3.'}</IconOptionRow>,
+        desc: t('onboarding.selectPIN.restore.instructions.nanoX.step3'),
+      },
+      {
+        key: 'step4',
+        icon: <IconOptionRow>{'4.'}</IconOptionRow>,
+        desc: t('onboarding.selectPIN.restore.instructions.nanoX.step4'),
+      },
+      {
+        key: 'step5',
+        icon: <IconOptionRow>{'5.'}</IconOptionRow>,
+        desc: t('onboarding.selectPIN.restore.instructions.nanoX.step5'),
+      },
+    ]
+    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 }}>
+          <img alt="" src={i('select-pin-nano-x-onb.svg')} />
+          <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()(SelectPINrestoreNanoX)

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

@@ -14,13 +14,14 @@ import SelectPINnano from './SelectPINnano'
 import SelectPINblue from './SelectPINblue'
 import SelectPINnanoX from './SelectPINnanoX'
 import SelectPINrestoreNano from './SelectPINrestoreNano'
+import SelectPINRestoreNanoX from './SelectPINRestoreNanoX'
 import SelectPINrestoreBlue from './SelectPINrestoreBlue'
 import type { StepProps } from '../..'
 
 const SelectPin = ({ modelId, restore = false }: { modelId: DeviceModelId, restore?: boolean }) => {
   switch (modelId) {
     case 'nanoX':
-      return restore ? <SelectPINnanoX /> : <SelectPINnanoX /> // TODO: Restore NanoX
+      return restore ? <SelectPINRestoreNanoX /> : <SelectPINnanoX />
     case 'blue':
       return restore ? <SelectPINrestoreBlue /> : <SelectPINblue />
     default:

static/i18n/en/app.json

@@ -602,6 +602,13 @@
             "step3": "Press the left or right button to select a digit. Press both buttons to validate.",
             "step4": "Select ✓ to confirm your PIN code. Select ⬅ to erase a digit."
           },
+          "nanoX": {
+            "step1": "Connect your Ledger Nano X to your computer.",
+            "step2": "Press both buttons as instructed on your Ledger Nano X screen.",
+            "step3": "Press the left button to cancel Configure as new device.",
+            "step4": "Press the right button to select Restore configuration.",
+            "step5": "Choose a PIN code between 4 and 8 digits long."
+          },
           "blue": {
             "step1": "Connect the Ledger Blue to your computer.",
             "step2": "Tap on <1><0>Restore configuration</0></1>.",