meriadec
7 years ago
5 changed files with 0 additions and 627 deletions
@ -1,81 +0,0 @@ |
|||||
// @flow
|
|
||||
import { PureComponent } from 'react' |
|
||||
import isEqual from 'lodash/isEqual' |
|
||||
|
|
||||
import type { Node } from 'react' |
|
||||
import type { Device } from 'types/common' |
|
||||
|
|
||||
import getDeviceInfo from 'commands/getDeviceInfo' |
|
||||
|
|
||||
import type { DeviceInfo } from 'helpers/devices/getDeviceInfo' |
|
||||
|
|
||||
type Error = { |
|
||||
message: string, |
|
||||
stack: string, |
|
||||
} |
|
||||
|
|
||||
type Props = { |
|
||||
device: ?Device, |
|
||||
children: (deviceInfo: ?DeviceInfo, error: ?Error) => Node, |
|
||||
} |
|
||||
|
|
||||
type State = { |
|
||||
deviceInfo: ?DeviceInfo, |
|
||||
error: ?Error, |
|
||||
} |
|
||||
|
|
||||
class EnsureDashboard extends PureComponent<Props, State> { |
|
||||
static defaultProps = { |
|
||||
children: null, |
|
||||
device: null, |
|
||||
} |
|
||||
|
|
||||
state = { |
|
||||
deviceInfo: null, |
|
||||
error: null, |
|
||||
} |
|
||||
|
|
||||
componentDidMount() { |
|
||||
this.checkForDashboard() |
|
||||
} |
|
||||
|
|
||||
componentDidUpdate({ device }: Props) { |
|
||||
if (this.props.device !== device && this.props.device) { |
|
||||
this.checkForDashboard() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
componentWillUnmount() { |
|
||||
this._unmounting = true |
|
||||
} |
|
||||
|
|
||||
_checking = false |
|
||||
_unmounting = false |
|
||||
|
|
||||
checkForDashboard = async () => { |
|
||||
const { device } = this.props |
|
||||
if (device && !this._checking) { |
|
||||
this._checking = true |
|
||||
try { |
|
||||
const deviceInfo = await getDeviceInfo.send({ devicePath: device.path }).toPromise() |
|
||||
if (!isEqual(this.state.deviceInfo, deviceInfo) || this.state.error) { |
|
||||
!this._unmounting && this.setState({ deviceInfo, error: null }) |
|
||||
} |
|
||||
} catch (err) { |
|
||||
if (!isEqual(err, this.state.error)) { |
|
||||
!this._unmounting && this.setState({ error: err, deviceInfo: null }) |
|
||||
} |
|
||||
} |
|
||||
this._checking = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
render() { |
|
||||
const { deviceInfo, error } = this.state |
|
||||
const { children } = this.props |
|
||||
|
|
||||
return children(deviceInfo, error) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default EnsureDashboard |
|
||||
@ -1,88 +0,0 @@ |
|||||
// @flow
|
|
||||
import { timeout } from 'rxjs/operators/timeout' |
|
||||
import { PureComponent } from 'react' |
|
||||
import isEqual from 'lodash/isEqual' |
|
||||
|
|
||||
import { GENUINE_TIMEOUT } from 'config/constants' |
|
||||
import type { Device } from 'types/common' |
|
||||
import type { DeviceInfo } from 'helpers/devices/getDeviceInfo' |
|
||||
|
|
||||
import getIsGenuine from 'commands/getIsGenuine' |
|
||||
|
|
||||
type Error = { |
|
||||
message: string, |
|
||||
stack: string, |
|
||||
} |
|
||||
|
|
||||
type Props = { |
|
||||
device: ?Device, |
|
||||
deviceInfo: ?DeviceInfo, |
|
||||
children: (isGenuine: ?boolean, error: ?Error) => *, |
|
||||
} |
|
||||
|
|
||||
type State = { |
|
||||
genuine: ?boolean, |
|
||||
error: ?Error, |
|
||||
} |
|
||||
|
|
||||
class EnsureGenuine extends PureComponent<Props, State> { |
|
||||
static defaultProps = { |
|
||||
children: () => null, |
|
||||
firmwareInfo: null, |
|
||||
} |
|
||||
|
|
||||
state = { |
|
||||
error: null, |
|
||||
genuine: null, |
|
||||
} |
|
||||
|
|
||||
componentDidMount() { |
|
||||
this.checkIsGenuine() |
|
||||
} |
|
||||
|
|
||||
componentDidUpdate() { |
|
||||
this.checkIsGenuine() |
|
||||
} |
|
||||
|
|
||||
componentWillUnmount() { |
|
||||
this._unmounting = true |
|
||||
} |
|
||||
|
|
||||
_checking = false |
|
||||
_unmounting = false |
|
||||
|
|
||||
async checkIsGenuine() { |
|
||||
const { device, deviceInfo } = this.props |
|
||||
if (device && deviceInfo && !this._checking) { |
|
||||
this._checking = true |
|
||||
try { |
|
||||
const res = await getIsGenuine |
|
||||
.send({ |
|
||||
devicePath: device.path, |
|
||||
deviceInfo, |
|
||||
}) |
|
||||
.pipe(timeout(GENUINE_TIMEOUT)) |
|
||||
.toPromise() |
|
||||
if (this._unmounting) return |
|
||||
const isGenuine = res === '0000' |
|
||||
if (!this.state.genuine || this.state.error) { |
|
||||
this.setState({ genuine: isGenuine, error: null }) |
|
||||
} |
|
||||
} catch (err) { |
|
||||
if (!isEqual(this.state.error, err)) { |
|
||||
this.setState({ genuine: null, error: err }) |
|
||||
} |
|
||||
} |
|
||||
this._checking = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
render() { |
|
||||
const { error, genuine } = this.state |
|
||||
const { children } = this.props |
|
||||
|
|
||||
return children(genuine, error) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default EnsureGenuine |
|
||||
@ -1,171 +0,0 @@ |
|||||
// @flow
|
|
||||
/* eslint-disable react/jsx-no-literals */ |
|
||||
|
|
||||
import React from 'react' |
|
||||
import { Trans, translate } from 'react-i18next' |
|
||||
import styled from 'styled-components' |
|
||||
import isNull from 'lodash/isNull' |
|
||||
import type { Device } from 'types/common' |
|
||||
|
|
||||
import Box from 'components/base/Box' |
|
||||
import Spinner from 'components/base/Spinner' |
|
||||
|
|
||||
import IconCheck from 'icons/Check' |
|
||||
import IconExclamationCircle from 'icons/ExclamationCircle' |
|
||||
import IconUsb from 'icons/Usb' |
|
||||
import IconHome from 'icons/Home' |
|
||||
|
|
||||
const Step = styled(Box).attrs({ |
|
||||
borderRadius: 1, |
|
||||
justifyContent: 'center', |
|
||||
fontSize: 4, |
|
||||
})` |
|
||||
border: 1px solid |
|
||||
${p => |
|
||||
p.validated |
|
||||
? p.theme.colors.wallet |
|
||||
: p.hasErrors |
|
||||
? p.theme.colors.alertRed |
|
||||
: p.theme.colors.fog}; |
|
||||
` |
|
||||
|
|
||||
const StepIcon = styled(Box).attrs({ |
|
||||
alignItems: 'center', |
|
||||
justifyContent: 'center', |
|
||||
})` |
|
||||
width: 64px; |
|
||||
` |
|
||||
|
|
||||
const StepContent = styled(Box).attrs({ |
|
||||
color: 'dark', |
|
||||
horizontal: true, |
|
||||
alignItems: 'center', |
|
||||
})` |
|
||||
height: 60px; |
|
||||
line-height: 1.2; |
|
||||
|
|
||||
strong { |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
` |
|
||||
|
|
||||
const WrapperIconCurrency = styled(Box).attrs({ |
|
||||
alignItems: 'center', |
|
||||
justifyContent: 'center', |
|
||||
})` |
|
||||
border: 1px solid ${p => p.theme.colors[p.color]}; |
|
||||
border-radius: 8px; |
|
||||
height: 24px; |
|
||||
width: 24px; |
|
||||
` |
|
||||
|
|
||||
const StepCheck = ({ checked, hasErrors }: { checked: boolean, hasErrors?: boolean }) => ( |
|
||||
<Box pr={5}> |
|
||||
{checked ? ( |
|
||||
<Box color="wallet"> |
|
||||
<IconCheck size={16} /> |
|
||||
</Box> |
|
||||
) : hasErrors ? ( |
|
||||
<Box color="alertRed"> |
|
||||
<IconExclamationCircle size={16} /> |
|
||||
</Box> |
|
||||
) : ( |
|
||||
<Spinner size={16} /> |
|
||||
)} |
|
||||
</Box> |
|
||||
) |
|
||||
|
|
||||
StepCheck.defaultProps = { |
|
||||
hasErrors: false, |
|
||||
} |
|
||||
|
|
||||
type DeviceInfo = { |
|
||||
targetId: number | string, |
|
||||
version: string, |
|
||||
final: boolean, |
|
||||
mcu: boolean, |
|
||||
} |
|
||||
|
|
||||
type Error = { |
|
||||
message: string, |
|
||||
stack: string, |
|
||||
} |
|
||||
|
|
||||
type Props = { |
|
||||
// t: T,
|
|
||||
device: ?Device, |
|
||||
deviceInfo: ?DeviceInfo, |
|
||||
errors: { |
|
||||
dashboardError: ?Error, |
|
||||
genuineError: ?Error, |
|
||||
}, |
|
||||
isGenuine: boolean, |
|
||||
} |
|
||||
|
|
||||
const WorkflowDefault = ({ device, deviceInfo, errors, isGenuine }: Props) => ( |
|
||||
<Box flow={4} ff="Open Sans"> |
|
||||
<Step validated={!!device}> |
|
||||
<StepContent> |
|
||||
<StepIcon> |
|
||||
<IconUsb size={36} /> |
|
||||
</StepIcon> |
|
||||
<Box grow shrink> |
|
||||
<Trans i18nKey="app:deviceConnect.step1.connect" parent="div"> |
|
||||
Connect and unlock your <strong>Ledger device</strong> <strong /> |
|
||||
</Trans> |
|
||||
</Box> |
|
||||
<StepCheck checked={!!device} /> |
|
||||
</StepContent> |
|
||||
</Step> |
|
||||
|
|
||||
<Step validated={!!device && !!deviceInfo} hasErrors={!!device && !!errors.dashboardError}> |
|
||||
<StepContent> |
|
||||
<StepIcon> |
|
||||
<WrapperIconCurrency> |
|
||||
<IconHome size={12} /> |
|
||||
</WrapperIconCurrency> |
|
||||
</StepIcon> |
|
||||
<Box grow shrink> |
|
||||
<Trans i18nKey="deviceConnect:dashboard.open" parent="div"> |
|
||||
{'Navigate to the '} |
|
||||
<strong>{'dashboard'}</strong> |
|
||||
{' on your device'} |
|
||||
</Trans> |
|
||||
</Box> |
|
||||
<StepCheck |
|
||||
checked={!!device && !!deviceInfo} |
|
||||
hasErrors={!!device && !!errors.dashboardError} |
|
||||
/> |
|
||||
</StepContent> |
|
||||
</Step> |
|
||||
|
|
||||
{/* GENUINE CHECK */} |
|
||||
{/* ------------- */} |
|
||||
|
|
||||
<Step |
|
||||
validated={(!!device && !isNull(isGenuine) && isGenuine && !errors.genuineError) || undefined} |
|
||||
hasErrors={(!!device && !isNull(isGenuine) && !isGenuine) || errors.genuineError || undefined} |
|
||||
> |
|
||||
<StepContent> |
|
||||
<StepIcon> |
|
||||
<WrapperIconCurrency> |
|
||||
<IconCheck size={12} /> |
|
||||
</WrapperIconCurrency> |
|
||||
</StepIcon> |
|
||||
<Box grow shrink> |
|
||||
<Trans i18nKey="deviceConnect:stepGenuine.open" parent="div"> |
|
||||
{'Allow the '} |
|
||||
<strong>{'Ledger Manager'}</strong> |
|
||||
{' on your device'} |
|
||||
</Trans> |
|
||||
</Box> |
|
||||
<StepCheck |
|
||||
checked={!!device && !isNull(isGenuine) && isGenuine} |
|
||||
hasErrors={(!!device && !isNull(isGenuine) && !isGenuine) || undefined} |
|
||||
/> |
|
||||
</StepContent> |
|
||||
</Step> |
|
||||
</Box> |
|
||||
) |
|
||||
|
|
||||
export default translate()(WorkflowDefault) |
|
||||
@ -1,194 +0,0 @@ |
|||||
// @flow
|
|
||||
/* eslint-disable react/jsx-no-literals */ // FIXME
|
|
||||
|
|
||||
import React from 'react' |
|
||||
import { Trans, translate } from 'react-i18next' |
|
||||
import styled from 'styled-components' |
|
||||
import isNull from 'lodash/isNull' |
|
||||
import type { Device, T } from 'types/common' |
|
||||
|
|
||||
import { i } from 'helpers/staticPath' |
|
||||
|
|
||||
import Box from 'components/base/Box' |
|
||||
import Text from 'components/base/Text' |
|
||||
import Spinner from 'components/base/Spinner' |
|
||||
|
|
||||
import IconCheck from 'icons/Check' |
|
||||
import IconExclamationCircle from 'icons/ExclamationCircle' |
|
||||
import IconUsb from 'icons/Usb' |
|
||||
import IconHome from 'icons/Home' |
|
||||
|
|
||||
const WrapperIconCurrency = styled(Box).attrs({ |
|
||||
alignItems: 'center', |
|
||||
justifyContent: 'center', |
|
||||
})` |
|
||||
border: 1px solid ${p => p.theme.colors[p.color]}; |
|
||||
border-radius: 8px; |
|
||||
height: 24px; |
|
||||
width: 24px; |
|
||||
` |
|
||||
|
|
||||
const Step = styled(Box).attrs({ |
|
||||
borderRadius: 1, |
|
||||
justifyContent: 'center', |
|
||||
fontSize: 4, |
|
||||
})` |
|
||||
border: 1px solid |
|
||||
${p => |
|
||||
p.validated |
|
||||
? p.theme.colors.wallet |
|
||||
: p.hasErrors |
|
||||
? p.theme.colors.alertRed |
|
||||
: p.theme.colors.fog}; |
|
||||
` |
|
||||
|
|
||||
const StepIcon = styled(Box).attrs({ |
|
||||
alignItems: 'center', |
|
||||
justifyContent: 'center', |
|
||||
})` |
|
||||
width: 64px; |
|
||||
` |
|
||||
|
|
||||
const StepContent = styled(Box).attrs({ |
|
||||
color: 'dark', |
|
||||
horizontal: true, |
|
||||
alignItems: 'center', |
|
||||
})` |
|
||||
height: 60px; |
|
||||
line-height: 1.2; |
|
||||
|
|
||||
strong { |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
` |
|
||||
|
|
||||
const StepCheck = ({ checked, hasErrors }: { checked: ?boolean, hasErrors?: boolean }) => ( |
|
||||
<Box pr={5}> |
|
||||
{checked ? ( |
|
||||
<Box color="wallet"> |
|
||||
<IconCheck size={16} /> |
|
||||
</Box> |
|
||||
) : hasErrors ? ( |
|
||||
<Box color="alertRed"> |
|
||||
<IconExclamationCircle size={16} /> |
|
||||
</Box> |
|
||||
) : ( |
|
||||
<Spinner size={16} /> |
|
||||
)} |
|
||||
</Box> |
|
||||
) |
|
||||
|
|
||||
StepCheck.defaultProps = { |
|
||||
hasErrors: false, |
|
||||
} |
|
||||
|
|
||||
type DeviceInfo = { |
|
||||
targetId: number | string, |
|
||||
version: string, |
|
||||
final: boolean, |
|
||||
mcu: boolean, |
|
||||
} |
|
||||
|
|
||||
type Error = { |
|
||||
message: string, |
|
||||
stack: string, |
|
||||
} |
|
||||
|
|
||||
type Props = { |
|
||||
t: T, |
|
||||
device: ?Device, |
|
||||
deviceInfo: ?DeviceInfo, |
|
||||
errors: { |
|
||||
dashboardError: ?Error, |
|
||||
genuineError: ?Error, |
|
||||
}, |
|
||||
isGenuine: boolean, |
|
||||
} |
|
||||
|
|
||||
const WorkflowWithIcon = ({ device, deviceInfo, errors, isGenuine, t }: Props) => ( |
|
||||
<Box align="center" justify="center" sticky> |
|
||||
<Box align="center" style={{ maxWidth: 460, padding: '0 10px' }}> |
|
||||
<img |
|
||||
src={i('logos/connectDevice.png')} |
|
||||
alt="connect your device" |
|
||||
style={{ marginBottom: 30, maxWidth: 362, width: '100%' }} |
|
||||
/> |
|
||||
<Text ff="Museo Sans|Regular" fontSize={7} color="black" style={{ marginBottom: 10 }}> |
|
||||
{t('app:manager.device.title')} |
|
||||
</Text> |
|
||||
<Text ff="Museo Sans|Light" fontSize={5} color="grey" align="center"> |
|
||||
{t('app:manager.device.desc')} |
|
||||
</Text> |
|
||||
</Box> |
|
||||
<Box flow={4} style={{ maxWidth: 460, padding: '60px 10px 0' }} ff="Open Sans|Regular"> |
|
||||
{/* DEVICE CHECK */} |
|
||||
<Step validated={!!device}> |
|
||||
<StepContent> |
|
||||
<StepIcon> |
|
||||
<IconUsb size={36} /> |
|
||||
</StepIcon> |
|
||||
<Box grow shrink> |
|
||||
<Trans i18nKey="deviceConnect:step1.connect" parent="div"> |
|
||||
{'Connect and unlock your '} |
|
||||
<strong>Ledger device</strong> |
|
||||
</Trans> |
|
||||
</Box> |
|
||||
<StepCheck checked={!!device} /> |
|
||||
</StepContent> |
|
||||
</Step> |
|
||||
|
|
||||
{/* DASHBOARD CHECK */} |
|
||||
<Step validated={!!device && !!deviceInfo} hasErrors={!!device && !!errors.dashboardError}> |
|
||||
<StepContent> |
|
||||
<StepIcon> |
|
||||
<WrapperIconCurrency> |
|
||||
<IconHome size={12} /> |
|
||||
</WrapperIconCurrency> |
|
||||
</StepIcon> |
|
||||
<Box grow shrink> |
|
||||
<Trans i18nKey="deviceConnect:dashboard.open" parent="div"> |
|
||||
{'Navigate to the '} |
|
||||
<strong>{'dashboard'}</strong> |
|
||||
{' on your device'} |
|
||||
</Trans> |
|
||||
</Box> |
|
||||
<StepCheck |
|
||||
checked={!!device && !!deviceInfo} |
|
||||
hasErrors={!!device && !!errors.dashboardError} |
|
||||
/> |
|
||||
</StepContent> |
|
||||
</Step> |
|
||||
|
|
||||
{/* GENUINE CHECK */} |
|
||||
<Step |
|
||||
validated={ |
|
||||
(!!device && !isNull(isGenuine) && isGenuine && !errors.genuineError) || undefined |
|
||||
} |
|
||||
hasErrors={ |
|
||||
(!!device && !isNull(isGenuine) && !isGenuine) || errors.genuineError || undefined |
|
||||
} |
|
||||
> |
|
||||
<StepContent> |
|
||||
<StepIcon> |
|
||||
<WrapperIconCurrency> |
|
||||
<IconCheck size={12} /> |
|
||||
</WrapperIconCurrency> |
|
||||
</StepIcon> |
|
||||
<Box grow shrink> |
|
||||
<Trans i18nKey="deviceConnect:stepGenuine.open" parent="div"> |
|
||||
{'Allow the '} |
|
||||
<strong>{'Ledger Manager'}</strong> |
|
||||
{' on your device'} |
|
||||
</Trans> |
|
||||
</Box> |
|
||||
<StepCheck |
|
||||
checked={(!!device && !isNull(isGenuine) && isGenuine) || undefined} |
|
||||
hasErrors={(!!device && !isNull(isGenuine) && !isGenuine) || undefined} |
|
||||
/> |
|
||||
</StepContent> |
|
||||
</Step> |
|
||||
</Box> |
|
||||
</Box> |
|
||||
) |
|
||||
|
|
||||
export default translate()(WorkflowWithIcon) |
|
||||
@ -1,93 +0,0 @@ |
|||||
// @flow
|
|
||||
|
|
||||
import React, { PureComponent } from 'react' |
|
||||
import type { DeviceInfo } from 'helpers/devices/getDeviceInfo' |
|
||||
|
|
||||
import type { Node } from 'react' |
|
||||
import type { Device } from 'types/common' |
|
||||
|
|
||||
import EnsureDevice from 'components/EnsureDevice' |
|
||||
import EnsureDashboard from './EnsureDashboard' |
|
||||
import EnsureGenuine from './EnsureGenuine' |
|
||||
|
|
||||
type Error = { |
|
||||
message: string, |
|
||||
stack: string, |
|
||||
} |
|
||||
|
|
||||
type Props = { |
|
||||
renderDefault: ( |
|
||||
device: ?Device, |
|
||||
deviceInfo: ?DeviceInfo, |
|
||||
isGenuine: ?boolean, |
|
||||
error: { |
|
||||
dashboardError: ?Error, |
|
||||
genuineError: ?Error, |
|
||||
}, |
|
||||
) => Node, |
|
||||
renderMcuUpdate?: (device: Device, deviceInfo: DeviceInfo) => Node, |
|
||||
renderFinalUpdate?: (device: Device, deviceInfo: DeviceInfo) => Node, |
|
||||
renderDashboard?: (device: Device, deviceInfo: DeviceInfo, isGenuine: boolean) => Node, |
|
||||
onGenuineCheck?: (isGenuine: boolean) => void, |
|
||||
renderError?: (dashboardError: ?Error, genuineError: ?Error) => Node, |
|
||||
} |
|
||||
type State = {} |
|
||||
|
|
||||
// In future, move to meri's approach; this code is way too much specific
|
|
||||
class Workflow extends PureComponent<Props, State> { |
|
||||
render() { |
|
||||
const { |
|
||||
renderDashboard, |
|
||||
renderFinalUpdate, |
|
||||
renderMcuUpdate, |
|
||||
renderError, |
|
||||
renderDefault, |
|
||||
onGenuineCheck, |
|
||||
} = this.props |
|
||||
return ( |
|
||||
<EnsureDevice> |
|
||||
{(device: Device) => ( |
|
||||
<EnsureDashboard device={device}> |
|
||||
{(deviceInfo: ?DeviceInfo, dashboardError: ?Error) => { |
|
||||
if (deviceInfo && deviceInfo.isBootloader && renderMcuUpdate) { |
|
||||
return renderMcuUpdate(device, deviceInfo) |
|
||||
} |
|
||||
|
|
||||
if (deviceInfo && deviceInfo.isOSU && renderFinalUpdate) { |
|
||||
return renderFinalUpdate(device, deviceInfo) |
|
||||
} |
|
||||
|
|
||||
return ( |
|
||||
<EnsureGenuine device={device} deviceInfo={deviceInfo}> |
|
||||
{(isGenuine: ?boolean, genuineError: ?Error) => { |
|
||||
if (dashboardError || genuineError) { |
|
||||
return renderError |
|
||||
? renderError(dashboardError, genuineError) |
|
||||
: renderDefault(device, deviceInfo, isGenuine, { |
|
||||
genuineError, |
|
||||
dashboardError, |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
if (isGenuine && deviceInfo && device && !dashboardError && !genuineError) { |
|
||||
if (onGenuineCheck) onGenuineCheck(isGenuine) |
|
||||
|
|
||||
if (renderDashboard) return renderDashboard(device, deviceInfo, isGenuine) |
|
||||
} |
|
||||
|
|
||||
return renderDefault(device, deviceInfo, isGenuine, { |
|
||||
genuineError, |
|
||||
dashboardError, |
|
||||
}) |
|
||||
}} |
|
||||
</EnsureGenuine> |
|
||||
) |
|
||||
}} |
|
||||
</EnsureDashboard> |
|
||||
)} |
|
||||
</EnsureDevice> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default Workflow |
|
||||
Loading…
Reference in new issue