wip selectPIN onboarding skeleton for 4 screens, awaiting wording

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.instructions.ledgerBlue.step1'),
+      },
+      {
+        key: 'step2',
+        icon: <IconOptionRow>{'2.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerBlue.step2'),
+      },
+      {
+        key: 'step3',
+        icon: <IconOptionRow>{'3.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerBlue.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.instructions.ledgerNano.step1'),
+      },
+      {
+        key: 'step2',
+        icon: <IconOptionRow>{'2.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerNano.step2'),
+      },
+      {
+        key: 'step3',
+        icon: <IconOptionRow>{'3.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerNano.step3'),
+      },
+      {
+        key: 'step4',
+        icon: <IconOptionRow>{'4.'}</IconOptionRow>,
+        desc: t('onboarding:selectPIN.instructions.ledgerNano.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">
+      {onboarding.flowType === 'restoreDevice' ? (
-        <Title>{t('onboarding:selectPIN.title')}</Title>
+        <Box grow alignItems="center">
-        <Box align="center" mt={7}>
+          <Title>{t('onboarding:selectPIN.title')}</Title>
-          {onboarding.isLedgerNano ? <SelectPINnano /> : <SelectPINblue />}
+          <Box align="center" mt={7}>
+            {onboarding.isLedgerNano ? <SelectPINrestoreNano /> : <SelectPINrestoreBlue />}
+          </Box>
         </Box>
-      </Box>
+      ) : (
+        <Box grow alignItems="center">
+          <Title>{t('onboarding:selectPIN.title')}</Title>
+          <Box align="center" mt={7}>
+            {onboarding.isLedgerNano ? <SelectPINnano /> : <SelectPINblue />}
+          </Box>
+        </Box>
+      )}
       <OnboardingFooter horizontal flow={2} t={t} nextStep={nextStep} prevStep={prevStep} />
     </FixedTopContainer>
   )