diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index 70734f21..e519fbec 100644
--- a/src/components/Onboarding/helperComponents.js
+++ b/src/components/Onboarding/helperComponents.js
@@ -113,3 +113,23 @@ const DisclaimerBoxIconContainer = styled(Box).attrs({
top: 0;
right: 0;
`
+
+// GENUINE CHECK
+export const GenuineCheckCardWrapper = styled(Box).attrs({
+ horizontal: true,
+ p: 5,
+ borderRadius: '4px',
+ justify: 'space-between',
+})`
+ 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)};
+ opacity: ${p => (p.isDisabled ? 0.7 : 1)};
+ &:hover {
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
+ }
+`
diff --git a/src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js b/src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js
new file mode 100644
index 00000000..a5d7322b
--- /dev/null
+++ b/src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js
@@ -0,0 +1,57 @@
+// @flow
+
+import React, { Fragment } from 'react'
+import { i } from 'helpers/staticPath'
+
+import type { T } from 'types/common'
+
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+
+import { Title, Description, OnboardingFooterWrapper } from '../../helperComponents'
+
+export function GenuineCheckErrorPage({
+ redoGenuineCheck,
+ contactSupport,
+ isLedgerNano,
+ t,
+}: {
+ redoGenuineCheck: () => void,
+ contactSupport: () => void,
+ isLedgerNano: boolean | null,
+ t: T,
+}) {
+ return (
+
+
+ {isLedgerNano ? (
+
+ {t('onboarding:genuineCheck.errorPage.ledgerNano.title')}
+ {t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}
+
+
+
+
+ ) : (
+
+ {t('onboarding:genuineCheck.errorPage.ledgerBlue.title')}
+
+ {t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')}
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js b/src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js
new file mode 100644
index 00000000..1f88b7aa
--- /dev/null
+++ b/src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js
@@ -0,0 +1,67 @@
+// @flow
+
+import React from 'react'
+import { colors } from 'styles/theme'
+
+import type { T } from 'types/common'
+import type { OnboardingState } from 'reducers/onboarding'
+
+import FakeLink from 'components/base/FakeLink'
+import IconCross from 'icons/Cross'
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+import TranslatedError from 'components/TranslatedError'
+
+import { OnboardingFooterWrapper } from '../../helperComponents'
+
+export function GenuineCheckUnavailableFooter({
+ prevStep,
+ nextStep,
+ t,
+}: {
+ prevStep: () => void,
+ nextStep: () => void,
+ t: T,
+}) {
+ return (
+
+
+
+
+
+
+
+ )
+}
+
+export function GenuineCheckUnavailableMessage({
+ handleOpenGenuineCheckModal,
+ onboarding,
+ t,
+}: {
+ handleOpenGenuineCheckModal: () => void,
+ t: T,
+ onboarding: OnboardingState,
+}) {
+ return (
+
+
+ {t('app:common.retry')}
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck/index.js
similarity index 63%
rename from src/components/Onboarding/steps/GenuineCheck.js
rename to src/components/Onboarding/steps/GenuineCheck/index.js
index 292e9e08..d00ce863 100644
--- a/src/components/Onboarding/steps/GenuineCheck.js
+++ b/src/components/Onboarding/steps/GenuineCheck/index.js
@@ -1,25 +1,19 @@
// @flow
-import React, { PureComponent, Fragment } from 'react'
+import React, { PureComponent } from 'react'
import { shell } from 'electron'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { colors } from 'styles/theme'
-import { i } from 'helpers/staticPath'
-
-import type { T } from 'types/common'
import { updateGenuineCheck } from 'reducers/onboarding'
import Box from 'components/base/Box'
-import FakeLink from 'components/base/FakeLink'
import Button from 'components/base/Button'
import RadioGroup from 'components/base/RadioGroup'
import GenuineCheckModal from 'components/GenuineCheckModal'
-import TranslatedError from 'components/TranslatedError'
import IconCheck from 'icons/Check'
-import IconCross from 'icons/Cross'
import {
Title,
@@ -27,11 +21,17 @@ import {
IconOptionRow,
FixedTopContainer,
StepContainerInner,
- OnboardingFooterWrapper,
-} from '../helperComponents'
+ GenuineCheckCardWrapper,
+} from '../../helperComponents'
+
+import { GenuineCheckErrorPage } from './GenuineCheckErrorPage'
+import {
+ GenuineCheckUnavailableFooter,
+ GenuineCheckUnavailableMessage,
+} from './GenuineCheckUnavailable'
+import OnboardingFooter from '../../OnboardingFooter'
-import type { StepProps } from '..'
-import OnboardingFooter from '../OnboardingFooter'
+import type { StepProps } from '../..'
const mapDispatchToProps = { updateGenuineCheck }
@@ -143,7 +143,7 @@ class GenuineCheck extends PureComponent {
}
renderGenuineFail = () => (
- {
)}
-
+
{'1.'}
@@ -187,10 +187,10 @@ class GenuineCheck extends PureComponent {
onChange={item => this.handleButtonPass(item, 'pinStepPass')}
/>
-
+
-
+
@@ -208,10 +208,10 @@ class GenuineCheck extends PureComponent {
/>
)}
-
+
-
+
@@ -225,29 +225,16 @@ class GenuineCheck extends PureComponent {
{genuine.isDeviceGenuine ? (
-
+
{t('onboarding:genuineCheck.isGenuinePassed')}
-
-
- ) : genuine.genuineCheckUnavailable ? (
-
-
- {t('app:common.retry')}
-
-
-
-
-
-
-
-
+ ) : genuine.genuineCheckUnavailable ? (
+
) : (
)}
-
+
{genuine.genuineCheckUnavailable ? (
-
-
-
-
-
-
-
+
) : (
void,
- contactSupport: () => void,
- isLedgerNano: boolean | null,
- t: T,
-}) {
- return (
-
-
- {isLedgerNano ? (
-
- {t('onboarding:genuineCheck.errorPage.ledgerNano.title')}
- {t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}
-
-
-
-
- ) : (
-
- {t('onboarding:genuineCheck.errorPage.ledgerBlue.title')}
-
- {t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')}
-
-
-
-
-
- )}
-
-
-
-
-
-
- )
-}
-export const GenuineSuccessText = styled(Box).attrs({
- ff: 'Open Sans|SemiBold',
- fontSize: 4,
-})``
-
export const CardTitle = styled(Box).attrs({
ff: 'Open Sans|SemiBold',
fontSize: 4,
textAlign: 'left',
pl: 2,
})``
-
-const CardWrapper = styled(Box).attrs({
- horizontal: true,
- p: 5,
- borderRadius: '4px',
- justify: 'space-between',
-})`
- 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)};
- opacity: ${p => (p.isDisabled ? 0.7 : 1)};
- &:hover {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
- }
-`