arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-02-05 12:51:44 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
Fix/correct device icon
This commit is contained in:
Vladimir Volek 2019-01-28 13:51:29 +01:00 committed by GitHub
commit b85401d14f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 104 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/images/DeviceIcon/index.js Normal file
View File

@ -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;

18
src/components/modals/confirm/Action/index.js
View File

@ -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) => (
<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;

5
src/components/modals/confirm/SignTx/index.js
View File

@ -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>

4
src/components/modals/index.js
View File

@ -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 (

5
src/components/modals/passphrase/Type/index.js
View File

@ -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>

3
src/config/icons.js
View File

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

9
src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
View File

@ -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
icon={icons.T1}
size={25}
color={colors.TEXT_SECONDARY}
/>
<DeviceIcon device={this.props.device} 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>
)}

6
src/views/Wallet/views/Account/Receive/ethereum/index.js
View File

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

6
src/views/Wallet/views/Account/Receive/ripple/index.js
View File

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