diff --git a/src/components/DeviceConnect/index.js b/src/components/DeviceConnect/index.js deleted file mode 100644 index ec809ebf..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 the '} - {'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 }) -} diff --git a/src/components/GenuineCheck.js b/src/components/GenuineCheck.js index d673f5d7..b96fee29 100644 --- a/src/components/GenuineCheck.js +++ b/src/components/GenuineCheck.js @@ -130,7 +130,7 @@ class GenuineCheck extends PureComponent { id: 'isGenuine', title: ( - {'Allow the '} + {'Allow '} {'Ledger Manager'} {' on your device'} diff --git a/static/i18n/en/app.yml b/static/i18n/en/app.yml index e90be497..4ca5e314 100644 --- a/static/i18n/en/app.yml +++ b/static/i18n/en/app.yml @@ -206,12 +206,12 @@ manager: subtitle: Select apps to use on your device device: title: Connect your device - desc: Follow the steps below to use the Manager + desc: 'Follow the steps below to use the device Manager' cta: Connect my device errors: noDevice: No device is connected (TEMPLATE NEEDED) noDashboard: Navigate to the dashboard on your device (TEMPLATED NEEDED) - noGenuine: Allow the Manager to continue (TEMPLATE NEEDED) + noGenuine: Allow Manager to continue (TEMPLATE NEEDED) receive: title: Receive steps: @@ -282,7 +282,7 @@ settings: # Always ensure descriptions carry full stops (.) profile: Profile about: Help display: - desc: Control Ledger Live's appearance. + desc: Unneeded description # Remove this, it controls multiple settings tabs and is not required. language: Display language languageDesc: Set the language displayed in Ledger Live. counterValue: Base currency diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml index 8e060bc7..fb65da90 100644 --- a/static/i18n/en/onboarding.yml +++ b/static/i18n/en/onboarding.yml @@ -1,10 +1,10 @@ breadcrumb: - selectDevice: Select device + selectDevice: Device selection selectPIN: PIN code writeSeed: Recovery phrase genuineCheck: Security checklist - setPassword: Encrypt data - analytics: Analytics + setPassword: Password lock + analytics: Bugs & analytics start: title: Welcome to Ledger Live startBtn: Get started @@ -37,7 +37,7 @@ selectPIN: disclaimer: note1: 'Choose your own PIN code: this code will unlock your device.' # dotted line should be in red. Increase size of the hand (+50%?) note2: An 8-digit PIN code offers an optimum level of security. - note3: Never use a device supplied with a PIN code or a 24-word recovery phrase. + note3: Never use a device supplied with a PIN code or a 24-word recovery phrase. initialize: title: Choose your PIN code instructions: @@ -105,17 +105,23 @@ genuineCheck: isGenuinePassed: Your device is genuine buttons: genuineCheck: Check now - contactSupport: Ledger Support + contactSupport: Contact us errorPage: ledgerNano: - title: Oops, something went wrong... - desc: Go back to the security checklist or request Ledger Support assistance + title: Oops, your device does not seem genuine... + #PIN: Didn't choose your own PIN code? + #recoveryPhrase: Didn't save your own recovery phrase? + #Genuine: Oops, your device does not seem genuine... + desc: Your device did not pass the authenticity test required to connect to Ledger’s secure server. Please contact Ledger Support to get assistance. + #PIN: Never use a device supplied with a PIN code. If your device was provided with a PIN code, please contact us. + #recoveryPhrase: Only save a recovery phrase that is displayed on your device. Please contact us in case of doubt. Otherwise, go back to the security checklist. + #Genuine: Your device did not pass the authenticity test required to connect to Ledger’s secure server. Please contact Ledger Support to get assistance. ledgerBlue: title: Oops, something went wrong... desc: Go back to the security checklist or request Ledger Support assistance setPassword: - title: Encrypt Ledger Live data - desc: Set a password to encrypt Ledger Live data stored on your computer, including account names, balances, transactions and public addresses. + title: Password lock (optional) + desc: Set a password to prevent unauthorized access to Ledger Live data stored on your computer, including account names, balances, transactions and public addresses. disclaimer: note1: Make sure to remember your password. Do not share it. note2: Losing your password requires resetting Ledger Live and re-adding accounts. @@ -134,5 +140,5 @@ analytics: desc: Automatically send reports to help Ledger fix bugs finish: title: Your device is ready! - desc: Proceed to your porfolio and start adding your accounts... + desc: Proceed to your portfolio and start adding your accounts... openAppButton: Open Ledger Live