writeSeed screen, taking footer out, factorizing

src/components/Onboarding/OnboardingFooter.js

@@ -1,11 +1,15 @@
 // @flow
 
+import React from 'react'
 import styled from 'styled-components'
 import { radii } from 'styles/theme'
 
+import type { T } from 'types/common'
+
+import Button from 'components/base/Button'
 import Box from 'components/base/Box'
 
-export const OnboardingFooter = styled(Box).attrs({
+const Wrapper = styled(Box).attrs({
   px: 5,
   py: 3,
 })`
@@ -13,3 +17,21 @@ export const OnboardingFooter = styled(Box).attrs({
   border-bottom-left-radius: ${radii[1]}px;
   border-bottom-right-radius: ${radii[1]}px;
 `
+
+type Props = {
+  t: T,
+  nextStep: () => void,
+  prevStep: () => void,
+}
+
+const OnboardingFooter = ({ t, nextStep, prevStep, ...props }: Props) => (
+  <Wrapper {...props}>
+    <Button small outline onClick={() => prevStep()}>
+      {t('common:back')}
+    </Button>
+    <Button small primary onClick={() => nextStep()} ml="auto">
+      {t('common:continue')}
+    </Button>
+  </Wrapper>
+)
+export default OnboardingFooter

src/components/Onboarding/helperComponents.js

@@ -1,11 +1,13 @@
 // @flow
+import React from 'react'
 import styled from 'styled-components'
 import { radii } from 'styles/theme'
 
 import Box from 'components/base/Box'
 
+// GENERAL
 export const Title = styled(Box).attrs({
-  width: 152,
+  width: 267,
   height: 27,
   ff: 'Museo Sans|Regular',
   fontSize: 7,
@@ -13,12 +15,13 @@ export const Title = styled(Box).attrs({
 })``
 
 export const Description = styled(Box).attrs({
-  width: 340,
-  height: 36,
-  ff: 'Open Sans|Regular',
-  fontSize: 4,
+  width: 714,
+  height: 48,
+  ff: 'Museo Sans|Light',
+  fontSize: 5,
+  lineHeight: 1.5,
   textAlign: 'center',
-  color: 'smoke',
+  color: 'grey',
 })`
   margin: 10px auto 25px;
 `
@@ -28,6 +31,7 @@ export const Inner = styled(Box).attrs({
   flow: 4,
 })``
 
+// FOOTER
 export const OnboardingFooter = styled(Box).attrs({
   px: 5,
   py: 3,
@@ -36,3 +40,43 @@ export const OnboardingFooter = styled(Box).attrs({
   border-bottom-left-radius: ${radii[1]}px;
   border-bottom-right-radius: ${radii[1]}px;
 `
+
+// INSTRUCTION LIST
+type StepType = {
+  icon: any,
+  desc: string,
+}
+export function InstructionStep({ step }: { step: StepType }) {
+  const { icon, desc } = step
+  return (
+    <Box horizontal>
+      <Box justify="center" color="grey" style={{ width: 26 }}>
+        {icon}
+      </Box>
+      <Box ff="Open Sans|Regular" justify="center" fontSize={4} style={{ paddingLeft: 10 }} shrink>
+        <InstructionStepDesc>{desc}</InstructionStepDesc>
+      </Box>
+    </Box>
+  )
+}
+export const InstructionStepDesc = styled(Box).attrs({
+  ff: 'Open Sans|Regular',
+  fontSize: 4,
+  textAlign: 'left',
+  lineHeight: 1.69,
+  color: 'smoke',
+  shrink: 1,
+})``
+
+export const IconInstructionStep = styled(Box).attrs({
+  width: 26,
+  height: 26,
+  ff: 'Rubik|Regular',
+  textAlign: 'center',
+  fontSize: 3,
+  color: 'wallet',
+})`
+  border-radius: 100%;
+  background: #6490f126;
+  line-height: 2;
+`

src/components/Onboarding/index.js

@@ -21,8 +21,8 @@ import Box from 'components/base/Box'
 import Start from './steps/Start'
 import InitStep from './steps/Init'
 import OnboardingBreadcrumb from './OnboardingBreadcrumb'
-import ChooseDevice from './steps/ChooseDevice'
-import ChoosePIN from './steps/ChoosePIN'
+import SelectDevice from './steps/SelectDevice'
+import SelectPIN from './steps/SelectPIN'
 import WriteSeed from './steps/WriteSeed'
 import GenuineCheck from './steps/GenuineCheck'
 import SetPassword from './steps/SetPassword'
@@ -31,8 +31,8 @@ import Finish from './steps/Finish'
 
 const STEPS = {
   init: InitStep,
-  chooseDevice: ChooseDevice,
-  choosePIN: ChoosePIN,
+  selectDevice: SelectDevice,
+  selectPIN: SelectPIN,
   writeSeed: WriteSeed,
   genuineCheck: GenuineCheck,
   setPassword: SetPassword,

src/components/Onboarding/steps/ChoosePIN.js

@@ -1,102 +0,0 @@
-// @flow
-
-import React from 'react'
-
-import Box from 'components/base/Box'
-import Button from 'components/base/Button'
-import styled from 'styled-components'
-
-import IconSelectPIN from 'icons/onboarding/SelectPIN'
-import { Title, Description, OnboardingFooter, Inner } from '../helperComponents'
-
-import type { StepProps } from '..'
-
-export const IconSelectStep = styled(Box).attrs({
-  width: 26,
-  height: 26,
-  textAlign: 'center',
-})`
-  border-radius: 100%;
-  background: #6490f126;
-`
-
-export default (props: StepProps) => {
-  const { nextStep, prevStep, t } = props
-  const steps = [
-    {
-      key: 'step1',
-      icon: <IconSelectStep>1</IconSelectStep>,
-      desc: t('onboarding:selectPIN.instructions.step1'),
-    },
-    {
-      key: 'step2',
-      icon: <IconSelectStep>2</IconSelectStep>,
-      desc: t('onboarding:selectPIN.instructions.step2'),
-    },
-    {
-      key: 'step3',
-      icon: <IconSelectStep>3</IconSelectStep>,
-      desc: t('onboarding:selectPIN.instructions.step3'),
-    },
-    {
-      key: 'step4',
-      icon: <IconSelectStep>4</IconSelectStep>,
-      desc: t('onboarding:selectPIN.instructions.step4'),
-    },
-  ]
-  return (
-    <Box sticky>
-      <Box grow alignItems="center" justifyContent="center">
-        <Box align="center" mb={5}>
-          <Title>{t('onboarding:selectPIN.title')}</Title>
-          <Description>{t('onboarding:selectPIN.desc')}</Description>
-        </Box>
-        <Box>
-          <Inner style={{ width: 760 }}>
-            <Box style={{ width: 260 }} mt={5}>
-              <IconSelectPIN />
-            </Box>
-
-            <Box shrink grow flow={5}>
-              {steps.map(step => <SelectPINStep key={step.key} step={step} />)}
-            </Box>
-          </Inner>
-        </Box>
-      </Box>
-      <OnboardingFooter horizontal align="center" flow={2}>
-        <Button small outline onClick={() => prevStep()}>
-          Go Back
-        </Button>
-        <Button small primary onClick={() => nextStep()} ml="auto">
-          Continue
-        </Button>
-      </OnboardingFooter>
-    </Box>
-  )
-}
-
-type StepType = {
-  icon: any,
-  desc: string,
-}
-export function SelectPINStep({ step }: { step: StepType }) {
-  const { icon, desc } = step
-  return (
-    <Box horizontal>
-      <Box justify="center" color="grey" style={{ width: 26 }}>
-        {icon}
-      </Box>
-      <Box ff="Open Sans|Regular" justify="center" fontSize={4} style={{ paddingLeft: 10 }} shrink>
-        <CardDescription>{desc}</CardDescription>
-      </Box>
-    </Box>
-  )
-}
-
-export const CardDescription = styled(Box).attrs({
-  ff: 'Open Sans|Regular',
-  fontSize: 4,
-  textAlign: 'left',
-  color: 'smoke',
-  shrink: 1,
-})``

src/components/Onboarding/steps/Init.js

@@ -53,7 +53,9 @@ export default (props: StepProps) => {
         <Box style={{ padding: 20, maxWidth: 650 }}>
           <Title>{t('onboarding:init.title')}</Title>
         </Box>
-        <Box flow={5}>{optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}</Box>
+        <Box mt={5} flow={5}>
+          {optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}
+        </Box>
       </Box>
     </Box>
   )
@@ -98,12 +100,10 @@ export const CardDescription = styled(Box).attrs({
   ff: 'Open Sans|Regular',
   fontSize: 4,
   textAlign: 'left',
-  color: 'smoke',
+  color: 'grey',
 })``
 export const CardTitle = styled(Box).attrs({
-  ff: 'Open Sans|Regular',
+  ff: 'Open Sans|SemiBold',
   fontSize: 4,
   textAlign: 'left',
-})`
-  font-weight: 600;
-`
+})``

src/components/Onboarding/steps/ChooseDevice.js → src/components/Onboarding/steps/SelectDevice.js

@@ -16,27 +16,26 @@ export default (props: StepProps) => {
   return (
     <Box sticky alignItems="center" justifyContent="center">
       <Box align="center">
-        <Title>{t('onboarding:chooseDevice.title')}</Title>
-        {/* TODO shrink description so it forms 2 lines */}
-        <Description>{t('onboarding:chooseDevice.desc')}</Description>
+        <Title>{t('onboarding:selectDevice.title')}</Title>
+        <Description style={{ maxWidth: 714 }}>{t('onboarding:selectDevice.desc')}</Description>
         <Box>
           <Inner>
             <DeviceContainer onClick={() => nextStep()}>
               <DeviceIcon>
                 <IconLedgerNano />
               </DeviceIcon>
-              <BlockTitle>{t('onboarding:chooseDevice.ledgerNanoCard.title')}</BlockTitle>
+              <BlockTitle pb={3}>{t('onboarding:selectDevice.ledgerNanoCard.title')}</BlockTitle>
               <BlockDescription>
-                {t('onboarding:chooseDevice.ledgerNanoCard.desc')}
+                {t('onboarding:selectDevice.ledgerNanoCard.desc')}
               </BlockDescription>
             </DeviceContainer>
             <DeviceContainer>
               <DeviceIcon>
                 <IconLedgerBlue />
               </DeviceIcon>
-              <BlockTitle>{t('onboarding:chooseDevice.ledgerBlueCard.title')}</BlockTitle>
+              <BlockTitle pb={3}>{t('onboarding:selectDevice.ledgerBlueCard.title')}</BlockTitle>
               <BlockDescription>
-                {t('onboarding:chooseDevice.ledgerBlueCard.desc')}
+                {t('onboarding:selectDevice.ledgerBlueCard.desc')}
               </BlockDescription>
             </DeviceContainer>
           </Inner>
@@ -53,6 +52,11 @@ const DeviceContainer = styled(Box).attrs({
   width: 218px;
   height: 204px;
   border: 1px solid #d8d8d8;
+  &:hover,
+  &:focus {
+    opacity: 0.5;
+    cursor: pointer;
+  }
 `
 const DeviceIcon = styled(Box).attrs({
   alignItems: 'center',
@@ -66,13 +70,10 @@ export const BlockDescription = styled(Box).attrs({
   ff: 'Open Sans|Regular',
   fontSize: 4,
   textAlign: 'center',
-  color: 'smoke',
+  color: 'grey',
 })``
 export const BlockTitle = styled(Box).attrs({
-  ff: 'Open Sans|Regular',
+  ff: 'Open Sans|SemiBold',
   fontSize: 4,
   textAlign: 'center',
-})`
-  font-weight: 600;
-  padding-bottom: 10px;
-`
+})``

src/components/Onboarding/steps/SelectPIN.js

@@ -0,0 +1,72 @@
+// @flow
+
+import React from 'react'
+
+import Box from 'components/base/Box'
+
+import IconSelectPIN from 'icons/onboarding/SelectPIN'
+import {
+  Title,
+  Description,
+  Inner,
+  InstructionStep,
+  IconInstructionStep,
+} from '../helperComponents'
+import OnboardingFooter from '../OnboardingFooter'
+
+import type { StepProps } from '..'
+
+export default (props: StepProps) => {
+  const { nextStep, prevStep, t } = props
+  const steps = [
+    {
+      key: 'step1',
+      icon: <IconInstructionStep>1</IconInstructionStep>,
+      desc: t('onboarding:selectPIN.instructions.step1'),
+    },
+    {
+      key: 'step2',
+      icon: <IconInstructionStep>2</IconInstructionStep>,
+      desc: t('onboarding:selectPIN.instructions.step2'),
+    },
+    {
+      key: 'step3',
+      icon: <IconInstructionStep>3</IconInstructionStep>,
+      desc: t('onboarding:selectPIN.instructions.step3'),
+    },
+    {
+      key: 'step4',
+      icon: <IconInstructionStep>4</IconInstructionStep>,
+      desc: t('onboarding:selectPIN.instructions.step4'),
+    },
+  ]
+  return (
+    <Box sticky>
+      <Box grow alignItems="center" justifyContent="center">
+        <Box align="center" mb={5}>
+          <Title>{t('onboarding:selectPIN.title')}</Title>
+          <Description style={{ maxWidth: 714 }}>{t('onboarding:selectPIN.desc')}</Description>
+        </Box>
+        <Box>
+          <Inner style={{ width: 760 }}>
+            <Box style={{ width: 260 }} mt={5}>
+              <IconSelectPIN />
+            </Box>
+
+            <Box shrink grow flow={5}>
+              {steps.map(step => <InstructionStep key={step.key} step={step} />)}
+            </Box>
+          </Inner>
+        </Box>
+      </Box>
+      <OnboardingFooter
+        horizontal
+        align="center"
+        flow={2}
+        t={t}
+        nextStep={nextStep}
+        prevStep={prevStep}
+      />
+    </Box>
+  )
+}

src/components/Onboarding/steps/WriteSeed.js

@@ -3,31 +3,74 @@
 import React from 'react'
 
 import Box from 'components/base/Box'
-import Button from 'components/base/Button'
-import { Title, Description, OnboardingFooter } from '../helperComponents'
+import IconWriteSeed from 'icons/onboarding/WriteSeed'
+
+import {
+  Title,
+  Description,
+  Inner,
+  InstructionStep,
+  IconInstructionStep,
+} from '../helperComponents'
+import OnboardingFooter from '../OnboardingFooter'
 
 import type { StepProps } from '..'
 
 export default (props: StepProps) => {
-  const { nextStep, prevStep } = props
+  const { nextStep, prevStep, t } = props
+  const steps = [
+    {
+      key: 'step1',
+      icon: <IconInstructionStep>1</IconInstructionStep>,
+      desc: t('onboarding:writeSeed.instructions.step1'),
+    },
+    {
+      key: 'step2',
+      icon: <IconInstructionStep>2</IconInstructionStep>,
+      desc: t('onboarding:writeSeed.instructions.step2'),
+    },
+    {
+      key: 'step3',
+      icon: <IconInstructionStep>3</IconInstructionStep>,
+      desc: t('onboarding:writeSeed.instructions.step3'),
+    },
+    {
+      key: 'step4',
+      icon: <IconInstructionStep>4</IconInstructionStep>,
+      desc: t('onboarding:writeSeed.instructions.step4'),
+    },
+    {
+      key: 'step5',
+      icon: <IconInstructionStep>5</IconInstructionStep>,
+      desc: t('onboarding:writeSeed.instructions.step5'),
+    },
+  ]
   return (
-    <Box sticky alignItems="center" justifyContent="center">
-      <Box align="center">
-        <Title>This is WRITE SEED screen. 1 line is the maximum</Title>
-        <Description>
-          This is a long text, please replace it with the final wording once it’s done.
-          <br />
-          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
-        </Description>
+    <Box sticky>
+      <Box grow alignItems="center" justifyContent="center">
+        <Box align="center" mb={5}>
+          <Title>{t('onboarding:writeSeed.title')}</Title>
+          <Description style={{ maxWidth: 714 }}>{t('onboarding:writeSeed.desc')}</Description>
+        </Box>
+        <Box>
+          <Inner style={{ width: 760 }}>
+            <Box style={{ width: 260, alignItems: 'center' }} mt={4}>
+              <IconWriteSeed />
+            </Box>
+            <Box shrink grow flow={5}>
+              {steps.map(step => <InstructionStep key={step.key} step={step} />)}
+            </Box>
+          </Inner>
+        </Box>
       </Box>
-      <OnboardingFooter horizontal align="center" justify="flex-end" flow={2}>
-        <Button small outline onClick={() => prevStep()}>
-          Go Back
-        </Button>
-        <Button small primary onClick={() => nextStep()}>
-          Continue
-        </Button>
-      </OnboardingFooter>
+      <OnboardingFooter
+        horizontal
+        align="center"
+        flow={2}
+        t={t}
+        nextStep={nextStep}
+        prevStep={prevStep}
+      />
     </Box>
   )
 }

src/icons/onboarding/WriteSeed.js

@@ -0,0 +1,197 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+  <svg width="157" height="144">
+    <defs>
+      <rect id="b" width="42" height="10" y="45" rx="2" />
+      <filter
+        id="a"
+        width="123.8%"
+        height="200%"
+        x="-11.9%"
+        y="-40%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+        <feColorMatrix
+          in="shadowBlurOuter1"
+          values="0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 1 0"
+        />
+      </filter>
+      <rect id="d" width="42" height="10" x="67" y="35" rx="2" />
+      <filter
+        id="c"
+        width="123.8%"
+        height="200%"
+        x="-11.9%"
+        y="-40%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+        <feColorMatrix
+          in="shadowBlurOuter1"
+          values="0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 1 0"
+        />
+      </filter>
+      <rect id="f" width="42" height="10" x="31" y="11" rx="2" />
+      <filter
+        id="e"
+        width="123.8%"
+        height="200%"
+        x="-11.9%"
+        y="-40%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+        <feColorMatrix
+          in="shadowBlurOuter1"
+          values="0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 1 0"
+        />
+      </filter>
+      <rect id="h" width="42" height="10" x="103" rx="2" />
+      <filter
+        id="g"
+        width="123.8%"
+        height="200%"
+        x="-11.9%"
+        y="-40%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+        <feColorMatrix
+          in="shadowBlurOuter1"
+          values="0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 1 0"
+        />
+      </filter>
+      <rect id="j" width="42" height="10" x="104" y="55" rx="2" />
+      <filter
+        id="i"
+        width="123.8%"
+        height="200%"
+        x="-11.9%"
+        y="-40%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+        <feColorMatrix
+          in="shadowBlurOuter1"
+          values="0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 1 0"
+        />
+      </filter>
+      <rect id="l" width="42" height="10" x="31" y="67" rx="2" />
+      <filter
+        id="k"
+        width="123.8%"
+        height="200%"
+        x="-11.9%"
+        y="-40%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+        <feColorMatrix
+          in="shadowBlurOuter1"
+          values="0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 1 0"
+        />
+      </filter>
+      <rect id="n" width="42" height="10" x="11" y="96" rx="2" />
+      <filter
+        id="m"
+        width="123.8%"
+        height="200%"
+        x="-11.9%"
+        y="-40%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+        <feColorMatrix
+          in="shadowBlurOuter1"
+          values="0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 1 0"
+        />
+      </filter>
+      <rect id="p" width="42" height="10" x="109" y="103" rx="2" />
+      <filter
+        id="o"
+        width="123.8%"
+        height="200%"
+        x="-11.9%"
+        y="-40%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+        <feColorMatrix
+          in="shadowBlurOuter1"
+          values="0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 1 0"
+        />
+      </filter>
+      <rect id="r" width="42" height="10" x="78" y="83" rx="2" />
+      <filter
+        id="q"
+        width="123.8%"
+        height="200%"
+        x="-11.9%"
+        y="-40%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+        <feColorMatrix
+          in="shadowBlurOuter1"
+          values="0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 0 0.847058824 0 0 0 1 0"
+        />
+      </filter>
+    </defs>
+    <g fill="none" fillRule="evenodd" transform="translate(3 2)">
+      <circle
+        cx="79"
+        cy="72"
+        r="57"
+        fill="#6490F1"
+        fillOpacity=".1"
+        stroke="#142533"
+        strokeWidth="2"
+      />
+      <path
+        fill="#6490F1"
+        fillRule="nonzero"
+        stroke="#142533"
+        d="M88.63 118.285h-1.07v-6.596c0-4.791-3.846-8.689-8.574-8.689s-8.574 3.898-8.574 8.69v6.595H69.34c-1.844 0-3.339 1.515-3.339 3.384v15.695c0 1.869 1.495 3.384 3.339 3.384h19.292c1.843 0 3.339-1.515 3.339-3.384V121.67c0-1.87-1.495-3.384-3.34-3.384zm-15.22-6.596c0-3.115 2.502-5.649 5.576-5.649 3.072 0 5.573 2.534 5.573 5.65v6.595H73.41v-6.596z"
+      />
+      <path
+        fill="#FFF"
+        d="M80.694 129.345v4.225a1.72 1.72 0 0 1-1.709 1.73 1.72 1.72 0 0 1-1.708-1.73v-4.225a3.08 3.08 0 0 1-1.325-2.54c0-1.698 1.358-3.074 3.033-3.074 1.675 0 3.033 1.377 3.033 3.075a3.083 3.083 0 0 1-1.325 2.54z"
+      />
+      <use fill="#000" filter="url(#a)" xlinkHref="#b" />
+      <use fill="#FFF" xlinkHref="#b" />
+      <use fill="#000" filter="url(#c)" xlinkHref="#d" />
+      <use fill="#FFF" xlinkHref="#d" />
+      <use fill="#000" filter="url(#e)" xlinkHref="#f" />
+      <use fill="#FFF" xlinkHref="#f" />
+      <use fill="#000" filter="url(#g)" xlinkHref="#h" />
+      <use fill="#FFF" xlinkHref="#h" />
+      <use fill="#000" filter="url(#i)" xlinkHref="#j" />
+      <use fill="#FFF" xlinkHref="#j" />
+      <use fill="#000" filter="url(#k)" xlinkHref="#l" />
+      <use fill="#FFF" xlinkHref="#l" />
+      <use fill="#000" filter="url(#m)" xlinkHref="#n" />
+      <use fill="#FFF" xlinkHref="#n" />
+      <g>
+        <use fill="#000" filter="url(#o)" xlinkHref="#p" />
+        <use fill="#FFF" xlinkHref="#p" />
+      </g>
+      <g>
+        <use fill="#000" filter="url(#q)" xlinkHref="#r" />
+        <use fill="#FFF" xlinkHref="#r" />
+      </g>
+    </g>
+  </svg>
+)

src/reducers/onboarding.js

@@ -42,8 +42,8 @@ const state: OnboardingState = {
       },
     },
     {
-      name: 'chooseDevice',
-      label: 'chooseDevice:translated',
+      name: 'selectDevice',
+      label: 'Select Device',
       options: {
         showFooter: false,
         showBackground: true,
@@ -51,8 +51,8 @@ const state: OnboardingState = {
       },
     },
     {
-      name: 'choosePIN',
-      label: 'choosePIN:translated',
+      name: 'selectPIN',
+      label: 'Select PIN',
       options: {
         showFooter: false,
         showBackground: true,
@@ -61,7 +61,7 @@ const state: OnboardingState = {
     },
     {
       name: 'writeSeed',
-      label: 'writeSeed:translated',
+      label: 'Write Seed',
       options: {
         showFooter: false,
         showBackground: true,
@@ -70,7 +70,7 @@ const state: OnboardingState = {
     },
     {
       name: 'genuineCheck',
-      label: 'genuineCheck:translated',
+      label: 'Genuine Check',
       options: {
         showFooter: false,
         showBackground: true,
@@ -79,7 +79,7 @@ const state: OnboardingState = {
     },
     {
       name: 'setPassword',
-      label: 'Password:translated',
+      label: 'Set Password',
       options: {
         showFooter: false,
         showBackground: true,
@@ -88,7 +88,7 @@ const state: OnboardingState = {
     },
     {
       name: 'analytics',
-      label: 'Analytics & Bug report:translated',
+      label: 'Analytics & Bug report',
       options: {
         showFooter: false,
         showBackground: true,

static/i18n/en/common.yml

@@ -1,6 +1,7 @@
 ok: Okay
 confirm: Confirm
 cancel: Cancel
+continue: Continue
 chooseWalletPlaceholder: Choose a wallet...
 currency: Currency
 selectAccount: Select an account

static/i18n/en/onboarding.yml

@@ -15,7 +15,7 @@ init:
   noDevice:
     title: Do not have a Ledger device yet? Buy one
     desc: Please replace it with the final wording once it’s done.
-chooseDevice:
+selectDevice:
   title: To get started, select your device
   desc: This is a long text, please replace it with the final wording once it’s done. Lorem ipsum dolor amet ledger lorem dolor ipsum amet
   ledgerNanoCard:
@@ -32,3 +32,12 @@ selectPIN:
     step2: Press both buttons simultaneously as instructed on your Ledger Nano S screen.
     step3: Select Configure as new device on your Ledger Nano S by pressing the right button, located above the validation icon.
     step4: Choose a PIN code between 4 and 8 digits long.
+writeSeed:
+  title: 24-Word Recovery phrase
+  desc: The 24 words that constitute your recovery phrase will now be displayed one by one on the Ledger Nano S screen. These 24 words will be displayed only once during this initialization.
+  instructions:
+    step1: Copy the first word (Word \#1) in position 1 on the blank Recovery sheet included in the box.
+    step2: Move to Word \#2 by pressing the right button, copy it in position 2 on the Recovery sheet.
+    step3: Repeat the process until all 24 words are copied on the Recovery sheet.
+    step4: To confirm, use the right or left button to select each of the 24 words in the right order.
+    step5: Validate each word by simultaneously pressing both buttons.