From 2adbed70e1fd03511c509b08241a05686f9a0c2a Mon Sep 17 00:00:00 2001 From: meriadec Date: Wed, 27 Jun 2018 13:51:23 +0200 Subject: [PATCH] Remove Workflow --- src/components/Workflow/EnsureDashboard.js | 81 -------- src/components/Workflow/EnsureGenuine.js | 88 --------- src/components/Workflow/WorkflowDefault.js | 171 ----------------- src/components/Workflow/WorkflowWithIcon.js | 194 -------------------- src/components/Workflow/index.js | 93 ---------- 5 files changed, 627 deletions(-) delete mode 100644 src/components/Workflow/EnsureDashboard.js delete mode 100644 src/components/Workflow/EnsureGenuine.js delete mode 100644 src/components/Workflow/WorkflowDefault.js delete mode 100644 src/components/Workflow/WorkflowWithIcon.js delete mode 100644 src/components/Workflow/index.js diff --git a/src/components/Workflow/EnsureDashboard.js b/src/components/Workflow/EnsureDashboard.js deleted file mode 100644 index bc762558..00000000 --- a/src/components/Workflow/EnsureDashboard.js +++ /dev/null @@ -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 { - 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 diff --git a/src/components/Workflow/EnsureGenuine.js b/src/components/Workflow/EnsureGenuine.js deleted file mode 100644 index 3be90a83..00000000 --- a/src/components/Workflow/EnsureGenuine.js +++ /dev/null @@ -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 { - 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 diff --git a/src/components/Workflow/WorkflowDefault.js b/src/components/Workflow/WorkflowDefault.js deleted file mode 100644 index 664fedd8..00000000 --- a/src/components/Workflow/WorkflowDefault.js +++ /dev/null @@ -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 }) => ( - - {checked ? ( - - - - ) : hasErrors ? ( - - - - ) : ( - - )} - -) - -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) => ( - - - - - - - - - Connect and unlock your Ledger device - - - - - - - - - - - - - - - - {'Navigate to the '} - {'dashboard'} - {' on your device'} - - - - - - - {/* GENUINE CHECK */} - {/* ------------- */} - - - - - - - - - - - {'Allow the '} - {'Ledger Manager'} - {' on your device'} - - - - - - -) - -export default translate()(WorkflowDefault) diff --git a/src/components/Workflow/WorkflowWithIcon.js b/src/components/Workflow/WorkflowWithIcon.js deleted file mode 100644 index 6e0fdd9a..00000000 --- a/src/components/Workflow/WorkflowWithIcon.js +++ /dev/null @@ -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 }) => ( - - {checked ? ( - - - - ) : hasErrors ? ( - - - - ) : ( - - )} - -) - -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) => ( - - - connect your device - - {t('app:manager.device.title')} - - - {t('app:manager.device.desc')} - - - - {/* DEVICE CHECK */} - - - - - - - - {'Connect and unlock your '} - Ledger device - - - - - - - {/* DASHBOARD CHECK */} - - - - - - - - - - {'Navigate to the '} - {'dashboard'} - {' on your device'} - - - - - - - {/* GENUINE CHECK */} - - - - - - - - - - {'Allow the '} - {'Ledger Manager'} - {' on your device'} - - - - - - - -) - -export default translate()(WorkflowWithIcon) diff --git a/src/components/Workflow/index.js b/src/components/Workflow/index.js deleted file mode 100644 index a5cd2101..00000000 --- a/src/components/Workflow/index.js +++ /dev/null @@ -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 { - render() { - const { - renderDashboard, - renderFinalUpdate, - renderMcuUpdate, - renderError, - renderDefault, - onGenuineCheck, - } = this.props - return ( - - {(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 ( - - {(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, - }) - }} - - ) - }} - - )} - - ) - } -} - -export default Workflow