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 (
{
>