Functions refactored, device list refactored 2

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>

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,

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)}