refactor: remove global network usage from transaction simulation

.eslintrc.js

@@ -76,6 +76,7 @@ module.exports = {
     {
       files: [
         'app/components/UI/Name/**/*.{js,ts,tsx}',
+        'app/components/UI/SimulationDetails/**/*.{js,ts,tsx}',
         'app/components/hooks/DisplayName/**/*.{js,ts,tsx}'
       ],
       rules: {

app/components/UI/SimulationDetails/AmountPill/AmountPill.test.tsx

@@ -5,25 +5,33 @@ import AmountPill from './AmountPill';
 import {
   AssetIdentifier,
   AssetType,
-  NATIVE_ASSET_IDENTIFIER,
+  NativeAssetIdentifier,
   TokenAssetIdentifier,
 } from '../types';
 
 const TOKEN_ID_MOCK = '0xabc';
+const CHAIN_ID_MOCK = '0x123';
 
 const ERC20_ASSET_MOCK: TokenAssetIdentifier = {
   type: AssetType.ERC20,
   address: '0x456',
+  chainId: CHAIN_ID_MOCK,
 };
 const ERC721_ASSET_MOCK: TokenAssetIdentifier = {
   type: AssetType.ERC721,
   address: '0x123',
   tokenId: TOKEN_ID_MOCK,
+  chainId: CHAIN_ID_MOCK,
 };
 const ERC1155_ASSET_MOCK: TokenAssetIdentifier = {
   type: AssetType.ERC1155,
   address: '0x789',
   tokenId: TOKEN_ID_MOCK,
+  chainId: CHAIN_ID_MOCK,
+};
+const NATIVE_ASSET_MOCK: NativeAssetIdentifier = {
+  type: AssetType.Native,
+  chainId: CHAIN_ID_MOCK,
 };
 
 const renderAndExpect = (
@@ -83,7 +91,7 @@ describe('AmountPill', () => {
     it.each(nativeAndErc20Cases)(
       'renders the correct sign and amount for $amount',
       ({ amount, expected }) => {
-        renderAndExpect(NATIVE_ASSET_IDENTIFIER, amount, expected);
+        renderAndExpect(NATIVE_ASSET_MOCK, amount, expected);
       },
     );
   });

app/components/UI/SimulationDetails/AssetPill/AssetPill.test.tsx

@@ -1,18 +1,10 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
 
 import AssetPill from './AssetPill';
-import {
-  selectChainId,
-  selectTicker,
-} from '../../../../selectors/networkController';
 import { AssetType, AssetIdentifier } from '../types';
+import renderWithProvider from '../../../../util/test/renderWithProvider';
+import { mockNetworkState } from '../../../../util/test/network';
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn().mockImplementation((selector) => selector()),
-}));
-jest.mock('../../../../selectors/networkController');
 jest.mock(
   '../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork',
   () => 'AvatarNetwork',
@@ -22,18 +14,33 @@ jest.mock('../../../hooks/useStyles', () => ({
   useStyles: () => ({ styles: {} }),
 }));
 
-describe('AssetPill', () => {
-  const selectChainIdMock = jest.mocked(selectChainId);
-  const selectTickerMock = jest.mocked(selectTicker);
+const CHAIN_ID_MOCK = '0x123';
 
-  beforeAll(() => {
-    selectChainIdMock.mockReturnValue('0x1');
-    selectTickerMock.mockReturnValue('ETH');
-  });
+const STATE_MOCK = {
+  engine: {
+    backgroundState: {
+      NetworkController: {
+        ...mockNetworkState({
+          chainId: CHAIN_ID_MOCK,
+        }),
+      },
+    },
+  },
+};
 
+describe('AssetPill', () => {
   it('renders correctly for native assets', () => {
-    const asset = { type: AssetType.Native } as AssetIdentifier;
-    const { getByText, getByTestId } = render(<AssetPill asset={asset} />);
+    const asset = {
+      type: AssetType.Native,
+      chainId: CHAIN_ID_MOCK,
+    } as AssetIdentifier;
+
+    const { getByText, getByTestId } = renderWithProvider(
+      <AssetPill asset={asset} />,
+      {
+        state: STATE_MOCK,
+      },
+    );
 
     expect(
       getByTestId('simulation-details-asset-pill-avatar-network'),
@@ -45,8 +52,12 @@ describe('AssetPill', () => {
     const asset = {
       type: AssetType.ERC20,
       address: '0xabc123',
+      chainId: CHAIN_ID_MOCK,
     } as AssetIdentifier;
-    const { getByTestId } = render(<AssetPill asset={asset} />);
+
+    const { getByTestId } = renderWithProvider(<AssetPill asset={asset} />, {
+      state: STATE_MOCK,
+    });
 
     expect(getByTestId('simulation-details-asset-pill-name')).toBeTruthy();
   });

app/components/UI/SimulationDetails/AssetPill/AssetPill.tsx

@@ -9,16 +9,13 @@ import Text, {
 } from '../../../../component-library/components/Texts/Text';
 import AvatarNetwork from '../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork';
 import { AvatarSize } from '../../../../component-library/components/Avatars/Avatar/Avatar.types';
-import {
-  selectChainId,
-  selectTicker,
-} from '../../../../selectors/networkController';
 import { NetworkList } from '../../../../util/networks';
 import { useStyles } from '../../../hooks/useStyles';
 import Name from '../../Name/Name';
 import { NameType } from '../../Name/Name.types';
 import { AssetIdentifier, AssetType } from '../types';
 import styleSheet from './AssetPill.styles';
+import { selectNetworkConfigurations } from '../../../../selectors/networkController';
 
 interface AssetPillProperties extends ViewProps {
   asset: AssetIdentifier;
@@ -35,42 +32,44 @@ const getNetworkImage = (chainId: Hex) => {
   return network?.imageSource || null;
 };
 
-const NativeAssetPill: React.FC = () => {
+const NativeAssetPill: React.FC<AssetPillProperties> = ({ asset }) => {
   const { styles } = useStyles(styleSheet, {});
-  const ticker = useSelector(selectTicker);
-  const chainId = useSelector(selectChainId);
-  const imageSource = getNetworkImage(chainId);
+  const imageSource = getNetworkImage(asset.chainId);
+
+  const networkConfigurationsByChainId = useSelector(
+    selectNetworkConfigurations,
+  );
+
+  const { nativeCurrency } =
+    networkConfigurationsByChainId[asset.chainId] || {};
 
   return (
     <View style={styles.nativeAssetPill}>
       <AvatarNetwork
         testID="simulation-details-asset-pill-avatar-network"
         size={AvatarSize.Xs}
-        name={ticker}
+        name={nativeCurrency}
         imageSource={imageSource}
       />
-      <Text variant={TextVariant.BodyMD}>{ticker}</Text>
+      <Text variant={TextVariant.BodyMD}>{nativeCurrency}</Text>
     </View>
   );
 };
 
 const AssetPill: React.FC<AssetPillProperties> = ({ asset }) => {
   const { styles } = useStyles(styleSheet, {});
 
-  // TODO: Remove global network selector usage once simulations refactored.
-  const chainId = useSelector(selectChainId);
-
   return (
     <View style={styles.assetPill}>
       {asset.type === AssetType.Native ? (
-        <NativeAssetPill />
+        <NativeAssetPill asset={asset} />
       ) : (
         <Name
           preferContractSymbol
           testID="simulation-details-asset-pill-name"
           type={NameType.EthereumAddress}
           value={asset.address}
-          variation={chainId}
+          variation={asset.chainId}
         />
       )}
     </View>

app/components/UI/SimulationDetails/BalanceChangeList/BalanceChangeList.test.tsx

@@ -14,11 +14,14 @@ jest.mock('../FiatDisplay/FiatDisplay', () => ({
   TotalFiatDisplay: 'TotalFiatDisplay',
 }));
 
+const CHAIN_ID_MOCK = '0x123';
+
 const balanceChangesMock = [
   {
     asset: {
       type: 'ERC20',
       address: '0xabc123',
+      chainId: CHAIN_ID_MOCK,
     },
     amount: new BigNumber(100),
     fiatAmount: 100,
@@ -68,6 +71,7 @@ describe('BalanceChangeList', () => {
         asset: {
           type: 'ERC20',
           address: '0xabc123',
+          chainId: CHAIN_ID_MOCK,
         },
         amount: new BigNumber(100),
         fiatAmount: 100,

app/components/UI/SimulationDetails/BalanceChangeRow/BalanceChangeRow.test.tsx

@@ -5,22 +5,24 @@ import { BigNumber } from 'bignumber.js';
 import BalanceChangeRow from './BalanceChangeRow';
 import { AssetType, BalanceChange } from '../types';
 
+jest.mock('../AmountPill/AmountPill', () => 'AmountPill');
+jest.mock('../AssetPill/AssetPill', () => 'AssetPill');
 jest.mock('../FiatDisplay/FiatDisplay', () => ({
   IndividualFiatDisplay: 'IndividualFiatDisplay',
 }));
 
+const CHAIN_ID_MOCK = '0x123';
+
 const balanceChangeMock: BalanceChange = {
   asset: {
     type: AssetType.ERC20,
     address: '0xabc123',
+    chainId: CHAIN_ID_MOCK,
   },
   amount: new BigNumber(100),
   fiatAmount: 0,
 } as BalanceChange;
 
-jest.mock('../AmountPill/AmountPill', () => 'AmountPill');
-jest.mock('../AssetPill/AssetPill', () => 'AssetPill');
-
 describe('BalanceChangeList', () => {
   it('renders a balance change row', () => {
     const { getByText, getByTestId } = render(