feat: add TopAssets & NetworkIcon components

 - move AssetLogo from `components` to `product-components`
- extract `NetworkIcon` from  `CoinLogo`
- add `TopAssets` components
     - if no `contractAddress` and `coingeckoId`, then render `CoinLogo`, else render `AssetLogo`

Author: cermakjiri

packages/components/.storybook/main.js

@@ -49,6 +49,12 @@ module.exports = {
             ],
         });
 
+        // Add polyfill for Node.js 'stream' module (required by jws)
+        config.resolve.fallback = {
+            ...config.resolve.fallback,
+            stream: require.resolve('stream-browserify'),
+        };
+
         // NOTE: remove the previous loaders from handling the svgs
         const imageRule = config.module.rules.find(rule => rule?.['test']?.test('.svg'));
         if (imageRule) {

packages/components/package.json

@@ -58,6 +58,7 @@
         "babel-loader": "^10.0.0",
         "postcss-styled-syntax": "^0.7.1",
         "storybook": "^9.0.16",
+        "stream-browserify": "^3.0.0",
         "stylelint": "^16.14.1",
         "stylelint-config-standard": "^38.0.0",
         "typescript-styled-plugin": "^0.18.3"

packages/product-components/src/components/AssetLogo/AssetLogo.stories.tsx

@@ -24,15 +24,26 @@ export const AssetLogo: StoryObj<AssetLogoProps> = {
         contractAddress: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
         shouldTryToFetch: true,
         placeholder: 'USDC',
+        showNetworkIcon: false,
         ...getFramePropsStory(allowedAssetLogoFrameProps).args,
     },
     argTypes: {
+        ...getFramePropsStory(allowedAssetLogoFrameProps).argTypes,
         size: {
             options: allowedAssetLogoSizes,
             control: {
                 type: 'select',
             },
         },
-        ...getFramePropsStory(allowedAssetLogoFrameProps).argTypes,
+        showNetworkIcon: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        shouldTryToFetch: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
 };

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

@@ -3,25 +3,29 @@ import { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import {
+    NetworkSymbol,
     type NetworkSymbolExtended,
     getNetwork,
     getNetworkByCoingeckoId,
+    getNetworkFeatures,
     isNetworkSymbol,
 } from '@suite-common/wallet-config';
 import { getAssetLogoContractAddresses } from '@suite-common/wallet-utils';
 import { getAssetLogoUrl } from '@trezor/asset-utils';
 import {
     ElevationUp,
-    type FrameProps,
-    type FramePropsKeys,
-    type TransientProps,
+    FrameProps,
+    FramePropsKeys,
+    TransientProps,
     pickAndPrepareFrameProps,
     useElevation,
     withFrameProps,
 } from '@trezor/components';
 import { Elevation, borders, mapElevationToBackground, mapElevationToBorder } from '@trezor/theme';
 
 import { AssetInitials } from './AssetInitials';
+import { LegacyNetworkSymbol, isNetworkSymbolWithIcon } from '../../constants/networks';
+import { NetworkIcon } from '../NetworkIcon/NetworkIcon';
 
 export const allowedAssetLogoSizes = [20, 24, 32, 40] as const;
 type AssetLogoSize = (typeof allowedAssetLogoSizes)[number];
@@ -38,6 +42,8 @@ export type AssetLogoProps = AllowedFrameProps & {
     placeholderWithTooltip?: boolean;
     placeholder: string;
     'data-testid'?: string;
+    showNetworkIcon?: boolean;
+    className?: string;
 };
 
 type LogoCandidate = { address: string; src: string; srcSet: string };
@@ -46,6 +52,7 @@ const Container = styled.div<TransientProps<AllowedFrameProps> & { $size: number
     ${({ $size }) => `
         width: ${$size}px;
         height: ${$size}px;
+        position: relative;
     `}
     ${withFrameProps}
 `;
@@ -58,6 +65,17 @@ const Logo = styled.img<{ $size: number; $elevation: Elevation }>`
     background-color: ${mapElevationToBackground};
 `;
 
+const StyledNetworkIcon = styled(NetworkIcon)`
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    line-height: 0;
+
+    div {
+        line-height: 0;
+    }
+`;
+
 interface LogoProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     $size: number;
 }
@@ -78,6 +96,19 @@ const makeCacheKey = (coingeckoId: string, addressesKey: string) =>
 
 const makeAddressKey = (coingeckoId: string, address: string) => `${coingeckoId}::${address}`;
 
+export function shouldShowNetworkIcon(
+    networkSymbol?: NetworkSymbolExtended,
+    contractAddress?: string | null,
+) {
+    return (
+        networkSymbol &&
+        isNetworkSymbolWithIcon(networkSymbol) &&
+        isNetworkSymbol(networkSymbol) &&
+        Boolean(contractAddress) &&
+        getNetworkFeatures(networkSymbol).includes('tokens')
+    );
+}
+
 export const getCoingeckoIdAndContractAddressIncludesNativeTokens = (
     coingeckoId: string,
     contractAddress: string[] | undefined,
@@ -106,11 +137,13 @@ export const AssetLogo = ({
     size,
     coingeckoId,
     symbol,
-    contractAddress,
+    contractAddress = null,
     shouldTryToFetch = true,
     placeholder,
     placeholderWithTooltip = true,
+    showNetworkIcon = false,
     'data-testid': dataTest,
+    className,
     ...rest
 }: AssetLogoProps) => {
     const contractAddressArray = useMemo(
@@ -219,7 +252,7 @@ export const AssetLogo = ({
     };
 
     return (
-        <Container $size={size} {...frameProps}>
+        <Container $size={size} {...frameProps} className={className}>
             {showPlaceholder && (
                 <AssetInitials size={size} withTooltip={placeholderWithTooltip}>
                     {placeholder}
@@ -238,6 +271,12 @@ export const AssetLogo = ({
                         onLoad={handleOnLoad}
                         onError={handleLoadError}
                     />
+                    {showNetworkIcon && (
+                        <StyledNetworkIcon
+                            networkSymbol={symbol as NetworkSymbol | LegacyNetworkSymbol}
+                            size={size * 0.375}
+                        />
+                    )}
                 </ElevationUp>
             )}
         </Container>

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

@@ -1,9 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import styled from 'styled-components';
 
-import { COIN_LOGO_TYPE, CoinLogoProps } from './CoinLogo';
-import { COINS } from './coins';
-import { CoinLogo as CoinLogoComponent } from '../../index';
+import { COIN_LOGO_TYPE, CoinLogo as CoinLogoComponent, CoinLogoProps } from './CoinLogo';
+import { COINS } from '../../constants/coins';
 
 const Center = styled.div`
     display: flex;

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

@@ -5,17 +5,19 @@ import styled from 'styled-components';
 
 import { NetworkSymbol, getNetworkOptional } from '@suite-common/wallet-config';
 import { borders } from '@trezor/theme';
+import { roundTo } from '@trezor/utils';
 
-import { COINS, LegacyNetworkSymbol } from './coins';
-import { NETWORK_ICONS } from './networks';
+import { COINS, LegacyNetworkSymbol } from '../../constants/coins';
+import { NETWORK_ICONS } from '../../constants/networks';
+import { NetworkIcon } from '../NetworkIcon/NetworkIcon';
 
 export const COIN_LOGO_TYPE = ['token', 'network', 'tokenWithNetwork'] as const;
 export type CoinLogoType = (typeof COIN_LOGO_TYPE)[number];
 
 const DEFAULT_SIZE = 32;
 
-const getSize = (size?: number, border = 0, divisor = 1) =>
-    `${(size ?? DEFAULT_SIZE) / divisor + border * 2}px`;
+const getSize = (size: number = DEFAULT_SIZE, border = 0, divisor = 1) =>
+    `${roundTo(size / divisor + border * 2, 2)}px`;
 
 export interface CoinLogoProps extends ImgHTMLAttributes<HTMLImageElement> {
     symbol: NetworkSymbol | LegacyNetworkSymbol;
@@ -98,16 +100,7 @@ export const CoinLogo = ({
                 }}
                 loading={() => <span className="loading" />}
             />
-            {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" />}
-                />
-            )}
+            {badge && <NetworkIcon networkSymbol={symbol} size={roundTo(size / 3, 2)} />}
         </SvgWrapper>
     );
 };

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

@@ -4,9 +4,9 @@ import styled from 'styled-components';
 import { networksCollection } from '@suite-common/wallet-config';
 import { StoryColumn } from '@trezor/components';
 
-import { COINS, isCoinSymbol } from './coins';
-import { NETWORK_ICONS, isNetworkSymbol } from './networks';
-import { CoinLogo } from '../../index';
+import { CoinLogo } from './CoinLogo';
+import { COINS, isCoinSymbol } from '../../constants/coins';
+import { NETWORK_ICONS, isNetworkSymbolWithIcon } from '../../constants/networks';
 
 const Heading = styled.h2`
     margin-bottom: 2px;
@@ -67,7 +67,7 @@ export const All: StoryObj = {
                     {Object.keys(NETWORK_ICONS).map(network => (
                         <Icon key={network}>
                             <CoinName>{network}</CoinName>
-                            {isNetworkSymbol(network) && (
+                            {isNetworkSymbolWithIcon(network) && (
                                 <CoinLogo
                                     symbol={network}
                                     data-testid={`network-${network}`}