diff --git a/packages/components/src/components/AssetLogo/AssetLogo.tsx b/packages/components/src/components/AssetLogo/AssetLogo.tsx index 3aff9a9642f..4e730981440 100644 --- 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 ; }; +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 index 5c2afecef16..b03abaafa16 100644 --- 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) ? : null; const displaySymbol = getDisplaySymbol(ticker, contractAddress); - const nativeContractAddress = '0x0000000000000000000000000000000000000000'; return ( - {coingeckoId && !coingeckoId.includes(nativeContractAddress) ? ( + {coingeckoId ? ( { const { networkId, contractAddress } = parseCryptoId(cryptoId); - const network = cryptoIdToNetwork(cryptoId); - - if (isCryptoIdForNativeToken(cryptoId) && network) { - return ; - } return ( diff --git a/packages/suite/src/views/wallet/trading/common/TradingForm/TradingFormInput/TradingFormInputCryptoSelect.tsx b/packages/suite/src/views/wallet/trading/common/TradingForm/TradingFormInput/TradingFormInputCryptoSelect.tsx index 1711ff51333..021f9bf59dc 100644 --- a/packages/suite/src/views/wallet/trading/common/TradingForm/TradingFormInput/TradingFormInputCryptoSelect.tsx +++ b/packages/suite/src/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),