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,