Gaëtan Renaudeau
7 years ago
26 changed files with 1136 additions and 284 deletions
@ -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; |
|||
` |
|||
@ -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> |
|||
) |
|||
} |
|||
@ -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; |
|||
` |
|||
|
|||
@ -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', |
|||
})`` |
|||
|
|||
@ -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', |
|||
})`` |
|||
@ -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> |
|||
) |
|||
} |
|||
@ -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> |
|||
) |
|||
@ -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> |
|||
) |
|||
@ -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> |
|||
) |
|||
@ -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> |
|||
) |
|||
@ -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> |
|||
) |
|||
@ -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 |
|||
Loading…
Reference in new issue