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 ? ( + ) : ( - - - - - + ) : ( 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); - } -`