From 250aa217a2b5da1dd61aade5d55d52e92f7585b5 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Tue, 21 Aug 2018 17:17:13 +0200
Subject: [PATCH] Functions refactored, device list refactored 2

---
 src/js/components/DeviceHeader/index.js       |  6 ++--
 src/js/utils/device.js                        | 35 +++++++++++++++++--
 .../components/DeviceMenu/index.js            |  2 +-
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js
index ba1ea7c1..cb4c7bc5 100644
--- a/src/js/components/DeviceHeader/index.js
+++ b/src/js/components/DeviceHeader/index.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Icon from 'components/Icon';
 import icons from 'config/icons';
-import { getStatusColor } from 'utils/device';
+import { getStatusColor, getStatusName } from 'utils/device';
 import TrezorImage from 'components/TrezorImage';
 
 import colors from 'config/colors';
@@ -92,11 +92,11 @@ const DeviceHeader = ({
     <Wrapper>
         <ClickWrapper onClick={!disabled ? handleOpen : null}>
             <ImageWrapper>
-                <Dot color={getStatusColor('device')} />
+                <Dot color={getStatusColor(status)} />
                 <TrezorImage model={trezorModel} />
             </ImageWrapper>
             <LabelWrapper>
-                <Name>{label}</Name>
+                <Name>{getStatusName(status)}</Name>
                 <Status>{status}</Status>
             </LabelWrapper>
             <IconWrapper>
diff --git a/src/js/utils/device.js b/src/js/utils/device.js
index 0560f130..3cf853c3 100644
--- a/src/js/utils/device.js
+++ b/src/js/utils/device.js
@@ -1,3 +1,5 @@
+import colors from 'js/config/colors';
+
 const getStatus = (device) => {
     let deviceStatus = '';
     if (device.type === 'unacquired' || (device.features && device.status === 'occupied')) {
@@ -14,10 +16,10 @@ const getStatus = (device) => {
 };
 
 const getStatusName = (device) => {
-    const status = getStatus(device);
+    const deviceStatus = getStatus(device);
     const unknownStatusName = 'Status unknown';
     let statusName;
-    switch (status) {
+    switch (deviceStatus) {
         case 'used-in-other-window':
             statusName = 'Used in other window';
             break;
@@ -37,6 +39,10 @@ const getStatusName = (device) => {
     return statusName;
 };
 
+const isWebUSB = transport => !!((transport && transport.version.indexOf('webusb') >= 0));
+
+const isDisabled = (devices, transport) => (devices.length < 1 && !isWebUSB(transport)) || (devices.length === 1 && !selected.features && !webusb);
+
 const getVersion = (device) => {
     let version = null;
     if (device.features && device.features.major_version > 1) {
@@ -47,9 +53,32 @@ const getVersion = (device) => {
     return version;
 };
 
-const getStatusColor = device => 'red';
+const getStatusColor = (device) => {
+    const deviceStatus = getStatus(device);
+    let color = null;
+
+    switch (deviceStatus) {
+        case 'used-in-other-window':
+            color = colors.WARNING_PRIMARY;
+            break;
+        case 'connected':
+            color = colors.GREEN_PRIMARY;
+            break;
+        case 'disconnected':
+            color = colors.ERROR_PRIMARY;
+            break;
+        case 'unavailable':
+            color = colors.ERROR_PRIMARY;
+            break;
+        default:
+            color = colors.ERROR_PRIMARY;
+    }
+
+    return color;
+};
 
 export {
+    isDisabled,
     getStatusName,
     getVersion,
     getStatusColor,
diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
index 92b77978..4fd6045d 100644
--- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
+++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
@@ -63,7 +63,7 @@ export const DeviceSelect = (props: Props) => {
             <DeviceHeader
                 handleOpen={handleOpen}
                 label={selected.instanceLabel}
-                status={deviceStatus}
+                status={getStatus(selected)}
                 deviceCount={deviceCount}
                 isOpen={props.deviceDropdownOpened}
                 trezorModel={getVersion(selected)}