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)