lukechilds
/
ledger-live-desktop
mirror of https://github.com/lukechilds/ledger-live-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

onboarding polishing, separating icons and illustrations

master
Anastasia Poupeney 7 years ago
parent
b7a3657abd
commit
1d00e4ed9e
25 changed files with 222 additions and 267 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/components/MainSideBar.js
  2. 67
      src/components/Onboarding/helperComponents.js
  3. 11
      src/components/Onboarding/index.js
  4. 4
      src/components/Onboarding/steps/GenuineCheck.js
  5. 147
      src/components/Onboarding/steps/Init.js
  6. 65
      src/components/Onboarding/steps/SelectDevice.js
  7. 22
      src/components/Onboarding/steps/SelectPIN.js
  8. 11
      src/components/Onboarding/steps/Start.js
  9. 20
      src/components/Onboarding/steps/WriteSeed.js
  10. 16
      src/icons/CirclePlus.js
  11. 2
      src/icons/Plus.js
  12. 0
      src/icons/illustrations/GetStartedLogo.js
  13. 0
      src/icons/illustrations/LedgerBlue.js
  14. 0
      src/icons/illustrations/LedgerBlueError.js
  15. 0
      src/icons/illustrations/LedgerBlueSelectPIN.js
  16. 0
      src/icons/illustrations/LedgerNano.js
  17. 0
      src/icons/illustrations/LedgerNanoError.js
  18. 0
      src/icons/illustrations/LedgerNanoSelectPIN.js
  19. 0
      src/icons/illustrations/SetPassword.js
  20. 0
      src/icons/illustrations/WriteSeed.js
  21. 81
      src/icons/onboarding/Analytics.js
  22. 24
      src/icons/onboarding/Warning.js
  23. 8
      src/reducers/onboarding.js
  24. 2
      src/stories/icons.stories.js
  25. 5
      static/i18n/en/onboarding.yml

4
src/components/MainSideBar.js
View File

