diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js similarity index 100% rename from src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceHeader/index.js rename to src/js/components/DeviceHeader/index.js diff --git a/src/js/utils/device.js b/src/js/utils/device.js index 43f8fb6b..80195154 100644 --- a/src/js/utils/device.js +++ b/src/js/utils/device.js @@ -80,6 +80,7 @@ const getStatusColor = (deviceStatus) => { }; export { + isWebUSB, getStatus, isDisabled, getStatusName, diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js index 565d87c1..b1d37fd1 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js @@ -1,32 +1,53 @@ import React, { Component } from 'react'; import styled from 'styled-components'; -import { getStatus } from 'utils/device'; +import Icon from 'components/Icon'; +import DeviceHeader from 'components/DeviceHeader'; +import icons from 'config/icons'; +import colors from 'config/colors'; const Wrapper = styled.div``; +const IconClick = styled.div``; class DeviceList extends Component { + sortByInstance(a, b) { + if (!a.instance || !b.instance) return -1; + return a.instance > b.instance ? 1 : -1; + } + render() { + const { devices, selectedDevice } = this.props; + console.warn('devices', devices); return ( - {this.props.devices.map((device, index) => ( -
this.props.onSelectDevice(device)} - > -
- {device.instanceLabel} - {getStatus(device)} -
-
{ - event.stopPropagation(); - event.preventDefault(); - this.onDeviceMenuClick({ type: 'forget', label: '' }, device); - }} - /> -
- ))} + {devices + .sort(this.sortByInstance) + .map(device => ( + device !== selectedDevice && ( + this.props.onSelectDevice(device)} + onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, device)} + icon={( + { + event.stopPropagation(); + event.preventDefault(); + this.onDeviceMenuClick({ type: 'forget', label: '' }, device); + }} + > + + + )} + device={device} + devices={devices} + isHoverable + /> + ) + ))} + ); } 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 4cbad644..c69130b9 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -1,21 +1,18 @@ /* @flow */ import React, { Component } from 'react'; import styled from 'styled-components'; -import icons from 'config/icons'; -import colors from 'config/colors'; -import Icon from 'components/Icon'; import TrezorConnect from 'trezor-connect'; import type { TrezorDevice } from 'flowtype'; +import DeviceHeader from 'components/DeviceHeader'; +import Button from 'components/Button'; +import { isWebUSB } from 'utils/device'; +import DeviceList from './components/DeviceList'; -import DeviceHeader from './components/DeviceHeader'; - -// import DeviceList from './components/DeviceList'; import type { Props } from '../common'; import AsideDivider from '../Divider'; const Wrapper = styled.div``; -const IconClick = styled.div``; export const DeviceSelect = (props: Props) => { const handleOpen = () => { @@ -51,7 +48,7 @@ export class DeviceDropdown extends Component { componentDidUpdate() { const { transport } = this.props.connect; - if (transport && transport.version.indexOf('webusb') >= 0) TrezorConnect.renderWebUSBButton(); + if (isWebUSB(transport)) TrezorConnect.renderWebUSBButton(); } mouseDownHandler(event: MouseEvent): void { @@ -100,27 +97,25 @@ export class DeviceDropdown extends Component { } } + showDivider() { + return this.props.devices.length > 1; + } + render() { const { devices } = this.props; const { transport } = this.props.connect; - const selected: ?TrezorDevice = this.props.wallet.selectedDevice; - if (!selected) return; - - let webUsbButton = null; - if (transport && transport.version.indexOf('webusb') >= 0) { - webUsbButton = ; - } + const { selectedDevice } = this.props.wallet; let currentDeviceMenu = null; - if (selected.features) { + if (selectedDevice.features) { const deviceMenuItems: Array = []; - if (selected.status !== 'available') { + if (selectedDevice.status !== 'available') { deviceMenuItems.push({ type: 'reload', label: 'Renew session' }); } deviceMenuItems.push({ type: 'settings', label: 'Device settings' }); - if (selected.features.passphrase_protection && selected.connected && selected.available) { + if (selectedDevice.features.passphrase_protection && selectedDevice.connected && selected.available) { deviceMenuItems.push({ type: 'clone', label: 'Create hidden wallet' }); } //if (selected.remember) { @@ -138,47 +133,21 @@ export class DeviceDropdown extends Component { ); } - 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) => { - if (dev === selected) return null; - return ( - this.props.onSelectDevice(dev)} - onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, dev)} - icon={( - { - event.stopPropagation(); - event.preventDefault(); - this.onDeviceMenuClick({ type: 'forget', label: '' }, dev); - }} - > - - - )} - device={dev} - devices={devices} - isHoverable - /> - ); - }); - return ( {currentDeviceMenu} - {this.props.devices.length > 1 ? : null} - {/* */} - {deviceList} - {webUsbButton} + {this.showDivider() && } + + {isWebUSB(transport) && ( +