From 80fcd155585dcc5ba89e080da3a1d9659329ae68 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 21 Aug 2018 17:02:06 +0200 Subject: [PATCH 01/18] Functions refactored, device list refactored --- src/js/components/DeviceHeader/index.js | 125 ++++++++++++++++++ .../TrezorImage/images/trezor-1.png | Bin 0 -> 2572 bytes .../TrezorImage/images/trezor-T.png | Bin 0 -> 3649 bytes src/js/components/TrezorImage/index.js | 26 ++++ src/js/config/icons.js | 1 + src/js/utils/device.js | 56 ++++++++ .../DeviceMenu/components/DeviceList/index.js | 28 ++-- .../components/DeviceMenu/index.js | 48 ++++--- 8 files changed, 248 insertions(+), 36 deletions(-) create mode 100644 src/js/components/DeviceHeader/index.js create mode 100644 src/js/components/TrezorImage/images/trezor-1.png create mode 100644 src/js/components/TrezorImage/images/trezor-T.png create mode 100644 src/js/components/TrezorImage/index.js create mode 100644 src/js/utils/device.js diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js new file mode 100644 index 00000000..ba1ea7c1 --- /dev/null +++ b/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, +}) => ( + + + + + + + + {label} + {status} + + + {deviceCount > 1 ? {deviceCount} : null} + + + + +); + +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; diff --git a/src/js/components/TrezorImage/images/trezor-1.png b/src/js/components/TrezorImage/images/trezor-1.png new file mode 100644 index 0000000000000000000000000000000000000000..8c35659b09aa81d58c2f80b1e253d1e532077f54 GIT binary patch literal 2572 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 TpXD9A00000NkvXXu0mjfd(bk9 literal 0 HcmV?d00001 diff --git a/src/js/components/TrezorImage/index.js b/src/js/components/TrezorImage/index.js new file mode 100644 index 00000000..677be08f --- /dev/null +++ b/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 }) => ( + + + +); + +TrezorImage.propTypes = { + model: PropTypes.string, +}; + +export default TrezorImage; diff --git a/src/js/config/icons.js b/src/js/config/icons.js index 936466a1..5b3fe5e4 100644 --- a/src/js/config/icons.js +++ b/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', diff --git a/src/js/utils/device.js b/src/js/utils/device.js new file mode 100644 index 00000000..0560f130 --- /dev/null +++ b/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, +}; \ No newline at end of file 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 81935b30..565d87c1 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,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 { - 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; - } - +class DeviceList extends Component { render() { return ( {this.props.devices.map((device, index) => ( -
this.props.onSelectDevice(device)}> +
this.props.onSelectDevice(device)} + >
{device.instanceLabel} - {this.getStatus(device)} + {getStatus(device)}
{ 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,14 +54,28 @@ export const DeviceSelect = (props: Props) => { css += ' disabled'; } + const handleOpen = () => { + props.toggleDeviceDropdown(!props.deviceDropdownOpened); + }; + return ( -
-
- {selected.instanceLabel} - {deviceStatus} +
+ +
+
+ {selected.instanceLabel} + {deviceStatus} +
+ {deviceCount > 1 ?
{deviceCount}
: null} +
- {deviceCount > 1 ?
{deviceCount}
: null} -
); }; @@ -172,7 +188,7 @@ 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, index) => { if (dev === selected) return null; @@ -214,14 +230,14 @@ export class DeviceDropdown extends Component { ); }); - return ( - + {currentDeviceMenu} - {deviceList.length > 1 ? : null} + {this.props.devices.length > 1 ? : null} + {/* */} {deviceList} {webUsbButton} - + ); } } From 250aa217a2b5da1dd61aade5d55d52e92f7585b5 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Tue, 21 Aug 2018 17:17:13 +0200 Subject: [PATCH 02/18] Functions refactored, device list refactored 2 --- src/js/components/DeviceHeader/index.js | 6 ++-- src/js/utils/device.js | 35 +++++++++++++++++-- .../components/DeviceMenu/index.js | 2 +- 3 files changed, 36 insertions(+), 7 deletions(-) diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js index ba1ea7c1..cb4c7bc5 100644 --- a/src/js/components/DeviceHeader/index.js +++ b/src/js/components/DeviceHeader/index.js @@ -3,7 +3,7 @@ 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 { getStatusColor, getStatusName } from 'utils/device'; import TrezorImage from 'components/TrezorImage'; import colors from 'config/colors'; @@ -92,11 +92,11 @@ const DeviceHeader = ({ - + - {label} + {getStatusName(status)} {status} diff --git a/src/js/utils/device.js b/src/js/utils/device.js index 0560f130..3cf853c3 100644 --- a/src/js/utils/device.js +++ b/src/js/utils/device.js @@ -1,3 +1,5 @@ +import colors from 'js/config/colors'; + const getStatus = (device) => { let deviceStatus = ''; if (device.type === 'unacquired' || (device.features && device.status === 'occupied')) { @@ -14,10 +16,10 @@ const getStatus = (device) => { }; const getStatusName = (device) => { - const status = getStatus(device); + const deviceStatus = getStatus(device); const unknownStatusName = 'Status unknown'; let statusName; - switch (status) { + switch (deviceStatus) { case 'used-in-other-window': statusName = 'Used in other window'; break; @@ -37,6 +39,10 @@ const getStatusName = (device) => { return statusName; }; +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 getVersion = (device) => { let version = null; if (device.features && device.features.major_version > 1) { @@ -47,9 +53,32 @@ const getVersion = (device) => { return version; }; -const getStatusColor = device => 'red'; +const getStatusColor = (device) => { + const deviceStatus = getStatus(device); + let color = null; + + switch (deviceStatus) { + case 'used-in-other-window': + color = colors.WARNING_PRIMARY; + break; + case 'connected': + color = colors.GREEN_PRIMARY; + break; + case 'disconnected': + color = colors.ERROR_PRIMARY; + break; + case 'unavailable': + color = colors.ERROR_PRIMARY; + break; + default: + color = colors.ERROR_PRIMARY; + } + + return color; +}; export { + isDisabled, getStatusName, getVersion, getStatusColor, 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 92b77978..4fd6045d 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -63,7 +63,7 @@ export const DeviceSelect = (props: Props) => { Date: Tue, 21 Aug 2018 17:56:30 +0200 Subject: [PATCH 03/18] Finalized status dot --- src/js/components/DeviceHeader/index.js | 22 ++++--------- src/js/components/TrezorImage/index.js | 18 +++++++++- src/js/utils/device.js | 33 ++++++++++--------- .../components/DeviceMenu/index.js | 4 +-- 4 files changed, 43 insertions(+), 34 deletions(-) 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) => { Date: Wed, 22 Aug 2018 12:59:22 +0200 Subject: [PATCH 04/18] Removed dot from image --- src/js/components/DeviceHeader/index.js | 29 +++++++++++++++---- src/js/components/TrezorImage/index.js | 26 ++--------------- src/js/utils/device.js | 18 ++++-------- .../components/DeviceMenu/index.js | 4 +-- 4 files changed, 35 insertions(+), 42 deletions(-) diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js index ed55a8b9..3d7757d8 100644 --- a/src/js/components/DeviceHeader/index.js +++ b/src/js/components/DeviceHeader/index.js @@ -19,7 +19,7 @@ const Wrapper = styled.div` const ClickWrapper = styled.div` width: 100%; display: flex; - padding-left: 22px; + padding-left: 25px; height: 100%; align-items: center; cursor: pointer; @@ -66,6 +66,22 @@ const IconWrapper = styled.div` display: flex; `; +const ImageWrapper = styled.div` + position: relative; +`; + +const Dot = styled.div` + border: 2px solid ${colors.WHITE}; + border-radius: 50%; + position: absolute; + z-index: 10; + background: ${props => props.color}; + top: -4px; + right: -3px; + width: 10px; + height: 10px; +`; + const StyledIcon = styled(Icon)` transform: rotate(180deg); `; @@ -81,10 +97,13 @@ const DeviceHeader = ({ }) => ( - + + + + {label} {getStatusName(status)} diff --git a/src/js/components/TrezorImage/index.js b/src/js/components/TrezorImage/index.js index f4fcfd02..ed83f81a 100644 --- a/src/js/components/TrezorImage/index.js +++ b/src/js/components/TrezorImage/index.js @@ -1,36 +1,16 @@ 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 Wrapper = styled.div``; const Img = styled.img` width: ${props => (props.model === 'T' ? '17px' : '13px')}; `; -const TrezorImage = ({ model, status }) => ( +const TrezorImage = ({ model }) => ( - {status && } - + ); diff --git a/src/js/utils/device.js b/src/js/utils/device.js index 04cb9a43..9dfaa05a 100644 --- a/src/js/utils/device.js +++ b/src/js/utils/device.js @@ -1,6 +1,6 @@ import colors from 'js/config/colors'; -const getDeviceSelectStatus = (device) => { +const getStatus = (device) => { let status = 'connected'; if (!device.connected) { status = 'disconnected'; @@ -18,7 +18,6 @@ const getDeviceSelectStatus = (device) => { }; const getStatusName = (deviceStatus) => { - const unknownStatusName = 'Status unknown'; let statusName; switch (deviceStatus) { case 'used-in-other-window': @@ -34,9 +33,8 @@ const getStatusName = (deviceStatus) => { statusName = 'Unavailable'; break; default: - statusName = unknownStatusName; + statusName = 'Status unknown'; } - return statusName; }; @@ -45,7 +43,7 @@ const isWebUSB = transport => !!((transport && transport.version.indexOf('webusb const isDisabled = (selectedDevice, devices, transport) => (devices.length < 1 && !isWebUSB(transport)) || (devices.length === 1 && !selectedDevice.features && !isWebUSB(transport)); const getVersion = (device) => { - let version = null; + let version; if (device.features && device.features.major_version > 1) { version = 'T'; } else { @@ -55,8 +53,7 @@ const getVersion = (device) => { }; const getStatusColor = (deviceStatus) => { - let color = null; - + let color; switch (deviceStatus) { case 'used-in-other-window': color = colors.WARNING_PRIMARY; @@ -71,16 +68,13 @@ const getStatusColor = (deviceStatus) => { color = colors.ERROR_PRIMARY; break; default: - color = colors.ERROR_PRIMARY; + color = colors.TEXT_PRIMARY; } - - console.log('color', color); - return color; }; export { - getDeviceSelectStatus, + getStatus, 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 6b4c6527..4fd6045d 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 { getDeviceSelectStatus, getVersion } from 'utils/device'; +import { getStatus, getVersion } from 'utils/device'; // import DeviceList from './components/DeviceList'; import type { Props } from '../common'; @@ -63,7 +63,7 @@ export const DeviceSelect = (props: Props) => { Date: Wed, 22 Aug 2018 14:31:16 +0200 Subject: [PATCH 05/18] Added redbox to see erorrs in UI --- package.json | 1 + src/js/components/DeviceHeader/index.js | 18 ++++------- src/js/components/Icon/index.js | 40 ++++++++++++++++++++++--- src/js/support/ErrorBoundary.js | 12 +++----- yarn.lock | 29 ++++++++++++++++++ 5 files changed, 76 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 9f764b5f..9916257b 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "react-scale-text": "^1.2.2", "react-select": "^1.2.1", "react-transition-group": "^2.2.1", + "redbox-react": "^1.6.0", "redux": "4.0.0", "redux-logger": "^3.0.6", "redux-raven-middleware": "^1.2.0", diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js index 3d7757d8..9ec80d71 100644 --- a/src/js/components/DeviceHeader/index.js +++ b/src/js/components/DeviceHeader/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; import Icon from 'components/Icon'; import icons from 'config/icons'; @@ -34,7 +34,7 @@ const Name = styled.div` display: block; text-overflow: ellipsis; overflow: hidden; - white-space: nowrap; + white-space: no-wrap; font-weight: 500; font-size: 14px; color: ${colors.TEXT_PRIMARY}; @@ -82,10 +82,6 @@ const Dot = styled.div` height: 10px; `; -const StyledIcon = styled(Icon)` - transform: rotate(180deg); -`; - const DeviceHeader = ({ disabled = false, handleOpen, @@ -99,22 +95,20 @@ const DeviceHeader = ({ - + {label} {getStatusName(status)} - {deviceCount > 1 ? {deviceCount} : null} - 1 && {deviceCount}} + diff --git a/src/js/components/Icon/index.js b/src/js/components/Icon/index.js index d36e8b76..20711ffb 100644 --- a/src/js/components/Icon/index.js +++ b/src/js/components/Icon/index.js @@ -1,7 +1,36 @@ import React from 'react'; import PropTypes from 'prop-types'; +import styled, { css, keyframes } from 'styled-components'; -const Icon = ({ icon, size = 32, color = 'black' }) => { +const rotate180up = keyframes` + from { + transform: rotate(0deg); + } + + to { + transform: rotate(180deg); + } +`; + +const rotate180down = keyframes` + from { + transform: rotate(180deg); + } + + to { + transform: rotate(0deg); + } +`; + +const SvgWrapper = styled.svg` + animation: ${props => (props.isActive ? rotate180up : rotate180down)} 0.2s linear 1 forwards; +`; + +const Path = styled.path``; + +const Icon = ({ + icon, size = 32, color = 'black', isActive = false, +}) => { const styles = { svg: { display: 'inline-block', @@ -13,24 +42,27 @@ const Icon = ({ icon, size = 32, color = 'black' }) => { }; return ( - - - + ); }; Icon.propTypes = { icon: PropTypes.string.isRequired, size: PropTypes.number, + isActive: PropTypes.bool, color: PropTypes.string, }; diff --git a/src/js/support/ErrorBoundary.js b/src/js/support/ErrorBoundary.js index 38624521..b72cf451 100644 --- a/src/js/support/ErrorBoundary.js +++ b/src/js/support/ErrorBoundary.js @@ -1,23 +1,19 @@ import React, { Component } from 'react'; +import RedBox from 'redbox-react'; class ErrorBoundary extends Component { constructor(props) { super(props); - this.state = { hasError: false }; + this.state = { hasError: false, error: false }; } componentDidCatch(error, info) { - // Display fallback UI - this.setState({ hasError: true }); - console.error('error', error); - // You can also log the error to an error reporting service - // logErrorToMyService(error, info); + this.setState({ hasError: true, error }); } render() { if (this.state.hasError) { - // You can render any custom fallback UI - return
Something went wrong.
; + return ; } return this.props.children; } diff --git a/yarn.lock b/yarn.lock index 3076e96f..e5c19095 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3234,6 +3234,12 @@ error-ex@^1.2.0, error-ex@^1.3.1: dependencies: is-arrayish "^0.2.1" +error-stack-parser@^1.3.6: + version "1.3.6" + resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292" + dependencies: + stackframe "^0.3.1" + error@^7.0.2: version "7.0.2" resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02" @@ -8100,6 +8106,15 @@ rechoir@^0.6.2: dependencies: resolve "^1.1.6" +redbox-react@^1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.6.0.tgz#e753ac02595bc1bf695b3935889a4f5b1b5a21a1" + dependencies: + error-stack-parser "^1.3.6" + object-assign "^4.0.1" + prop-types "^15.5.4" + sourcemapped-stacktrace "^1.1.6" + redent@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde" @@ -8861,6 +8876,10 @@ source-map-url@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3" +source-map@0.5.6: + version "0.5.6" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" + source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" @@ -8875,6 +8894,12 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" +sourcemapped-stacktrace@^1.1.6: + version "1.1.8" + resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.8.tgz#6b7a3f1a6fb15f6d40e701e23ce404553480d688" + dependencies: + source-map "0.5.6" + spdx-correct@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40" @@ -8956,6 +8981,10 @@ stack-utils@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620" +stackframe@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4" + state-toggle@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.1.tgz#c3cb0974f40a6a0f8e905b96789eb41afa1cde3a" From a4d88fb919496c215f4d5dea884aae163f66b51c Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 22 Aug 2018 15:45:00 +0200 Subject: [PATCH 06/18] Fixed animation loading --- src/js/components/DeviceHeader/index.js | 82 +++++++++++-------- src/js/components/Icon/index.js | 52 +++++------- .../components/DeviceMenu/index.js | 2 +- 3 files changed, 71 insertions(+), 65 deletions(-) diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js index 9ec80d71..bd61bde0 100644 --- a/src/js/components/DeviceHeader/index.js +++ b/src/js/components/DeviceHeader/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Component } from 'react'; import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; import Icon from 'components/Icon'; @@ -82,38 +82,54 @@ const Dot = styled.div` height: 10px; `; -const DeviceHeader = ({ - disabled = false, - handleOpen, - status, - label, - deviceCount, - isOpen = false, - trezorModel, -}) => ( - - - - - - - - {label} - {getStatusName(status)} - - - {deviceCount > 1 && {deviceCount}} - - - - -); +class DeviceHeader extends Component { + constructor(props) { + super(props); + this.state = { + clicked: false, + }; + } + + handleClick() { + this.setState({ clicked: true }); + if (!this.props.disabled) { + this.props.handleOpen(); + } + } + + render() { + console.log('cananitem', this.state.clicked); + const { + status, label, deviceCount, isOpen, trezorModel, + } = this.props; + return ( + + this.handleClick()}> + + + + + + {label} + {getStatusName(status)} + + + {deviceCount > 1 && {deviceCount}} + + + + + ); + } +} + DeviceHeader.propTypes = { deviceCount: PropTypes.number, diff --git a/src/js/components/Icon/index.js b/src/js/components/Icon/index.js index 20711ffb..fe1980ec 100644 --- a/src/js/components/Icon/index.js +++ b/src/js/components/Icon/index.js @@ -1,12 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled, { css, keyframes } from 'styled-components'; +import styled, { keyframes } from 'styled-components'; const rotate180up = keyframes` from { transform: rotate(0deg); } - to { transform: rotate(180deg); } @@ -16,50 +15,41 @@ const rotate180down = keyframes` from { transform: rotate(180deg); } - to { transform: rotate(0deg); } `; const SvgWrapper = styled.svg` - animation: ${props => (props.isActive ? rotate180up : rotate180down)} 0.2s linear 1 forwards; + animation: ${props => (props.canAnimate ? (props.isActive ? rotate180up : rotate180down) : null)} 0.2s linear 1 forwards; `; const Path = styled.path``; const Icon = ({ - icon, size = 32, color = 'black', isActive = false, -}) => { - const styles = { - svg: { + icon, size = 32, color = 'black', isActive, canAnimate, +}) => ( + - - - ); -}; + }} + width={`${size}`} + height={`${size}`} + viewBox="0 0 1024 1024" + > + + +); Icon.propTypes = { + canAnimate: PropTypes.bool, icon: PropTypes.string.isRequired, size: PropTypes.number, isActive: PropTypes.bool, 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..cdc3589f 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -64,7 +64,7 @@ export const DeviceSelect = (props: Props) => { handleOpen={handleOpen} label={selected.instanceLabel} status={getStatus(selected)} - deviceCount={deviceCount} + deviceCount={devices.length} isOpen={props.deviceDropdownOpened} trezorModel={getVersion(selected)} /> From bc094c42a15b8716b6751853f7de60286eeadf60 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 22 Aug 2018 16:20:56 +0200 Subject: [PATCH 07/18] Removed old selected device --- src/js/components/Icon/index.js | 1 + .../components/DeviceHeader/index.js | 42 ++++++++---- .../components/DeviceMenu/index.js | 67 ++++--------------- .../Wallet/components/LeftNavigation/index.js | 3 +- 4 files changed, 46 insertions(+), 67 deletions(-) rename src/js/{ => views/Wallet/components/LeftNavigation/components/DeviceMenu}/components/DeviceHeader/index.js (74%) diff --git a/src/js/components/Icon/index.js b/src/js/components/Icon/index.js index fe1980ec..bd858bfb 100644 --- a/src/js/components/Icon/index.js +++ b/src/js/components/Icon/index.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled, { keyframes } from 'styled-components'; +// TODO: make animation of icons better const rotate180up = keyframes` from { transform: rotate(0deg); diff --git a/src/js/components/DeviceHeader/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceHeader/index.js similarity index 74% rename from src/js/components/DeviceHeader/index.js rename to src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceHeader/index.js index bd61bde0..fcc2fc12 100644 --- a/src/js/components/DeviceHeader/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceHeader/index.js @@ -14,6 +14,19 @@ const Wrapper = styled.div` width: 320px; display: flex; align-items: center; + background: ${colors.WHITE}; + border-bottom: 1px solid ${colors.DIVIDER}; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); + cursor: pointer; + + ${props => props.isOpen && css` + border-bottom: 1px solid ${colors.WHITE}; + box-shadow: none; + `} + + ${props => props.disabled && css` + cursor: initial; + `} `; const ClickWrapper = styled.div` @@ -23,6 +36,10 @@ const ClickWrapper = styled.div` height: 100%; align-items: center; cursor: pointer; + + ${props => props.disabled && css` + cursor: initial; + `} `; const LabelWrapper = styled.div` @@ -98,13 +115,12 @@ class DeviceHeader extends Component { } render() { - console.log('cananitem', this.state.clicked); const { - status, label, deviceCount, isOpen, trezorModel, + status, label, deviceCount, isOpen, trezorModel, disabled, } = this.props; return ( - - this.handleClick()}> + + this.handleClick()}> @@ -115,14 +131,16 @@ class DeviceHeader extends Component { {deviceCount > 1 && {deviceCount}} - + {!disabled && ( + + ) + } 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 cdc3589f..79ed2025 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -3,9 +3,10 @@ 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 DeviceHeader from './components/DeviceHeader'; + // import DeviceList from './components/DeviceList'; import type { Props } from '../common'; @@ -17,66 +18,24 @@ const Wrapper = styled.div``; export const DeviceSelect = (props: Props) => { const { devices } = props; const { transport } = props.connect; - - const selected: ?TrezorDevice = props.wallet.selectedDevice; - if (!selected) return null; - - let deviceStatus: string = 'Connected'; - let css: string = 'device-select device'; - if (props.deviceDropdownOpened) css += ' opened'; - - if (!selected.connected) { - css += ' disconnected'; - deviceStatus = 'Disconnected'; - } else if (!selected.available) { - css += ' unavailable'; - deviceStatus = 'Unavailable'; - } else if (selected.type === 'acquired') { - if (selected.status === 'occupied') { - css += ' used-elsewhere'; - deviceStatus = 'Used in other window'; - } else if (selected.status === 'used') { - css += ' reload-features'; - } - } else if (selected.type === 'unacquired') { - css += ' unacquired'; - deviceStatus = 'Used in other window'; - } - - if (selected.features && selected.features.major_version > 1) { - css += ' trezor-t'; - } - - const deviceCount = devices.length; + const { selectedDevice } = props.wallet; const webusb: boolean = !!((transport && transport.version.indexOf('webusb') >= 0)); - const disabled: boolean = (devices.length < 1 && !webusb) || (devices.length === 1 && !selected.features && !webusb); - if (disabled) { - css += ' disabled'; - } + const disabled: boolean = (devices.length < 1 && !webusb) || (devices.length === 1 && !selectedDevice.features && !webusb); const handleOpen = () => { props.toggleDeviceDropdown(!props.deviceDropdownOpened); }; return ( -
- -
-
- {selected.instanceLabel} - {deviceStatus} -
- {deviceCount > 1 ?
{deviceCount}
: null} -
-
-
+ ); }; diff --git a/src/js/views/Wallet/components/LeftNavigation/index.js b/src/js/views/Wallet/components/LeftNavigation/index.js index c810a2d3..ad427a6c 100644 --- a/src/js/views/Wallet/components/LeftNavigation/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/index.js @@ -144,12 +144,13 @@ class LeftNavigation extends Component { } render() { + const { selectedDevice } = this.props.wallet; return ( - + {selectedDevice && } {this.state.shouldRenderDeviceSelection && } {this.shouldRenderAccounts() && this.getMenuTransition()} From 0a8f8f8872257d4b37ef77ff5406fcb8c7a54f1b Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 22 Aug 2018 16:35:19 +0200 Subject: [PATCH 08/18] Styled initil page --- src/js/components/P/index.js | 18 +++++++++ src/js/views/Wallet/views/Initialize/index.js | 40 +++++++++++++++---- 2 files changed, 50 insertions(+), 8 deletions(-) create mode 100644 src/js/components/P/index.js diff --git a/src/js/components/P/index.js b/src/js/components/P/index.js new file mode 100644 index 00000000..0e49f301 --- /dev/null +++ b/src/js/components/P/index.js @@ -0,0 +1,18 @@ +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import React from 'react'; + +const Wrapper = styled.p` +`; + +const P = ({ children, className }) => ( + {children} +); + +P.propTypes = { + className: PropTypes.string, + children: PropTypes.string.isRequired, +}; + + +export default P; diff --git a/src/js/views/Wallet/views/Initialize/index.js b/src/js/views/Wallet/views/Initialize/index.js index 47ec5d8b..b1a9a231 100644 --- a/src/js/views/Wallet/views/Initialize/index.js +++ b/src/js/views/Wallet/views/Initialize/index.js @@ -1,17 +1,41 @@ -/* @flow */ +import styled from 'styled-components'; import { H2 } from 'components/Heading'; +import Button from 'components/Button'; +import P from 'components/P'; import React from 'react'; -import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; +const Wrapper = styled.div` + display: flex; + flex: 1; + justify-content: center; + align-items: center; +`; + +const Row = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + +const A = styled.a``; + +const StyledP = styled(P)` + margin: 20px 50px; + display: block; +`; + const Initialize = () => ( -
-
+ +

Your device is in not initialized

-

Please use Bitcoin wallet interface to start initialization process

- Take me to the Bitcoin wallet -
-
+ Please use Bitcoin wallet interface to start initialization process + +