Merge pull request #349 from trezor/fix/correct-device-icon

Fix/correct device icon

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 (
+        <SvgWrapper
+            hoverColor={hoverColor}
+            width={`${size}`}
+            height={`${size}`}
+            viewBox="0 0 1024 1024"
+            onClick={onClick}
+        >
+            <Path
+                key={majorVersion}
+                color={color}
+                d={getDeviceIcon(majorVersion)}
+            />
+        </SvgWrapper>
+    );
+};
+
+DeviceIcon.propTypes = {
+    device: PropTypes.object,
+    size: PropTypes.number,
+    color: PropTypes.string,
+    hoverColor: PropTypes.string,
+    onClick: PropTypes.func,
+};
+
+export default DeviceIcon;

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 DeviceIcon from 'components/images/DeviceIcon';
-import Icon from 'components/Icon';
+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) => (
     <Wrapper>
         <Header>
-            <Icon icon={ICONS.T1} size={100} />
+            <DeviceIcon device={props.device} size={100} />
             <H3>Confirm action on your Trezor</H3>
         </Header>
     </Wrapper>
 );
 
+ConfirmAction.propTypes = {
+    device: PropTypes.object.isRequired,
+};
+
+
 export default ConfirmAction;

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 (
         <Wrapper>
             <Header>
-                <Icon icon={icons.T1} size={60} color={colors.TEXT_SECONDARY} />
+                <DeviceIcon device={props.device} size={60} color={colors.TEXT_SECONDARY} />
                 <H3>Confirm transaction on { props.device.label } device</H3>
                 <P isSmaller>Details are shown on display</P>
             </Header>

src/components/modals/index.js

@@ -96,11 +96,11 @@ const getDeviceContextModal = (props: Props) => {
         }
 
         case 'ButtonRequest_ProtectCall':
-            return <ConfirmAction />;
+            return <ConfirmAction device={modal.device} />;
 
         case 'ButtonRequest_Other':
         case 'ButtonRequest_ConfirmOutput':
-            return <ConfirmAction />;
+            return <ConfirmAction device={modal.device} />;
 
         case RECEIVE.REQUEST_UNVERIFIED:
             return (

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) => (
     <Wrapper>
         <Header>
-            <Icon icon={icons.T1} size={60} color={colors.TEXT_SECONDARY} />
+            <DeviceIcon device={props.device} size={60} color={colors.TEXT_SECONDARY} />
             <H3>Complete the action on { props.device.label } device</H3>
             <P isSmaller>If you enter a wrong passphrase, you will not unlock the desired hidden wallet.</P>
         </Header>

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',
     ],

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 {
                 </Item>
                 {this.showClone() && (
                     <Item onClick={() => this.onDeviceMenuClick('clone', this.props.device)}>
-                        <Icon
+                        <DeviceIcon device={this.props.device} size={25} color={colors.TEXT_SECONDARY} />
-                            icon={icons.T1}
-                            size={25}
-                            color={colors.TEXT_SECONDARY}
-                        />
                         <Label>Change wallet type</Label>
                     </Item>
                 )}
@@ -89,7 +86,7 @@ class MenuItems extends PureComponent {
                     <Item
                         onClick={() => this.onDeviceMenuClick('reload')}
                     >
-                        <Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
+                        <DeviceIcon device={this.props.device} size={25} color={colors.TEXT_SECONDARY} />
                         <Label>Renew session</Label>
                     </Item>
                 )}

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 ? (
                                 <React.Fragment>
-                                    <Icon
+                                    <DeviceIcon device={device} color={colors.WHITE} />
-                                        icon={ICONS.T1}
-                                        color={colors.WHITE}
-                                    />
                                     Check address on your Trezor
                                 </React.Fragment>
                             ) : null}

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 ? (
                                 <React.Fragment>
-                                    <Icon
+                                    <DeviceIcon device={device} color={colors.WHITE} />
-                                        icon={ICONS.T1}
-                                        color={colors.WHITE}
-                                    />
                                     Check address on your Trezor
                                 </React.Fragment>
                             ) : null}