From 68809580263be5e6a8d66a65c9fa8b06065d0be5 Mon Sep 17 00:00:00 2001 From: meriadec Date: Wed, 27 Jun 2018 19:36:48 +0200 Subject: [PATCH] Delete unused DeviceConnect component --- src/components/DeviceConnect/index.js | 321 ------------------------ src/components/DeviceConnect/stories.js | 64 ----- 2 files changed, 385 deletions(-) delete mode 100644 src/components/DeviceConnect/index.js delete mode 100644 src/components/DeviceConnect/stories.js diff --git a/src/components/DeviceConnect/index.js b/src/components/DeviceConnect/index.js deleted file mode 100644 index 54a3994c..00000000 --- a/src/components/DeviceConnect/index.js +++ /dev/null @@ -1,321 +0,0 @@ -// @flow - -import React, { PureComponent } from 'react' -import styled from 'styled-components' -import { Trans, translate } from 'react-i18next' -import type { CryptoCurrency } from '@ledgerhq/live-common/lib/types' - -import type { T, Device } from 'types/common' - -import noop from 'lodash/noop' - -import Box from 'components/base/Box' -import Spinner from 'components/base/Spinner' -import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon' -import TranslatedError from 'components/TranslatedError' - -import IconCheck from 'icons/Check' -import IconExclamationCircle from 'icons/ExclamationCircle' -import IconInfoCircle from 'icons/InfoCircle' -import IconUsb from 'icons/Usb' -import IconHome from 'icons/Home' - -import * as IconDevice from 'icons/device' - -// TODO: CHECK IF COMPONENT CAN BE REMOVED - -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 ListDevices = styled(Box).attrs({ - p: 3, - pt: 1, - flow: 2, -})`` - -const DeviceItem = styled(Box).attrs({ - bg: 'lightGrey', - borderRadius: 1, - alignItems: 'center', - color: 'dark', - ff: 'Open Sans|SemiBold', - fontSize: 4, - horizontal: true, - pr: 3, - pl: 0, -})` - cursor: pointer; - height: 54px; -` -const DeviceIcon = styled(Box).attrs({ - alignItems: 'center', - justifyContent: 'center', - color: 'graphite', -})` - width: 55px; -` -const DeviceSelected = styled(Box).attrs({ - alignItems: 'center', - bg: p => (p.selected ? 'wallet' : 'white'), - color: 'white', - justifyContent: 'center', -})` - border-radius: 50%; - border: 1px solid ${p => (p.selected ? p.theme.colors.wallet : p.theme.colors.fog)}; - height: 18px; - width: 18px; -` - -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 Info = styled(Box).attrs({ - alignItems: 'center', - color: p => (p.hasErrors ? 'alertRed' : 'grey'), - flow: 2, - fontSize: 3, - horizontal: true, - ml: 1, -})` - strong { - font-weight: 600; - } -` - -const StepCheck = ({ checked, hasErrors }: { checked: boolean, hasErrors?: boolean }) => ( - - {checked ? ( - - - - ) : hasErrors ? ( - - - - ) : ( - - )} - -) - -StepCheck.defaultProps = { - hasErrors: false, -} - -type Props = { - appOpened: null | 'success' | 'fail', - genuineCheckStatus: null | 'success' | 'fail', - withGenuineCheck: boolean, - currency: CryptoCurrency, - devices: Device[], - deviceSelected: ?Device, - onChangeDevice: Device => void, - t: T, - error: ?Error, -} - -const emitChangeDevice = props => { - const { onChangeDevice, deviceSelected, devices } = props - - if (deviceSelected === null && devices.length > 0) { - onChangeDevice(devices[0]) - } -} - -class DeviceConnect extends PureComponent { - static defaultProps = { - accountName: null, - appOpened: null, - devices: [], - deviceSelected: null, - onChangeDevice: noop, - withGenuineCheck: false, - } - - componentDidMount() { - emitChangeDevice(this.props) - } - - componentWillReceiveProps(nextProps) { - emitChangeDevice(nextProps) - } - - getStepState = stepStatus => ({ - success: stepStatus === 'success', - fail: stepStatus === 'fail', - }) - - render() { - const { - deviceSelected, - genuineCheckStatus, - withGenuineCheck, - appOpened, - error, - currency, - t, - onChangeDevice, - devices, - } = this.props - - const appState = this.getStepState(appOpened) - const genuineCheckState = this.getStepState(genuineCheckStatus) - - const hasDevice = devices.length > 0 - const hasMultipleDevices = devices.length > 1 - // TODO: place custom wording in trans tags into yml file - /* eslint-disable react/jsx-no-literals */ - return ( - - - - - - - - - Connect and unlock your Ledger device - - - - - {hasMultipleDevices && ( - - - {t('app:deviceConnect.step1.choose', { count: devices.length })} - - - {devices.map(d => { - const Icon = IconDevice[d.product.replace(/\s/g, '')] - return ( - onChangeDevice(d)}> - - - - - {`${d.manufacturer} ${d.product}`} - - - - - - - - ) - })} - - - )} - - - - {currency ? ( - - - - - - - - - {'Open the '} - {currency.name} - {' app on your device'} - - - - - ) : ( - - - - - - - - - {'Navigate to the '} - {'dashboard'} - {' on your device'} - - - - - )} - - - {/* GENUINE CHECK */} - {/* ------------- */} - - {withGenuineCheck && ( - - - - - - - - - - {'Allow '} - {'Ledger Manager'} - {' on your device'} - - - - - - )} - - {error ? ( - - - - - - - ) : null} - - ) - } -} - -export default translate()(DeviceConnect) diff --git a/src/components/DeviceConnect/stories.js b/src/components/DeviceConnect/stories.js deleted file mode 100644 index f37eaf2e..00000000 --- a/src/components/DeviceConnect/stories.js +++ /dev/null @@ -1,64 +0,0 @@ -// @flow - -import React from 'react' -import { storiesOf } from '@storybook/react' -import { select } from '@storybook/addon-knobs' -import { action } from '@storybook/addon-actions' -import { getCryptoCurrencyById } from '@ledgerhq/live-common/lib/helpers/currencies' -import { listCryptoCurrencies } from 'config/cryptocurrencies' - -import type { Currency } from '@ledgerhq/live-common/lib/types' - -import DeviceConnect from 'components/DeviceConnect' - -const currencies = listCryptoCurrencies().map(c => c.id) -const stories = storiesOf('Components', module) - -const devices = [ - { - manufacturer: 'Ledger', - product: 'Nano S', - vendorId: '1', - productId: '11', - path: '111', - }, - { - manufacturer: 'Ledger', - product: 'Blue', - vendorId: '2', - productId: '22', - path: '222', - }, - { - manufacturer: 'Ledger', - product: 'Nano S', - vendorId: '3', - productId: '33', - path: '333', - }, -] - -stories.add('DeviceConnect', () => ( - - {({ currency }) => ( - - )} - -)) - -function Wrapper({ - currencyId, - children, -}: { - currencyId: string, - children: (props: { currency: Currency }) => any, -}) { - const currency = getCryptoCurrencyById(currencyId) - return children({ currency }) -}