Merge pull request #1816 from valpinkman/feat/manager-nano-x

LL-1017 nano X on manager

src/components/DashboardPage/index.js

@@ -3,7 +3,7 @@
 import React, { PureComponent, Fragment } from 'react'
 import uniq from 'lodash/uniq'
 import { compose } from 'redux'
-import IconNanoX from 'icons/device/NanoX'
+import IconNanoX from 'icons/device/NanoXBanner'
 import { translate } from 'react-i18next'
 import { connect } from 'react-redux'
 import { push } from 'react-router-redux'

src/components/EnsureDeviceApp.js

@@ -98,8 +98,11 @@ class EnsureDeviceApp extends Component<{
             id: 'device',
             title: (
               <Trans i18nKey="deviceConnect.step1" parent="div">
-                {'Connect and unlock your '}
+                {'Connect your'}
                 <Bold>{'Ledger device'}</Bold>
+                {'to your computer and enter your'}
+                <Bold>{'PIN code'}</Bold>
+                {'  on your device'}
               </Trans>
             ),
             icon: usbIcon,

src/components/GenuineCheck.js

@@ -146,7 +146,7 @@ class GenuineCheck extends PureComponent<Props> {
         id: 'device',
         title: (
           <Trans i18nKey="deviceConnect.step1" parent="div">
-            {'Connect and unlock your '}
+            {'Connect and unlock your'}
             <Bold>{'Ledger device'}</Bold>
           </Trans>
         ),
@@ -157,9 +157,9 @@ class GenuineCheck extends PureComponent<Props> {
         id: 'deviceInfo',
         title: (
           <Trans i18nKey="deviceConnect.dashboard" parent="div">
-            {'Navigate to the '}
+            {'Navigate to the'}
-            <Bold>{'dashboard'}</Bold>
+            <Bold>{'Dashboard'}</Bold>
-            {' on your device'}
+            {'on your device'}
           </Trans>
         ),
         icon: homeIcon,
@@ -169,9 +169,9 @@ class GenuineCheck extends PureComponent<Props> {
         id: 'isGenuine',
         title: (
           <Trans i18nKey="deviceConnect.step3" parent="div">
-            {'Allow '}
+            {'Allow'}
             <Bold>{'Ledger Manager'}</Bold>
-            {' on your device'}
+            {'on your device'}
           </Trans>
         ),
         icon: genuineCheckIcon,

src/components/ManagerPage/FirmwareUpdate.js

@@ -18,6 +18,7 @@ import Box, { Card } from 'components/base/Box'
 import Text from 'components/base/Text'
 
 import NanoS from 'icons/device/NanoS'
+import NanoX from 'icons/device/NanoX'
 import Blue from 'icons/device/Blue'
 import CheckFull from 'icons/CheckFull'
 
@@ -26,6 +27,17 @@ import UpdateFirmwareButton from './UpdateFirmwareButton'
 export const getCleanVersion = (input: string): string =>
   input.endsWith('-osu') ? input.replace('-osu', '') : input
 
+const Icon = ({ type }: { type: string }) => {
+  switch (type) {
+    case 'blue':
+      return <Blue size={30} />
+    case 'nanoX':
+      return <NanoX size={30} />
+    default:
+      return <NanoS size={30} />
+  }
+}
+
 export type ModalStatus = 'closed' | 'disclaimer' | 'install' | 'error' | 'success'
 
 type Props = {
@@ -88,7 +100,7 @@ class FirmwareUpdate extends PureComponent<Props, State> {
       <Card p={4}>
         <Box horizontal align="center" flow={2}>
           <Box color="dark">
-            {deviceSpecs.id === 'blue' ? <Blue size={30} /> : <NanoS size={30} />}
+            <Icon type={deviceSpecs.id} />
           </Box>
           <Box>
             <Box horizontal align="center">

src/components/ManagerPage/ManagerGenuineCheck.js

@@ -28,7 +28,7 @@ class ManagerGenuineCheck extends PureComponent<Props> {
           <img
             src={i('logos/connectDevice.png')}
             alt="connect your device"
-            style={{ marginBottom: 30, maxWidth: 362, width: '100%' }}
+            style={{ marginBottom: 30, maxWidth: 25, width: '100%' }}
           />
           <Text ff="Museo Sans|Regular" fontSize={7} color="dark" style={{ marginBottom: 10 }}>
             {t('manager.device.title')}

src/icons/device/NanoX.js

@@ -2,29 +2,15 @@
 
 import React from 'react'
 
-export default ({ size = 30, ...p }: { size: number }) => (
+const path = (
-  <svg viewBox="0 0 6 16" height={size} width={size} {...p}>
+  <path
-    <defs>
+    fill="currentColor"
-      <path
+    d="M6.667 14.543A4.181 4.181 0 0 0 5 13.223V1.667H1.667v11.556A4.181 4.181 0 0 0 0 14.543V1.2A1.2 1.2 0 0 1 1.2 0h4.267a1.2 1.2 0 0 1 1.2 1.2v13.343zm-3.334 4.403a.833.833 0 1 1 0-1.666.833.833 0 0 1 0 1.666zm0-14a.833.833 0 1 1 0-1.666.833.833 0 0 1 0 1.666zm-1.666 21.72H5v-9.623a1.667 1.667 0 1 0-3.333 0v9.624zM3.333 13.71a3.333 3.333 0 0 1 3.334 3.333v10.302a.988.988 0 0 1-.989.988H.988A.988.988 0 0 1 0 27.345V17.043a3.333 3.333 0 0 1 3.333-3.333z"
-        id="a"
+  />
-        d="M5.75 6.835a3.509 3.509 0 0 0-1.5-1.105V1.75h-2.5v3.98a3.509 3.509 0 0 0-1.5 1.105V1.666C.25.884.884.25 1.666.25h2.668c.782 0 1.416.634 1.416 1.416v5.169zm-1.5 7.415V9.5a1.25 1.25 0 1 0-2.5 0v4.75h2.5zM3 6.75A2.75 2.75 0 0 1 5.75 9.5v4.834c0 .782-.634 1.416-1.416 1.416H1.666A1.416 1.416 0 0 1 .25 14.334V9.5A2.75 2.75 0 0 1 3 6.75z"
+)
-      />
+
-    </defs>
+export default ({ size, ...p }: { size: number }) => (
-    <g fill="none" fillRule="evenodd">
+  <svg viewBox="0 0 8 30" height={size} width={size} {...p}>
-      <path
+    {path}
-        fill="#000"
-        fillRule="nonzero"
-        d="M5.75 6.835a3.509 3.509 0 0 0-1.5-1.105V1.75h-2.5v3.98a3.509 3.509 0 0 0-1.5 1.105V1.666C.25.884.884.25 1.666.25h2.668c.782 0 1.416.634 1.416 1.416v5.169zm-1.5 7.415V9.5a1.25 1.25 0 1 0-2.5 0v4.75h2.5zM3 6.75A2.75 2.75 0 0 1 5.75 9.5v4.834c0 .782-.634 1.416-1.416 1.416H1.666A1.416 1.416 0 0 1 .25 14.334V9.5A2.75 2.75 0 0 1 3 6.75z"
-      />
-      <g>
-        <mask id="b" fill="#fff">
-          <use xlinkHref="#a" />
-        </mask>
-        <use fill="#FFF" xlinkHref="#a" />
-        <g fill="#FFF" mask="url(#b)">
-          <path d="M-5 0h16v16H-5z" />
-        </g>
-      </g>
-    </g>
   </svg>
 )

src/icons/device/NanoXBanner.js

@@ -0,0 +1,30 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size = 30, ...p }: { size: number }) => (
+  <svg viewBox="0 0 6 16" height={size} width={size} {...p}>
+    <defs>
+      <path
+        id="a"
+        d="M5.75 6.835a3.509 3.509 0 0 0-1.5-1.105V1.75h-2.5v3.98a3.509 3.509 0 0 0-1.5 1.105V1.666C.25.884.884.25 1.666.25h2.668c.782 0 1.416.634 1.416 1.416v5.169zm-1.5 7.415V9.5a1.25 1.25 0 1 0-2.5 0v4.75h2.5zM3 6.75A2.75 2.75 0 0 1 5.75 9.5v4.834c0 .782-.634 1.416-1.416 1.416H1.666A1.416 1.416 0 0 1 .25 14.334V9.5A2.75 2.75 0 0 1 3 6.75z"
+      />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <path
+        fill="#000"
+        fillRule="nonzero"
+        d="M5.75 6.835a3.509 3.509 0 0 0-1.5-1.105V1.75h-2.5v3.98a3.509 3.509 0 0 0-1.5 1.105V1.666C.25.884.884.25 1.666.25h2.668c.782 0 1.416.634 1.416 1.416v5.169zm-1.5 7.415V9.5a1.25 1.25 0 1 0-2.5 0v4.75h2.5zM3 6.75A2.75 2.75 0 0 1 5.75 9.5v4.834c0 .782-.634 1.416-1.416 1.416H1.666A1.416 1.416 0 0 1 .25 14.334V9.5A2.75 2.75 0 0 1 3 6.75z"
+      />
+      <g>
+        <mask id="b" fill="#fff">
+          <use xlinkHref="#a" />
+        </mask>
+        <use fill="#FFF" xlinkHref="#a" />
+        <g fill="#FFF" mask="url(#b)">
+          <path d="M-5 0h16v16H-5z" />
+        </g>
+      </g>
+    </g>
+  </svg>
+)

src/icons/device/index.js

@@ -1,3 +1,4 @@
 export Blue from './Blue'
 export NanoS from './NanoS'
 export NanoX from './NanoX'
+export NanoXBanner from './NanoXBanner'

static/i18n/en/app.json

@@ -145,10 +145,10 @@
     "messageIfSkipped": "Your {{currencyName}} address has not been confirmed on your Ledger device. Please verify it for optimal security."
   },
   "deviceConnect": {
-    "dashboard": "Navigate to the <1><0>{{managerAppName}}</0></1> on your device",
+    "dashboard": "Navigate to the <1>Dashboard</1> on your device",
     "step1": "Connect and unlock your <1>Ledger device</1>",
     "step2": "Navigate to the <1><0>{{managerAppName}}</0></1> app on your device",
-    "step3": "Allow <1><0>Ledger Manager</0></1> on your device"
+    "step3": "Allow <1>Ledger Manager</1> on your device"
   },
   "emptyState": {
     "sidebar": {