diff --git a/src/components/Onboarding/OnboardingFooter.js b/src/components/Onboarding/OnboardingFooter.js
index c04eb55f..0bb1bded 100644
--- a/src/components/Onboarding/OnboardingFooter.js
+++ b/src/components/Onboarding/OnboardingFooter.js
@@ -1,22 +1,11 @@
// @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'
-
-const Wrapper = styled(Box).attrs({
- px: 5,
- py: 3,
-})`
- border-top: 1px solid ${p => p.theme.colors.lightFog};
- border-bottom-left-radius: ${radii[1]}px;
- border-bottom-right-radius: ${radii[1]}px;
-`
+import { OnboardingFooterWrapper } from './helperComponents'
type Props = {
t: T,
@@ -33,13 +22,13 @@ const OnboardingFooter = ({
...props
}: Props) => (
-
+
-
+
)
export default OnboardingFooter
diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index f2a2986f..a7e93de9 100644
--- a/src/components/Onboarding/helperComponents.js
+++ b/src/components/Onboarding/helperComponents.js
@@ -38,11 +38,13 @@ export const FixedTopContainer = styled(Box).attrs({
backgroundColor: 'red',
})``
// FOOTER
-export const OnboardingFooter = styled(Box).attrs({
+
+export const OnboardingFooterWrapper = styled(Box).attrs({
px: 5,
py: 3,
+ horizontal: true,
})`
- border-top: 2px solid ${p => p.theme.colors.lightGrey};
+ border-top: 2px solid ${p => p.theme.colors.lightFog};
border-bottom-left-radius: ${radii[1]}px;
border-bottom-right-radius: ${radii[1]}px;
`
diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js
index 70e55334..58ace8cc 100644
--- a/src/components/Onboarding/index.js
+++ b/src/components/Onboarding/index.js
@@ -27,6 +27,7 @@ import Box from 'components/base/Box'
import Start from './steps/Start'
import InitStep from './steps/Init'
+import NoDeviceStep from './steps/NoDevice'
import OnboardingBreadcrumb from './OnboardingBreadcrumb'
import SelectDevice from './steps/SelectDevice'
import SelectPIN from './steps/SelectPIN/index'
@@ -46,6 +47,7 @@ const STEPS = {
analytics: Analytics,
finish: Finish,
start: Start,
+ noDevice: NoDeviceStep,
}
const mapStateToProps = state => ({
diff --git a/src/components/Onboarding/steps/Finish.js b/src/components/Onboarding/steps/Finish.js
index 21c0423c..c5cbd04c 100644
--- a/src/components/Onboarding/steps/Finish.js
+++ b/src/components/Onboarding/steps/Finish.js
@@ -39,8 +39,8 @@ const socialMedia = [
export default (props: StepProps) => {
const { finish, t } = props
return (
-
-
+
+
diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js
index 7ab525ba..5de74d47 100644
--- a/src/components/Onboarding/steps/GenuineCheck.js
+++ b/src/components/Onboarding/steps/GenuineCheck.js
@@ -4,7 +4,7 @@ import React, { PureComponent, Fragment } from 'react'
import { shell } from 'electron'
import { connect } from 'react-redux'
import styled from 'styled-components'
-import { radii, colors } from 'styles/theme'
+import { colors } from 'styles/theme'
import type { T } from 'types/common'
@@ -19,7 +19,13 @@ import IconLedgerNanoError from 'icons/illustrations/LedgerNanoError'
import IconLedgerBlueError from 'icons/illustrations/LedgerBlueError'
import IconCheck from 'icons/Check'
-import { Title, Description, IconOptionRow, FixedTopContainer } from '../helperComponents'
+import {
+ Title,
+ Description,
+ IconOptionRow,
+ FixedTopContainer,
+ OnboardingFooterWrapper,
+} from '../helperComponents'
import type { StepProps } from '..'
import OnboardingFooter from '../OnboardingFooter'
@@ -145,7 +151,7 @@ class GenuineCheck extends PureComponent {
- 2.
+ 2.
{t('onboarding:genuineCheck.steps.step2.title')}
@@ -164,7 +170,9 @@ class GenuineCheck extends PureComponent {
- 3.
+
+ 3.
+
{t('onboarding:genuineCheck.steps.step3.title')}
@@ -250,27 +258,14 @@ export function GenuineCheckFail({
)}
-
-
+
)
}
@@ -285,14 +280,6 @@ export const CardTitle = styled(Box).attrs({
pl: 2,
})``
-const Wrapper = styled(Box).attrs({
- px: 5,
- py: 3,
-})`
- border-top: 2px solid ${p => p.theme.colors.lightGrey};
- border-bottom-left-radius: ${radii[1]}px;
- border-bottom-right-radius: ${radii[1]}px;
-`
const CardWrapper = styled(Box).attrs({
horizontal: true,
p: 5,
@@ -302,6 +289,7 @@ const CardWrapper = styled(Box).attrs({
width: 580px;
height: 74px;
transition: all ease-in-out 0.2s;
+ color: ${p => (p.isDisabled ? p.theme.colors.grey : p.theme.colors.black)};
border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`};
pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')};
background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)};
diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js
index fb3ad7c2..506a0362 100644
--- a/src/components/Onboarding/steps/Init.js
+++ b/src/components/Onboarding/steps/Init.js
@@ -1,7 +1,6 @@
// @flow
import React, { PureComponent } from 'react'
-import { shell } from 'electron'
import { connect } from 'react-redux'
import { colors } from 'styles/theme'
@@ -22,7 +21,7 @@ const mapDispatchToProps = { flowType }
class Init extends PureComponent {
render() {
- const { nextStep, t } = this.props
+ const { t, flowType, jumpStep } = this.props
const optionCards = [
{
@@ -30,8 +29,8 @@ class Init extends PureComponent {
icon: ,
title: t('onboarding:init.newDevice.title'),
onClick: () => {
- nextStep()
- this.props.flowType('newDevice')
+ jumpStep('selectDevice')
+ flowType('newDevice')
},
},
{
@@ -39,8 +38,8 @@ class Init extends PureComponent {
icon: ,
title: t('onboarding:init.restoreDevice.title'),
onClick: () => {
- nextStep()
- this.props.flowType('restoreDevice')
+ jumpStep('selectDevice')
+ flowType('restoreDevice')
},
},
{
@@ -48,8 +47,8 @@ class Init extends PureComponent {
icon: ,
title: t('onboarding:init.initializedDevice.title'),
onClick: () => {
- nextStep()
- this.props.flowType('initializedDevice')
+ jumpStep('selectDevice')
+ flowType('initializedDevice')
},
},
{
@@ -57,8 +56,8 @@ class Init extends PureComponent {
icon: ,
title: t('onboarding:init.noDevice.title'),
onClick: () => {
- shell.openExternal('https://www.ledger.fr/')
- this.props.flowType('noDevice')
+ jumpStep('noDevice')
+ flowType('noDevice')
},
},
]
diff --git a/src/components/Onboarding/steps/NoDevice.js b/src/components/Onboarding/steps/NoDevice.js
new file mode 100644
index 00000000..f63ad96f
--- /dev/null
+++ b/src/components/Onboarding/steps/NoDevice.js
@@ -0,0 +1,71 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { shell } from 'electron'
+
+import Box from 'components/base/Box'
+import IconUser from 'icons/User'
+import IconCart from 'icons/Cart'
+import IconTruck from 'icons/Truck'
+import IconInfoCircle from 'icons/InfoCircle'
+import Button from '../../base/Button/index'
+import { Title, OnboardingFooterWrapper } from '../helperComponents'
+import { OptionFlowCard } from './Init'
+
+import type { StepProps } from '..'
+
+class NoDevice extends PureComponent {
+ render() {
+ const { t, prevStep } = this.props
+
+ const optionCards = [
+ {
+ key: 'buyNew',
+ icon: ,
+ title: t('onboarding:noDevice.buyNew.title'),
+ onClick: () => {
+ shell.openExternal('https://www.ledgerwallet.com/')
+ },
+ },
+ {
+ key: 'trackOrder',
+ icon: ,
+ title: t('onboarding:noDevice.trackOrder.title'),
+ onClick: () => {
+ shell.openExternal('http://order.ledgerwallet.com/')
+ },
+ },
+ {
+ key: 'learnMore',
+ icon: ,
+ title: t('onboarding:noDevice.learnMore.title'),
+ onClick: () => {
+ shell.openExternal('https://www.ledgerwallet.com/')
+ },
+ },
+ ]
+
+ return (
+
+
+
+
+
+
+ {t('onboarding:noDevice.title')}
+
+
+ {optionCards.map(card => )}
+
+
+
+ prevStep()} mr="auto">
+ {t('app:common.back')}
+
+
+
+ )
+ }
+}
+
+export default NoDevice
diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js
index b52d6039..eca85f3e 100644
--- a/src/components/Onboarding/steps/SelectDevice.js
+++ b/src/components/Onboarding/steps/SelectDevice.js
@@ -32,7 +32,7 @@ class SelectDevice extends PureComponent {
}
}
render() {
- const { t, onboarding, prevStep } = this.props
+ const { t, onboarding, jumpStep } = this.props
return (
@@ -68,7 +68,7 @@ class SelectDevice extends PureComponent {
horizontal
t={t}
nextStep={this.handleContinue}
- prevStep={prevStep}
+ prevStep={() => jumpStep('init')}
isContinueDisabled={onboarding.isLedgerNano === null}
/>
diff --git a/src/components/Onboarding/steps/SetPassword.js b/src/components/Onboarding/steps/SetPassword.js
index 3c9f9d36..7448d050 100644
--- a/src/components/Onboarding/steps/SetPassword.js
+++ b/src/components/Onboarding/steps/SetPassword.js
@@ -2,8 +2,7 @@
import React, { PureComponent, Fragment } from 'react'
import bcrypt from 'bcryptjs'
-import { colors, radii } from 'styles/theme'
-import styled from 'styled-components'
+import { colors } from 'styles/theme'
import { setEncryptionKey } from 'helpers/db'
@@ -15,7 +14,13 @@ import IconChevronRight from 'icons/ChevronRight'
import PasswordForm from '../../SettingsPage/PasswordForm'
import type { StepProps } from '..'
-import { Title, Description, DisclaimerBox, FixedTopContainer } from '../helperComponents'
+import {
+ Title,
+ Description,
+ DisclaimerBox,
+ FixedTopContainer,
+ OnboardingFooterWrapper,
+} from '../helperComponents'
type State = {
currentPassword: string,
@@ -117,7 +122,7 @@ class SetPassword extends PureComponent {
-
+
prevStep()}>
{t('app:common.back')}
@@ -134,21 +139,10 @@ class SetPassword extends PureComponent {
{t('app:common.continue')}
-
+
)
}
}
export default SetPassword
-
-const CustomFooter = styled(Box).attrs({
- px: 5,
- py: 3,
- horizontal: true,
- align: 'center',
-})`
- border-top: 1px solid ${p => p.theme.colors.lightFog};
- border-bottom-left-radius: ${radii[1]}px;
- border-bottom-right-radius: ${radii[1]}px;
-`
diff --git a/src/icons/Cart.js b/src/icons/Cart.js
new file mode 100644
index 00000000..2a42bbce
--- /dev/null
+++ b/src/icons/Cart.js
@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+
+)
+
+export default ({ size, ...p }: { size: number }) => (
+
+)
diff --git a/src/icons/Truck.js b/src/icons/Truck.js
new file mode 100644
index 00000000..d643e3fd
--- /dev/null
+++ b/src/icons/Truck.js
@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+
+)
+
+export default ({ size, ...p }: { size: number }) => (
+
+)
diff --git a/src/reducers/onboarding.js b/src/reducers/onboarding.js
index 7655d877..22816556 100644
--- a/src/reducers/onboarding.js
+++ b/src/reducers/onboarding.js
@@ -57,6 +57,15 @@ const state: OnboardingState = {
showBreadcrumb: false,
},
},
+ {
+ name: 'noDevice',
+ external: true,
+ options: {
+ showFooter: false,
+ showBackground: true,
+ showBreadcrumb: false,
+ },
+ },
{
name: 'selectDevice',
label: 'Select Device',
diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml
index 7139a669..2fa67577 100644
--- a/static/i18n/en/onboarding.yml
+++ b/static/i18n/en/onboarding.yml
@@ -15,6 +15,14 @@ init:
noDevice:
title: Do not have a Ledger device yet?
desc: Please replace it with the final wording once it’s done.
+noDevice:
+ title: Do not have a Ledger device yet?
+ buyNew:
+ title: Buy a Ledger device
+ trackOrder:
+ title: Track your order
+ learnMore:
+ title: Learn about Ledger Live
selectDevice:
title: To get started, select your device
ledgerNanoCard: