diff --git a/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx b/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx index e41d49145195..4b11adf0e17b 100644 --- a/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx +++ b/ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx @@ -64,7 +64,7 @@ describe('AssetPill', () => { }); const asset: NativeAssetIdentifier = { - chainId: CHAIN_ID_MOCK, + chainId, standard: TokenStandard.none, }; diff --git a/ui/pages/confirmations/components/simulation-details/asset-pill.tsx b/ui/pages/confirmations/components/simulation-details/asset-pill.tsx index bae092aaf399..99bd2b3af8ef 100644 --- a/ui/pages/confirmations/components/simulation-details/asset-pill.tsx +++ b/ui/pages/confirmations/components/simulation-details/asset-pill.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { NameType } from '@metamask/name-controller'; import { useSelector } from 'react-redux'; +import { Hex } from '@metamask/utils'; import { AvatarNetwork, AvatarNetworkSize, @@ -18,13 +19,20 @@ import { } from '../../../../helpers/constants/design-system'; import Name from '../../../../components/app/name'; import { TokenStandard } from '../../../../../shared/constants/transaction'; -import { getNativeCurrencyImage } from '../../../../selectors'; -import { getNativeCurrency } from '../../../../ducks/metamask/metamask'; +import { getNetworkConfigurationsByChainId } from '../../../../selectors'; +import { CHAIN_ID_TOKEN_IMAGE_MAP } from '../../../../../shared/constants/network'; import { AssetIdentifier } from './types'; -const NativeAssetPill: React.FC = () => { - const ticker = useSelector(getNativeCurrency); - const imgSrc = useSelector(getNativeCurrencyImage); +const NativeAssetPill: React.FC<{ chainId: Hex }> = ({ chainId }) => { + const imgSrc = + CHAIN_ID_TOKEN_IMAGE_MAP[chainId as keyof typeof CHAIN_ID_TOKEN_IMAGE_MAP]; + + const networkConfigurationsByChainId = useSelector( + getNetworkConfigurationsByChainId, + ); + + const network = networkConfigurationsByChainId?.[chainId]; + const { nativeCurrency } = network; return ( { }} > - {ticker} + {nativeCurrency} ); @@ -60,6 +68,8 @@ const NativeAssetPill: React.FC = () => { export const AssetPill: React.FC<{ asset: AssetIdentifier; }> = ({ asset }) => { + const { chainId } = asset; + return ( {asset.standard === TokenStandard.none ? ( - + ) : ( )} diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx index 42596e505311..0d1d5cd6c6d5 100644 --- a/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx +++ b/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx @@ -19,7 +19,7 @@ const DUMMY_BALANCE_CHANGE = { newBalance: '0xIGNORED' as Hex, }; -const CHAIN_ID_MOCK = '0x1'; +const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET; const ERC20_TOKEN_1_MOCK = '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599'; // WBTC const ERC20_TOKEN_2_MOCK = '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'; // USDC const ERC721_TOKEN_MOCK = '0x06012c8cf97bead5deae237070f9587f8e7a266d'; // CryptoKitties @@ -28,36 +28,44 @@ const ERC1155_TOKEN_MOCK = '0x60e4d786628fea6478f785a6d7e704777c86a7c6'; // MAYC const storeMock = configureStore({ metamask: { ...mockState.metamask, + ...mockNetworkState( + { chainId: CHAIN_IDS.MAINNET }, + { chainId: CHAIN_IDS.POLYGON }, + { chainId: CHAIN_IDS.ARBITRUM }, + ), preferences: { ...mockState.metamask.preferences, showNativeTokenAsMainBalance: false, }, - ...mockNetworkState({ chainId: CHAIN_ID_MOCK }), useTokenDetection: true, - tokenList: { - [ERC20_TOKEN_1_MOCK]: { - address: ERC20_TOKEN_1_MOCK, - symbol: 'WBTC', - name: 'Wrapped Bitcoin', - iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC20_TOKEN_1_MOCK}.png`, - }, - [ERC20_TOKEN_2_MOCK]: { - address: ERC20_TOKEN_2_MOCK, - symbol: 'USDC', - name: 'USD Coin', - iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC20_TOKEN_2_MOCK}.png`, - }, - [ERC721_TOKEN_MOCK]: { - address: ERC721_TOKEN_MOCK, - symbol: 'CK', - name: 'CryptoKitties', - iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC721_TOKEN_MOCK}.png`, - }, - [ERC1155_TOKEN_MOCK]: { - address: ERC1155_TOKEN_MOCK, - symbol: 'MAYC', - name: 'Mutant Ape Yacht Club', - iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC1155_TOKEN_MOCK}.png `, + tokensChainsCache: { + [CHAIN_ID_MOCK]: { + data: { + [ERC20_TOKEN_1_MOCK]: { + address: ERC20_TOKEN_1_MOCK, + symbol: 'WBTC', + name: 'Wrapped Bitcoin', + iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC20_TOKEN_1_MOCK}.png`, + }, + [ERC20_TOKEN_2_MOCK]: { + address: ERC20_TOKEN_2_MOCK, + symbol: 'USDC', + name: 'USD Coin', + iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC20_TOKEN_2_MOCK}.png`, + }, + [ERC721_TOKEN_MOCK]: { + address: ERC721_TOKEN_MOCK, + symbol: 'CK', + name: 'CryptoKitties', + iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC721_TOKEN_MOCK}.png`, + }, + [ERC1155_TOKEN_MOCK]: { + address: ERC1155_TOKEN_MOCK, + symbol: 'MAYC', + name: 'Mutant Ape Yacht Club', + iconUrl: `https://static.cx.metamask.io/api/v1/tokenIcons/1/${ERC1155_TOKEN_MOCK}.png `, + }, + }, }, }, names: { @@ -137,6 +145,7 @@ export const MultipleTokens: Story = { export const SendSmallAmount: Story = { args: { transaction: createTransactionMeta({ + chainId: CHAIN_ID_MOCK, simulationData: { nativeBalanceChange: { ...DUMMY_BALANCE_CHANGE,