diff --git a/src/components/Onboarding/OnboardingFooter.js b/src/components/Onboarding/OnboardingFooter.js index a7ef3966..922e3423 100644 --- a/src/components/Onboarding/OnboardingFooter.js +++ b/src/components/Onboarding/OnboardingFooter.js @@ -1,11 +1,15 @@ // @flow +import React from 'react' import styled from 'styled-components' import { radii } from 'styles/theme' +import type { T } from 'types/common' + +import Button from 'components/base/Button' import Box from 'components/base/Box' -export const OnboardingFooter = styled(Box).attrs({ +const Wrapper = styled(Box).attrs({ px: 5, py: 3, })` @@ -13,3 +17,21 @@ export const OnboardingFooter = styled(Box).attrs({ border-bottom-left-radius: ${radii[1]}px; border-bottom-right-radius: ${radii[1]}px; ` + +type Props = { + t: T, + nextStep: () => void, + prevStep: () => void, +} + +const OnboardingFooter = ({ t, nextStep, prevStep, ...props }: Props) => ( + + + + +) +export default OnboardingFooter diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index 2c0da32a..8b2a03e1 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -1,11 +1,13 @@ // @flow +import React from 'react' import styled from 'styled-components' import { radii } from 'styles/theme' import Box from 'components/base/Box' +// GENERAL export const Title = styled(Box).attrs({ - width: 152, + width: 267, height: 27, ff: 'Museo Sans|Regular', fontSize: 7, @@ -13,12 +15,13 @@ export const Title = styled(Box).attrs({ })`` export const Description = styled(Box).attrs({ - width: 340, - height: 36, - ff: 'Open Sans|Regular', - fontSize: 4, + width: 714, + height: 48, + ff: 'Museo Sans|Light', + fontSize: 5, + lineHeight: 1.5, textAlign: 'center', - color: 'smoke', + color: 'grey', })` margin: 10px auto 25px; ` @@ -28,6 +31,7 @@ export const Inner = styled(Box).attrs({ flow: 4, })`` +// FOOTER export const OnboardingFooter = styled(Box).attrs({ px: 5, py: 3, @@ -36,3 +40,43 @@ export const OnboardingFooter = styled(Box).attrs({ border-bottom-left-radius: ${radii[1]}px; border-bottom-right-radius: ${radii[1]}px; ` + +// INSTRUCTION LIST +type StepType = { + icon: any, + desc: string, +} +export function InstructionStep({ step }: { step: StepType }) { + const { icon, desc } = step + return ( + + + {icon} + + + {desc} + + + ) +} +export const InstructionStepDesc = styled(Box).attrs({ + ff: 'Open Sans|Regular', + fontSize: 4, + textAlign: 'left', + lineHeight: 1.69, + color: 'smoke', + shrink: 1, +})`` + +export const IconInstructionStep = styled(Box).attrs({ + width: 26, + height: 26, + ff: 'Rubik|Regular', + textAlign: 'center', + fontSize: 3, + color: 'wallet', +})` + border-radius: 100%; + background: #6490f126; + line-height: 2; +` diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index ca9dbdf7..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, @@ -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 deleted file mode 100644 index 7da5e8a8..00000000 --- a/src/components/Onboarding/steps/ChooseDevice.js +++ /dev/null @@ -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 ( - - - 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()}> - - - - Ledger Nano S - Please replace it with the final wording once it’s done. - - - - - - Ledger Blue - Please replace it with the final wording once it’s done. - - - -
-
- ) -} - -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; -` diff --git a/src/components/Onboarding/steps/ChoosePIN.js b/src/components/Onboarding/steps/ChoosePIN.js deleted file mode 100644 index 794f4b71..00000000 --- a/src/components/Onboarding/steps/ChoosePIN.js +++ /dev/null @@ -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 ( - - - 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 -
-
- - - - -
- ) -} 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/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js index 0ed00ea6..9d088a19 100644 --- a/src/components/Onboarding/steps/Init.js +++ b/src/components/Onboarding/steps/Init.js @@ -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: , + title: t('onboarding:init.newDevice.title'), + desc: t('onboarding:init.newDevice.desc'), + onClick: () => nextStep(), + }, + { + key: 'restoreDevice', + icon: , + title: t('onboarding:init.restoreDevice.title'), + desc: t('onboarding:init.restoreDevice.desc'), + onClick: () => jumpStep('choosePIN'), + }, + { + key: 'initializedDevice', + icon: , + title: t('onboarding:init.initializedDevice.title'), + desc: t('onboarding:init.initializedDevice.desc'), + onClick: () => jumpStep('choosePIN'), + }, + { + key: 'noDevice', + icon: , + title: t('onboarding:init.noDevice.title'), + desc: t('onboarding:init.noDevice.desc'), + 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. - - + + + + + {t('onboarding:init.title')} - - - 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. - - + + {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', -})` - 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 ( + + + {icon} + + + {title} + {desc} + + + + + + ) +} + +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', })`` diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js new file mode 100644 index 00000000..fc5d226a --- /dev/null +++ b/src/components/Onboarding/steps/SelectDevice.js @@ -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 ( + + + {t('onboarding:selectDevice.title')} + {t('onboarding:selectDevice.desc')} + + + nextStep()}> + + + + {t('onboarding:selectDevice.ledgerNanoCard.title')} + + {t('onboarding:selectDevice.ledgerNanoCard.desc')} + + + + + + + {t('onboarding:selectDevice.ledgerBlueCard.title')} + + {t('onboarding:selectDevice.ledgerBlueCard.desc')} + + + + + + + ) +} + +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', +})`` 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/Start.js b/src/components/Onboarding/steps/Start.js index e3586584..773c9cfa 100644 --- a/src/components/Onboarding/steps/Start.js +++ b/src/components/Onboarding/steps/Start.js @@ -5,20 +5,21 @@ 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' export default (props: StepProps) => { - const { jumpStep } = props + const { jumpStep, t } = props return ( - - Ledger Live - Welcome to the new Ledger Live Desktop app. - Let’s get started! - 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/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 () => ( + + + + + + + + + + + + + +) diff --git a/src/icons/onboarding/LedgerBlue.js b/src/icons/onboarding/LedgerBlue.js new file mode 100644 index 00000000..781df02d --- /dev/null +++ b/src/icons/onboarding/LedgerBlue.js @@ -0,0 +1,32 @@ +// @flow + +import React from 'react' + +export default () => ( + + + + + + + +) diff --git a/src/icons/onboarding/LedgerNano.js b/src/icons/onboarding/LedgerNano.js new file mode 100644 index 00000000..813ea82f --- /dev/null +++ b/src/icons/onboarding/LedgerNano.js @@ -0,0 +1,36 @@ +// @flow + +import React from 'react' + +export default () => ( + + + + + + + + + + +) diff --git a/src/icons/onboarding/SelectPIN.js b/src/icons/onboarding/SelectPIN.js new file mode 100644 index 00000000..1c6b504c --- /dev/null +++ b/src/icons/onboarding/SelectPIN.js @@ -0,0 +1,75 @@ +// @flow + +import React from 'react' + +export default () => ( + + + + + + + + + + + + + + + + + + + + + + + + + +) 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/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' 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 new file mode 100644 index 00000000..53af20d7 --- /dev/null +++ b/static/i18n/en/onboarding.yml @@ -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