use TrezorImage from tuc

src/components/DeviceHeader/index.js

@@ -2,9 +2,8 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
-import { getStatusColor, getStatusName, getStatus, getVersion } from 'utils/device';
-import TrezorImage from 'components/images/TrezorImage';
-import { colors } from 'trezor-ui-components';
+import { getStatusColor, getStatusName, getStatus } from 'utils/device';
+import { TrezorImage, colors } from 'trezor-ui-components';
 
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
@@ -92,6 +91,10 @@ const Dot = styled.div`
     height: 10px;
 `;
 
+const StyledTrezorImage = styled(TrezorImage)`
+    width: ${props => (props.model === 2 ? '17px' : '13px')};
+`;
+
 const DeviceHeader = ({
     isOpen,
     icon,
@@ -117,7 +120,9 @@ const DeviceHeader = ({
         >
             <ImageWrapper>
                 <Dot color={getStatusColor(status)} />
-                <TrezorImage model={getVersion(device)} />
+                <StyledTrezorImage
+                    model={(device.features && device.features.major_version) || 1}
+                />
             </ImageWrapper>
             <LabelWrapper>
                 <Name>{device.instanceLabel}</Name>

src/components/images/CoinLogo/index.js

@@ -1,42 +0,0 @@
-import React, { PureComponent } from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-const Wrapper = styled.div`
-    padding-right: 20px;
-    width: 40px;
-    display: flex;
-    justify-content: center;
-`;
-
-const Logo = styled.img`
-    height: 23px;
-    display: block;
-`;
-
-class CoinLogo extends PureComponent {
-    render() {
-        const { network, className, standalone } = this.props;
-
-        const logo = (
-            <Logo
-                className={className}
-                src={require(`images/coins/${network}.png`)} // eslint-disable-line
-            />
-        );
-
-        if (standalone) {
-            return logo;
-        }
-
-        return <Wrapper className={className}>{logo}</Wrapper>;
-    }
-}
-
-CoinLogo.propTypes = {
-    network: PropTypes.string,
-    className: PropTypes.string,
-    standalone: PropTypes.bool,
-};
-
-export default CoinLogo;

src/components/images/TrezorImage/index.js

@@ -1,32 +0,0 @@
-/* @flow */
-
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-type Props = {
-    model: string,
-};
-
-const Wrapper = styled.div``;
-
-const Img = styled.img`
-    width: ${props => (props.model === 'T' ? '17px' : '13px')};
-`;
-
-const TrezorImage = ({ model }: Props) => {
-    const imageName = model === 'One' ? 1 : model;
-    // $FlowIssue: `require` must be a string literal.
-    const src = require(`./images/trezor-${imageName}.png`); // eslint-disable-line
-    return (
-        <Wrapper>
-            <Img model={model} src={src} />
-        </Wrapper>
-    );
-};
-
-TrezorImage.propTypes = {
-    model: PropTypes.string,
-};
-
-export default TrezorImage;