From a35f7fe351bb713c4dd20267b4854a54525688a7 Mon Sep 17 00:00:00 2001
From: "Valentin D. Pinkman" <valentin.d.pinkman@icloud.com>
Date: Tue, 30 Apr 2019 11:48:41 +0200
Subject: [PATCH] adds usb only to nano x in onboarding

---
 .../Onboarding/steps/SelectDevice.js          | 26 +++++++++++++++++--
 static/i18n/en/app.json                       |  4 ++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js
index 0a59339625..6579799f78 100644
--- a/src/components/Onboarding/steps/SelectDevice.js
+++ b/src/components/Onboarding/steps/SelectDevice.js
@@ -3,6 +3,7 @@
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
+import { Trans } from 'react-i18next'
 import { getDeviceModel } from '@ledgerhq/devices'
 import type { DeviceModelId } from '@ledgerhq/devices'
 
@@ -17,10 +18,10 @@ import TrackPage from 'analytics/TrackPage'
 
 import IconCheckCirle from 'icons/Check'
 
+import type { StepProps } from '..'
 import { Title, Inner, FixedTopContainer, StepContainerInner } from '../helperComponents'
 import OnboardingFooter from '../OnboardingFooter'
-
-import type { StepProps } from '..'
+import Tooltip from '../../base/Tooltip'
 
 const mapDispatchToProps = { deviceModelId }
 
@@ -57,6 +58,11 @@ class SelectDevice extends PureComponent<StepProps, {}> {
                   <img alt="" src={i('ledger-nano-x-onb.svg')} />
                 </DeviceIcon>
                 <BlockTitle>{getDeviceModel('nanoX').productName}</BlockTitle>
+                <Tooltip render={() => <Trans i18nKey="onboarding.selectDevice.usbOnlyTooltip" />}>
+                  <USBOnly>
+                    <Trans i18nKey="onboarding.selectDevice.usbOnly" />
+                  </USBOnly>
+                </Tooltip>
               </DeviceContainer>
               <DeviceContainer
                 isActive={onboarding.deviceModelId === 'nanoS'}
@@ -150,3 +156,19 @@ const SelectDeviceIconWrapper = styled(Box).attrs({
   width: 18px;
   height: 18px;
 `
+
+const USBOnly = styled(Box).attrs({
+  alignItems: 'center',
+  justifyContent: 'center',
+  ff: 'Open Sans|Bold',
+  fontSize: 0,
+  borderRadius: '2px',
+})`
+  position: absolute;
+  bottom: 20px;
+  background-color: ${p => p.theme.colors.lightFog};
+  line-height: 16px;
+  padding: 0 4px;
+  text-transform: uppercase;
+  transform: translateX(-50%);
+`
diff --git a/static/i18n/en/app.json b/static/i18n/en/app.json
index da2dd42cbe..6aa437dd21 100644
--- a/static/i18n/en/app.json
+++ b/static/i18n/en/app.json
@@ -639,7 +639,9 @@
       }
     },
     "selectDevice": {
-      "title": "Select your device"
+      "title": "Select your device",
+      "usbOnly": "usb only",
+      "usbOnlyTooltip": "Ledger Live desktop currently does not support Bluetooth"
     },
     "selectPIN": {
       "disclaimer": {