feat(trading): update l2 icons

trezor · Feb 4, 2025 · 8a6e468 · 8a6e468
1 parent 683cc27
commit 8a6e468
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 16 deletions.
diff --git a/packages/components/src/components/AssetLogo/AssetLogo.tsx b/packages/components/src/components/AssetLogo/AssetLogo.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import styled from 'styled-components';
 
+import { getNetwork, getNetworkByCoingeckoId, isNetworkSymbol } from '@suite-common/wallet-config';
 import { getAssetLogoUrl } from '@trezor/asset-utils';
 import { Elevation, borders, mapElevationToBackground, mapElevationToBorder } from '@trezor/theme';
 
@@ -59,6 +60,29 @@ const ElevatedLogo = (props: LogoProps) => {
     return <Logo {...props} $elevation={elevation} />;
 };
 
+export const getCoingeckoIdAndContractAddressIncludesNativeTokens = (
+    coingeckoId: string,
+    contractAddress: string | undefined,
+) => {
+    const mainNetworkSymbol = getNetworkByCoingeckoId(coingeckoId)?.displaySymbol.toLowerCase();
+
+    if (
+        contractAddress === '0x0000000000000000000000000000000000000000' &&
+        mainNetworkSymbol &&
+        isNetworkSymbol(mainNetworkSymbol)
+    ) {
+        return {
+            coingeckoId: getNetwork(mainNetworkSymbol).tradeCryptoId ?? coingeckoId,
+            contractAddress: undefined,
+        };
+    }
+
+    return {
+        coingeckoId,
+        contractAddress,
+    };
+};
+
 export const AssetLogo = ({
     size,
     coingeckoId,
@@ -71,9 +95,18 @@ export const AssetLogo = ({
 }: AssetLogoProps) => {
     const [isLoading, setIsLoading] = useState(true);
     const [isPlaceholder, setIsPlaceholder] = useState(!shouldTryToFetch);
-
-    const logoUrl = getAssetLogoUrl({ coingeckoId, contractAddress });
-    const logoUrl2x = getAssetLogoUrl({ coingeckoId, contractAddress, quality: '@2x' });
+    const { coingeckoId: coingeckoIdLogo, contractAddress: contractAddressLogo } =
+        getCoingeckoIdAndContractAddressIncludesNativeTokens(coingeckoId, contractAddress);
+
+    const logoUrl = getAssetLogoUrl({
+        coingeckoId: coingeckoIdLogo,
+        contractAddress: contractAddressLogo,
+    });
+    const logoUrl2x = getAssetLogoUrl({
+        coingeckoId: coingeckoIdLogo,
+        contractAddress: contractAddressLogo,
+        quality: '@2x',
+    });
 
     const frameProps = pickAndPrepareFrameProps(rest, allowedAssetLogoFrameProps);
 

diff --git a/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx b/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx
@@ -47,7 +47,6 @@ export const AssetItem = ({
     const getCoinLogo = () =>
         isCoinSymbol(symbol) ? <CoinLogo size={24} symbol={symbol} /> : null;
     const displaySymbol = getDisplaySymbol(ticker, contractAddress);
-    const nativeContractAddress = '0x0000000000000000000000000000000000000000';
 
     return (
         <ClickableContainer
@@ -62,7 +61,7 @@ export const AssetItem = ({
             }
         >
             <Row data-testid={dataTestId} gap={spacings.sm}>
-                {coingeckoId && !coingeckoId.includes(nativeContractAddress) ? (
+                {coingeckoId ? (
                     <AssetLogo
                         size={24}
                         coingeckoId={coingeckoId}

diff --git a/packages/suite/src/views/wallet/trading/common/TradingCoinLogo.tsx b/packages/suite/src/views/wallet/trading/common/TradingCoinLogo.tsx
@@ -1,8 +1,7 @@
 import styled from 'styled-components';
 
-import { cryptoIdToNetwork, isCryptoIdForNativeToken, parseCryptoId } from '@suite-common/trading';
+import { parseCryptoId } from '@suite-common/trading';
 import { AssetLogo } from '@trezor/components';
-import { CoinLogo } from '@trezor/product-components';
 
 import { TradingCoinLogoProps } from 'src/types/trading/trading';
 
@@ -15,11 +14,6 @@ export const TradingCoinLogo = ({
     className,
 }: TradingCoinLogoProps) => {
     const { networkId, contractAddress } = parseCryptoId(cryptoId);
-    const network = cryptoIdToNetwork(cryptoId);
-
-    if (isCryptoIdForNativeToken(cryptoId) && network) {
-        return <CoinLogo size={size} symbol={network.symbol} />;
-    }
 
     return (
         <Wrapper className={className}>

diff --git a/...views/wallet/trading/common/TradingForm/TradingFormInput/TradingFormInputCryptoSelect.tsx b/...views/wallet/trading/common/TradingForm/TradingFormInput/TradingFormInputCryptoSelect.tsx
@@ -122,16 +122,13 @@ export const TradingFormInputCryptoSelect = <
                     if (!network) return null;
 
                     const { symbol } = network;
-                    const isNativeToken = isCryptoIdForNativeToken(option.value);
-                    // for native tokens (eg. base) to use tradeCryptoId
-                    const coingeckoId = isNativeToken ? network.tradeCryptoId : option.coingeckoId;
 
                     return {
                         ...option,
                         ticker: option.ticker || option.label,
                         symbol,
                         contractAddress: option.contractAddress ?? null,
-                        coingeckoId,
+                        coingeckoId: option.coingeckoId,
                     };
                 })
                 .filter(option => option !== null),