diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js index cb4c7bc5..ed55a8b9 100644 --- a/src/js/components/DeviceHeader/index.js +++ b/src/js/components/DeviceHeader/index.js @@ -16,16 +16,6 @@ const Wrapper = styled.div` align-items: center; `; -const ImageWrapper = styled.div` -`; - -const Dot = styled.div` - border: 2px solid @color_white; - border-radius: 50%; - position: absolute; - background: red; -`; - const ClickWrapper = styled.div` width: 100%; display: flex; @@ -91,13 +81,13 @@ const DeviceHeader = ({ }) => ( - - - - + - {getStatusName(status)} - {status} + {label} + {getStatusName(status)} {deviceCount > 1 ? {deviceCount} : null} diff --git a/src/js/components/TrezorImage/index.js b/src/js/components/TrezorImage/index.js index 677be08f..f4fcfd02 100644 --- a/src/js/components/TrezorImage/index.js +++ b/src/js/components/TrezorImage/index.js @@ -1,17 +1,32 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; +import colors from 'config/colors'; +import { getStatusColor } from 'utils/device'; const Wrapper = styled.div` width: 20px; + position: relative; +`; + +const Dot = styled.div` + border: 2px solid ${colors.WHITE}; + border-radius: 50%; + position: absolute; + background: ${props => props.color}; + top: -5px; + right: 0px; + width: 10px; + height: 10px; `; const Img = styled.img` width: ${props => (props.model === 'T' ? '17px' : '13px')}; `; -const TrezorImage = ({ model }) => ( +const TrezorImage = ({ model, status }) => ( + {status && } ( TrezorImage.propTypes = { model: PropTypes.string, + status: PropTypes.string, }; export default TrezorImage; diff --git a/src/js/utils/device.js b/src/js/utils/device.js index 3cf853c3..04cb9a43 100644 --- a/src/js/utils/device.js +++ b/src/js/utils/device.js @@ -1,22 +1,23 @@ import colors from 'js/config/colors'; -const getStatus = (device) => { - let deviceStatus = ''; - if (device.type === 'unacquired' || (device.features && device.status === 'occupied')) { - deviceStatus = 'used-in-other-window'; - } else if (device.type === 'unreadable') { - deviceStatus = 'connected'; - } else if (!device.connected) { - deviceStatus = 'disconnected'; +const getDeviceSelectStatus = (device) => { + let status = 'connected'; + if (!device.connected) { + status = 'disconnected'; } else if (!device.available) { - deviceStatus = 'unavailable'; + status = 'unavailable'; + } else if (device.type === 'acquired') { + if (device.status === 'occupied') { + status = 'used-in-other-window'; + } + } else if (device.type === 'unacquired') { + status = 'unacquired'; } - return deviceStatus; + return status; }; -const getStatusName = (device) => { - const deviceStatus = getStatus(device); +const getStatusName = (deviceStatus) => { const unknownStatusName = 'Status unknown'; let statusName; switch (deviceStatus) { @@ -41,7 +42,7 @@ const getStatusName = (device) => { 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 isDisabled = (selectedDevice, devices, transport) => (devices.length < 1 && !isWebUSB(transport)) || (devices.length === 1 && !selectedDevice.features && !isWebUSB(transport)); const getVersion = (device) => { let version = null; @@ -53,8 +54,7 @@ const getVersion = (device) => { return version; }; -const getStatusColor = (device) => { - const deviceStatus = getStatus(device); +const getStatusColor = (deviceStatus) => { let color = null; switch (deviceStatus) { @@ -74,10 +74,13 @@ const getStatusColor = (device) => { color = colors.ERROR_PRIMARY; } + console.log('color', color); + return color; }; export { + getDeviceSelectStatus, isDisabled, getStatusName, getVersion, 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 4fd6045d..6b4c6527 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import TrezorConnect from 'trezor-connect'; import type { TrezorDevice } from 'flowtype'; import DeviceHeader from 'components/DeviceHeader'; -import { getStatus, getVersion } from 'utils/device'; +import { getDeviceSelectStatus, getVersion } from 'utils/device'; // import DeviceList from './components/DeviceList'; import type { Props } from '../common'; @@ -63,7 +63,7 @@ export const DeviceSelect = (props: Props) => {