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

wip disclaimers

master
NastiaS 7 years ago
parent
6c78b39987
commit
1f9f8d1401
6 changed files with 145 additions and 55 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. 5
      src/components/Breadcrumb/Step.js
  2. 59
      src/components/Onboarding/helperComponents.js
  3. 42
      src/components/Onboarding/steps/SelectPIN.js
  4. 41
      src/components/Onboarding/steps/WriteSeed.js
  5. 24
      src/icons/onboarding/Warning.js
  6. 29
      static/i18n/en/onboarding.yml

5
src/components/Breadcrumb/Step.js
View File

@ -27,12 +27,13 @@ const Wrapper = styled(Box).attrs({
const StepNumber = styled(Box).attrs({
alignItems: 'center',
justifyContent: 'center',
color: 'white',
color: 'fog',
bg: p =>
['active', 'valid'].includes(p.status) ? 'wallet' : p.status === 'error' ? 'alertRed' : 'fog',
['active', 'valid'].includes(p.status) ? 'wallet' : p.status === 'error' ? 'alertRed' : 'white',
ff: 'Rubik|Regular',
})`
border-radius: 50%;
border: 1px solid #d8d8d8;
font-size: 10px;
height: ${RADIUS}px;
line-height: 10px;

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

@ -4,6 +4,7 @@ import styled from 'styled-components'
import { radii } from 'styles/theme'
import Box from 'components/base/Box'
import IconWarning from 'icons/onboarding/Warning'
// GENERAL
export const Title = styled(Box).attrs({
@ -46,20 +47,18 @@ type StepType = {
icon: any,
desc: string,
}
export function InstructionStep({ step }: { step: StepType }) {
export function OptionRow({ step }: { step: StepType }) {
const { icon, desc } = step
return (
<Box horizontal>
<Box justify="center" color="grey" style={{ width: 26 }}>
{icon}
</Box>
<Box horizontal m={2}>
<Box justify="center">{icon}</Box>
<Box ff="Open Sans|Regular" justify="center" fontSize={4} style={{ paddingLeft: 10 }} shrink>
<InstructionStepDesc>{desc}</InstructionStepDesc>
<OptionRowDesc>{desc}</OptionRowDesc>
</Box>
</Box>
)
}
export const InstructionStepDesc = styled(Box).attrs({
export const OptionRowDesc = styled(Box).attrs({
ff: 'Open Sans|Regular',
fontSize: 4,
textAlign: 'left',
@ -68,15 +67,41 @@ export const InstructionStepDesc = styled(Box).attrs({
shrink: 1,
})``
export const IconInstructionStep = styled(Box).attrs({
width: 26,
height: 26,
export const IconOptionRow = styled(Box).attrs({
ff: 'Rubik|Regular',
textAlign: 'center',
fontSize: 3,
fontSize: 14,
color: 'wallet',
})`
border-radius: 100%;
background: #6490f126;
line-height: 2;
`
})``
export function DisclaimerBox({ disclaimerNotes }: { disclaimerNotes: any }) {
return (
<Box
shrink
grow
flow={4}
style={{
minWidth: 680,
backgroundColor: '#ea2e490c',
border: 'dashed 1px #ea2e49b3',
}}
>
<Box
m={3}
style={{
position: 'relative',
}}
>
<Box
style={{
position: 'absolute',
top: '0px',
right: '0px',
}}
>
<IconWarning />
</Box>
{disclaimerNotes.map(note => <OptionRow key={note.key} step={note} />)}
</Box>
</Box>
)
}

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

@ -3,14 +3,18 @@
import React from 'react'
import Box from 'components/base/Box'
import { colors } from 'styles/theme'
import IconSelectPIN from 'icons/onboarding/SelectPIN'
import IconChevronRight from 'icons/ChevronRight'
import {
Title,
Description,
Inner,
InstructionStep,
IconInstructionStep,
OptionRow,
IconOptionRow,
DisclaimerBox,
} from '../helperComponents'
import OnboardingFooter from '../OnboardingFooter'
@ -21,42 +25,60 @@ export default (props: StepProps) => {
const steps = [
{
key: 'step1',
icon: <IconInstructionStep>1</IconInstructionStep>,
icon: <IconOptionRow>1.</IconOptionRow>,
desc: t('onboarding:selectPIN.instructions.step1'),
},
{
key: 'step2',
icon: <IconInstructionStep>2</IconInstructionStep>,
icon: <IconOptionRow>2.</IconOptionRow>,
desc: t('onboarding:selectPIN.instructions.step2'),
},
{
key: 'step3',
icon: <IconInstructionStep>3</IconInstructionStep>,
icon: <IconOptionRow>3.</IconOptionRow>,
desc: t('onboarding:selectPIN.instructions.step3'),
},
{
key: 'step4',
icon: <IconInstructionStep>4</IconInstructionStep>,
icon: <IconOptionRow>4.</IconOptionRow>,
desc: t('onboarding:selectPIN.instructions.step4'),
},
]
const disclaimerNotes = [
{
key: 'note1',
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
desc: t('onboarding:selectPIN.disclaimer.note1'),
},
{
key: 'note2',
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
desc: t('onboarding:selectPIN.disclaimer.note2'),
},
{
key: 'note3',
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
desc: t('onboarding:selectPIN.disclaimer.note3'),
},
]
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>
<Description style={{ maxWidth: 527 }}>{t('onboarding:selectPIN.desc')}</Description>
</Box>
<Box>
<Box align="center">
<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 shrink grow flow={4}>
{steps.map(step => <OptionRow key={step.key} step={step} />)}
</Box>
</Inner>
<DisclaimerBox disclaimerNotes={disclaimerNotes} />
</Box>
</Box>
<OnboardingFooter

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

@ -4,13 +4,16 @@ import React from 'react'
import Box from 'components/base/Box'
import IconWriteSeed from 'icons/onboarding/WriteSeed'
import IconChevronRight from 'icons/ChevronRight'
import { colors } from 'styles/theme'
import {
Title,
Description,
Inner,
InstructionStep,
IconInstructionStep,
OptionRow,
IconOptionRow,
DisclaimerBox,
} from '../helperComponents'
import OnboardingFooter from '../OnboardingFooter'
@ -21,28 +24,35 @@ export default (props: StepProps) => {
const steps = [
{
key: 'step1',
icon: <IconInstructionStep>1</IconInstructionStep>,
icon: <IconOptionRow>1.</IconOptionRow>,
desc: t('onboarding:writeSeed.instructions.step1'),
},
{
key: 'step2',
icon: <IconInstructionStep>2</IconInstructionStep>,
icon: <IconOptionRow>2.</IconOptionRow>,
desc: t('onboarding:writeSeed.instructions.step2'),
},
{
key: 'step3',
icon: <IconInstructionStep>3</IconInstructionStep>,
icon: <IconOptionRow>3.</IconOptionRow>,
desc: t('onboarding:writeSeed.instructions.step3'),
},
]
const disclaimerNotes = [
{
key: 'note1',
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
desc: t('onboarding:writeSeed.disclaimer.note1'),
},
{
key: 'step4',
icon: <IconInstructionStep>4</IconInstructionStep>,
desc: t('onboarding:writeSeed.instructions.step4'),
key: 'note2',
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
desc: t('onboarding:writeSeed.disclaimer.note2'),
},
{
key: 'step5',
icon: <IconInstructionStep>5</IconInstructionStep>,
desc: t('onboarding:writeSeed.instructions.step5'),
key: 'note3',
icon: <IconChevronRight size={12} style={{ color: colors.smoke }} />,
desc: t('onboarding:writeSeed.disclaimer.note3'),
},
]
return (
@ -52,15 +62,16 @@ export default (props: StepProps) => {
<Title>{t('onboarding:writeSeed.title')}</Title>
<Description style={{ maxWidth: 714 }}>{t('onboarding:writeSeed.desc')}</Description>
</Box>
<Box>
<Box align="center">
<Inner style={{ width: 760 }}>
<Box style={{ width: 260, alignItems: 'center' }} mt={4}>
<Box style={{ width: 260, alignItems: 'center' }}>
<IconWriteSeed />
</Box>
<Box shrink grow flow={5}>
{steps.map(step => <InstructionStep key={step.key} step={step} />)}
<Box shrink grow flow={4}>
{steps.map(step => <OptionRow key={step.key} step={step} />)}
</Box>
</Inner>
<DisclaimerBox disclaimerNotes={disclaimerNotes} />
</Box>
</Box>
<OnboardingFooter

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

@ -0,0 +1,24 @@
// @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>
)

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

@ -25,22 +25,29 @@ selectDevice:
title: Ledger Blue
desc: Please replace it with the final wording once it’s done.
selectPIN:
title: Select PIN code
title: Choose your 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.
step1: Connect the Ledger Nano S to your computer.
step2: Press both buttons simultaneously as instructed on the screen.
step3: Press the right button to select Configure as new device.
step4: Choose a PIN code between 4 and 8 digits long.
disclaimer:
note1: Choose your own PIN code. This code unlocks your device.
note2: An 8-digit PIN code offers an optimum level of security.
note3: Never use a device supplied with a PIN code and/or a 24-word recovery phrase.
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.
title: Save your recovery phrase
desc: Your recovery phrase is formed by 24 words. They will be displayed only once.
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.
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.
disclaimer:
note1: Carefully secure your 24 words out of sight.
note2: Ledger does not keep any backup of your 24 words.
note3: Make sure you are the sole holder of the 24-word recovery phrase.
note4: Never use a device supplied with a recovery phrase and/or a PIN code.
genuineCheck:
title: Check PIN / Seed / Authenticity
desc: Your Ledger Nano S should now display Your device is now ready. Before getting started, please confirm that

Write Preview
Loading…
Cancel
Save