diff --git a/app/images/tempo.png b/app/images/tempo.png new file mode 100644 index 000000000000..ae16a6117670 Binary files /dev/null and b/app/images/tempo.png differ diff --git a/app/images/tempo.svg b/app/images/tempo.svg new file mode 100644 index 000000000000..7de96c6a7a79 --- /dev/null +++ b/app/images/tempo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/shared/constants/network.ts b/shared/constants/network.ts index 5315195b7a69..6cc3556ee672 100644 --- a/shared/constants/network.ts +++ b/shared/constants/network.ts @@ -211,6 +211,7 @@ export const CHAIN_IDS = { MONAD: '0x8f', HYPE: '0x3e7', X_LAYER: '0xc4', + TEMPO_TESTNET: '0xa5bd', } as const; export const CHAINLIST_CHAIN_IDS_MAP = { @@ -652,6 +653,7 @@ export const XRPLEVM_TESTNET_NATIVE_TOKEN_IMAGE_URL = export const LENS_IMAGE_URL = './images/lens.png'; export const LENS_NATIVE_TOKEN_IMAGE_URL = './images/lens-native.svg'; export const PLUME_IMAGE_URL = './images/plume.png'; +export const TEMPO_TOKEN_IMAGE_URL = './images/tempo.svg'; export const PLUME_NATIVE_TOKEN_IMAGE_URL = './images/plume-native.svg'; export const MATCHAIN_IMAGE_URL = './images/matchain.svg'; export const FLOW_IMAGE_URL = './images/flow.svg'; @@ -1091,6 +1093,7 @@ export const CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP: Record = { [CHAIN_IDS.MEGAETH_MAINNET]: MEGAETH_MAINNET_IMAGE_URL, [CHAIN_IDS.NEAR]: NEAR_IMAGE_URL, [CHAIN_IDS.NEAR_TESTNET]: NEAR_IMAGE_URL, + [CHAIN_IDS.TEMPO_TESTNET]: TEMPO_TOKEN_IMAGE_URL, [CHAINLIST_CHAIN_IDS_MAP.ARBITRUM_NOVA]: ARBITRUM_NOVA_IMAGE_URL, [CHAINLIST_CHAIN_IDS_MAP.ASTAR]: ASTAR_IMAGE_URL, [CHAINLIST_CHAIN_IDS_MAP.BAHAMUT_MAINNET]: BAHAMUT_IMAGE_URL, diff --git a/ui/components/app/assets/hooks/useTokenDisplayInfo.tsx b/ui/components/app/assets/hooks/useTokenDisplayInfo.tsx index 19e55d296b8d..df6ebf1caea9 100644 --- a/ui/components/app/assets/hooks/useTokenDisplayInfo.tsx +++ b/ui/components/app/assets/hooks/useTokenDisplayInfo.tsx @@ -20,7 +20,8 @@ import { useMultichainSelector } from '../../../../hooks/useMultichainSelector'; import { useFormatters } from '../../../../hooks/useFormatters'; import { isEvmChainId } from '../../../../../shared/lib/asset-utils'; import { getInternalAccountBySelectedAccountGroupAndCaip } from '../../../../selectors/multichain-accounts/account-tree'; -import { TEST_CHAINS } from '../../../../../shared/constants/network'; +import { CHAIN_IDS, TEST_CHAINS } from '../../../../../shared/constants/network'; +import { hexToDecimal } from '../../../../../shared/modules/conversion.utils'; type UseTokenDisplayInfoProps = { token: TokenWithFiatAmount; @@ -106,13 +107,18 @@ export const useTokenDisplayInfo = ({ ]?.name) || token.symbol; - const tokenImage = + let tokenImage = tokenData?.iconUrl || (token.chainId && erc20TokensByChain?.[token.chainId]?.data?.[token.address.toLowerCase()] ?.iconUrl) || token.image; + // Temporary override for Tempo Testnet tokens until Tempo token assets are + // served from Metamask CDN + if (token.chainId === CHAIN_IDS.TEMPO_TESTNET && token.address) + tokenImage = `https://tempoxyz.github.io/tempo-apps/${hexToDecimal(token.chainId)}/icons/${token.address.toLowerCase()}.svg`; + return { title, tokenImage, diff --git a/ui/pages/confirmations/components/UI/asset/asset.test.tsx b/ui/pages/confirmations/components/UI/asset/asset.test.tsx index f5c1c331a98c..878da60c7fc2 100644 --- a/ui/pages/confirmations/components/UI/asset/asset.test.tsx +++ b/ui/pages/confirmations/components/UI/asset/asset.test.tsx @@ -4,6 +4,7 @@ import { BtcAccountType } from '@metamask/keyring-api'; import createMockStore from 'redux-mock-store'; import { renderWithProvider } from '../../../../../../test/lib/render-helpers-navigate'; +import { CHAIN_IDS } from '../../../../../../shared/constants/network'; import { useNftImageUrl } from '../../../hooks/useNftImageUrl'; import { AssetStandard } from '../../../types/send'; import { Asset } from './asset'; @@ -103,6 +104,21 @@ describe('TokenAsset', () => { expect(getByTestId('token-asset-undefined-TEST')).toBeInTheDocument(); expect(queryByRole('img', { name: 'Ethereum' })).not.toBeInTheDocument(); }); + + it('uses override image URL for Tempo Testnet tokens', () => { + const tempoTokenAsset = { + ...mockTokenAsset, + chainId: CHAIN_IDS.TEMPO_TESTNET, + address: '0x1234567890abcdef1234567890abcdef12345678', + }; + const { getByAltText } = render(); + + const image = getByAltText('TEST logo'); + expect(image).toHaveAttribute( + 'src', + 'https://tempoxyz.github.io/tempo-apps/42429/icons/0x1234567890abcdef1234567890abcdef12345678.svg', + ); + }); }); describe('NFTAsset', () => { diff --git a/ui/pages/confirmations/components/UI/asset/asset.tsx b/ui/pages/confirmations/components/UI/asset/asset.tsx index 1d770580e99d..6932356f6a94 100644 --- a/ui/pages/confirmations/components/UI/asset/asset.tsx +++ b/ui/pages/confirmations/components/UI/asset/asset.tsx @@ -26,6 +26,8 @@ import { useNftImageUrl } from '../../../hooks/useNftImageUrl'; import { accountTypeLabel } from '../../../constants/network'; import { useFormatters } from '../../../../../hooks/useFormatters'; import { AccountTypeLabel } from '../account-type-label'; +import { hexToDecimal } from '../../../../../../shared/modules/conversion.utils'; +import { CHAIN_IDS } from '../../../../../../shared/constants/network'; type AssetProps = { asset: AssetType; @@ -118,12 +120,16 @@ const NftAsset = ({ asset, onClick, isSelected }: AssetProps) => { const TokenAsset = ({ asset, onClick, isSelected }: AssetProps) => { const tokenData = asset; - const { chainId, image, name, balance, symbol = '', fiat } = tokenData; + const { chainId, address, image, name, balance, symbol = '', fiat } = tokenData; const { formatCurrencyWithMinThreshold, formatTokenQuantity } = useFormatters(); const typeLabel = accountTypeLabel[asset.accountType as KeyringAccountType]; + // Temporary override for Tempo Testnet tokens until Tempo token assets are + // served from Metamask CDN + const overrideImage = (chainId === CHAIN_IDS.TEMPO_TESTNET && address) ? `https://tempoxyz.github.io/tempo-apps/${hexToDecimal(chainId)}/icons/${address.toLowerCase()}.svg` : undefined; + return ( { >