From 9e41a302361f625aca3ae1f470a498276ed7ce5c Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 23 Jan 2019 16:03:15 +0100 Subject: [PATCH 1/3] add T2 icon --- src/config/icons.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/config/icons.js b/src/config/icons.js index c96de6ea..db572638 100644 --- a/src/config/icons.js +++ b/src/config/icons.js @@ -24,6 +24,9 @@ export default { T1: [ 'M603.2 265.6h-6.4c-25.494-5.341-54.79-8.398-84.8-8.398s-59.305 3.058-87.592 8.879l2.792-0.48h-6.72c-30.053 5.643-52.489 31.68-52.489 62.956 0 0.367 0.003 0.733 0.009 1.099l-0.001-0.055v234.88c0.075 40.921 11.238 79.22 30.643 112.071l-0.563-1.031 35.2 60.48c11.655 19.297 32.515 32.001 56.342 32.001 0.105 0 0.209 0 0.314-0.001h44.144c0.359 0.007 0.783 0.011 1.208 0.011 23.569 0 44.162-12.74 55.269-31.709l0.164-0.302 36.16-64c18.232-31.447 29.027-69.173 29.12-109.413v-232.987c0.005-0.293 0.008-0.639 0.008-0.986 0-31.391-22.599-57.503-52.416-62.954l-0.392-0.059zM629.76 563.2c-0.193 35.364-9.792 68.446-26.418 96.923l0.498-0.923-35.84 64c-6.868 11.865-19.463 19.742-33.906 19.84h-44.174c-0.073 0-0.159 0.001-0.246 0.001-14.427 0-27.041-7.762-33.894-19.338l-0.1-0.183-34.88-59.84c-16.656-28.155-26.515-62.042-26.56-98.227v-235.853c0.133-19.025 13.742-34.833 31.751-38.359l0.249-0.041h6.72c24.050-5.126 51.682-8.062 80-8.062s55.949 2.936 82.608 8.519l-2.608-0.457h6.72c18.258 3.568 31.867 19.375 32 38.386v0.014zM422.4 353.92h179.2c3.535 0 6.4 2.865 6.4 6.4v99.2c0 3.535-2.865 6.4-6.4 6.4h-179.2c-3.535 0-6.4-2.865-6.4-6.4v-99.2c0-3.535 2.865-6.4 6.4-6.4z', ], + T2: [ + 'M 625.28 546.304 c 0 4.512 -3.84 8 -8.32 8 l -209.92 0 c -4.48 0 -8.32 -3.488 -8.32 -8 l 0 -202.208 c 0 -4.512 3.84 -8.32 8.32 -8.32 l 209.92 0 c 4.48 0 8.32 3.808 8.32 8.32 l 0 202.208 Z m 18.56 -304.32 l -263.68 0 c -23.04 0 -41.92 18.56 -41.92 41.28 l 0 233.952 c 0 55.04 16 108.768 46.72 155.168 l 64.64 96.992 c 5.12 8 13.76 12.448 23.36 12.448 l 78.4 0 c 9.28 0 17.92 -4.448 23.04 -11.84 l 60.16 -86.048 c 33.6 -47.68 51.2 -103.392 51.2 -161.28 l 0 -239.392 c 0 -22.72 -18.88 -41.28 -41.92 -41.28', + ], COG: [ 'M739.552 462.144h-71.328c-4.256-13.664-10.208-26.56-17.472-38.56l47.264-47.424c11.2-11.008 11.2-29.056 0-40.192l-20.064-20.032c-11.136-11.104-29.152-11.040-40.192 0l-48.128 48.032c-12.992-7.392-27.072-13.152-42.080-16.992v-62.496c0-15.68-12.672-28.48-28.448-28.48h-28.448c-15.68 0-28.416 12.8-28.416 28.48v62.464c-16.352 4.128-31.68 10.656-45.728 19.2l-40.288-40.224c-11.072-11.040-29.184-11.104-40.288 0l-20.096 20.096c-11.104 11.072-10.976 29.152 0.064 40.288l40.992 40.992c-8.672 15.136-15.168 31.648-18.88 49.152h-53.504c-15.776 0-28.544 12.736-28.544 28.48v28.416c0 15.68 12.768 28.416 28.544 28.416h57.152c5.184 17.152 12.992 32.928 23.008 47.328l-38.656 38.656c-11.136 11.136-11.136 29.216-0.064 40.288l20.064 20.096c11.2 11.040 29.248 11.040 40.32-0.032l43.232-43.2c14.528 7.232 30.336 12.48 46.944 15.2v59.488c0 15.68 12.736 28.448 28.448 28.48h28.448c15.68-0.032 28.448-12.8 28.448-28.48v-66.816c14.336-5.088 27.904-11.872 40.224-20.544l45.76 45.888c11.104 11.072 29.12 11.072 40.224 0l20.096-20.128c11.168-11.072 11.168-29.056-0.096-40.288l-50.144-50.24c6.144-12.512 10.944-25.792 13.92-39.904h67.776c15.744 0 28.448-12.672 28.48-28.448v-28.448c-0.096-15.68-12.8-28.512-28.544-28.512zM504.928 583.072c-39.264 0-71.072-31.776-71.072-71.104 0-39.264 31.808-71.040 71.072-71.040 39.296 0 71.136 31.776 71.136 71.040 0 39.328-31.84 71.104-71.136 71.104z', ], From 46bced2fddad95066bc047e5c9aede7a5f7105aa Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 23 Jan 2019 16:04:00 +0100 Subject: [PATCH 2/3] add DeviceIcon component --- src/components/images/DeviceIcon/index.js | 74 +++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 src/components/images/DeviceIcon/index.js diff --git a/src/components/images/DeviceIcon/index.js b/src/components/images/DeviceIcon/index.js new file mode 100644 index 00000000..4a1b7cc8 --- /dev/null +++ b/src/components/images/DeviceIcon/index.js @@ -0,0 +1,74 @@ +/* @flow */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import COLORS from 'config/colors'; +import ICONS from 'config/icons'; +import styled from 'styled-components'; +import type { TrezorDevice } from 'flowtype'; + +type Props = { + device: TrezorDevice, + size?: number, + color?: string, + hoverColor?: string, + onClick?: any, +} + +const SvgWrapper = styled.svg` + :hover { + path { + fill: ${props => props.hoverColor} + } + } +`; + +const Path = styled.path` + fill: ${props => props.color}; +`; + +const getDeviceIcon = (majorVersion: number) => { + switch (majorVersion) { + case 1: + return ICONS.T1; + case 2: + return ICONS.T2; + default: + return ICONS.T2; + } +}; + +const DeviceIcon = ({ + device, + size = 32, + color = COLORS.TEXT_SECONDARY, + hoverColor, + onClick, +}: Props) => { + const majorVersion = device.features ? device.features.major_version : 2; + return ( + + + + ); +}; + +DeviceIcon.propTypes = { + device: PropTypes.object, + size: PropTypes.number, + color: PropTypes.string, + hoverColor: PropTypes.string, + onClick: PropTypes.func, +}; + +export default DeviceIcon; \ No newline at end of file From b09b5f854da507265205045244ec8eae3d7a774e Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 23 Jan 2019 16:05:24 +0100 Subject: [PATCH 3/3] swtich hardcoded T1 icons to DeviceIcon component --- src/components/modals/confirm/Action/index.js | 18 ++++++++++++++---- src/components/modals/confirm/SignTx/index.js | 5 ++--- src/components/modals/index.js | 4 ++-- src/components/modals/passphrase/Type/index.js | 5 ++--- .../DeviceMenu/components/MenuItems/index.js | 9 +++------ .../views/Account/Receive/ethereum/index.js | 6 ++---- .../views/Account/Receive/ripple/index.js | 6 ++---- 7 files changed, 27 insertions(+), 26 deletions(-) diff --git a/src/components/modals/confirm/Action/index.js b/src/components/modals/confirm/Action/index.js index f08427ad..ea510457 100644 --- a/src/components/modals/confirm/Action/index.js +++ b/src/components/modals/confirm/Action/index.js @@ -1,10 +1,15 @@ /* @flow */ import React from 'react'; +import PropTypes from 'prop-types'; import styled from 'styled-components'; import { H3 } from 'components/Heading'; -import ICONS from 'config/icons'; -import Icon from 'components/Icon'; +import DeviceIcon from 'components/images/DeviceIcon'; +import type { TrezorDevice } from 'flowtype'; + +type Props = { + device: TrezorDevice; +} const Wrapper = styled.div``; @@ -12,13 +17,18 @@ const Header = styled.div` padding: 48px; `; -const ConfirmAction = () => ( +const ConfirmAction = (props: Props) => (
- +

Confirm action on your Trezor

 ); +ConfirmAction.propTypes = { + device: PropTypes.object.isRequired, +}; + + export default ConfirmAction; \ No newline at end of file diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js index ad9ccd86..8b12d2a8 100644 --- a/src/components/modals/confirm/SignTx/index.js +++ b/src/components/modals/confirm/SignTx/index.js @@ -4,12 +4,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import icons from 'config/icons'; import colors from 'config/colors'; import { LINE_HEIGHT, FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import P from 'components/Paragraph'; -import Icon from 'components/Icon'; +import DeviceIcon from 'components/images/DeviceIcon'; import { H3 } from 'components/Heading'; import type { TrezorDevice, State } from 'flowtype'; @@ -71,7 +70,7 @@ const ConfirmSignTx = (props: Props) => { return (
- +

Confirm transaction on { props.device.label } device

Details are shown on display

diff --git a/src/components/modals/index.js b/src/components/modals/index.js index cd7edba8..519fc314 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -96,11 +96,11 @@ const getDeviceContextModal = (props: Props) => { } case 'ButtonRequest_ProtectCall': - return ; + return ; case 'ButtonRequest_Other': case 'ButtonRequest_ConfirmOutput': - return ; + return ; case RECEIVE.REQUEST_UNVERIFIED: return ( diff --git a/src/components/modals/passphrase/Type/index.js b/src/components/modals/passphrase/Type/index.js index fa44d5b1..0e62debb 100644 --- a/src/components/modals/passphrase/Type/index.js +++ b/src/components/modals/passphrase/Type/index.js @@ -4,10 +4,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import icons from 'config/icons'; import colors from 'config/colors'; -import Icon from 'components/Icon'; +import DeviceIcon from 'components/images/DeviceIcon'; import { H3 } from 'components/Heading'; import P from 'components/Paragraph'; @@ -27,7 +26,7 @@ const Header = styled.div``; const PassphraseType = (props: Props) => (
- +

Complete the action on { props.device.label } device

If you enter a wrong passphrase, you will not unlock the desired hidden wallet.

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 c39de5a8..e18bedfe 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 @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import Icon from 'components/Icon'; +import DeviceIcon from 'components/images/DeviceIcon'; import icons from 'config/icons'; import colors from 'config/colors'; @@ -77,11 +78,7 @@ class MenuItems extends PureComponent { {this.showClone() && ( this.onDeviceMenuClick('clone', this.props.device)}> - + )} @@ -89,7 +86,7 @@ class MenuItems extends PureComponent { this.onDeviceMenuClick('reload')} > - + )} diff --git a/src/views/Wallet/views/Account/Receive/ethereum/index.js b/src/views/Wallet/views/Account/Receive/ethereum/index.js index 34109886..f700b1a9 100644 --- a/src/views/Wallet/views/Account/Receive/ethereum/index.js +++ b/src/views/Wallet/views/Account/Receive/ethereum/index.js @@ -8,6 +8,7 @@ import Button from 'components/Button'; import Icon from 'components/Icon'; import Tooltip from 'components/Tooltip'; import Input from 'components/inputs/Input'; +import DeviceIcon from 'components/images/DeviceIcon'; import ICONS from 'config/icons'; import colors from 'config/colors'; @@ -131,10 +132,7 @@ const AccountReceive = (props: Props) => { isPartiallyHidden={isAddressHidden} trezorAction={isAddressVerifying ? ( - + Check address on your Trezor ) : null} diff --git a/src/views/Wallet/views/Account/Receive/ripple/index.js b/src/views/Wallet/views/Account/Receive/ripple/index.js index e439466a..dd59de81 100644 --- a/src/views/Wallet/views/Account/Receive/ripple/index.js +++ b/src/views/Wallet/views/Account/Receive/ripple/index.js @@ -8,6 +8,7 @@ import Button from 'components/Button'; import Icon from 'components/Icon'; import Tooltip from 'components/Tooltip'; import Input from 'components/inputs/Input'; +import DeviceIcon from 'components/images/DeviceIcon'; import ICONS from 'config/icons'; import colors from 'config/colors'; @@ -131,10 +132,7 @@ const AccountReceive = (props: Props) => { isPartiallyHidden={isAddressHidden} trezorAction={isAddressVerifying ? ( - + Check address on your Trezor ) : null}