diff --git a/src/components/Onboarding/OnboardingFooter.js b/src/components/Onboarding/OnboardingFooter.js
index a7ef3966..922e3423 100644
--- 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) => (
+
+
+
+
+)
+export default OnboardingFooter
diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index 2c0da32a..8b2a03e1 100644
--- 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 (
+
+
+ {icon}
+
+
+ {desc}
+
+
+ )
+}
+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;
+`
diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js
index 8fe5e2a8..6c5295a9 100644
--- 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,
diff --git a/src/components/Onboarding/steps/ChoosePIN.js b/src/components/Onboarding/steps/ChoosePIN.js
deleted file mode 100644
index 48cabebb..00000000
--- a/src/components/Onboarding/steps/ChoosePIN.js
+++ /dev/null
@@ -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: 1,
- desc: t('onboarding:selectPIN.instructions.step1'),
- },
- {
- key: 'step2',
- icon: 2,
- desc: t('onboarding:selectPIN.instructions.step2'),
- },
- {
- key: 'step3',
- icon: 3,
- desc: t('onboarding:selectPIN.instructions.step3'),
- },
- {
- key: 'step4',
- icon: 4,
- desc: t('onboarding:selectPIN.instructions.step4'),
- },
- ]
- return (
-
-
-
- {t('onboarding:selectPIN.title')}
- {t('onboarding:selectPIN.desc')}
-
-
-
-
-
-
-
-
- {steps.map(step => )}
-
-
-
-
-
-
-
-
-
- )
-}
-
-type StepType = {
- icon: any,
- desc: string,
-}
-export function SelectPINStep({ step }: { step: StepType }) {
- const { icon, desc } = step
- return (
-
-
- {icon}
-
-
- {desc}
-
-
- )
-}
-
-export const CardDescription = styled(Box).attrs({
- ff: 'Open Sans|Regular',
- fontSize: 4,
- textAlign: 'left',
- color: 'smoke',
- shrink: 1,
-})``
diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js
index 355ded40..9d088a19 100644
--- a/src/components/Onboarding/steps/Init.js
+++ b/src/components/Onboarding/steps/Init.js
@@ -53,7 +53,9 @@ export default (props: StepProps) => {
{t('onboarding:init.title')}
- {optionCards.map(card => )}
+
+ {optionCards.map(card => )}
+
)
@@ -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;
-`
+})``
diff --git a/src/components/Onboarding/steps/ChooseDevice.js b/src/components/Onboarding/steps/SelectDevice.js
similarity index 72%
rename from src/components/Onboarding/steps/ChooseDevice.js
rename to src/components/Onboarding/steps/SelectDevice.js
index 582ad42d..fc5d226a 100644
--- a/src/components/Onboarding/steps/ChooseDevice.js
+++ b/src/components/Onboarding/steps/SelectDevice.js
@@ -16,27 +16,26 @@ export default (props: StepProps) => {
return (
- {t('onboarding:chooseDevice.title')}
- {/* TODO shrink description so it forms 2 lines */}
- {t('onboarding:chooseDevice.desc')}
+ {t('onboarding:selectDevice.title')}
+ {t('onboarding:selectDevice.desc')}
nextStep()}>
- {t('onboarding:chooseDevice.ledgerNanoCard.title')}
+ {t('onboarding:selectDevice.ledgerNanoCard.title')}
- {t('onboarding:chooseDevice.ledgerNanoCard.desc')}
+ {t('onboarding:selectDevice.ledgerNanoCard.desc')}
- {t('onboarding:chooseDevice.ledgerBlueCard.title')}
+ {t('onboarding:selectDevice.ledgerBlueCard.title')}
- {t('onboarding:chooseDevice.ledgerBlueCard.desc')}
+ {t('onboarding:selectDevice.ledgerBlueCard.desc')}
@@ -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;
-`
+})``
diff --git a/src/components/Onboarding/steps/SelectPIN.js b/src/components/Onboarding/steps/SelectPIN.js
new file mode 100644
index 00000000..cf2c200e
--- /dev/null
+++ 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: 1,
+ desc: t('onboarding:selectPIN.instructions.step1'),
+ },
+ {
+ key: 'step2',
+ icon: 2,
+ desc: t('onboarding:selectPIN.instructions.step2'),
+ },
+ {
+ key: 'step3',
+ icon: 3,
+ desc: t('onboarding:selectPIN.instructions.step3'),
+ },
+ {
+ key: 'step4',
+ icon: 4,
+ desc: t('onboarding:selectPIN.instructions.step4'),
+ },
+ ]
+ return (
+
+
+
+ {t('onboarding:selectPIN.title')}
+ {t('onboarding:selectPIN.desc')}
+
+
+
+
+
+
+
+
+ {steps.map(step => )}
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/Onboarding/steps/WriteSeed.js b/src/components/Onboarding/steps/WriteSeed.js
index 31fe37ea..427aa2a2 100644
--- 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: 1,
+ desc: t('onboarding:writeSeed.instructions.step1'),
+ },
+ {
+ key: 'step2',
+ icon: 2,
+ desc: t('onboarding:writeSeed.instructions.step2'),
+ },
+ {
+ key: 'step3',
+ icon: 3,
+ desc: t('onboarding:writeSeed.instructions.step3'),
+ },
+ {
+ key: 'step4',
+ icon: 4,
+ desc: t('onboarding:writeSeed.instructions.step4'),
+ },
+ {
+ key: 'step5',
+ icon: 5,
+ desc: t('onboarding:writeSeed.instructions.step5'),
+ },
+ ]
return (
-
-
- This is WRITE SEED screen. 1 line is the maximum
-
- 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
-
+
+
+
+ {t('onboarding:writeSeed.title')}
+ {t('onboarding:writeSeed.desc')}
+
+
+
+
+
+
+
+ {steps.map(step => )}
+
+
+
-
-
-
-
+
)
}
diff --git a/src/icons/onboarding/WriteSeed.js b/src/icons/onboarding/WriteSeed.js
new file mode 100644
index 00000000..a802e9ba
--- /dev/null
+++ b/src/icons/onboarding/WriteSeed.js
@@ -0,0 +1,197 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+
+)
diff --git a/src/reducers/onboarding.js b/src/reducers/onboarding.js
index f392298a..8091a7b4 100644
--- 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,
diff --git a/static/i18n/en/common.yml b/static/i18n/en/common.yml
index c9b90494..991cc004 100644
--- 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
diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml
index 059acb71..31c141a4 100644
--- a/static/i18n/en/onboarding.yml
+++ b/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.