From 479a379b8e854329649b45dbc40f7bc35cfc01d7 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Tue, 15 Jan 2019 17:15:47 +0100 Subject: [PATCH 01/37] hide wallet type icon (standard/hidden) when passphrase feature is disabled --- src/views/Wallet/components/LeftNavigation/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index cca5eab1..96660a38 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -184,6 +184,8 @@ class LeftNavigation extends React.PureComponent { const { selectedDevice } = props.wallet; const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice); + const walletType = selectedDevice && !selectedDevice.useEmptyPassphrase ? 'hidden' : 'standard'; + return ( { isOpen={this.props.wallet.dropdownOpened} icon={( - + {selectedDevice && selectedDevice.features.passphrase_protection ? ( + ) : null + } {this.props.devices.length > 1 && ( {this.props.devices.length} )} From d07488146a497de0103b17ee9dd983f73d46cd22 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 16 Jan 2019 00:41:42 +0100 Subject: [PATCH 02/37] fix device header padding --- src/components/DeviceHeader/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index cdce9e46..cba457cc 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -38,6 +38,7 @@ const ClickWrapper = styled.div` width: 100%; display: flex; padding-left: 25px; + padding-right: 25px; height: 100%; align-items: center; cursor: pointer; @@ -72,7 +73,6 @@ const Status = styled.div` `; const IconWrapper = styled.div` - padding-right: 25px; display: flex; flex: 1 0 0; justify-content: flex-end; From 0efcc2c5beeca8b923eebc57de66c7597f94882f Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 16 Jan 2019 10:40:56 +0100 Subject: [PATCH 03/37] add prop delayed to Tooltip component --- src/components/Tooltip/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index 32f504b3..6650a62a 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -31,11 +31,13 @@ const Tooltip = ({ content, readMoreLink, children, + delayed, }) => ( } placement={placement} + mouseEnterDelay={delayed ? 1.5 : 0} overlay={() => ( {content} @@ -65,6 +67,7 @@ Tooltip.propTypes = { PropTypes.string, ]), readMoreLink: PropTypes.string, + delayed: PropTypes.bool, }; export default Tooltip; From 740661b4c623ec01979ddde29f3a71548448526f Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 16 Jan 2019 10:43:38 +0100 Subject: [PATCH 04/37] move forget device menu item to the bottom --- .../DeviceMenu/components/MenuItems/index.js | 44 ++++++++----------- 1 file changed, 18 insertions(+), 26 deletions(-) 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 53fc615b..1d1d3235 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 @@ -27,19 +27,6 @@ const Label = styled.div` `; class MenuItems extends PureComponent { - onDeviceMenuClick(action, device) { - if (action === 'reload') { - this.props.acquireDevice(); - } else if (action === 'forget') { - this.props.forgetDevice(device); - } else if (action === 'clone') { - this.props.duplicateDevice(device); - } else if (action === 'settings') { - this.props.toggleDeviceDropdown(false); - this.props.gotoDeviceSettings(device); - } - } - showDeviceMenu() { const { device } = this.props; return device && device.mode === 'normal'; @@ -55,9 +42,14 @@ class MenuItems extends PureComponent { render() { if (!this.showDeviceMenu()) return null; + const { device } = this.props; return ( - {/* this.onDeviceMenuClick('settings', this.props.device)}> + {/* { + this.props.toggleDeviceDropdown(false); + this.props.gotoDeviceSettings(device); + }} + > */} - this.onDeviceMenuClick('forget', this.props.device)}> - - - {this.showClone() && ( - this.onDeviceMenuClick('clone', this.props.device)}> + this.props.duplicateDevice(device)}> this.onDeviceMenuClick('reload')} + onClick={() => this.props.acquireDevice()} > )} + this.props.forgetDevice(device)}> + + + ); } @@ -101,8 +93,8 @@ MenuItems.propTypes = { acquireDevice: PropTypes.func.isRequired, forgetDevice: PropTypes.func.isRequired, duplicateDevice: PropTypes.func.isRequired, - toggleDeviceDropdown: PropTypes.func.isRequired, - gotoDeviceSettings: PropTypes.func.isRequired, + // toggleDeviceDropdown: PropTypes.func.isRequired, + // gotoDeviceSettings: PropTypes.func.isRequired, }; export default MenuItems; \ No newline at end of file From 0a0d1e7715ab05c6db47013734b4435b4de0446f Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 16 Jan 2019 10:51:50 +0100 Subject: [PATCH 05/37] added tooltips to device header's icons, wallet btn now clickable --- .../Wallet/components/LeftNavigation/index.js | 43 ++++++++++++++++--- 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index 96660a38..007e6122 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -12,6 +12,7 @@ import styled from 'styled-components'; import DeviceHeader from 'components/DeviceHeader'; import * as deviceUtils from 'utils/device'; +import Tooltip from 'components/Tooltip'; import AccountMenu from './components/AccountMenu'; import CoinMenu from './components/CoinMenu'; import DeviceMenu from './components/DeviceMenu'; @@ -23,6 +24,9 @@ const Header = styled(DeviceHeader)` border-right: 1px solid ${colors.BACKGROUND}; `; +const WalletTypeIconWrapper = styled.div` +`; + const Counter = styled.div` border: 1px solid ${colors.DIVIDER}; border-radius: 50%; @@ -185,6 +189,7 @@ class LeftNavigation extends React.PureComponent { const { selectedDevice } = props.wallet; const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice); const walletType = selectedDevice && !selectedDevice.useEmptyPassphrase ? 'hidden' : 'standard'; + const passphraseEnabled = selectedDevice && selectedDevice.features && selectedDevice.features.passphrase_protection; return ( { isOpen={this.props.wallet.dropdownOpened} icon={( - {selectedDevice && selectedDevice.features.passphrase_protection ? ( - ) : null + {passphraseEnabled ? ( + ) : null } {this.props.devices.length > 1 && ( - {this.props.devices.length} + + {this.props.devices.length} + )} Date: Wed, 16 Jan 2019 11:16:18 +0100 Subject: [PATCH 06/37] remove dead code --- .../components/DeviceMenu/index.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 9cdc96be..3b87b8d9 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -2,7 +2,6 @@ import React, { PureComponent } from 'react'; import styled from 'styled-components'; import TrezorConnect from 'trezor-connect'; -import type { TrezorDevice } from 'flowtype'; import Button from 'components/Button'; import * as deviceUtils from 'utils/device'; import MenuItems from './components/MenuItems'; @@ -22,11 +21,6 @@ const StyledButton = styled(Button)` flex: 1; `; -type DeviceMenuItem = { - type: string; - label: string; -} - class DeviceMenu extends PureComponent { constructor(props: Props) { super(props); @@ -50,19 +44,6 @@ class DeviceMenu extends PureComponent { window.removeEventListener('mousedown', this.mouseDownHandler, false); } - onDeviceMenuClick(item: DeviceMenuItem, device: TrezorDevice): void { - if (item.type === 'reload') { - this.props.acquireDevice(); - } else if (item.type === 'forget') { - this.props.forgetDevice(device); - } else if (item.type === 'clone') { - this.props.duplicateDevice(device); - } else if (item.type === 'settings') { - this.props.toggleDeviceDropdown(false); - this.props.gotoDeviceSettings(device); - } - } - blurHandler(): void { this.props.toggleDeviceDropdown(false); } From c0f794aaad4608b3d6be735b8c4224814b70656c Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 16 Jan 2019 14:09:30 +0100 Subject: [PATCH 07/37] move wallet icons to icons file --- src/components/images/WalletType/index.js | 6 ++---- src/config/icons.js | 6 ++++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/images/WalletType/index.js b/src/components/images/WalletType/index.js index 81eeacfb..5663f3e6 100644 --- a/src/components/images/WalletType/index.js +++ b/src/components/images/WalletType/index.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import colors from 'config/colors'; import styled from 'styled-components'; +import ICONS from 'config/icons'; const SvgWrapper = styled.svg` :hover { @@ -15,9 +16,6 @@ const Path = styled.path` fill: ${props => props.color}; `; -export const HIDDEN = 'M25.421,17.28l-3.167-8.8C22.175,8.24,21.858,8,21.542,8h-2.375c-0.475,0-0.792,0.32-0.792,0.8c0,0.48,0.317,0.8,0.792,0.8h1.821l2.612,7.2h-6.017h-3.167H8.4l2.613-7.2h1.821c0.475,0,0.792-0.32,0.792-0.8c0-0.48-0.317-0.8-0.792-0.8h-2.375c-0.317,0-0.633,0.24-0.712,0.56l-3.167,8.8C6.5,17.36,6.5,17.52,6.5,17.6l0,0l0,0l0,0v4c0,1.36,1.029,2.4,2.375,2.4h3.958c1.346,0,2.375-1.04,2.375-2.4v-3.2h1.583v3.2c0,1.36,1.029,2.4,2.375,2.4h3.958c1.346,0,2.375-1.04,2.375-2.4v-4l0,0l0,0l0,0C25.5,17.52,25.5,17.36,25.421,17.28z'; -export const STANDARD = 'M23.333,10.667H10.667H10c-0.367,0-0.667-0.299-0.667-0.667S9.633,9.333,10,9.333h10V10h1.333V8.667C21.333,8.299,21.035,8,20.667,8H10c-1.105,0-2,0.895-2,2v11.333C8,22.806,9.194,24,10.667,24h12.667C23.701,24,24,23.701,24,23.333v-12C24,10.965,23.701,10.667,23.333,10.667z M20,18.667c-0.737,0-1.333-0.597-1.333-1.333C18.667,16.597,19.263,16,20,16s1.333,0.597,1.333,1.333C21.333,18.07,20.737,18.667,20,18.667z'; - const Icon = ({ type = 'standard', size = 24, @@ -35,7 +33,7 @@ const Icon = ({