feat(suite): update network icons

packages/product-components/src/components/CoinLogo/CoinLogo.tsx

@@ -3,38 +3,101 @@ import { ReactSVG } from 'react-svg';
 
 import styled from 'styled-components';
 
-import { NetworkSymbol } from '@suite-common/wallet-config';
+import { NetworkSymbol, getNetworkDisplaySymbol } from '@suite-common/wallet-config';
+import { borders } from '@trezor/theme';
 
 import { COINS, LegacyNetworkSymbol } from './coins';
+import { NETWORK_ICONS } from './networks';
+
+const DEFAULT_SIZE = 32;
+
+const getSize = (size?: number, border = 0, divisor = 1) =>
+    `${(size ?? DEFAULT_SIZE) / divisor + border * 2}px`;
 
 export interface CoinLogoProps extends ImgHTMLAttributes<HTMLImageElement> {
     symbol: NetworkSymbol | LegacyNetworkSymbol;
+    type?: 'coin' | 'network' | 'badge';
     className?: string;
     size?: number;
     index?: number;
 }
 
 const SvgWrapper = styled.div<Omit<CoinLogoProps, 'symbol'>>`
+    position: relative;
     display: inline-block;
-    width: ${({ size }) => size}px;
-    height: ${({ size }) => size}px;
+    width: ${({ size }) => getSize(size)};
+    height: ${({ size }) => getSize(size)};
+
+    .coin-symbol {
+        width: ${({ size }) => getSize(size)};
+        height: ${({ size }) => getSize(size)};
+        line-height: ${({ size }) => getSize(size)};
+    }
 
-    div {
-        width: ${({ size }) => size}px;
-        height: ${({ size }) => size}px;
-        line-height: ${({ size }) => size}px;
+    .network-symbol {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: ${({ size }) => getSize(size, 1, 3)};
+        height: ${({ size }) => getSize(size, 1, 3)};
+        line-height: 0;
+        border-radius: ${borders.radii.xxs};
+        border: 1px solid white;
+        background-color: white;
+
+        @media (prefers-color-scheme: dark) {
+            border: 1px solid black;
+            background-color: black;
+        }
     }
 `;
 
-export const CoinLogo = ({ symbol, className, size = 32, ...rest }: CoinLogoProps) => (
-    <SvgWrapper className={className} size={size} {...rest}>
-        <ReactSVG
-            src={COINS[symbol]}
-            beforeInjection={svg => {
-                svg.setAttribute('width', `${size}px`);
-                svg.setAttribute('height', `${size}px`);
-            }}
-            loading={() => <span className="loading" />}
-        />
-    </SvgWrapper>
-);
+export const CoinLogo = ({
+    symbol,
+    type = 'coin',
+    className,
+    size = DEFAULT_SIZE,
+    ...rest
+}: CoinLogoProps) => {
+    const networkSymbol = getNetworkDisplaySymbol(
+        symbol as NetworkSymbol,
+    ).toLowerCase() as NetworkSymbol;
+
+    const symbolSrc =
+        // eslint-disable-next-line no-nested-ternary
+        type === 'coin'
+            ? COINS[symbol]
+            : type === 'network'
+              ? NETWORK_ICONS[symbol as NetworkSymbol]
+              : COINS[networkSymbol != symbol ? networkSymbol : symbol];
+
+    const badge =
+        type !== 'coin' && type !== 'network' && networkSymbol != symbol
+            ? NETWORK_ICONS[symbol as NetworkSymbol]
+            : null;
+
+    return (
+        <SvgWrapper className={className} size={size} {...rest}>
+            <ReactSVG
+                src={symbolSrc ?? COINS[symbol]}
+                beforeInjection={svg => {
+                    svg.setAttribute('width', getSize(size));
+                    svg.setAttribute('height', getSize(size));
+                }}
+                loading={() => <span className="loading" />}
+                className="coin-symbol"
+            />
+            {badge && symbolSrc != null && (
+                <ReactSVG
+                    src={badge}
+                    beforeInjection={svg => {
+                        svg.setAttribute('width', getSize(size, 0, 3));
+                        svg.setAttribute('height', getSize(size, 0, 3));
+                    }}
+                    loading={() => <span className="loading" />}
+                    className="network-symbol"
+                />
+            )}
+        </SvgWrapper>
+    );
+};

packages/product-components/src/components/CoinLogo/networks.ts

@@ -0,0 +1,26 @@
+import { NetworkSymbol } from '@suite-common/wallet-config';
+
+export const NETWORK_ICONS: Record<NetworkSymbol, string> = {
+    ada: require('../../images/networks/ada.svg'),
+    arb: require('../../images/networks/arb.svg'),
+    base: require('../../images/networks/base.svg'),
+    bch: require('../../images/networks/bch.svg'),
+    bsc: require('../../images/networks/bsc.svg'),
+    btc: require('../../images/networks/btc.svg'),
+    doge: require('../../images/networks/doge.svg'),
+    dsol: require('../../images/networks/dsol.svg'),
+    etc: require('../../images/networks/etc.svg'),
+    eth: require('../../images/networks/eth.svg'),
+    ltc: require('../../images/networks/ltc.svg'),
+    op: require('../../images/networks/op.svg'),
+    pol: require('../../images/networks/pol.svg'),
+    regtest: require('../../images/networks/btc_test.svg'),
+    sol: require('../../images/networks/sol.svg'),
+    tada: require('../../images/networks/tada.svg'),
+    test: require('../../images/networks/btc_test.svg'),
+    thol: require('../../images/networks/thol.svg'),
+    tsep: require('../../images/networks/tsep.svg'),
+    txrp: require('../../images/networks/txrp.svg'),
+    xrp: require('../../images/networks/xrp.svg'),
+    zec: require('../../images/networks/zec.svg'),
+};

packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx

@@ -97,7 +97,7 @@ export const NetworkTabs = ({
                     >
                         <Row gap={spacings.xxs}>
                             {network.tradeCryptoId && (
-                                <CoinLogo size={20} symbol={network.symbol} />
+                                <CoinLogo size={20} symbol={network.symbol} type="coin" />
                             )}
                             {network.name}
                         </Row>