Fix stories

MetaMask · Oct 24, 2024 · 1706b89 · 1706b89
1 parent 59fa0d0
commit 1706b89
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 36 deletions.
diff --git 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
@@ -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 (
     <Box
@@ -39,13 +47,13 @@ const NativeAssetPill: React.FC = () => {
       }}
     >
       <AvatarNetwork
-        name={ticker}
+        name={nativeCurrency}
         size={AvatarNetworkSize.Xs}
         src={imgSrc}
         borderColor={BorderColor.borderDefault}
       />
       <Text ellipsis variant={TextVariant.bodyMd}>
-        {ticker}
+        {nativeCurrency}
       </Text>
     </Box>
   );
@@ -60,6 +68,8 @@ const NativeAssetPill: React.FC = () => {
 export const AssetPill: React.FC<{
   asset: AssetIdentifier;
 }> = ({ asset }) => {
+  const { chainId } = asset;
+
   return (
     <Box
       data-testid="simulation-details-asset-pill"
@@ -70,13 +80,13 @@ export const AssetPill: React.FC<{
       }}
     >
       {asset.standard === TokenStandard.none ? (
-        <NativeAssetPill />
+        <NativeAssetPill chainId={chainId} />
       ) : (
         <Name
           preferContractSymbol
           type={NameType.ETHEREUM_ADDRESS}
           value={asset.address}
-          variation={asset.chainId}
+          variation={chainId}
         />
       )}
     </Box>

diff --git 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,