use CoinLogo from tuc

src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js

@@ -2,8 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { H4, P, Button, Link, colors } from 'trezor-ui-components';
-import CoinLogo from 'components/images/CoinLogo';
+import { CoinLogo, H4, P, Button, Link, colors } from 'trezor-ui-components';
 
 import { FormattedMessage } from 'react-intl';
 import l10nMessages from './index.messages';

src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import CoinLogo from 'components/images/CoinLogo';
 import { FONT_SIZE, LEFT_NAVIGATION_ROW } from 'config/variables';
-import { Icon, colors } from 'trezor-ui-components';
+import { CoinLogo, Icon, colors } from 'trezor-ui-components';
 import Row from '../Row';
 
 const CoinNameWrapper = styled.div`
@@ -12,6 +11,13 @@ const CoinNameWrapper = styled.div`
     justify-content: space-between;
 `;
 
+const CoinLogoWrapper = styled.div`
+    padding-right: 20px;
+    width: 40px;
+    display: flex;
+    justify-content: center;
+`;
+
 const RowCoinWrapper = styled.div`
     padding: ${LEFT_NAVIGATION_ROW.PADDING};
     padding-top: 0;
@@ -47,7 +53,9 @@ const RowCoin = ({ network, iconLeft, iconRight }) => (
                     </IconWrapper>
                 )}
                 <CoinNameWrapper>
-                    <CoinLogo network={network.shortcut} />
+                    <CoinLogoWrapper>
+                        <CoinLogo height="23" network={network.shortcut} />
+                    </CoinLogoWrapper>
                     <p>{network.name}</p>
                 </CoinNameWrapper>
             </Left>

src/views/Wallet/views/Account/Summary/ethereum/index.js

@@ -5,9 +5,17 @@ import BigNumber from 'bignumber.js';
 import * as stateUtils from 'reducers/utils';
 import { FormattedMessage } from 'react-intl';
 
-import { H5, Icon, Link, AsyncSelect, Tooltip, colors, icons as ICONS } from 'trezor-ui-components';
+import {
+    H5,
+    CoinLogo,
+    Icon,
+    Link,
+    AsyncSelect,
+    Tooltip,
+    colors,
+    icons as ICONS,
+} from 'trezor-ui-components';
 import Content from 'views/Wallet/components/Content';
-import CoinLogo from 'components/images/CoinLogo';
 import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
 import l10nCommonMessages from 'views/common.messages';
 import l10nSummaryMessages from '../common.messages';
@@ -56,6 +64,10 @@ const AsyncSelectWrapper = styled.div`
 
 const AddedTokensWrapper = styled.div``;
 
+const StyledCoinLogo = styled(CoinLogo)`
+    margin-right: 10px;
+`;
+
 const AccountSummary = (props: Props) => {
     const device = props.wallet.selectedDevice;
     const { account, network, tokens, pending, shouldRender } = props.selectedAccount;
@@ -74,7 +86,7 @@ const AccountSummary = (props: Props) => {
             <React.Fragment>
                 <AccountHeading>
                     <AccountName>
-                        <CoinLogo network={account.network} />
+                        <StyledCoinLogo height={23} network={account.network} />
                         <AccountTitle>
                             <FormattedMessage
                                 {...l10nCommonMessages.TR_ACCOUNT_HASH}

src/views/Wallet/views/Account/Summary/ripple/index.js

@@ -5,8 +5,7 @@ import BigNumber from 'bignumber.js';
 import { FormattedMessage } from 'react-intl';
 import * as stateUtils from 'reducers/utils';
 
-import { H5, Link, colors } from 'trezor-ui-components';
-import CoinLogo from 'components/images/CoinLogo';
+import { CoinLogo, H5, Link, colors } from 'trezor-ui-components';
 import Content from 'views/Wallet/components/Content';
 import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
 
@@ -41,6 +40,10 @@ const AccountTitle = styled.div`
     color: ${colors.WALLET_TITLE};
 `;
 
+const StyledCoinLogo = styled(CoinLogo)`
+    margin-right: 10px;
+`;
+
 const AccountSummary = (props: Props) => {
     const device = props.wallet.selectedDevice;
     const { account, network, pending, shouldRender } = props.selectedAccount;
@@ -63,7 +66,7 @@ const AccountSummary = (props: Props) => {
             <React.Fragment>
                 <AccountHeading>
                     <AccountName>
-                        <CoinLogo network={account.network} />
+                        <StyledCoinLogo height={23} network={account.network} />
                         <AccountTitle>
                             <FormattedMessage
                                 {...l10nCommonMessages.TR_ACCOUNT_HASH}