From 54603f62a1faee13740daef22331c08cdb47f573 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Fri, 21 Sep 2018 08:45:02 +0200 Subject: [PATCH 1/5] Fix issue when "DeviceMenu" couldn't be closed when device was in a bootloader mode --- .../Wallet/components/LeftNavigation/index.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index 15d2821f..14d5dfc5 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -93,6 +93,10 @@ class LeftNavigation extends Component { shouldRenderDeviceSelection: false, animationType: 'slide-right', }); + } else if (selectedDevice.features.bootloader_mode) { + this.setState({ + shouldRenderDeviceSelection: false, + }); } } @@ -102,19 +106,9 @@ class LeftNavigation extends Component { { - console.warn('ON ENTER'); - }} - onEntering={() => { - console.warn('ON ENTERING (ACTIVE)'); - }} onExit={() => { - console.warn('ON EXIT'); window.dispatchEvent(new Event('resize')); }} - onExiting={() => { - console.warn('ON EXITING (ACTIVE)'); - }} onExited={() => window.dispatchEvent(new Event('resize'))} classNames={this.state.animationType} appear={false} From 6fc69f00c82a3dacffbc92768583d81247c24492 Mon Sep 17 00:00:00 2001 From: Szymon Lesisz Date: Fri, 21 Sep 2018 10:37:19 +0200 Subject: [PATCH 2/5] devicemeuni while one of devices is in bootloader/not-initialized mode --- src/utils/device.js | 10 ++++++++- .../components/LeftNavigation/Container.js | 1 - .../DeviceMenu/components/MenuItems/index.js | 6 ++++++ .../LeftNavigation/components/common.js | 1 - .../Wallet/components/LeftNavigation/index.js | 21 +++++++------------ 5 files changed, 22 insertions(+), 17 deletions(-) diff --git a/src/utils/device.js b/src/utils/device.js index de04d66f..6a3c2e4f 100644 --- a/src/utils/device.js +++ b/src/utils/device.js @@ -43,7 +43,15 @@ const getStatusName = (deviceStatus) => { const isWebUSB = transport => !!((transport && transport.version.indexOf('webusb') >= 0)); -const isDisabled = (selectedDevice, devices, transport) => (devices.length < 1 && !isWebUSB(transport)) || (devices.length === 1 && !selectedDevice.features && !isWebUSB(transport)); +const isDisabled = (selectedDevice, devices, transport) => { + if (isWebUSB(transport)) return false; // always enabled if webusb + if (devices.length < 1) return true; // no devices + if (devices.length === 1) { + if (!selectedDevice.features) return true; // unacquired, unreadable + if (selectedDevice.features.bootloader_mode || !selectedDevice.features.initialized) return true; // bootlader, not initialized + } + return false; // default +} const getVersion = (device) => { let version; diff --git a/src/views/Wallet/components/LeftNavigation/Container.js b/src/views/Wallet/components/LeftNavigation/Container.js index bef0a9f0..3132ba02 100644 --- a/src/views/Wallet/components/LeftNavigation/Container.js +++ b/src/views/Wallet/components/LeftNavigation/Container.js @@ -20,7 +20,6 @@ const mapStateToProps: MapStateToProps = (state: St connect: state.connect, accounts: state.accounts, router: state.router, - deviceDropdownOpened: state.wallet.dropdownOpened, fiat: state.fiat, localStorage: state.localStorage, discovery: state.discovery, diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js index 5c0b9d15..7ca2c305 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js @@ -41,6 +41,11 @@ class MenuItems extends Component { } } + showDeviceMenu() { + const device = this.props.device; + return device && device.features && !device.features.bootloader_mode && device.features.initialized; + } + showClone() { return this.props.device && this.props.device.features.passphrase_protection && this.props.device.connected && this.props.device.available; } @@ -50,6 +55,7 @@ class MenuItems extends Component { } render() { + if (!this.showDeviceMenu()) return null; return ( this.onDeviceMenuClick('settings', this.props.device)}> diff --git a/src/views/Wallet/components/LeftNavigation/components/common.js b/src/views/Wallet/components/LeftNavigation/components/common.js index 785107fb..b91ad417 100644 --- a/src/views/Wallet/components/LeftNavigation/components/common.js +++ b/src/views/Wallet/components/LeftNavigation/components/common.js @@ -7,7 +7,6 @@ export type StateProps = { connect: $ElementType, accounts: $ElementType, router: $ElementType, - deviceDropdownOpened: boolean, fiat: $ElementType, localStorage: $ElementType, discovery: $ElementType, diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index 14d5dfc5..cf53f97c 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -75,27 +75,21 @@ class LeftNavigation extends Component { } componentWillReceiveProps(nextProps) { - const { deviceDropdownOpened } = nextProps; - const { selectedDevice } = nextProps.wallet; + const { dropdownOpened, selectedDevice } = nextProps.wallet; const hasNetwork = nextProps.location.state && nextProps.location.state.network; const hasFeatures = selectedDevice && selectedDevice.features; const deviceReady = hasFeatures && !selectedDevice.features.bootloader_mode && selectedDevice.features.initialized; - - if (deviceDropdownOpened) { + if (dropdownOpened) { this.setState({ shouldRenderDeviceSelection: true }); } else if (hasNetwork) { this.setState({ shouldRenderDeviceSelection: false, animationType: 'slide-left', }); - } else if (deviceReady) { - this.setState({ - shouldRenderDeviceSelection: false, - animationType: 'slide-right', - }); - } else if (selectedDevice.features.bootloader_mode) { + } else { this.setState({ shouldRenderDeviceSelection: false, + animationType: deviceReady ? 'slide-right' : null, }); } } @@ -134,7 +128,7 @@ class LeftNavigation extends Component { } handleOpen() { - this.props.toggleDeviceDropdown(!this.props.deviceDropdownOpened); + this.props.toggleDeviceDropdown(!this.props.wallet.dropdownOpened); } shouldRenderCoins() { @@ -145,14 +139,14 @@ class LeftNavigation extends Component { return (
this.handleOpen()} device={this.props.wallet.selectedDevice} transport={this.props.connect.transport} devices={this.props.devices} - isOpen={this.props.deviceDropdownOpened} + isOpen={this.props.wallet.dropdownOpened} {...this.props} /> @@ -179,7 +173,6 @@ class LeftNavigation extends Component { LeftNavigation.propTypes = { selectedDevice: PropTypes.object, wallet: PropTypes.object, - deviceDropdownOpened: PropTypes.bool, }; From ef7b1e5e2ed356f07da7e19b50c36c6d3fcaa587 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Fri, 21 Sep 2018 15:04:24 +0200 Subject: [PATCH 3/5] Device in bootloader mode is not selectable --- src/components/DeviceHeader/index.js | 115 ++++++------------ .../DeviceMenu/components/DeviceList/index.js | 36 +++--- .../Wallet/components/LeftNavigation/index.js | 29 +++++ 3 files changed, 87 insertions(+), 93 deletions(-) diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index 2bf43108..7a27bbef 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -1,12 +1,9 @@ -import React, { Component } from 'react'; +import React from 'react'; import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; -import Icon from 'components/Icon'; -import icons from 'config/icons'; import { getStatusColor, getStatusName, - isDisabled, getStatus, getVersion, } from 'utils/device'; @@ -19,11 +16,13 @@ const Wrapper = styled.div` width: 320px; display: flex; align-items: center; - background: ${colors.WHITE}; - border-radius: 4px 0 0 0; - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); + background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')}; + background: ${props => (props.isSelected ? colors.WHITE : 'transparent')}; - ${props => props.isOpen && css` + border-radius: 4px 0 0 0; + box-shadow: ${props => (props.disabled ? 'none' : '0 3px 8px rgba(0, 0, 0, 0.04)')}; + + ${props => (props.isOpen || !props.isSelected) && css` box-shadow: none; `} @@ -43,7 +42,7 @@ const ClickWrapper = styled.div` cursor: pointer; ${props => props.disabled && css` - cursor: initial; + cursor: not-allowed; `} `; @@ -71,18 +70,6 @@ const Status = styled.div` 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; @@ -104,72 +91,42 @@ const Dot = styled.div` height: 10px; `; -class DeviceHeader extends Component { - constructor(props) { - super(props); - this.state = { - clicked: false, - }; - } - isDisabled(device, devices, transport) { - return isDisabled(device, devices, transport); - } - - handleClickWrapper() { - this.setState({ clicked: true }); - if (!this.props.disabled) { - this.props.onClickWrapper(); - } - } - - render() { - const { - isOpen, icon, device, devices, transport, isHoverable, - } = this.props; - const status = getStatus(device); - const disabled = isDisabled(device, devices, transport); - const deviceCount = devices.length; - - return ( - - this.handleClickWrapper()}> - - - - - - {device.instanceLabel} - {getStatusName(status)} - - - {icon && icon} - {!icon && deviceCount > 1 && {deviceCount}} - {!icon && !disabled && ( - - ) - } - - - - ); - } -} +const DeviceHeader = ({ + isOpen, icon, device, isHoverable = true, onClickWrapper, disabled = false, isSelected = false, +}) => { + const status = getStatus(device); + return ( + + + + + + + + {device.instanceLabel} + {getStatusName(status)} + + + {icon && !disabled && icon} + + + + ); +}; DeviceHeader.propTypes = { device: PropTypes.object, - devices: PropTypes.array, - transport: PropTypes.object, icon: PropTypes.element, isHoverable: PropTypes.bool, disabled: PropTypes.bool, isOpen: PropTypes.bool, + isSelected: PropTypes.bool, onClickWrapper: PropTypes.func.isRequired, }; diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js index faca2a75..31d66a0c 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js @@ -23,22 +23,30 @@ class DeviceList extends Component { .map(device => ( device !== selectedDevice && ( onSelectDevice(device)} + key={device.state || device.path} + disabled={device.features && device.features.bootloader_mode} + onClickWrapper={() => { + if (device.features + && !device.features.bootloader_mode) { + onSelectDevice(device); + } + }} onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, device)} icon={( - { - event.stopPropagation(); - event.preventDefault(); - this.onDeviceMenuClick({ type: 'forget', label: '' }, device); - }} - > - - + + { + event.stopPropagation(); + event.preventDefault(); + this.onDeviceMenuClick({ type: 'forget', label: '' }, device); + }} + > + + + )} device={device} devices={devices} diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index cf53f97c..80360f6a 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -13,6 +13,18 @@ import StickyContainer from './components/StickyContainer'; const Header = styled(DeviceHeader)``; +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 TransitionGroupWrapper = styled(TransitionGroup)` width: 640px; `; @@ -64,6 +76,7 @@ class LeftNavigation extends Component { this.state = { animationType: null, shouldRenderDeviceSelection: false, + clicked: false, }; } @@ -128,6 +141,7 @@ class LeftNavigation extends Component { } handleOpen() { + this.setState({ clicked: true }); this.props.toggleDeviceDropdown(!this.props.wallet.dropdownOpened); } @@ -142,11 +156,26 @@ class LeftNavigation extends Component { deviceSelection={this.props.wallet.dropdownOpened} >
this.handleOpen()} device={this.props.wallet.selectedDevice} transport={this.props.connect.transport} devices={this.props.devices} isOpen={this.props.wallet.dropdownOpened} + icon={( + + {this.props.devices.length > 1 && ( + {this.props.devices.length} + )} + + + )} {...this.props} /> From 83e14f423e477cfb5e590de4d12bfec28c3e724f Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Tue, 25 Sep 2018 14:36:07 +0200 Subject: [PATCH 4/5] Fix broken eject icon & disable click on Header in LeftNavigation if device is in bootloader moder --- src/components/DeviceHeader/index.js | 7 +++++-- .../components/DeviceMenu/components/DeviceList/index.js | 8 +++++--- .../LeftNavigation/components/DeviceMenu/index.js | 1 + src/views/Wallet/components/LeftNavigation/index.js | 5 ++--- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index 7a27bbef..f71c680a 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -26,7 +26,7 @@ const Wrapper = styled.div` box-shadow: none; `} - ${props => props.isHoverable && css` + ${props => props.isHoverable && !props.disabled && css` &:hover { background: ${colors.GRAY_LIGHT}; } @@ -103,7 +103,10 @@ const DeviceHeader = ({ isHoverable={isHoverable} disabled={disabled} > - + diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js index 31d66a0c..d8228df3 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js @@ -15,7 +15,9 @@ class DeviceList extends Component { } render() { - const { devices, selectedDevice, onSelectDevice } = this.props; + const { + devices, selectedDevice, onSelectDevice, forgetDevice, + } = this.props; return ( {devices @@ -31,13 +33,13 @@ class DeviceList extends Component { onSelectDevice(device); } }} - onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, device)} + onClickIcon={() => forgetDevice(device)} icon={( { event.stopPropagation(); event.preventDefault(); - this.onDeviceMenuClick({ type: 'forget', label: '' }, device); + forgetDevice(device); }} > { devices={devices} selectedDevice={selectedDevice} onSelectDevice={onSelectDevice} + forgetDevice={() => this.props.forgetDevice(selectedDevice)} /> {isWebUSB(transport) && ( diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index d68fa487..1e2274dd 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -125,7 +125,7 @@ class LeftNavigation extends Component { }); } } - + shouldRenderAccounts() { const { selectedDevice } = this.props.wallet; return selectedDevice @@ -171,8 +171,7 @@ class LeftNavigation extends Component { isSelected onClickWrapper={() => this.handleOpen()} device={this.props.wallet.selectedDevice} - transport={this.props.connect.transport} - devices={this.props.devices} + disabled={this.props.wallet.selectedDevice.features && this.props.wallet.selectedDevice.features.bootloader_mode && this.props.devices.length === 1} isOpen={this.props.wallet.dropdownOpened} icon={( From 09e0e816d44ec31055f746b55578f251a89744ef Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Tue, 25 Sep 2018 14:41:34 +0200 Subject: [PATCH 5/5] Forget correct device --- .../components/LeftNavigation/components/DeviceMenu/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 3be0d059..dc34884e 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -98,7 +98,7 @@ class DeviceMenu extends Component { } render() { - const { devices, onSelectDevice } = this.props; + const { devices, onSelectDevice, forgetDevice } = this.props; const { transport } = this.props.connect; const { selectedDevice } = this.props.wallet; @@ -110,7 +110,7 @@ class DeviceMenu extends Component { devices={devices} selectedDevice={selectedDevice} onSelectDevice={onSelectDevice} - forgetDevice={() => this.props.forgetDevice(selectedDevice)} + forgetDevice={forgetDevice} /> {isWebUSB(transport) && (