From 8c781ba76db8e9b9050bd9f44a4c6e8080340a93 Mon Sep 17 00:00:00 2001 From: NastiaS Date: Wed, 16 May 2018 15:53:49 +0200 Subject: [PATCH] writeSeed screen, taking footer out, factorizing --- src/components/Onboarding/OnboardingFooter.js | 24 ++- src/components/Onboarding/helperComponents.js | 56 ++++- src/components/Onboarding/index.js | 8 +- src/components/Onboarding/steps/ChoosePIN.js | 102 --------- src/components/Onboarding/steps/Init.js | 12 +- .../{ChooseDevice.js => SelectDevice.js} | 27 +-- src/components/Onboarding/steps/SelectPIN.js | 72 +++++++ src/components/Onboarding/steps/WriteSeed.js | 81 +++++-- src/icons/onboarding/WriteSeed.js | 197 ++++++++++++++++++ src/reducers/onboarding.js | 16 +- static/i18n/en/common.yml | 1 + static/i18n/en/onboarding.yml | 11 +- 12 files changed, 447 insertions(+), 160 deletions(-) delete mode 100644 src/components/Onboarding/steps/ChoosePIN.js rename src/components/Onboarding/steps/{ChooseDevice.js => SelectDevice.js} (72%) create mode 100644 src/components/Onboarding/steps/SelectPIN.js create mode 100644 src/icons/onboarding/WriteSeed.js 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.