fix(product-components): set the correct CoinLogo colors depending on…

… the color scheme

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

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import styled from 'styled-components';
 
-import { CoinLogoProps } from './CoinLogo';
+import { COIN_LOGO_TYPE, CoinLogoProps } from './CoinLogo';
 import { COINS } from './coins';
 import { CoinLogo as CoinLogoComponent } from '../../index';
 
@@ -19,9 +19,9 @@ const meta: Meta = {
 export default meta;
 
 export const CoinLogo: StoryObj<CoinLogoProps> = {
-    render: ({ symbol, size }) => (
+    render: ({ symbol, size, type }) => (
         <Center>
-            <CoinLogoComponent symbol={symbol} size={size} />
+            <CoinLogoComponent symbol={symbol} size={size} type={type} />
         </Center>
     ),
     args: {
@@ -37,5 +37,11 @@ export const CoinLogo: StoryObj<CoinLogoProps> = {
                 type: 'select',
             },
         },
+        type: {
+            options: COIN_LOGO_TYPE,
+            control: {
+                type: 'select',
+            },
+        },
     },
 };

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

@@ -9,14 +9,17 @@ import { borders } from '@trezor/theme';
 import { COINS, LegacyNetworkSymbol } from './coins';
 import { NETWORK_ICONS } from './networks';
 
+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`;
 
 export interface CoinLogoProps extends ImgHTMLAttributes<HTMLImageElement> {
     symbol: NetworkSymbol | LegacyNetworkSymbol;
-    type?: 'coin' | 'network' | 'badge';
+    type?: CoinLogoType;
     className?: string;
     size?: number;
     index?: number;
@@ -42,35 +45,51 @@ const SvgWrapper = styled.div<{ $size?: number }>`
         height: ${({ $size }) => getSize($size, 1, 3)};
         line-height: 0;
         border-radius: ${borders.radii.xxs};
-        border: 1px solid white;
-        background-color: white;
+        border-width: 1px;
+        border-style: solid;
+        border-color: ${({ theme }) => theme.backgroundTertiaryDefaultOnElevation0};
+        background-color: ${({ theme }) => theme.backgroundTertiaryDefaultOnElevation0};
 
-        @media (prefers-color-scheme: dark) {
-            border: 1px solid black;
-            background-color: black;
+        div {
+            line-height: 0;
+        }
+    }
+
+    svg {
+        .bg {
+            fill: ${({ theme }) => theme.logoBg};
+        }
+
+        .fg {
+            fill: ${({ theme }) => theme.logoFg};
         }
     }
 `;
 
 export const CoinLogo = ({
     symbol,
-    type = 'coin',
+    type = 'token',
     className,
     size = DEFAULT_SIZE,
     ...rest
 }: CoinLogoProps) => {
     let symbolSrc;
     let badge;
 
-    if (type === 'coin') {
+    if (type === 'token') {
         symbolSrc = COINS[symbol];
     } else if (type === 'network') {
         symbolSrc = NETWORK_ICONS[symbol as NetworkSymbol];
     } else {
         // TODO: should be changed, this is hacky way
-        const networkSymbol = getNetworkDisplaySymbol(
-            symbol as NetworkSymbol,
-        )?.toLowerCase() as NetworkSymbol;
+        let networkSymbol;
+        try {
+            networkSymbol = getNetworkDisplaySymbol(
+                symbol as NetworkSymbol,
+            ).toLowerCase() as NetworkSymbol;
+        } catch {
+            networkSymbol = symbol as NetworkSymbol;
+        }
 
         badge = networkSymbol !== symbol ? NETWORK_ICONS[symbol as NetworkSymbol] : null;
         symbolSrc = COINS[networkSymbol !== symbol ? networkSymbol : symbol];

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

@@ -45,7 +45,9 @@ export const AssetItem = ({
     'data-testid': dataTestId,
 }: AssetItemProps) => {
     const getCoinLogo = () =>
-        isCoinSymbol(symbol) ? <CoinLogo size={24} symbol={symbol} type="badge" /> : null;
+        isCoinSymbol(symbol) ? (
+            <CoinLogo size={24} symbol={symbol} type="tokenWithNetwork" />
+        ) : null;
     const displaySymbol = getDisplaySymbol(ticker, contractAddress);
 
     return (

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} type="coin" />
+                                <CoinLogo size={20} symbol={network.symbol} type="token" />
                             )}
                             {network.name}
                         </Row>