Functions refactored, device list refactored

src/js/components/DeviceHeader/index.js

@@ -0,0 +1,125 @@
+import React from 'react';
+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 TrezorImage from 'components/TrezorImage';
+
+import colors from 'config/colors';
+
+const Wrapper = styled.div`
+    position: relative;
+    height: 64px;
+    width: 320px;
+    display: flex;
+    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;
+    padding-left: 22px;
+    height: 100%;
+    align-items: center;
+    cursor: pointer;
+`;
+
+const LabelWrapper = styled.div`
+    flex: 1;
+    padding-left: 18px;
+`;
+
+const Name = styled.div`
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    font-weight: 500;
+    font-size: 14px;
+    color: ${colors.TEXT_PRIMARY};
+`;
+
+const Status = styled.div`
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: 12px;
+    color: ${colors.TEXT_SECONDARY};
+`;
+
+const Counter = styled.div`
+    border: 1px solid ${colors.DIVIDER};
+    border-radius: 50%;
+    color: ${colors.TEXT_SECONDARY};
+    width: 24px;
+    height: 24px;
+    line-height: 22px;
+    text-align: center;
+    font-size: 11px;
+    margin-right: 8px;
+`;
+
+const IconWrapper = styled.div`
+    padding-right: 25px;
+    display: flex;
+`;
+
+const StyledIcon = styled(Icon)`
+    transform: rotate(180deg);
+`;
+
+const DeviceHeader = ({
+    disabled = false,
+    handleOpen,
+    status,
+    label,
+    deviceCount,
+    isOpen = false,
+    trezorModel,
+}) => (
+    <Wrapper>
+        <ClickWrapper onClick={!disabled ? handleOpen : null}>
+            <ImageWrapper>
+                <Dot color={getStatusColor('device')} />
+                <TrezorImage model={trezorModel} />
+            </ImageWrapper>
+            <LabelWrapper>
+                <Name>{label}</Name>
+                <Status>{status}</Status>
+            </LabelWrapper>
+            <IconWrapper>
+                {deviceCount > 1 ? <Counter>{deviceCount}</Counter> : null}
+                <StyledIcon
+                    isOpen={isOpen}
+                    size={25}
+                    color={colors.TEXT_SECONDARY}
+                    icon={icons.ARROW_DOWN}
+                />
+            </IconWrapper>
+        </ClickWrapper>
+    </Wrapper>
+);
+
+DeviceHeader.propTypes = {
+    deviceCount: PropTypes.number,
+    disabled: PropTypes.bool,
+    isOpen: PropTypes.bool,
+    trezorModel: PropTypes.string.isRequired,
+    handleOpen: PropTypes.func.isRequired,
+    status: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+};
+
+export default DeviceHeader;

src/js/components/TrezorImage/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div`
+    width: 20px;
+`;
+
+const Img = styled.img`
+    width: ${props => (props.model === 'T' ? '17px' : '13px')};
+`;
+
+const TrezorImage = ({ model }) => (
+    <Wrapper>
+        <Img
+            model={model}
+            src={model === 'T' ? './images/trezor-T.png' : './images/trezor-1.png'}
+        />
+    </Wrapper>
+);
+
+TrezorImage.propTypes = {
+    model: PropTypes.string,
+};
+
+export default TrezorImage;

src/js/config/icons.js

@@ -1,6 +1,7 @@
 export default {
     PLUS: 'M768 512c0 22.080-17.92 40-40 40h-176v176c0 22.080-17.92 40-40 40s-40-17.92-40-40v-176h-176c-22.080 0-40-17.92-40-40s17.92-40 40-40h176v-176c0-22.080 17.92-40 40-40s40 17.92 40 40v176h176c22.080 0 40 17.92 40 40z',
     ARROW_LEFT: 'M603.072 757.216l-237.44-219.616c-8.576-8.128-13.632-19.296-13.632-31.040 0.288-11.744 5.056-23.2 13.664-31.040l227.040-208.768c16.928-15.36 43.040-14.176 58.176 3.008 15.424 16.864 13.952 43.392-2.656 59.040l-193.504 177.76 203.904 188.608c8 7.52 12.768 18.080 13.344 29.216 0.608 11.456-3.264 21.696-10.688 30.112-15.456 16.896-41.568 18.080-58.208 2.72z',
+    ARROW_DOWN: 'M757.216 420.928l-219.616 237.44c-8.128 8.576-19.296 13.632-31.040 13.632-11.744-0.288-23.2-5.056-31.040-13.664l-208.768-227.040c-15.36-16.928-14.176-43.040 3.008-58.176 16.864-15.424 43.392-13.952 59.040 2.656l177.76 193.504 188.608-203.904c7.52-8 18.080-12.768 29.216-13.344 11.456-0.608 21.696 3.264 30.112 10.688 16.896 15.456 18.080 41.568 2.72 58.208z',
     CHAT: 'M580.992 256h-137.984c-103.296 0-187.008 85.952-187.008 192 0 96.608 69.536 176.32 160 189.792v130.208l128-128h36.992c103.296 0 187.008-85.952 187.008-192s-83.712-192-187.008-192z',
     SKIP: 'M512 256c-141.376 0-256 114.656-256 256 0 141.408 114.624 256 256 256s256-114.592 256-256c0-141.344-114.624-256-256-256zM529.056 631.456v-68.256c-102.4-34.144-136.544 0-170.656 68.256 0-170.656 102.4-204.8 170.656-204.8v-68.256l136.544 136.544-136.544 136.512z',
     WARNING: 'M795.616 735.008l-264.896-465.44c-10.272-18.080-27.168-18.080-37.504 0l-264.864 465.44c-10.272 18.176-1.696 32.992 19.040 32.992h529.184c20.8 0 29.376-14.816 19.040-32.992zM549.76 673.12c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-37.952c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v37.952zM549.76 559.264c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-113.856c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v113.856z',

src/js/utils/device.js

@@ -0,0 +1,56 @@
+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';
+    } else if (!device.available) {
+        deviceStatus = 'unavailable';
+    }
+
+    return deviceStatus;
+};
+
+const getStatusName = (device) => {
+    const status = getStatus(device);
+    const unknownStatusName = 'Status unknown';
+    let statusName;
+    switch (status) {
+        case 'used-in-other-window':
+            statusName = 'Used in other window';
+            break;
+        case 'connected':
+            statusName = 'Connected';
+            break;
+        case 'disconnected':
+            statusName = 'Disconnected';
+            break;
+        case 'unavailable':
+            statusName = 'Unavailable';
+            break;
+        default:
+            statusName = unknownStatusName;
+    }
+
+    return statusName;
+};
+
+const getVersion = (device) => {
+    let version = null;
+    if (device.features && device.features.major_version > 1) {
+        version = 'T';
+    } else {
+        version = '1';
+    }
+    return version;
+};
+
+const getStatusColor = device => 'red';
+
+export {
+    getStatusName,
+    getVersion,
+    getStatusColor,
+};