@ -28,7 +28,7 @@ import FormattedVal from 'components/base/FormattedVal'
import IconManager from 'icons/Manager'
import IconPieChart from 'icons/PieChart'
import IconPlus from 'icons/Plus'
import IconCirclePlus from 'icons/CirclePlus'
import IconReceive from 'icons/Receive'
import IconSend from 'icons/Send'
import IconExchange from 'icons/Exchange'
@ -141,7 +141,7 @@ class MainSideBar extends PureComponent<Props> {
title={t('sidebar:accounts')}
titleRight={
<PlusWrapper onClick={() => openModal('importAccounts')}>
<IconPlus size={16} />
<IconCirclePlus size={16} />
</PlusWrapper>
}
items={accountsItems}

67
src/components/Onboarding/helperComponents.js
View File

@ -4,16 +4,17 @@ import styled from 'styled-components'
import { radii } from 'styles/theme'
import Box from 'components/base/Box'
import IconWarning from 'icons/onboarding/Warning'
import IconWarning from 'icons/Shield'
// GENERAL
export const Title = styled(Box).attrs({
width: 267,
height: 27,
ff: 'Museo Sans|Regular',
fontSize: 7,
color: 'dark',
})``
})`
max-width: 550px;
text-align: center;
`
export const Description = styled(Box).attrs({
ff: 'Museo Sans|Light',
@ -23,7 +24,7 @@ export const Description = styled(Box).attrs({
color: 'grey',
})`
margin: 10px auto 25px;
max-width: 550px;
max-width: 570px;
`
export const Inner = styled(Box).attrs({
horizontal: true,
@ -49,9 +50,9 @@ type StepType = {
export function OptionRow({ step }: { step: StepType }) {
const { icon, desc } = step
return (
<Box horizontal m={2}>
<Box horizontal m={'7px'} style={{ minWidth: 420 }}>
<Box justify="center">{icon}</Box>
<Box ff="Open Sans|Regular" justify="center" fontSize={4} style={{ paddingLeft: 10 }} shrink>
<Box justify="center" shrink>
<OptionRowDesc>{desc}</OptionRowDesc>
</Box>
</Box>
@ -61,9 +62,9 @@ export const OptionRowDesc = styled(Box).attrs({
ff: 'Open Sans|Regular',
fontSize: 4,
textAlign: 'left',
lineHeight: 1.69,
color: 'smoke',
shrink: 1,
grow: true,
pl: 3,
})``
export const IconOptionRow = styled(Box).attrs({
@ -74,34 +75,30 @@ export const IconOptionRow = styled(Box).attrs({
export function DisclaimerBox({ disclaimerNotes, ...p }: { disclaimerNotes: any }) {
return (
<Box
shrink
grow
flow={4}
style={{
minWidth: 680,
backgroundColor: '#ea2e490c',
border: 'dashed 1px #ea2e49b3',
}}
{...p}
>
<Box
m={3}
style={{
position: 'relative',
}}
>
<Box
style={{
position: 'absolute',
top: '0px',
right: '0px',
}}
>
<DisclaimerBoxContainer {...p}>
<Box m={3} relative>
<DisclaimerBoxIconContainer>
<IconWarning />
</Box>
</DisclaimerBoxIconContainer>
{disclaimerNotes.map(note => <OptionRow key={note.key} step={note} />)}
</Box>
</Box>
</DisclaimerBoxContainer>
)
}
const DisclaimerBoxContainer = styled(Box).attrs({
shrink: 1,
grow: true,
borderRadius: '4px',
bg: '#f9f9f980',
})`
min-width: 680px;
border: 1px dashed ${p => p.theme.colors.fog};
`
const DisclaimerBoxIconContainer = styled(Box).attrs({
color: p => p.theme.colors.alertRed,
})`
position: absolute;
top: 0;
right: 0;
`

11
src/components/Onboarding/index.js
View File

@ -10,7 +10,14 @@ import type { T } from 'types/common'
import type { OnboardingState } from 'reducers/onboarding'
import { saveSettings } from 'actions/settings'
import { nextStep, prevStep, jumpStep, updateGenuineCheck, isLedgerNano } from 'reducers/onboarding'
import {
nextStep,
prevStep,
jumpStep,
updateGenuineCheck,
isLedgerNano,
flowType,
} from 'reducers/onboarding'
import { getCurrentDevice } from 'reducers/devices'
// import { unlock } from 'reducers/application'
@ -79,6 +86,7 @@ export type StepProps = {
getDeviceInfo: Function,
updateGenuineCheck: Function,
isLedgerNano: Function,
flowType: Function,
}
class Onboarding extends PureComponent<Props> {
@ -113,6 +121,7 @@ class Onboarding extends PureComponent<Props> {
onboarding,
updateGenuineCheck,
isLedgerNano,
flowType,
prevStep,
nextStep,
jumpStep,

4
src/components/Onboarding/steps/GenuineCheck.js
View File

@ -15,8 +15,8 @@ import Button from 'components/base/Button'
import RadioGroup from 'components/base/RadioGroup'
import GenuineCheckModal from 'components/GenuineCheckModal'
import IconLedgerNanoError from 'icons/onboarding/LedgerNanoError'
import IconLedgerBlueError from 'icons/onboarding/LedgerBlueError'
import IconLedgerNanoError from 'icons/illustrations/LedgerNanoError'
import IconLedgerBlueError from 'icons/illustrations/LedgerBlueError'
import IconCheck from 'icons/Check'
import { Title, Description, IconOptionRow } from '../helperComponents'

147
src/components/Onboarding/steps/Init.js
View File

@ -1,67 +1,89 @@
// @flow
import React from 'react'
import React, { PureComponent } from 'react'
import { shell } from 'electron'
import { connect } from 'react-redux'
import { colors } from 'styles/theme'
import styled from 'styled-components'
import Box, { Card } from 'components/base/Box'
import IconUser from 'icons/User'
import IconAdd from 'icons/Plus'
import IconPlus from 'icons/Plus'
import IconRecover from 'icons/Recover'
import IconCheck from 'icons/Check'
import IconExternalLink from 'icons/ExternalLink'
import IconChevronRight from 'icons/ChevronRight'
import { Title } from '../helperComponents'
import { flowType } from 'reducers/onboarding'
import type { StepProps } from '..'
export default (props: StepProps) => {
const { nextStep, jumpStep, t } = props
const optionCards = [
{
key: 'newDevice',
icon: <IconAdd size={16} />,
title: t('onboarding:init.newDevice.title'),
onClick: () => nextStep(),
},
{
key: 'restoreDevice',
icon: <IconRecover size={16} />,
title: t('onboarding:init.restoreDevice.title'),
onClick: () => jumpStep('choosePIN'),
},
{
key: 'initializedDevice',
icon: <IconCheck size={16} />,
title: t('onboarding:init.initializedDevice.title'),
onClick: () => jumpStep('choosePIN'),
},
{
key: 'noDevice',
icon: <IconExternalLink size={16} />,
title: t('onboarding:init.noDevice.title'),
onClick: () => shell.openExternal('https://www.ledger.fr/'),
},
]
const mapDispatchToProps = { flowType }
return (
<Box sticky alignItems="center" justifyContent="center">
<Box align="center">
<Box color="wallet">
<IconUser size={36} />
</Box>
<Box p={4} style={{ maxWidth: 550 }} textAlign="center">
<Title>{t('onboarding:init.title')}</Title>
</Box>
<Box mt={5} flow={5}>
{optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}
class Init extends PureComponent<StepProps, *> {
render() {
const { nextStep, jumpStep, t } = this.props
const optionCards = [
{
key: 'newDevice',
icon: <IconPlus size={16} />,
title: t('onboarding:init.newDevice.title'),
onClick: () => {
nextStep()
this.props.flowType('newDevice')
},
},
{
key: 'restoreDevice',
icon: <IconRecover size={16} />,
title: t('onboarding:init.restoreDevice.title'),
onClick: () => {
nextStep()
this.props.flowType('restoreDevice')
},
},
{
key: 'initializedDevice',
icon: <IconCheck size={16} />,
title: t('onboarding:init.initializedDevice.title'),
onClick: () => {
nextStep()
this.props.flowType('initializedDevice')
},
},
{
key: 'noDevice',
icon: <IconExternalLink size={16} />,
title: t('onboarding:init.noDevice.title'),
onClick: () => {
shell.openExternal('https://www.ledger.fr/')
this.props.flowType('noDevice')
},
},
]
return (
<Box sticky alignItems="center" justifyContent="center">
<Box align="center">
<Box color="wallet">
<IconUser size={36} />
</Box>
<Box p={4}>
<Title>{t('onboarding:init.title')}</Title>
</Box>
<Box mt={5} flow={5}>
{optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}
</Box>
</Box>
</Box>
</Box>
)
)
}
}
export default connect(null, mapDispatchToProps)(Init)
type CardType = {
icon: any,
title: any,
@ -71,39 +93,40 @@ type CardType = {
export function OptionFlowCard({ card }: { card: CardType }) {
const { icon, title, onClick } = card
return (
<Card
horizontal
p={5}
style={{
cursor: 'pointer',
border: 'solid 1px #d8d8d8',
minWidth: '533px',
maxHeight: '80px',
}}
onClick={onClick}
>
<InitCardContainer onClick={onClick}>
<Box justify="center" style={{ color: colors.wallet }}>
<Container mr={4} justify="center">
{icon}
</Container>
<InitIconContainer justify="center">{icon}</InitIconContainer>
</Box>
<Box ff="Open Sans|Regular" justify="center" fontSize={4} grow>
<Box justify="center" grow>
<CardTitle>{title}</CardTitle>
</Box>
<Box justify="center" color="grey">
<IconChevronRight size={22} />
<Box justify="center" mx={4} my={3}>
<IconChevronRight style={{ color: colors.grey }} size={22} />
</Box>
</Card>
</InitCardContainer>
)
}
const InitCardContainer = styled(Box).attrs({
p: 3,
horizontal: true,
borderRadius: '4px',
})`
border: 1px solid ${p => p.theme.colors.fog};
width: 550px;
height: 70px;
`
export const CardTitle = styled(Box).attrs({
ff: 'Open Sans|SemiBold',
fontSize: 4,
textAlign: 'left',
})``
const Container = styled(Box).attrs({})`
const InitIconContainer = styled(Box).attrs({
mx: 4,
my: 3,
})`
width: 40px;
height: 40px;
border-radius: 50%;

65
src/components/Onboarding/steps/SelectDevice.js
View File

@ -7,10 +7,11 @@ import { connect } from 'react-redux'
import { isLedgerNano } from 'reducers/onboarding'
import Box from 'components/base/Box'
import IconCheckCirle from 'icons/CheckCircle'
import IconLedgerNano from 'icons/onboarding/LedgerNano'
import IconLedgerBlue from 'icons/onboarding/LedgerBlue'
import { Title, Description, Inner } from '../helperComponents'
import IconCheckCirle from 'icons/Check'
import IconLedgerNano from 'icons/illustrations/LedgerNano'
import IconLedgerBlue from 'icons/illustrations/LedgerBlue'
import { Title, Inner } from '../helperComponents'
import { rgba } from 'styles/helpers'
import type { StepProps } from '..'
@ -19,7 +20,9 @@ const mapDispatchToProps = { isLedgerNano }
class SelectDevice extends PureComponent<StepProps, {}> {
handleIsLedgerNano = (isLedgerNano: boolean) => {
this.props.isLedgerNano(isLedgerNano)
this.props.nextStep()
this.props.onboarding.flowType === 'initializedDevice'
? this.props.jumpStep('genuineCheck')
: this.props.nextStep()
}
render() {
const { t, onboarding } = this.props
@ -28,32 +31,27 @@ class SelectDevice extends PureComponent<StepProps, {}> {
<Box sticky pt={200}>
<Box grow alignItems="center">
<Title>{t('onboarding:selectDevice.title')}</Title>
<Description>{t('onboarding:selectDevice.desc')}</Description>
<Box>
<Box mt={7}>
<Inner>
<DeviceContainer
isActive={onboarding.isLedgerNano}
onClick={() => this.handleIsLedgerNano(true)}
style={{
position: 'relative',
}}
>
{onboarding.isLedgerNano && <DeviceSelected />}
<DeviceIcon>
<IconLedgerNano />
</DeviceIcon>
<BlockTitle pb={3}>{t('onboarding:selectDevice.ledgerNanoCard.title')}</BlockTitle>
<BlockTitle>{t('onboarding:selectDevice.ledgerNanoCard.title')}</BlockTitle>
</DeviceContainer>
<DeviceContainer
isActive={!onboarding.isLedgerNano}
onClick={() => this.handleIsLedgerNano(false)}
style={{
position: 'relative',
}}
>
{!onboarding.isLedgerNano && <DeviceSelected />}
<DeviceIcon>
<IconLedgerBlue />
</DeviceIcon>
<BlockTitle pb={3}>{t('onboarding:selectDevice.ledgerBlueCard.title')}</BlockTitle>
<BlockTitle>{t('onboarding:selectDevice.ledgerBlueCard.title')}</BlockTitle>
</DeviceContainer>
</Inner>
</Box>
@ -68,46 +66,51 @@ export default connect(null, mapDispatchToProps)(SelectDevice)
const DeviceContainer = styled(Box).attrs({
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
relative: true,
})`
width: 218px;
height: 204px;
border: ${props => `1px solid ${props.theme.colors.fog}`};
&:hover,
&:focus {
opacity: 0.5;
border: ${props => `1px solid ${props.theme.colors[props.isActive ? 'wallet' : 'fog']}`};
&:hover {
cursor: pointer;
background: ${p => rgba(p.theme.colors.wallet, 0.04)};
}
`
const DeviceIcon = styled(Box).attrs({
alignItems: 'center',
justifyContent: 'center',
color: 'graphite',
})`
width: 55px;
min-height: 80px;
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',
pt: 3,
})``
export function DeviceSelected() {
return (
<Box
<SelectDeviceIconWrapper
style={{
position: 'absolute',
top: '10px',
right: '10px',
}}
>
<IconCheckCirle size={12} />
</Box>
<IconCheckCirle size={10} />
</SelectDeviceIconWrapper>
)
}
const SelectDeviceIconWrapper = styled(Box).attrs({
alignItems: 'center',
justifyContent: 'center',
color: 'white',
bg: 'wallet',
})`
border-radius: 50%;
width: 18px;
height: 18px;
`

22
src/components/Onboarding/steps/SelectPIN.js
View File

@ -5,8 +5,8 @@ import React, { Fragment } from 'react'
import Box from 'components/base/Box'
import { colors } from 'styles/theme'
import IconLedgerNanoSelectPIN from 'icons/onboarding/LedgerNanoSelectPIN'
import IconLedgerBlueSelectPIN from 'icons/onboarding/LedgerBlueSelectPIN'
import IconLedgerNanoSelectPIN from 'icons/illustrations/LedgerNanoSelectPIN'
import IconLedgerBlueSelectPIN from 'icons/illustrations/LedgerBlueSelectPIN'
import IconChevronRight from 'icons/ChevronRight'
import { Title, Inner, OptionRow, IconOptionRow, DisclaimerBox } from '../helperComponents'
@ -14,6 +14,7 @@ import OnboardingFooter from '../OnboardingFooter'
import type { StepProps } from '..'
// TODO: adjust for different wording based on the flow type when we have wording
export default (props: StepProps) => {
const { nextStep, prevStep, t, onboarding } = props
const stepsLedgerNano = [
@ -74,16 +75,14 @@ export default (props: StepProps) => {
},
]
return (
<Box sticky pt={150}>
<Box sticky pt={170}>
<Box grow alignItems="center">
<Box align="center" mb={5}>
<Title>{t('onboarding:selectPIN.title')}</Title>
</Box>
<Box align="center" mt={5}>
<Title>{t('onboarding:selectPIN.title')}</Title>
<Box align="center" mt={7}>
{onboarding.isLedgerNano ? (
<Fragment>
<Inner style={{ width: 680 }}>
<Box style={{ width: 260 }} mt={5}>
<Inner style={{ width: 700 }}>
<Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }} mt={5}>
<IconLedgerNanoSelectPIN />
</Box>
@ -94,8 +93,8 @@ export default (props: StepProps) => {
</Fragment>
) : (
<Fragment>
<Inner style={{ width: 680 }}>
<Box style={{ width: 260, alignItems: 'center' }}>
<Inner style={{ width: 700 }}>
<Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }} mt={2}>
<IconLedgerBlueSelectPIN />
</Box>
@ -105,7 +104,6 @@ export default (props: StepProps) => {
</Inner>
</Fragment>
)}
<DisclaimerBox mt={6} disclaimerNotes={disclaimerNotes} />
</Box>
</Box>

11
src/components/Onboarding/steps/Start.js
View File

@ -5,19 +5,18 @@ import React from 'react'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
import IconGetStarted from 'icons/onboarding/GetStartedLogo'
import IconGetStarted from 'icons/illustrations/GetStartedLogo'
import type { StepProps } from '..'
import { Title, Description } from '../helperComponents'
import { Title } from '../helperComponents'
export default (props: StepProps) => {
const { jumpStep, t } = props
return (
<Box sticky alignItems="center" justifyContent="center">
<Box align="center" alignItems="center">
<Box sticky justifyContent="center">
<Box alignItems="center">
<IconGetStarted />
<Box style={{ paddingTop: '20px' }}>
<Box my={4}>
<Title>{t('onboarding:start.title')}</Title>
<Description>{t('onboarding:start.desc')}</Description>
</Box>
<Button padded primary onClick={() => jumpStep('init')}>
Get Started

20
src/components/Onboarding/steps/WriteSeed.js
View File

@ -3,7 +3,7 @@
import React from 'react'
import Box from 'components/base/Box'
import IconWriteSeed from 'icons/onboarding/WriteSeed'
import IconWriteSeed from 'icons/illustrations/WriteSeed'
import IconChevronRight from 'icons/ChevronRight'
import { colors } from 'styles/theme'
@ -37,6 +37,11 @@ export default (props: StepProps) => {
icon: <IconOptionRow>3.</IconOptionRow>,
desc: t('onboarding:writeSeed.instructions.step3'),
},
{
key: 'step4',
icon: <IconOptionRow>4.</IconOptionRow>,
desc: t('onboarding:writeSeed.instructions.step4'),
},
]
const disclaimerNotes = [
{
@ -54,20 +59,25 @@ export default (props: StepProps) => {
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
desc: t('onboarding:writeSeed.disclaimer.note3'),
},
{
key: 'note4',
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
desc: t('onboarding:writeSeed.disclaimer.note4'),
},
]
return (
<Box sticky pt={150}>
<Box sticky pt={170}>
<Box grow alignItems="center">
<Box align="center" mb={5}>
<Box mb={3}>
<Title>{t('onboarding:writeSeed.title')}</Title>
<Description>{t('onboarding:writeSeed.desc')}</Description>
</Box>
<Box align="center">
<Inner style={{ width: 760 }}>
<Box style={{ width: 260, alignItems: 'center' }}>
<Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }}>
<IconWriteSeed />
</Box>
<Box shrink grow flow={4}>
<Box shrink flow={2} m={0}>
{steps.map(step => <OptionRow key={step.key} step={step} />)}
</Box>
</Inner>

16
src/icons/CirclePlus.js
View File

@ -0,0 +1,16 @@
// @flow
import React from 'react'
const path = (
<path
fill="currentColor"
d="M12 7.5v1a.376.376 0 0 1-.375.375h-2.75v2.75A.376.376 0 0 1 8.5 12h-1a.376.376 0 0 1-.375-.375v-2.75h-2.75A.376.376 0 0 1 4 8.5v-1c0-.206.169-.375.375-.375h2.75v-2.75c0-.206.169-.375.375-.375h1c.206 0 .375.169.375.375v2.75h2.75c.206 0 .375.169.375.375zm3.75.5A7.749 7.749 0 0 1 8 15.75 7.749 7.749 0 0 1 .25 8 7.749 7.749 0 0 1 8 .25 7.749 7.749 0 0 1 15.75 8zm-1.5 0A6.248 6.248 0 0 0 8 1.75 6.248 6.248 0 0 0 1.75 8 6.248 6.248 0 0 0 8 14.25 6.248 6.248 0 0 0 14.25 8z"
/>
)
export default ({ size, ...p }: { size: number }) => (
<svg viewBox="0 0 16 16" height={size} width={size} {...p}>
{path}
</svg>
)

2
src/icons/Plus.js
View File

@ -5,7 +5,7 @@ import React from 'react'
const path = (
<path
fill="currentColor"
d="M12 7.5v1a.376.376 0 0 1-.375.375h-2.75v2.75A.376.376 0 0 1 8.5 12h-1a.376.376 0 0 1-.375-.375v-2.75h-2.75A.376.376 0 0 1 4 8.5v-1c0-.206.169-.375.375-.375h2.75v-2.75c0-.206.169-.375.375-.375h1c.206 0 .375.169.375.375v2.75h2.75c.206 0 .375.169.375.375zm3.75.5A7.749 7.749 0 0 1 8 15.75 7.749 7.749 0 0 1 .25 8 7.749 7.749 0 0 1 8 .25 7.749 7.749 0 0 1 15.75 8zm-1.5 0A6.248 6.248 0 0 0 8 1.75 6.248 6.248 0 0 0 1.75 8 6.248 6.248 0 0 0 8 14.25 6.248 6.248 0 0 0 14.25 8z"
d="M14.625 7.125h-5.75v-5.75A.376.376 0 0 0 8.5 1h-1a.376.376 0 0 0-.375.375v5.75h-5.75A.376.376 0 0 0 1 7.5v1c0 .206.169.375.375.375h5.75v5.75c0 .206.169.375.375.375h1a.376.376 0 0 0 .375-.375v-5.75h5.75A.376.376 0 0 0 15 8.5v-1a.376.376 0 0 0-.375-.375z"
/>
)

0
src/icons/onboarding/GetStartedLogo.js → src/icons/illustrations/GetStartedLogo.js
View File

0
src/icons/onboarding/LedgerBlue.js → src/icons/illustrations/LedgerBlue.js
View File

0
src/icons/onboarding/LedgerBlueError.js → src/icons/illustrations/LedgerBlueError.js
View File

0
src/icons/onboarding/LedgerBlueSelectPIN.js → src/icons/illustrations/LedgerBlueSelectPIN.js
View File

0
src/icons/onboarding/LedgerNano.js → src/icons/illustrations/LedgerNano.js
View File

0
src/icons/onboarding/LedgerNanoError.js → src/icons/illustrations/LedgerNanoError.js
View File

0
src/icons/onboarding/LedgerNanoSelectPIN.js → src/icons/illustrations/LedgerNanoSelectPIN.js
View File

0
src/icons/onboarding/SetPassword.js → src/icons/illustrations/SetPassword.js
View File

0
src/icons/onboarding/WriteSeed.js → src/icons/illustrations/WriteSeed.js
View File

81
src/icons/onboarding/Analytics.js
View File

@ -1,81 +0,0 @@
// @flow
import React from 'react'
export default () => (
<svg width="136" height="52">
<g fill="none" fillRule="evenodd">
<g fill="#6490F1" fillRule="nonzero" transform="translate(50 18)">
<path
fillOpacity=".4"
d="M3.794 8.937l3.96-4.06a2.296 2.296 0 0 1-.797-.818l-3.96 4.062c.329.199.603.48.797.816z"
/>
<ellipse cx="1.856" cy="10.109" rx="1.408" ry="1.444" />
<ellipse cx="8.895" cy="2.888" rx="1.408" ry="1.444" />
<path
fillOpacity=".4"
d="M10.474 4.534l3.302 2.032c.11-.38.312-.72.58-.99l-3.302-2.033c-.11.38-.311.72-.58.99zM20.922 2.39l-3.638 2.984c.303.234.547.543.705.901l3.637-2.985a2.307 2.307 0 0 1-.704-.9z"
/>
<ellipse cx="15.935" cy="7.221" rx="1.408" ry="1.444" />
<ellipse cx="22.975" cy="1.444" rx="1.408" ry="1.444" />
<path
fillOpacity=".4"
d="M23.937 3.53l4.25 5.232c.223-.316.52-.571.866-.74l-4.251-5.231c-.222.316-.52.57-.865.74z"
/>
<ellipse cx="30.015" cy="10.109" rx="1.408" ry="1.444" />
<path
fillOpacity=".4"
d="M32.068 9.163l3.638-2.985a2.313 2.313 0 0 1-.705-.9l-3.638 2.984c.304.234.548.543.705.901z"
/>
<ellipse cx="37.054" cy="4.332" rx="1.408" ry="1.444" />
</g>
<g transform="translate(109 4)">
<path
fill="#CCC"
fillRule="nonzero"
d="M6.325 38.352l.614-.636c.254-.263.712-.233 1.023.067.31.3.356.757.102 1.02l-.614.636.643.62c.267.258.242.715-.055 1.022-.296.307-.753.348-1.019.09l-.643-.62-.614.635c-.254.264-.712.234-1.023-.066-.31-.3-.356-.757-.102-1.02l.614-.636-.643-.62c-.266-.258-.242-.715.055-1.022.296-.308.753-.348 1.02-.09l.642.62z"
/>
<ellipse cx="1.224" cy="24.349" stroke="#E2E2E2" strokeWidth=".8" rx="1.146" ry="1.133" />
<ellipse cx="21.21" cy="23.216" stroke="#E2E2E2" strokeWidth=".8" rx="1.564" ry="1.546" />
<path
fill="#EEE"
fillRule="nonzero"
d="M11.558 12.189l.917-.95c.281-.291.677-.366.883-.167.206.2.145.597-.136.888l-.917.95.96.928c.295.284.375.68.178.884-.197.204-.596.139-.89-.146l-.961-.927-.917.95c-.281.29-.677.365-.883.166-.206-.2-.145-.597.136-.888l.917-.95-.96-.928c-.295-.284-.375-.68-.178-.884.197-.204.596-.139.89.146l.961.928z"
/>
<path
fill="#CCC"
fillRule="nonzero"
d="M25.03 3.01l.71-.736c.251-.26.657-.277.905-.037.249.24.246.646-.005.907l-.71.734.744.718c.263.255.285.66.047.906-.237.246-.643.239-.907-.016l-.743-.718-.71.735c-.251.26-.657.277-.906.037-.248-.24-.246-.646.006-.906l.71-.735-.744-.718c-.263-.255-.285-.66-.047-.906.237-.246.643-.238.907.016l.743.718z"
/>
</g>
<g transform="translate(1 -1)">
<path
fill="#CCC"
fillRule="nonzero"
d="M20.486 48.016l.621-.643c.257-.267.72-.238 1.033.065.314.303.36.764.102 1.03l-.621.644.648.626c.269.26.243.722-.057 1.033-.3.31-.761.352-1.03.093l-.648-.627-.622.644c-.257.266-.72.237-1.033-.066-.313-.302-.359-.764-.102-1.03l.622-.643-.649-.627c-.268-.26-.243-.721.057-1.032.3-.311.762-.353 1.03-.093l.649.626z"
/>
<ellipse cx="3.155" cy="37.389" stroke="#CCC" strokeWidth=".8" rx="3.155" ry="3.13" />
<ellipse cx="18.932" cy="29.564" stroke="#E2E2E2" strokeWidth=".8" rx="1.578" ry="1.565" />
<path
fill="#EEE"
fillRule="nonzero"
d="M9.447 16.156l1.118-1.158c.343-.356.825-.447 1.075-.205.251.242.176.726-.167 1.081l-1.118 1.158 1.167 1.128c.358.346.454.828.214 1.076-.24.249-.725.17-1.084-.176l-1.167-1.127-1.118 1.158c-.343.355-.825.447-1.075.205-.251-.242-.176-.727.167-1.082l1.118-1.158L7.41 15.93c-.358-.346-.454-.828-.214-1.077.24-.248.725-.17 1.084.176l1.167 1.128z"
/>
<path
fill="#CCC"
fillRule="nonzero"
d="M22.47 2.013l.699-.724c.214-.222.515-.28.672-.128.156.151.11.454-.105.676l-.699.724.73.704c.224.216.283.518.133.673-.15.156-.453.106-.677-.11l-.73-.704-.698.723c-.215.222-.515.28-.672.128-.157-.15-.11-.454.104-.676l.7-.723-.73-.705c-.224-.216-.284-.517-.134-.673.15-.155.453-.106.677.11l.73.705z"
/>
</g>
<g fillRule="nonzero" transform="translate(36 1)">
<ellipse cx="37.488" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
<ellipse cx="33.5" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
<ellipse cx="29.512" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
<path
fill="#142533"
d="M65.405 40.242h-2.792V9.562c0-7.251-5.982-9.164-9.173-9.164H13.56c-3.191 0-9.173 1.913-9.173 9.165v30.68H1.595C.957 40.242.4 40.8.4 41.436c0 3.188 1.914 9.165 9.172 9.165H57.43c7.258 0 9.172-5.977 9.172-9.164 0-.638-.558-1.196-1.196-1.196zM6.78 9.562c0-6.534 6.062-6.773 6.78-6.773h39.88c.718 0 6.78.24 6.78 6.774v30.68H6.78V9.562zm50.649 38.649H9.57c-5.025 0-6.3-3.586-6.7-5.578h61.18c-.32 1.912-1.595 5.578-6.62 5.578z"
/>
</g>
</g>
</svg>
)

24
src/icons/onboarding/Warning.js
View File

@ -1,24 +0,0 @@
// @flow
import React from 'react'
export default () => (
<svg width="28" height="31">
<g fill="none">
<path
fill="#EA2E49"
fillOpacity=".1"
d="M14.135 1C14.045 17.38 14 27.046 14 30h.271C21.448 28.36 27 21.552 27 14.24V6.295L14.135 1z"
/>
<path
stroke="#142533"
strokeWidth="1.5"
d="M14 1L1 6.296v7.943C1 21.552 6.474 28.361 13.863 30h.274C21.389 28.36 27 21.552 27 14.24V6.295L14 1z"
/>
<path
fill="#EA2E49"
d="M18.538 10.727c-.44 0-.799.338-.799.755l-.014 3.386s.001.237-.24.237c-.245 0-.238-.237-.238-.237V9.983c0-.417-.354-.74-.794-.74-.442 0-.756.323-.756.74v4.885s-.027.239-.264.239c-.235 0-.253-.239-.253-.239V9.17c0-.417-.333-.733-.774-.733-.44 0-.776.316-.776.733v5.7s-.012.228-.266.228c-.25 0-.25-.229-.25-.229v-4.233c0-.417-.346-.679-.787-.679-.442 0-.764.262-.764.679v6.187s-.044.275-.46-.18c-1.07-1.163-1.629-1.394-1.629-1.394s-1.015-.47-1.465.378c-.326.616.02.65.552 1.405.472.67 1.963 2.43 1.963 2.43s1.768 2.358 4.155 2.358c0 0 4.674.189 4.674-4.182l-.016-6.155c0-.417-.358-.755-.799-.755"
/>
</g>
</svg>
)

8
src/reducers/onboarding.js
View File

@ -24,6 +24,7 @@ export type OnboardingState = {
isDeviceGenuine: boolean,
},
isLedgerNano: boolean,
flowType: string,
}
const state: OnboardingState = {
@ -36,6 +37,7 @@ const state: OnboardingState = {
isDeviceGenuine: false,
},
isLedgerNano: true,
flowType: '',
steps: [
{
name: 'start',
@ -161,7 +163,10 @@ const handlers = {
...obj,
},
}),
ONBOARDING_SET_FLOW_TYPE: (state, { payload: flowType }) => ({
...state,
flowType,
}),
ONBOARDING_SET_DEVICE_TYPE: (state, { payload: isLedgerNano }) => ({
...state,
isLedgerNano,
@ -175,3 +180,4 @@ export const prevStep = createAction('ONBOARDING_PREV_STEP')
export const jumpStep = createAction('ONBOARDING_JUMP_STEP')
export const updateGenuineCheck = createAction('UPDATE_GENUINE_CHECK')
export const isLedgerNano = createAction('ONBOARDING_SET_DEVICE_TYPE')
export const flowType = createAction('ONBOARDING_SET_FLOW_TYPE')

2
src/stories/icons.stories.js
View File

@ -6,7 +6,7 @@ import Box from 'components/base/Box'
const stories = storiesOf('Common', module)
const req = require.context('../icons', true, /.js$/)
const req = require.context('../icons', true, /^((?!illustrations).)*\.js$/)
const icons = req
.keys()
.map(file => {

5
static/i18n/en/onboarding.yml
View File

@ -1,6 +1,5 @@
start:
title: Welcome to the new Ledger Live Desktop app.
desc: Let’s get started!
title: Welcome to Ledger Live
init:
title: Welcome to Ledger Live, the computer companion app to your Ledger device
newDevice:
@ -17,7 +16,6 @@ init:
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.
@ -47,6 +45,7 @@ writeSeed:
step1: Copy the first word (Word \#1) in position 1 on the blank Recovery sheet.
step2: Press the right button to display Word \#2 and repeat the process until all 24 words are copied on the Recovery sheet.
step3: Confirm your recovery phrase press both buttons to validate each word displayed on the screen.
step4: Repeat the process until the last word.
disclaimer:
note1: Carefully secure your 24 words out of sight.
note2: Ledger does not keep any backup of your 24 words.

Write Preview
Loading…
Cancel
Save