From 3fe79d08541948a9238f4dca7fc914d3cff7e4e2 Mon Sep 17 00:00:00 2001 From: NastiaS Date: Tue, 15 May 2018 16:38:08 +0200 Subject: [PATCH 1/5] wip start slide and options slide --- src/components/Onboarding/steps/Init.js | 156 +++++++++++++---------- src/components/Onboarding/steps/Start.js | 13 +- src/icons/onboarding/GetStartedLogo.js | 79 ++++++++++++ 3 files changed, 175 insertions(+), 73 deletions(-) create mode 100644 src/icons/onboarding/GetStartedLogo.js diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js index 0ed00ea6..99a5d759 100644 --- a/src/components/Onboarding/steps/Init.js +++ b/src/components/Onboarding/steps/Init.js @@ -1,90 +1,112 @@ // @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 optionCards = [ + { + key: 'newDevice', + icon: , + title: 'Initialize your new Ledger device', + desc: 'Please replace it with the final wording once it’s done.', + onClick: () => nextStep(), + }, + { + key: 'restoreDevice', + icon: , + title: 'Restore a Ledger device', + desc: 'Please replace it with the final wording once it’s done.', + onClick: () => jumpStep('choosePIN'), + }, + { + key: 'initializedDevice', + icon: , + title: 'I have already initialized my device', + desc: 'Please replace it with the final wording once it’s done.', + onClick: () => jumpStep('choosePIN'), + }, + { + key: 'noDevice', + icon: , + title: 'Do not have a Ledger device yet? Buy one', + desc: 'Please replace it with the final wording once it’s done.', + onClick: () => shell.openExternal('https://www.ledger.fr/'), + }, + ] + return ( - This is the title of the 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 - - - - nextStep()}> - {/* colors are temp, we don't have icons now */} - - - - Clean Nano S setup - Please replace it with the final wording once it’s done. - - jumpStep('choosePIN')}> - - - - Existing seed + Clean setup - Please replace it with the final wording once it’s done. - - + + - - - nextStep()}> - - - - Migrate accounts - Please replace it with the final wording once it’s done. - - - - - - Not a user, but would love to - Please replace it with the final wording once it’s done. - - + + + Welcome to Ledger Live, the computer companion app to your Ledger device. Please select + one of the options below: + + {optionCards.map(card => )} ) } -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', +type CardType = { + icon: any, + desc: string, + title: string, + onClick: Function, +} + +export function OptionFlowCard({ card }: { card: CardType }) { + const { icon, desc, title, onClick } = card + return ( + + + {icon} + + + {title} + {desc} + + + + + + ) +} + +export const CardDescription = styled(Box).attrs({ + ff: 'Open Sans|Regular', + fontSize: 4, + textAlign: 'left', + color: 'smoke', +})`` +export const CardTitle = styled(Box).attrs({ + ff: 'Open Sans|Regular', + fontSize: 4, + textAlign: 'left', })` - width: 55px; - padding: 10px; + font-weight: 600; ` -export const TrackChoiceTitle = styled(Box).attrs({ - width: 152, - height: 27, - ff: 'Museo Sans|Regular', - fontSize: 5, - color: 'dark', -})`` diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js index e3586584..ab948625 100644 --- a/src/components/Onboarding/steps/Start.js +++ b/src/components/Onboarding/steps/Start.js @@ -5,7 +5,7 @@ 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' @@ -14,11 +14,12 @@ export default (props: StepProps) => { return ( - - Ledger Live - Welcome to the new Ledger Live Desktop app. - Let’s get started! - diff --git a/src/icons/onboarding/GetStartedLogo.js b/src/icons/onboarding/GetStartedLogo.js new file mode 100644 index 00000000..cce003ad --- /dev/null +++ b/src/icons/onboarding/GetStartedLogo.js @@ -0,0 +1,79 @@ +// @flow + +import React from 'react' + +export default () => ( + + + + + + + + + + + + + +) From 7799ae79781f6b9dd6549b5940def27d12f7ab39 Mon Sep 17 00:00:00 2001 From: NastiaS Date: Wed, 16 May 2018 13:32:18 +0200 Subject: [PATCH 2/5] selectPIN screen, chooseDevice screen --- src/components/Onboarding/index.js | 4 +- .../Onboarding/steps/ChooseDevice.js | 46 ++++++--- src/components/Onboarding/steps/ChoosePIN.js | 93 ++++++++++++++++--- src/components/Onboarding/steps/Init.js | 27 +++--- src/components/Onboarding/steps/Start.js | 6 +- src/icons/onboarding/LedgerBlue.js | 32 +++++++ src/icons/onboarding/LedgerNano.js | 36 +++++++ src/icons/onboarding/SelectPIN.js | 75 +++++++++++++++ static/i18n/en/onboarding.yml | 34 +++++++ 9 files changed, 306 insertions(+), 47 deletions(-) create mode 100644 src/icons/onboarding/LedgerBlue.js create mode 100644 src/icons/onboarding/LedgerNano.js create mode 100644 src/icons/onboarding/SelectPIN.js create mode 100644 static/i18n/en/onboarding.yml diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index ca9dbdf7..8fe5e2a8 100644 --- a/src/components/Onboarding/index.js +++ b/src/components/Onboarding/index.js @@ -128,7 +128,7 @@ class Onboarding extends PureComponent { 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) diff --git a/src/components/Onboarding/steps/ChooseDevice.js b/src/components/Onboarding/steps/ChooseDevice.js index 7da5e8a8..582ad42d 100644 --- a/src/components/Onboarding/steps/ChooseDevice.js +++ b/src/components/Onboarding/steps/ChooseDevice.js @@ -4,39 +4,40 @@ 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 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 } = props + const { nextStep, t } = props return ( - This is the title of the 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:chooseDevice.title')} + {/* TODO shrink description so it forms 2 lines */} + {t('onboarding:chooseDevice.desc')} nextStep()}> - + - Ledger Nano S - Please replace it with the final wording once it’s done. + {t('onboarding:chooseDevice.ledgerNanoCard.title')} + + {t('onboarding:chooseDevice.ledgerNanoCard.desc')} + - + - Ledger Blue - Please replace it with the final wording once it’s done. + {t('onboarding:chooseDevice.ledgerBlueCard.title')} + + {t('onboarding:chooseDevice.ledgerBlueCard.desc')} + @@ -59,4 +60,19 @@ const DeviceIcon = styled(Box).attrs({ color: 'graphite', })` width: 55px; + min-height: 80px; +` +export const BlockDescription = styled(Box).attrs({ + ff: 'Open Sans|Regular', + fontSize: 4, + textAlign: 'center', + color: 'smoke', +})`` +export const BlockTitle = styled(Box).attrs({ + ff: 'Open Sans|Regular', + fontSize: 4, + textAlign: 'center', +})` + font-weight: 600; + padding-bottom: 10px; ` diff --git a/src/components/Onboarding/steps/ChoosePIN.js b/src/components/Onboarding/steps/ChoosePIN.js index 794f4b71..48cabebb 100644 --- a/src/components/Onboarding/steps/ChoosePIN.js +++ b/src/components/Onboarding/steps/ChoosePIN.js @@ -4,30 +4,99 @@ import React from 'react' import Box from 'components/base/Box' import Button from 'components/base/Button' -import { Title, Description, OnboardingFooter } from '../helperComponents' +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 } = props + 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 ( - - - This is CHOOSE PIN 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: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 99a5d759..355ded40 100644 --- a/src/components/Onboarding/steps/Init.js +++ b/src/components/Onboarding/steps/Init.js @@ -12,34 +12,34 @@ import { Title } from '../helperComponents' import type { StepProps } from '..' export default (props: StepProps) => { - const { nextStep, jumpStep } = props + const { nextStep, jumpStep, t } = props const optionCards = [ { key: 'newDevice', icon: , - title: 'Initialize your new Ledger device', - desc: 'Please replace it with the final wording once it’s done.', + title: t('onboarding:init.newDevice.title'), + desc: t('onboarding:init.newDevice.desc'), onClick: () => nextStep(), }, { key: 'restoreDevice', icon: , - title: 'Restore a Ledger device', - desc: 'Please replace it with the final wording once it’s done.', + title: t('onboarding:init.restoreDevice.title'), + desc: t('onboarding:init.restoreDevice.desc'), onClick: () => jumpStep('choosePIN'), }, { key: 'initializedDevice', icon: , - title: 'I have already initialized my device', - desc: 'Please replace it with the final wording once it’s done.', + title: t('onboarding:init.initializedDevice.title'), + desc: t('onboarding:init.initializedDevice.desc'), onClick: () => jumpStep('choosePIN'), }, { key: 'noDevice', icon: , - title: 'Do not have a Ledger device yet? Buy one', - desc: 'Please replace it with the final wording once it’s done.', + title: t('onboarding:init.noDevice.title'), + desc: t('onboarding:init.noDevice.desc'), onClick: () => shell.openExternal('https://www.ledger.fr/'), }, ] @@ -51,10 +51,7 @@ export default (props: StepProps) => { - - Welcome to Ledger Live, the computer companion app to your Ledger device. Please select - one of the options below: - + {t('onboarding:init.title')} {optionCards.map(card => )} @@ -64,8 +61,8 @@ export default (props: StepProps) => { type CardType = { icon: any, - desc: string, - title: string, + desc: any, + title: any, onClick: Function, } diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js index ab948625..773c9cfa 100644 --- a/src/components/Onboarding/steps/Start.js +++ b/src/components/Onboarding/steps/Start.js @@ -10,14 +10,14 @@ import type { StepProps } from '..' import { Title, Description } from '../helperComponents' export default (props: StepProps) => { - const { jumpStep } = props + const { jumpStep, t } = props return ( - Welcome to the new Ledger Live Desktop app. - Let’s get started! + {t('onboarding:start.title')} + {t('onboarding:start.desc')} + + +) +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. From df4d6e1758a8dbd083a621f6f0373af9508e95fb Mon Sep 17 00:00:00 2001 From: NastiaS Date: Wed, 16 May 2018 16:54:41 +0200 Subject: [PATCH 4/5] added Finish Screen --- src/components/Onboarding/steps/Finish.js | 89 +++++++++++++++++++---- static/i18n/en/onboarding.yml | 5 ++ 2 files changed, 79 insertions(+), 15 deletions(-) diff --git a/src/components/Onboarding/steps/Finish.js b/src/components/Onboarding/steps/Finish.js index 513afa7d..2e880457 100644 --- 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: , + onClick: url => shell.openExternal(url), + }, + { + key: 'reddit', + url: 'https://www.reddit.com/r/ledgerwallet/', + icon: , + onClick: url => shell.openExternal(url), + }, + { + key: 'github', + url: 'https://github.com/LedgerHQ', + icon: , + onClick: url => shell.openExternal(url), + }, +] + export default (props: StepProps) => { - const { finish, jumpStep } = props + const { finish, t } = props return ( - - This is ENJOY THE APP 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 - - - - jumpStep('start')} style={{ padding: 15 }}> - I want to go back to Onboarding + + {t('onboarding:finish.followUsLabel')} + + + {socialMedia.map(socMed => )} ) } + +type SocMed = { + icon: any, + url: string, + onClick: string => void, +} + +export function SocialMediaBox({ socMed }: { socMed: SocMed }) { + const { icon, url, onClick } = socMed + return ( + onClick(url)} + > + {icon} + + ) +} + +export const FollowUsDesc = styled(Box).attrs({ + ff: 'Museo Sans|Regular', + fontSize: 4, + textAlign: 'center', + color: 'grey', +})` + margin: 10px auto; +` diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml index 31c141a4..53af20d7 100644 --- a/static/i18n/en/onboarding.yml +++ b/static/i18n/en/onboarding.yml @@ -41,3 +41,8 @@ writeSeed: 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 From 5830008371347feee43eee486d6561ba26cf1a8b Mon Sep 17 00:00:00 2001 From: NastiaS Date: Wed, 16 May 2018 17:42:59 +0200 Subject: [PATCH 5/5] fixing flow-typed reselect issue --- src/reducers/settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reducers/settings.js b/src/reducers/settings.js index c4ba3a2c..377cfd36 100644 --- 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'