refactor: remove global network usage from transaction simulation

.storybook/main.js

@@ -48,6 +48,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: CHAIN_ID_MOCK,
+          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

@@ -18,10 +18,7 @@ import {
 } from '../../../../helpers/constants/design-system';
 import Name from '../../../../components/app/name';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
-import {
-  getCurrentChainId,
-  getNativeCurrencyImage,
-} from '../../../../selectors';
+import { getNativeCurrencyImage } from '../../../../selectors';
 import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
 import { AssetIdentifier } from './types';
 
@@ -60,10 +57,9 @@ 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 }) => {
   return (
     <Box
       data-testid="simulation-details-asset-pill"
@@ -80,7 +76,7 @@ export const AssetPill: React.FC<{ asset: AssetIdentifier }> = ({ asset }) => {
           preferContractSymbol
           type={NameType.ETHEREUM_ADDRESS}
           value={asset.address}
-          variation={chainId}
+          variation={asset.chainId}
         />
       )}
     </Box>