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

Merge pull request #705 from NastiaS/minorFixesBranch 

Minor fixes branch
master
Meriadec Pillet 7 years ago
committed by GitHub
parent
0e354da916 d3ee8f1c37
commit
ced82d24e8
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 170 additions and 124 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. 20
      src/components/Onboarding/helperComponents.js
  2. 57
      src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js
  3. 67
      src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js
  4. 150
      src/components/Onboarding/steps/GenuineCheck/index.js

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

@ -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);
}
`

57
src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js
View File

@ -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 (
<Box sticky pt={50}>
<Box grow alignItems="center" justifyContent="center">
{isLedgerNano ? (
<Fragment>
<Title>{t('onboarding:genuineCheck.errorPage.ledgerNano.title')}</Title>
<Description>{t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}</Description>
<Box mt={5} mr={7}>
<img alt="" src={i('nano-error-onb.svg')} />
</Box>
</Fragment>
) : (
<Fragment>
<Title>{t('onboarding:genuineCheck.errorPage.ledgerBlue.title')}</Title>
<Description pb={5}>
{t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')}
</Description>
<Box alignItems="center">
<img alt="" src={i('blue-error-onb.svg')} />
</Box>
</Fragment>
)}
</Box>
<OnboardingFooterWrapper>
<Button padded outlineGrey onClick={() => redoGenuineCheck()}>
{t('app:common.back')}
</Button>
<Button padded danger onClick={() => contactSupport()} ml="auto">
{t('onboarding:genuineCheck.buttons.contactSupport')}
</Button>
</OnboardingFooterWrapper>
</Box>
)
}

67
src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js
View File

@ -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 (
<OnboardingFooterWrapper>
<Button padded outlineGrey onClick={() => prevStep()}>
{t('app:common.back')}
</Button>
<Box horizontal ml="auto">
<Button padded disabled={false} onClick={() => nextStep()} mx={2}>
{t('app:common.skipThisStep')}
</Button>
<Button padded onClick={nextStep} disabled primary>
{t('app:common.continue')}
</Button>
</Box>
</OnboardingFooterWrapper>
)
}
export function GenuineCheckUnavailableMessage({
handleOpenGenuineCheckModal,
onboarding,
t,
}: {
handleOpenGenuineCheckModal: () => void,
t: T,
onboarding: OnboardingState,
}) {
return (
<Box align="center" flow={1} color={colors.alertRed}>
<FakeLink ff="Open Sans|Regular" fontSize={4} underline onClick={handleOpenGenuineCheckModal}>
{t('app:common.retry')}
</FakeLink>
<Box horizontal justify="center">
<Box justifyContent="center">
<IconCross size={12} />
</Box>
<Box ff="Open Sans|Regular" style={{ maxWidth: 150 }} fontSize={2} ml={1}>
<TranslatedError error={onboarding.genuine.genuineCheckUnavailable} />
</Box>
</Box>
</Box>
)
}

150
src/components/Onboarding/steps/GenuineCheck.js → src/components/Onboarding/steps/GenuineCheck/index.js
View File

@ -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<StepProps, State> {
}
renderGenuineFail = () => (
<GenuineCheckFail
<GenuineCheckErrorPage
redoGenuineCheck={this.redoGenuineCheck}
contactSupport={this.contactSupport}
t={this.props.t}
@ -173,7 +173,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
</Description>
)}
<Box mt={5}>
<CardWrapper>
<GenuineCheckCardWrapper>
<Box justify="center">
<Box horizontal>
<IconOptionRow>{'1.'}</IconOptionRow>
@ -187,10 +187,10 @@ class GenuineCheck extends PureComponent<StepProps, State> {
onChange={item => this.handleButtonPass(item, 'pinStepPass')}
/>
</Box>
</CardWrapper>
</GenuineCheckCardWrapper>
</Box>
<Box mt={3}>
<CardWrapper isDisabled={!genuine.pinStepPass}>
<GenuineCheckCardWrapper isDisabled={!genuine.pinStepPass}>
<Box justify="center">
<Box horizontal>
<IconOptionRow color={!genuine.pinStepPass ? 'grey' : 'wallet'}>
@ -208,10 +208,10 @@ class GenuineCheck extends PureComponent<StepProps, State> {
/>
)}
</Box>
</CardWrapper>
</GenuineCheckCardWrapper>
</Box>
<Box mt={3}>
<CardWrapper isDisabled={!genuine.recoveryStepPass}>
<GenuineCheckCardWrapper isDisabled={!genuine.recoveryStepPass}>
<Box justify="center">
<Box horizontal>
<IconOptionRow color={!genuine.recoveryStepPass ? 'grey' : 'wallet'}>
@ -225,29 +225,16 @@ class GenuineCheck extends PureComponent<StepProps, State> {
{genuine.isDeviceGenuine ? (
<Box horizontal align="center" flow={1} color={colors.wallet}>
<IconCheck size={16} />
<GenuineSuccessText>
<Box ff="Open Sans|SemiBold" fontSize={4}>
{t('onboarding:genuineCheck.isGenuinePassed')}
</GenuineSuccessText>
</Box>
) : genuine.genuineCheckUnavailable ? (
<Box align="center" flow={1} color={colors.alertRed}>
<FakeLink
ff="Open Sans|Regular"
fontSize={4}
underline
onClick={this.handleOpenGenuineCheckModal}
>
{t('app:common.retry')}
</FakeLink>
<Box horizontal justify="center">
<Box justifyContent="center">
<IconCross size={12} />
</Box>
<Box ff="Open Sans|Regular" fontSize={2} ml={1}>
<TranslatedError error={genuine.genuineCheckUnavailable} />
</Box>
</Box>
</Box>
) : genuine.genuineCheckUnavailable ? (
<GenuineCheckUnavailableMessage
handleOpenGenuineCheckModal={this.handleOpenGenuineCheckModal}
onboarding={onboarding}
t={t}
/>
) : (
<Button
primary
@ -259,28 +246,13 @@ class GenuineCheck extends PureComponent<StepProps, State> {
)}
</Box>
)}
</CardWrapper>
</GenuineCheckCardWrapper>
</Box>
</StepContainerInner>
{genuine.genuineCheckUnavailable ? (
<OnboardingFooterWrapper>
<Button padded outlineGrey onClick={() => prevStep()}>
{t('app:common.back')}
</Button>
<Box horizontal ml="auto">
<Button padded disabled={false} onClick={() => nextStep()} mx={2}>
{t('app:common.skipThisStep')}
</Button>
<Button padded onClick={nextStep} disabled primary>
{t('app:common.continue')}
</Button>
</Box>
</OnboardingFooterWrapper>
<GenuineCheckUnavailableFooter nextStep={nextStep} prevStep={prevStep} t={t} />
) : (
<OnboardingFooter
horizontal
align="center"
flow={2}
t={t}
nextStep={nextStep}
prevStep={prevStep}
@ -305,79 +277,9 @@ export default connect(
mapDispatchToProps,
)(GenuineCheck)
// TODO extract to a separate file
export function GenuineCheckFail({
redoGenuineCheck,
contactSupport,
isLedgerNano,
t,
}: {
redoGenuineCheck: () => void,
contactSupport: () => void,
isLedgerNano: boolean | null,
t: T,
}) {
return (
<Box sticky pt={50}>
<Box grow alignItems="center" justifyContent="center">
{isLedgerNano ? (
<Fragment>
<Title>{t('onboarding:genuineCheck.errorPage.ledgerNano.title')}</Title>
<Description>{t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}</Description>
<Box mt={5} mr={7}>
<img alt="" src={i('nano-error-onb.svg')} />
</Box>
</Fragment>
) : (
<Fragment>
<Title>{t('onboarding:genuineCheck.errorPage.ledgerBlue.title')}</Title>
<Description pb={5}>
{t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')}
</Description>
<Box alignItems="center">
<img alt="" src={i('blue-error-onb.svg')} />
</Box>
</Fragment>
)}
</Box>
<OnboardingFooterWrapper>
<Button padded outlineGrey onClick={() => redoGenuineCheck()}>
{t('app:common.back')}
</Button>
<Button padded danger onClick={() => contactSupport()} ml="auto">
{t('onboarding:genuineCheck.buttons.contactSupport')}
</Button>
</OnboardingFooterWrapper>
</Box>
)
}
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);
}
`
Write Preview
Loading…
Cancel
Save