Merge branch 'master' into minorFeaturesBranch

7 years ago · 8c168d5786
20 changed files with 939 additions and 227 deletions
--- a/src/components/Onboarding/OnboardingFooter.js
+++ b/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
--- a/src/components/Onboarding/helperComponents.js
+++ b/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;
+`
--- a/src/components/Onboarding/index.js
+++ b/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,
@ -128,7 +128,7 @@ class Onboarding extends PureComponent<Props> {

 const Container = styled(Box).attrs({
  bg: 'white',
-  p: 5,
+  p: 60,
 })`
  position: fixed;
  top: 0;
@ -138,6 +138,6 @@ const Container = styled(Box).attrs({
  z-index: 25;
 `
 const StepContainer = styled(Box).attrs({
-  p: 20,
+  p: 40,
 })``
 export default compose(connect(mapStateToProps, mapDispatchToProps), translate())(Onboarding)
--- a/src/components/Onboarding/steps/ChooseDevice.js
+++ b/src/components/Onboarding/steps/ChooseDevice.js
@ -1,62 +0,0 @@
-// @flow
-
-import React from 'react'
-import styled from 'styled-components'
-
-import Box from 'components/base/Box'
-import IconNanoS from 'icons/device/NanoS'
-import IconBlue from 'icons/device/Blue'
-import { Title, Description, Inner } from '../helperComponents'
-
-import type { StepProps } from '..'
-
-export default (props: StepProps) => {
-  const { nextStep } = props
-
-  return (
-    <Box sticky alignItems="center" justifyContent="center">
-      <Box align="center">
-        <Title>This is the title of the 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>
-          <Inner>
-            <DeviceContainer onClick={() => nextStep()}>
-              <DeviceIcon>
-                <IconNanoS size={46} />
-              </DeviceIcon>
-              <Title>Ledger Nano S</Title>
-              <Description>Please replace it with the final wording once it’s done.</Description>
-            </DeviceContainer>
-            <DeviceContainer>
-              <DeviceIcon>
-                <IconBlue size={46} />
-              </DeviceIcon>
-              <Title>Ledger Blue</Title>
-              <Description>Please replace it with the final wording once it’s done.</Description>
-            </DeviceContainer>
-          </Inner>
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-const DeviceContainer = styled(Box).attrs({
-  alignItems: 'center',
-  justifyContent: 'center',
-})`
-  width: 218px;
-  height: 204px;
-  border: 1px solid #d8d8d8;
-`
-const DeviceIcon = styled(Box).attrs({
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: 'graphite',
-})`
-  width: 55px;
-`
--- a/src/components/Onboarding/steps/ChoosePIN.js
+++ b/src/components/Onboarding/steps/ChoosePIN.js
@ -1,33 +0,0 @@
-// @flow
-
-import React from 'react'
-
-import Box from 'components/base/Box'
-import Button from 'components/base/Button'
-import { Title, Description, OnboardingFooter } from '../helperComponents'
-
-import type { StepProps } from '..'
-
-export default (props: StepProps) => {
-  const { nextStep, prevStep } = props
-  return (
-    <Box sticky alignItems="center" justifyContent="center">
-      <Box align="center">
-        <Title>This is CHOOSE PIN 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>
-      <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>
-    </Box>
-  )
-}
--- a/src/components/Onboarding/steps/Finish.js
+++ b/src/components/Onboarding/steps/Finish.js
@ -1,34 +1,93 @@
 // @flow

 import React from 'react'
+import { shell } from 'electron'
+import styled from 'styled-components'

 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
-import Text from 'components/base/Text'

-import IconFinishOnboarding from 'icons/LockScreen'
+import IconCheckCircle from 'icons/CheckCircle'
+import IconSocialTwitter from 'icons/Eye'
+import IconSocialReddit from 'icons/User'
+import IconSocialGithub from 'icons/Share'
+
 import type { StepProps } from '..'
 import { Title, Description } from '../helperComponents'

+const socialMedia = [
+  {
+    key: 'twitter',
+    url: 'https://twitter.com/LedgerHQ',
+    icon: <IconSocialTwitter size={24} />,
+    onClick: url => shell.openExternal(url),
+  },
+  {
+    key: 'reddit',
+    url: 'https://www.reddit.com/r/ledgerwallet/',
+    icon: <IconSocialReddit size={24} />,
+    onClick: url => shell.openExternal(url),
+  },
+  {
+    key: 'github',
+    url: 'https://github.com/LedgerHQ',
+    icon: <IconSocialGithub size={24} />,
+    onClick: url => shell.openExternal(url),
+  },
+]
+
 export default (props: StepProps) => {
-  const { finish, jumpStep } = props
+  const { finish, t } = props
  return (
    <Box sticky alignItems="center" justifyContent="center">
-      <Box align="center">
-        <Title>This is ENJOY THE APP 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>
-        <IconFinishOnboarding size={136} />
-        <Button small primary onClick={() => finish()}>
-          Open App
+      <Box align="center" alignItems="center">
+        <Box color="positiveGreen">
+          <IconCheckCircle size={44} />
+        </Box>
+        <Box style={{ paddingTop: '20px', maxWidth: 536 }} align="center" mb={5}>
+          <Title>{t('onboarding:finish.title')}</Title>
+          <Description>{t('onboarding:finish.desc')}</Description>
+        </Box>
+        <Button primary onClick={() => finish()}>
+          {t('onboarding:finish.openAppButton')}
        </Button>
-        <Box onClick={() => jumpStep('start')} style={{ padding: 15 }}>
-          <Text color="smoke">I want to go back to Onboarding</Text>
+        <Box alignItems="center" mt={7}>
+          <FollowUsDesc>{t('onboarding:finish.followUsLabel')}</FollowUsDesc>
+        </Box>
+        <Box horizontal flow={5} color="grey">
+          {socialMedia.map(socMed => <SocialMediaBox key={socMed.key} socMed={socMed} />)}
        </Box>
      </Box>
    </Box>
  )
 }
+
+type SocMed = {
+  icon: any,
+  url: string,
+  onClick: string => void,
+}
+
+export function SocialMediaBox({ socMed }: { socMed: SocMed }) {
+  const { icon, url, onClick } = socMed
+  return (
+    <Box
+      horizontal
+      style={{
+        cursor: 'pointer',
+      }}
+      onClick={() => onClick(url)}
+    >
+      {icon}
+    </Box>
+  )
+}
+
+export const FollowUsDesc = styled(Box).attrs({
+  ff: 'Museo Sans|Regular',
+  fontSize: 4,
+  textAlign: 'center',
+  color: 'grey',
+})`
+  margin: 10px auto;
+`
--- a/src/components/Onboarding/steps/Init.js
+++ b/src/components/Onboarding/steps/Init.js
@ -1,90 +1,109 @@
 // @flow

 import React from 'react'
-import styled from 'styled-components'
 import { shell } from 'electron'

-import Box from 'components/base/Box'
+import styled from 'styled-components'
+import Box, { Card } from 'components/base/Box'
 import IconUser from 'icons/User'
-import { Title, Description, Inner } from '../helperComponents'
+import IconChevronRight from 'icons/ChevronRight'
+import { Title } from '../helperComponents'

 import type { StepProps } from '..'

 export default (props: StepProps) => {
-  const { nextStep, jumpStep } = props
-  const handleOpenLink = (url: string) => () => shell.openExternal(url)
-  /* TODO: all titles, descriptions to be wrapped in a translation tag once defined */
+  const { nextStep, jumpStep, t } = props
+  const optionCards = [
+    {
+      key: 'newDevice',
+      icon: <IconUser size={22} />,
+      title: t('onboarding:init.newDevice.title'),
+      desc: t('onboarding:init.newDevice.desc'),
+      onClick: () => nextStep(),
+    },
+    {
+      key: 'restoreDevice',
+      icon: <IconUser size={22} />,
+      title: t('onboarding:init.restoreDevice.title'),
+      desc: t('onboarding:init.restoreDevice.desc'),
+      onClick: () => jumpStep('choosePIN'),
+    },
+    {
+      key: 'initializedDevice',
+      icon: <IconUser size={22} />,
+      title: t('onboarding:init.initializedDevice.title'),
+      desc: t('onboarding:init.initializedDevice.desc'),
+      onClick: () => jumpStep('choosePIN'),
+    },
+    {
+      key: 'noDevice',
+      icon: <IconUser size={22} />,
+      title: t('onboarding:init.noDevice.title'),
+      desc: t('onboarding:init.noDevice.desc'),
+      onClick: () => shell.openExternal('https://www.ledger.fr/'),
+    },
+  ]
+
  return (
    <Box sticky alignItems="center" justifyContent="center">
      <Box align="center">
-        <Title>This is the title of the 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 style={{ paddingBottom: 10 }}>
-          <Inner>
-            <DeviceContainer onClick={() => nextStep()}>
-              {/* colors are temp, we don't have icons now */}
-              <DeviceIcon style={{ color: '#66be54' }}>
-                <IconUser size={24} />
-              </DeviceIcon>
-              <TrackChoiceTitle>Clean Nano S setup</TrackChoiceTitle>
-              <Description>Please replace it with the final wording once it’s done.</Description>
-            </DeviceContainer>
-            <DeviceContainer onClick={() => jumpStep('choosePIN')}>
-              <DeviceIcon style={{ color: '#66be54' }}>
-                <IconUser size={24} />
-              </DeviceIcon>
-              <TrackChoiceTitle>Existing seed + Clean setup</TrackChoiceTitle>
-              <Description>Please replace it with the final wording once it’s done.</Description>
-            </DeviceContainer>
-          </Inner>
+        <Box color="wallet">
+          <IconUser size={36} />
+        </Box>
+        <Box style={{ padding: 20, maxWidth: 650 }}>
+          <Title>{t('onboarding:init.title')}</Title>
        </Box>
-        <Box>
-          <Inner>
-            <DeviceContainer onClick={() => nextStep()}>
-              <DeviceIcon style={{ color: '#6490f1' }}>
-                <IconUser size={24} />
-              </DeviceIcon>
-              <TrackChoiceTitle>Migrate accounts</TrackChoiceTitle>
-              <Description>Please replace it with the final wording once it’s done.</Description>
-            </DeviceContainer>
-            <DeviceContainer onClick={handleOpenLink('https://www.ledger.fr/')}>
-              <DeviceIcon style={{ color: '#ea2e41' }}>
-                <IconUser size={24} />
-              </DeviceIcon>
-              <TrackChoiceTitle>Not a user, but would love to</TrackChoiceTitle>
-              <Description>Please replace it with the final wording once it’s done.</Description>
-            </DeviceContainer>
-          </Inner>
+        <Box mt={5} flow={5}>
+          {optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}
        </Box>
      </Box>
    </Box>
  )
 }

-const DeviceContainer = styled(Box).attrs({
-  alignItems: 'center',
-  justifyContent: 'center',
-})`
-  width: 218px;
-  height: 204px;
-  border: 1px solid #d8d8d8;
-`
-const DeviceIcon = styled(Box).attrs({
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: 'graphite',
-})`
-  width: 55px;
-  padding: 10px;
-`
-export const TrackChoiceTitle = styled(Box).attrs({
-  width: 152,
-  height: 27,
-  ff: 'Museo Sans|Regular',
-  fontSize: 5,
-  color: 'dark',
+type CardType = {
+  icon: any,
+  desc: any,
+  title: any,
+  onClick: Function,
+}
+
+export function OptionFlowCard({ card }: { card: CardType }) {
+  const { icon, desc, title, onClick } = card
+  return (
+    <Card
+      horizontal
+      p={5}
+      style={{
+        cursor: 'pointer',
+        border: 'solid 1px #d8d8d8',
+        minWidth: '533px',
+        maxHeight: '80px',
+      }}
+      onClick={onClick}
+    >
+      <Box justify="center" color="grey" style={{ width: 50 }}>
+        {icon}
+      </Box>
+      <Box ff="Open Sans|Regular" justify="center" fontSize={4} grow>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{desc}</CardDescription>
+      </Box>
+      <Box justify="center" color="grey">
+        <IconChevronRight size={22} />
+      </Box>
+    </Card>
+  )
+}
+
+export const CardDescription = styled(Box).attrs({
+  ff: 'Open Sans|Regular',
+  fontSize: 4,
+  textAlign: 'left',
+  color: 'grey',
+})``
+export const CardTitle = styled(Box).attrs({
+  ff: 'Open Sans|SemiBold',
+  fontSize: 4,
+  textAlign: 'left',
 })``
--- a/src/components/Onboarding/steps/SelectDevice.js
+++ b/src/components/Onboarding/steps/SelectDevice.js
@ -0,0 +1,79 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+import IconLedgerNano from 'icons/onboarding/LedgerNano'
+import IconLedgerBlue from 'icons/onboarding/LedgerBlue'
+import { Title, Description, Inner } from '../helperComponents'
+
+import type { StepProps } from '..'
+
+export default (props: StepProps) => {
+  const { nextStep, t } = props
+
+  return (
+    <Box sticky alignItems="center" justifyContent="center">
+      <Box align="center">
+        <Title>{t('onboarding:selectDevice.title')}</Title>
+        <Description style={{ maxWidth: 714 }}>{t('onboarding:selectDevice.desc')}</Description>
+        <Box>
+          <Inner>
+            <DeviceContainer onClick={() => nextStep()}>
+              <DeviceIcon>
+                <IconLedgerNano />
+              </DeviceIcon>
+              <BlockTitle pb={3}>{t('onboarding:selectDevice.ledgerNanoCard.title')}</BlockTitle>
+              <BlockDescription>
+                {t('onboarding:selectDevice.ledgerNanoCard.desc')}
+              </BlockDescription>
+            </DeviceContainer>
+            <DeviceContainer>
+              <DeviceIcon>
+                <IconLedgerBlue />
+              </DeviceIcon>
+              <BlockTitle pb={3}>{t('onboarding:selectDevice.ledgerBlueCard.title')}</BlockTitle>
+              <BlockDescription>
+                {t('onboarding:selectDevice.ledgerBlueCard.desc')}
+              </BlockDescription>
+            </DeviceContainer>
+          </Inner>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+const DeviceContainer = styled(Box).attrs({
+  alignItems: 'center',
+  justifyContent: 'center',
+})`
+  width: 218px;
+  height: 204px;
+  border: 1px solid #d8d8d8;
+  &:hover,
+  &:focus {
+    opacity: 0.5;
+    cursor: pointer;
+  }
+`
+const DeviceIcon = styled(Box).attrs({
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'graphite',
+})`
+  width: 55px;
+  min-height: 80px;
+`
+export const BlockDescription = styled(Box).attrs({
+  ff: 'Open Sans|Regular',
+  fontSize: 4,
+  textAlign: 'center',
+  color: 'grey',
+})``
+export const BlockTitle = styled(Box).attrs({
+  ff: 'Open Sans|SemiBold',
+  fontSize: 4,
+  textAlign: 'center',
+})``
--- a/src/components/Onboarding/steps/SelectPIN.js
+++ b/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>
+  )
+}
--- a/src/components/Onboarding/steps/Start.js
+++ b/src/components/Onboarding/steps/Start.js
@ -5,20 +5,21 @@ import React from 'react'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'

-import LedgerLogo from 'icons/LockScreen'
+import IconGetStarted from 'icons/onboarding/GetStartedLogo'
 import type { StepProps } from '..'
 import { Title, Description } from '../helperComponents'

 export default (props: StepProps) => {
-  const { jumpStep } = props
+  const { jumpStep, t } = props
  return (
    <Box sticky alignItems="center" justifyContent="center">
      <Box align="center" alignItems="center">
-        <LedgerLogo size={136} />
-        <Title>Ledger Live</Title>
-        <Title>Welcome to the new Ledger Live Desktop app.</Title>
-        <Description>Let’s get started!</Description>
-        <Button small primary onClick={() => jumpStep('init')}>
+        <IconGetStarted />
+        <Box style={{ paddingTop: '20px' }}>
+          <Title>{t('onboarding:start.title')}</Title>
+          <Description>{t('onboarding:start.desc')}</Description>
+        </Box>
+        <Button primary onClick={() => jumpStep('init')}>
          Get Started
        </Button>
      </Box>
--- a/src/components/Onboarding/steps/WriteSeed.js
+++ b/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>
  )
 }
--- a/src/icons/onboarding/GetStartedLogo.js
+++ b/src/icons/onboarding/GetStartedLogo.js
@ -0,0 +1,79 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+  <svg width="113" height="109">
+    <g fill="none" fillRule="evenodd">
+      <rect
+        width="1.44"
+        height="5.6"
+        y="16.6"
+        fill="#1D2028"
+        rx=".72"
+        transform="matrix(-1 0 0 1 1.44 0)"
+      />
+      <rect
+        width="1.44"
+        height="5.6"
+        y="34.8"
+        fill="#1D2028"
+        rx=".72"
+        transform="matrix(-1 0 0 1 1.44 0)"
+      />
+      <path
+        fill="#6490F1"
+        fillOpacity=".1"
+        stroke="#1D2028"
+        strokeWidth="2"
+        d="M16.592 12c.225 0 .408.183.408.408v95.184a.408.408 0 0 1-.408.408H2.128a.408.408 0 0 1-.408-.408V12.408c0-.225.183-.408.408-.408h14.464z"
+      />
+      <rect
+        width="7.64"
+        height="27"
+        x="5.513"
+        y="18.522"
+        fill="#FFF"
+        stroke="#6490F1"
+        rx=".704"
+        transform="matrix(-1 0 0 1 18.665 0)"
+      />
+      <path
+        fill="#FFF"
+        stroke="#1D2028"
+        strokeWidth="2"
+        d="M9.36 54A7.64 7.64 0 0 1 17 61.64v45.952a.408.408 0 0 1-.408.408H2.128a.408.408 0 0 1-.408-.408V61.64A7.64 7.64 0 0 1 9.36 54z"
+      />
+      <ellipse
+        cx="9.36"
+        cy="61.4"
+        fill="#FFF"
+        stroke="#6490F1"
+        rx="3.82"
+        ry="3.7"
+        transform="matrix(-1 0 0 1 18.72 0)"
+      />
+      <rect width="3.137" height="9.306" x="109.863" y="13.959" fill="#1D2028" rx="1.569" />
+      <rect
+        width="76.431"
+        height="106.571"
+        x="34"
+        y="1"
+        fill="#6490F1"
+        fillOpacity=".1"
+        stroke="#1D2027"
+        strokeWidth="2"
+        rx="5.44"
+      />
+      <rect
+        width="52.333"
+        height="79.653"
+        x="46.043"
+        y="15.235"
+        fill="#FFF"
+        stroke="#6490F1"
+        rx="4.08"
+      />
+    </g>
+  </svg>
+)
--- a/src/icons/onboarding/LedgerBlue.js
+++ b/src/icons/onboarding/LedgerBlue.js
@ -0,0 +1,32 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+  <svg width="41" height="56">
+    <g fill="none" fillRule="evenodd">
+      <rect width="1.608" height="4.8" x="39.392" y="7.2" fill="#1D2028" rx=".804" />
+      <rect
+        width="38.696"
+        height="54.5"
+        x=".75"
+        y=".75"
+        fill="#6490F1"
+        fillOpacity=".1"
+        stroke="#1D2027"
+        strokeWidth="1.5"
+        rx="3.2"
+      />
+      <rect
+        width="26.833"
+        height="41.1"
+        x="6.678"
+        y="7.85"
+        fill="#FFF"
+        stroke="#6490F1"
+        strokeWidth=".5"
+        rx="2.4"
+      />
+    </g>
+  </svg>
+)
--- a/src/icons/onboarding/LedgerNano.js
+++ b/src/icons/onboarding/LedgerNano.js
@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+  <svg width="112" height="20">
+    <g fill="none" fillRule="evenodd" transform="rotate(-90 10 10)">
+      <rect width="1.6" height="6.4" x="18.4" y="6.4" fill="#1D2028" rx=".8" />
+      <rect width="1.6" height="6.4" x="18.4" y="27.2" fill="#1D2028" rx=".8" />
+      <path
+        fill="#6490F1"
+        fillOpacity=".1"
+        stroke="#1D2028"
+        strokeWidth="1.5"
+        d="M1.6.75a.85.85 0 0 0-.85.85v108.8c0 .47.38.85.85.85h16c.47 0 .85-.38.85-.85V1.6a.85.85 0 0 0-.85-.85h-16z"
+      />
+      <rect
+        width="9.1"
+        height="31.5"
+        x="5.081"
+        y="8.275"
+        fill="#FFF"
+        stroke="#6490F1"
+        strokeWidth=".5"
+        rx=".8"
+      />
+      <path
+        fill="#FFF"
+        stroke="#1D2028"
+        strokeWidth="1.5"
+        d="M9.6 48.75A8.85 8.85 0 0 0 .75 57.6v52.8c0 .47.38.85.85.85h16c.47 0 .85-.38.85-.85V57.6a8.85 8.85 0 0 0-8.85-8.85z"
+      />
+      <circle cx="9.6" cy="57.6" r="4.55" fill="#FFF" stroke="#6490F1" strokeWidth=".5" />
+    </g>
+  </svg>
+)
--- a/src/icons/onboarding/SelectPIN.js
+++ b/src/icons/onboarding/SelectPIN.js
@ -0,0 +1,75 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+  <svg width="260" height="129">
+    <defs>
+      <linearGradient id="a" x1="50%" x2="50%" y1="100%" y2="0%">
+        <stop offset="1.367%" stopColor="#FFF" />
+        <stop offset="100%" stopColor="#1D2027" />
+      </linearGradient>
+      <path
+        id="b"
+        d="M91 0h33.711a4 4 0 0 1 4 4v108.144c0 11.519-9.337 20.856-20.855 20.856C96.337 133 87 123.663 87 112.144V4a4 4 0 0 1 4-4z"
+      />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <path
+        stroke="#1D2027"
+        strokeWidth="2"
+        d="M126.962 31.06a1 1 0 0 1-1 1H99.737a5 5 0 0 1-5-5v-8.485a5 5 0 0 1 5-5h26.225a1 1 0 0 1 1 1V31.06zm-32.608-5.208h-10.93v-6.435h10.93v6.435z"
+      />
+      <path
+        stroke="#1D2027"
+        d="M127.53 28.836V16.58h11.076a1.5 1.5 0 0 1 1.5 1.5v9.256a1.5 1.5 0 0 1-1.5 1.5H127.53z"
+      />
+      <path
+        d="M138.202 19.495h-6.794m6.794 6.208h-6.794"
+        stroke="#1D2027"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        stroke="url(#a)"
+        strokeWidth="2.772"
+        d="M8.222 59.31h.23l-.23-.23v-1.155l-.578.577-.578-.577v1.155l-.23.23h.23v79.88h-.23l.23.23v1.156l.578-.578.578.578v-1.156l.23-.23h-.23V59.31zm5.657 0h.23l-.23-.23v-1.155l-.578.577-.578-.577v1.155l-.23.23h.23v79.88h-.23l.23.23v1.156l.578-.578.578.578v-1.156l.23-.23h-.23V59.31z"
+        transform="matrix(0 -1 -1 0 140.606 33.06)"
+      />
+      <g transform="rotate(-90 128.59 1.975)">
+        <rect width="4.492" height="17.12" x="125.336" y="15.505" fill="#142533" rx="2" />
+        <rect width="4.492" height="17.12" x="125.336" y="70.094" fill="#142533" rx="2" />
+        <use fill="#FFF" xlinkHref="#b" />
+        <path
+          fill="#6490F1"
+          fillOpacity=".15"
+          stroke="#142533"
+          strokeLinejoin="square"
+          strokeWidth="2"
+          d="M91 1a3 3 0 0 0-3 3v108.144C88 123.11 96.89 132 107.856 132c10.966 0 19.855-8.89 19.855-19.856V4a3 3 0 0 0-3-3H91z"
+        />
+        <rect
+          width="20.176"
+          height="61.019"
+          x="97.5"
+          y="21.5"
+          fill="#FFF"
+          stroke="#6490F1"
+          rx="1.6"
+        />
+        <path
+          fill="#6490F1"
+          fillRule="nonzero"
+          d="M103.735 40.983v21.563c0 .397.225.719.502.719h6.526c.277 0 .502-.322.502-.719V40.983c0-.396-.225-.718-.502-.718h-6.526c-.277 0-.502.322-.502.718zm3.976 16.332c.04 0 .073.032.073.072v.73c0 .03.018.057.046.069a.08.08 0 0 0 .082-.016l.517-.515a.073.073 0 0 1 .105 0l.299.295a.077.077 0 0 1 0 .105l-.517.515a.075.075 0 0 0 .052.127h.73c.042 0 .076.034.076.075v.418a.075.075 0 0 1-.075.075h-.73a.075.075 0 1 0-.053.127l.517.515a.077.077 0 0 1 0 .105l-.299.295a.073.073 0 0 1-.105 0l-.517-.515a.076.076 0 0 0-.128.053v.727a.072.072 0 0 1-.073.075h-.422a.073.073 0 0 1-.073-.075v-.727a.076.076 0 0 0-.128-.052l-.517.514a.073.073 0 0 1-.105 0l-.299-.292a.077.077 0 0 1 0-.105l.517-.515a.075.075 0 0 0-.052-.128h-.73a.075.075 0 0 1-.076-.075v-.427c0-.042.034-.075.075-.075h.73c.03 0 .058-.019.07-.047a.075.075 0 0 0-.017-.08l-.517-.516a.077.077 0 0 1 0-.105l.299-.295a.073.073 0 0 1 .105 0l.517.515a.076.076 0 0 0 .128-.052v-.73c0-.04.033-.073.073-.073l.422.008zm0-4.718c.04.002.073.035.073.075v.728c0 .03.018.057.046.068.028.011.06.005.082-.016l.517-.515a.078.078 0 0 1 .105 0l.299.298a.077.077 0 0 1 0 .105l-.517.515a.075.075 0 0 0 .052.127h.73c.041 0 .075.032.076.073v.42a.075.075 0 0 1-.075.072h-.73a.075.075 0 1 0-.053.127l.517.516a.077.077 0 0 1 0 .105l-.299.297a.078.078 0 0 1-.105 0l-.517-.515a.076.076 0 0 0-.128.053v.727c0 .04-.033.074-.073.075h-.422a.075.075 0 0 1-.073-.075v-.727a.076.076 0 0 0-.128-.052l-.517.514a.078.078 0 0 1-.105 0l-.299-.297a.077.077 0 0 1 0-.105l.517-.515a.075.075 0 0 0-.052-.128h-.73a.075.075 0 0 1-.076-.072v-.42a.075.075 0 0 1 .075-.073h.73c.03 0 .058-.018.07-.046a.075.075 0 0 0-.017-.081l-.517-.515a.077.077 0 0 1 0-.105l.299-.298a.078.078 0 0 1 .105 0l.517.515a.076.076 0 0 0 .128-.052v-.728c0-.04.033-.073.073-.075h.422zm0-4.715a.073.073 0 0 1 .073.075v.728c0 .03.018.057.046.068.028.011.06.005.082-.016l.517-.515a.073.073 0 0 1 .105 0l.299.293a.077.077 0 0 1 0 .105l-.517.515a.075.075 0 0 0 .052.127h.73c.042 0 .076.034.076.075v.428a.075.075 0 0 1-.075.075h-.73a.075.075 0 1 0-.053.127l.517.515a.077.077 0 0 1 0 .105l-.299.295a.073.073 0 0 1-.105 0l-.517-.515a.076.076 0 0 0-.128.053v.722c0 .04-.033.073-.073.073h-.422a.073.073 0 0 1-.073-.073v-.73a.076.076 0 0 0-.128-.052l-.517.515a.073.073 0 0 1-.105 0l-.299-.295a.077.077 0 0 1 0-.105l.517-.515a.075.075 0 0 0-.052-.128h-.73a.075.075 0 0 1-.076-.075v-.417c0-.042.034-.075.075-.075h.73c.03 0 .058-.019.07-.047a.075.075 0 0 0-.017-.08l-.517-.516a.077.077 0 0 1 0-.105l.299-.295a.073.073 0 0 1 .105 0l.517.515a.076.076 0 0 0 .128-.052v-.728a.072.072 0 0 1 .073-.075h.422zm0-5a.073.073 0 0 1 .073.075v.728c0 .03.018.057.046.068.028.011.06.005.082-.016l.517-.515a.073.073 0 0 1 .105 0l.299.293a.077.077 0 0 1 0 .105l-.517.515a.075.075 0 0 0 .052.127h.73c.042 0 .076.034.076.075v.428a.075.075 0 0 1-.075.075h-.73a.075.075 0 1 0-.053.127l.517.515a.077.077 0 0 1 0 .105l-.299.295a.073.073 0 0 1-.105 0l-.517-.515a.076.076 0 0 0-.128.053v.722c0 .04-.033.073-.073.073h-.422a.073.073 0 0 1-.073-.073v-.73a.076.076 0 0 0-.128-.052l-.517.515a.073.073 0 0 1-.105 0l-.299-.295a.077.077 0 0 1 0-.105l.517-.515a.075.075 0 0 0-.052-.128h-.73a.075.075 0 0 1-.076-.075v-.417c0-.042.034-.075.075-.075h.73c.03 0 .058-.019.07-.047a.075.075 0 0 0-.017-.08l-.517-.516a.077.077 0 0 1 0-.105l.299-.295a.073.073 0 0 1 .105 0l.517.515a.076.076 0 0 0 .128-.052v-.728a.072.072 0 0 1 .073-.075h.422z"
+        />
+        <path
+          fill="#FFF"
+          stroke="#142533"
+          strokeWidth="2"
+          d="M123.166 125.105c7.049-8.4 5.953-20.925-2.447-27.974l-90.824-76.21a3 3 0 0 0-4.227.37L4 47.115a3 3 0 0 0 .37 4.227l90.824 76.21c8.4 7.049 20.924 5.953 27.973-2.447z"
+        />
+        <ellipse cx="108.016" cy="111.123" stroke="#6490F1" rx="10.57" ry="10.644" />
+      </g>
+    </g>
+  </svg>
+)
--- a/src/icons/onboarding/WriteSeed.js
+++ b/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>
+)
--- a/src/reducers/onboarding.js
+++ b/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,
--- a/src/reducers/settings.js
+++ b/src/reducers/settings.js
@ -7,7 +7,7 @@ import {
  listCryptoCurrencies,
 } from '@ledgerhq/live-common/lib/helpers/currencies'
 import { createSelector } from 'reselect'
-import type { Selector } from 'reselect'
+import type { InputSelector as Selector } from 'reselect'
 import type { CryptoCurrency, Currency, Account } from '@ledgerhq/live-common/lib/types'

 import type { Settings, CurrencySettings } from 'types/common'
--- a/static/i18n/en/common.yml
+++ b/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
--- a/static/i18n/en/onboarding.yml
+++ b/static/i18n/en/onboarding.yml
@ -0,0 +1,48 @@
+start:
+  title: Welcome to the new Ledger Live Desktop app.
+  desc: Let’s get started!
+init:
+  title: Welcome to Ledger Live, the computer companion app to your Ledger device. Please select one of the options below
+  newDevice:
+    title: Initialize your new Ledger device
+    desc: Please replace it with the final wording once it’s done.
+  restoreDevice:
+    title: Restore a Ledger device
+    desc: Please replace it with the final wording once it’s done.
+  initializedDevice:
+    title: I have already initialized my device
+    desc: Please replace it with the final wording once it’s done.
+  noDevice:
+    title: Do not have a Ledger device yet? Buy one
+    desc: Please replace it with the final wording once it’s done.
+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:
+    title: Ledger Nano S
+    desc: Please replace it with the final wording once it’s done.
+  ledgerBlueCard:
+    title: Ledger Blue
+    desc:  Please replace it with the final wording once it’s done.
+selectPIN:
+  title: Select PIN code
+  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
+  instructions:
+    step1: Connect your Ledger Nano S to your computer using the supplied micro USB cable.
+    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.
+finish:
+  title: This is the title of the screen. 1 line is the maximum
+  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
+  openAppButton: Open app
+  followUsLabel: Follow us to stay updated