src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js

@@ -1,33 +1,21 @@
-import React from 'react';
+import React, { Component } from 'react';
 import styled from 'styled-components';
-import deviceConstants from 'constants/device';
+import { getStatus } from 'utils/device';
 
 const Wrapper = styled.div``;
 
-class DeviceList {
+class DeviceList extends Component {
-    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';
-        } else if (!device.available) {
-            deviceStatus = 'Unavailable';
-        }
-
-        return deviceStatus;
-    }
-
     render() {
         return (
             <Wrapper>
                 {this.props.devices.map((device, index) => (
-                    <div key={index} className={css} onClick={() => this.props.onSelectDevice(device)}>
+                    <div
+                        key={index}
+                        onClick={() => this.props.onSelectDevice(device)}
+                    >
                         <div className="label-container">
                             <span className="label">{device.instanceLabel}</span>
-                            <span className="status">{this.getStatus(device)}</span>
+                            <span className="status">{getStatus(device)}</span>
                         </div>
                         <div
                             className="forget-button"

src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js

@@ -1,13 +1,19 @@
 /* @flow */
 import React, { Component } from 'react';
+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 DeviceList from './components/DeviceList';
 import type { Props } from '../common';
 
 import AsideDivider from '../Divider';
 
+
+const Wrapper = styled.div``;
+
 export const DeviceSelect = (props: Props) => {
     const { devices } = props;
     const { transport } = props.connect;
@@ -41,10 +47,6 @@ export const DeviceSelect = (props: Props) => {
         css += ' trezor-t';
     }
 
-    const handleOpen = () => {
-        props.toggleDeviceDropdown(!props.deviceDropdownOpened);
-    };
-
     const deviceCount = devices.length;
     const webusb: boolean = !!((transport && transport.version.indexOf('webusb') >= 0));
     const disabled: boolean = (devices.length < 1 && !webusb) || (devices.length === 1 && !selected.features && !webusb);
@@ -52,7 +54,20 @@ export const DeviceSelect = (props: Props) => {
         css += ' disabled';
     }
 
+    const handleOpen = () => {
+        props.toggleDeviceDropdown(!props.deviceDropdownOpened);
+    };
+
     return (
+        <div>
+            <DeviceHeader
+                handleOpen={handleOpen}
+                label={selected.instanceLabel}
+                status={deviceStatus}
+                deviceCount={deviceCount}
+                isOpen={props.deviceDropdownOpened}
+                trezorModel={getVersion(selected)}
+            />
             <div className={css} onClick={!disabled ? handleOpen : null}>
                 <div className="label-container">
                     <span className="label">{selected.instanceLabel}</span>
@@ -61,6 +76,7 @@ export const DeviceSelect = (props: Props) => {
                 {deviceCount > 1 ? <div className="counter">{deviceCount}</div> : null}
                 <div className="arrow" />
             </div>
+        </div>
     );
 };
 
@@ -172,7 +188,7 @@ export class DeviceDropdown extends Component<Props> {
         const sortByInstance = (a: TrezorDevice, b: TrezorDevice) => {
             if (!a.instance || !b.instance) return -1;
             return a.instance > b.instance ? 1 : -1;
-        }
+        };
         const deviceList = devices.sort(sortByInstance).map((dev, index) => {
             if (dev === selected) return null;
 
@@ -214,14 +230,14 @@ export class DeviceDropdown extends Component<Props> {
             );
         });
 
-
         return (
-            <React.Fragment>
+            <Wrapper>
                 {currentDeviceMenu}
-                {deviceList.length > 1 ? <AsideDivider textLeft="Other devices" /> : null}
+                {this.props.devices.length > 1 ? <AsideDivider textLeft="Other devices" /> : null}
+                {/* <DeviceList devices={devices} /> */}
                 {deviceList}
                 {webUsbButton}
-            </React.Fragment>
+            </Wrapper>
         );
     }
 }