refactor: remove global network usage from transaction simulation (#2…

…7895)

## **Description**

Remove any usage of the global network from transaction simulation.

This requires using the `chainId` from the `TransactionMeta`, and so the
`SimulationDetails` properties have been simplified to accept
`TransactionMeta` directly to minimise the number of tightly coupled
properties.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27895?quickstart=1)

## **Related issues**

Fixes:
[#3376](MetaMask/MetaMask-planning#3376)

## **Manual testing steps**

Regression of all simulation usages, with specific attention to fiat
value.

- Legacy Confirmations
- Redesigned Confirmations
- Smart Transaction Status

## **Screenshots/Recordings**

### **Before**

### **After**

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

.storybook/main.js

@@ -52,6 +52,9 @@ module.exports = {
     config.resolve.alias['../../../../../../store/actions'] = require.resolve(
       '../ui/__mocks__/actions.js',
     );
+    config.resolve.alias['../../../store/actions'] = require.resolve(
+      '../ui/__mocks__/actions.js',
+    );
     // Import within controller-utils crashes storybook.
     config.resolve.alias['@ethereumjs/util'] = require.resolve(
       '../ui/__mocks__/ethereumjs-util.js',

ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx

@@ -20,8 +20,7 @@ const BaseTransactionInfo = () => {
     <>
       <ConfirmInfoSection noPadding>
         <SimulationDetails
-          simulationData={transactionMeta.simulationData}
-          transactionId={transactionMeta.id}
+          transaction={transactionMeta}
           isTransactionsRedesign
         />
       </ConfirmInfoSection>

ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx

@@ -22,8 +22,7 @@ const NFTTokenTransferInfo = () => {
       {!isWalletInitiated && (
         <ConfirmInfoSection noPadding>
           <SimulationDetails
-            simulationData={transactionMeta.simulationData}
-            transactionId={transactionMeta.id}
+            transaction={transactionMeta}
             isTransactionsRedesign
           />
         </ConfirmInfoSection>

ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx

@@ -22,8 +22,7 @@ const TokenTransferInfo = () => {
       {!isWalletInitiated && (
         <ConfirmInfoSection noPadding>
           <SimulationDetails
-            simulationData={transactionMeta.simulationData}
-            transactionId={transactionMeta.id}
+            transaction={transactionMeta}
             isTransactionsRedesign
           />
         </ConfirmInfoSection>

ui/pages/confirmations/components/simulation-details/amount-pill.test.tsx

@@ -6,7 +6,7 @@ import Tooltip from '../../../../components/ui/tooltip';
 import { AmountPill } from './amount-pill';
 import {
   AssetIdentifier,
-  NATIVE_ASSET_IDENTIFIER,
+  NativeAssetIdentifier,
   TokenAssetIdentifier,
 } from './types';
 
@@ -24,17 +24,28 @@ jest.mock('../../../../components/ui/tooltip', () => ({
 }));
 
 const TOKEN_ID_MOCK = '0xabc';
+const CHAIN_ID_MOCK = '0x1';
+
+const NATIVE_ASSET_MOCK: NativeAssetIdentifier = {
+  chainId: CHAIN_ID_MOCK,
+  standard: TokenStandard.none,
+};
 
 const ERC20_ASSET_MOCK: TokenAssetIdentifier = {
+  chainId: CHAIN_ID_MOCK,
   standard: TokenStandard.ERC20,
   address: '0x456',
 };
+
 const ERC721_ASSET_MOCK: TokenAssetIdentifier = {
+  chainId: CHAIN_ID_MOCK,
   standard: TokenStandard.ERC721,
   address: '0x123',
   tokenId: TOKEN_ID_MOCK,
 };
+
 const ERC1155_ASSET_MOCK: TokenAssetIdentifier = {
+  chainId: CHAIN_ID_MOCK,
   standard: TokenStandard.ERC1155,
   address: '0x789',
   tokenId: TOKEN_ID_MOCK,
@@ -114,7 +125,7 @@ describe('AmountPill', () => {
         amount: BigNumber;
         expected: { text: string; tooltip: string };
       }) => {
-        renderAndExpect(NATIVE_ASSET_IDENTIFIER, amount, expected);
+        renderAndExpect(NATIVE_ASSET_MOCK, amount, expected);
       },
     );
   });

ui/pages/confirmations/components/simulation-details/asset-pill.test.tsx

@@ -10,7 +10,7 @@ import { AvatarNetwork } from '../../../../components/component-library/avatar-n
 import { mockNetworkState } from '../../../../../test/stub/networks';
 import mockState from '../../../../../test/data/mock-state.json';
 import { AssetPill } from './asset-pill';
-import { NATIVE_ASSET_IDENTIFIER, TokenAssetIdentifier } from './types';
+import { NativeAssetIdentifier, TokenAssetIdentifier } from './types';
 
 jest.mock('../../../../components/component-library/avatar-network', () => ({
   AvatarNetworkSize: { Sm: 'Sm' },
@@ -22,6 +22,8 @@ jest.mock('../../../../components/app/name', () => ({
   default: jest.fn(() => null),
 }));
 
+const CHAIN_ID_MOCK = '0x1';
+
 describe('AssetPill', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -61,10 +63,12 @@ describe('AssetPill', () => {
           },
         });
 
-        renderWithProvider(
-          <AssetPill asset={NATIVE_ASSET_IDENTIFIER} />,
-          store,
-        );
+        const asset: NativeAssetIdentifier = {
+          chainId,
+          standard: TokenStandard.none,
+        };
+
+        renderWithProvider(<AssetPill asset={asset} />, store);
 
         expect(screen.getByText(expected.ticker)).toBeInTheDocument();
 
@@ -81,6 +85,7 @@ describe('AssetPill', () => {
 
   it('renders Name component with correct props when asset standard is not none', () => {
     const asset: TokenAssetIdentifier = {
+      chainId: CHAIN_ID_MOCK,
       standard: TokenStandard.ERC20,
       address: '0x1234567890123456789012345678901234567890',
     };

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,16 +19,20 @@ import {
 } from '../../../../helpers/constants/design-system';
 import Name from '../../../../components/app/name';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
-import {
-  getCurrentChainId,
-  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
@@ -42,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,9 +65,10 @@ const NativeAssetPill: React.FC = () => {
  * @param props
  * @param props.asset
  */
-export const AssetPill: React.FC<{ asset: AssetIdentifier }> = ({ asset }) => {
-  // TODO: Temporary pending multi-chain support in simulations;
-  const chainId = useSelector(getCurrentChainId);
+export const AssetPill: React.FC<{
+  asset: AssetIdentifier;
+}> = ({ asset }) => {
+  const { chainId } = asset;
 
   return (
     <Box
@@ -74,7 +80,7 @@ export const AssetPill: React.FC<{ asset: AssetIdentifier }> = ({ asset }) => {
       }}
     >
       {asset.standard === TokenStandard.none ? (
-        <NativeAssetPill />
+        <NativeAssetPill chainId={chainId} />
       ) : (
         <Name
           preferContractSymbol