Remove global network from useBalanceChanges

Add transaction prop to SimulationDetails.
MetaMask · Oct 16, 2024 · 0a0894e · 0a0894e
1 parent 59dc0cd
commit 0a0894e
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 31 deletions.
diff --git a/...ges/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx b/...ges/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx
@@ -26,8 +26,7 @@ const BaseTransactionInfo = () => {
     <>
       <ConfirmInfoSection noPadding>
         <SimulationDetails
-          simulationData={transactionMeta.simulationData}
-          transactionId={transactionMeta.id}
+          transaction={transactionMeta}
           isTransactionsRedesign
         />
       </ConfirmInfoSection>

diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx
@@ -4,6 +4,7 @@ import { screen } from '@testing-library/react';
 import {
   SimulationData,
   SimulationErrorCode,
+  TransactionMeta,
 } from '@metamask/transaction-controller';
 import { BigNumber } from 'bignumber.js';
 import { renderWithProvider } from '../../../../../test/lib/render-helpers';
@@ -28,8 +29,9 @@ jest.mock('./useSimulationMetrics');
 const renderSimulationDetails = (simulationData?: Partial<SimulationData>) =>
   renderWithProvider(
     <SimulationDetails
-      simulationData={simulationData as SimulationData}
-      transactionId="testTransactionId"
+      transaction={
+        { id: 'testTransactionId', simulationData } as TransactionMeta
+      }
     />,
     store,
   );

diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx
@@ -2,6 +2,7 @@ import {
   SimulationData,
   SimulationError,
   SimulationErrorCode,
+  TransactionMeta,
 } from '@metamask/transaction-controller';
 import React from 'react';
 import {
@@ -30,10 +31,10 @@ import { useBalanceChanges } from './useBalanceChanges';
 import { useSimulationMetrics } from './useSimulationMetrics';
 
 export type SimulationDetailsProps = {
-  simulationData?: SimulationData;
-  transactionId: string;
   enableMetrics?: boolean;
   isTransactionsRedesign?: boolean;
+  simulationData?: SimulationData;
+  transaction: TransactionMeta;
 };
 
 /**
@@ -172,20 +173,19 @@ const SimulationDetailsLayout: React.FC<{
  * Preview of a transaction's effects using simulation data.
  *
  * @param props
- * @param props.simulationData - The simulation data to display.
- * @param props.transactionId - The ID of the transaction being simulated.
+ * @param props.transaction - Metadata of the transaction that was simulated.
  * @param props.enableMetrics - Whether to enable simulation metrics.
  * @param props.isTransactionsRedesign - Whether or not the component is being
  * used inside the transaction redesign flow.
  */
 export const SimulationDetails: React.FC<SimulationDetailsProps> = ({
-  simulationData,
-  transactionId,
+  transaction,
   enableMetrics = false,
   isTransactionsRedesign = false,
 }: SimulationDetailsProps) => {
   const t = useI18nContext();
-  const balanceChangesResult = useBalanceChanges(simulationData);
+  const { chainId, id: transactionId, simulationData } = transaction;
+  const balanceChangesResult = useBalanceChanges({ chainId, simulationData });
   const loading = !simulationData || balanceChangesResult.pending;
 
   useSimulationMetrics({

diff --git a/ui/pages/confirmations/components/simulation-details/useBalanceChanges.test.ts b/ui/pages/confirmations/components/simulation-details/useBalanceChanges.test.ts
@@ -57,6 +57,8 @@ const DIFFERENCE_1_MOCK: Hex = '0x11';
 const DIFFERENCE_2_MOCK: Hex = '0x2';
 const DIFFERENCE_ETH_MOCK: Hex = '0x1234567890123456789';
 
+const CHAIN_ID_MOCK = '0x123';
+
 const dummyBalanceChange = {
   previousBalance: '0xIGNORE' as Hex,
   newBalance: '0xIGNORE' as Hex,
@@ -98,7 +100,10 @@ describe('useBalanceChanges', () => {
   describe('pending states', () => {
     it('returns pending=true if no simulation data', async () => {
       const { result, waitForNextUpdate } = renderHook(() =>
-        useBalanceChanges(undefined),
+        useBalanceChanges({
+          chainId: CHAIN_ID_MOCK,
+          simulationData: undefined,
+        }),
       );
       expect(result.current).toEqual({ pending: true, value: [] });
       await waitForNextUpdate();
@@ -119,7 +124,7 @@ describe('useBalanceChanges', () => {
         ],
       };
       const { result, unmount, waitForNextUpdate } = renderHook(() =>
-        useBalanceChanges(simulationData),
+        useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }),
       );
 
       await waitForNextUpdate();
@@ -143,7 +148,7 @@ describe('useBalanceChanges', () => {
         ],
       };
       const { result, unmount, waitForNextUpdate } = renderHook(() =>
-        useBalanceChanges(simulationData),
+        useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }),
       );
 
       await waitForNextUpdate();
@@ -161,7 +166,9 @@ describe('useBalanceChanges', () => {
         nativeBalanceChange: undefined,
         tokenBalanceChanges,
       };
-      return renderHook(() => useBalanceChanges(simulationData));
+      return renderHook(() =>
+        useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }),
+      );
     };
 
     it('maps token balance changes correctly', async () => {
@@ -307,7 +314,9 @@ describe('useBalanceChanges', () => {
         nativeBalanceChange,
         tokenBalanceChanges: [],
       };
-      return renderHook(() => useBalanceChanges(simulationData));
+      return renderHook(() =>
+        useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }),
+      );
     };
 
     it('maps native balance change correctly', async () => {
@@ -382,7 +391,7 @@ describe('useBalanceChanges', () => {
       ],
     };
     const { result, waitForNextUpdate } = renderHook(() =>
-      useBalanceChanges(simulationData),
+      useBalanceChanges({ chainId: CHAIN_ID_MOCK, simulationData }),
     );
 
     await waitForNextUpdate();

diff --git a/ui/pages/confirmations/components/simulation-details/useBalanceChanges.ts b/ui/pages/confirmations/components/simulation-details/useBalanceChanges.ts
@@ -11,7 +11,7 @@ import { ContractExchangeRates } from '@metamask/assets-controllers';
 import { useAsyncResultOrThrow } from '../../../../hooks/useAsyncResult';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
 import { getConversionRate } from '../../../../ducks/metamask/metamask';
-import { getCurrentChainId, getCurrentCurrency } from '../../../../selectors';
+import { getCurrentCurrency } from '../../../../selectors';
 import { fetchTokenExchangeRates } from '../../../../helpers/utils/util';
 import { ERC20_DEFAULT_DECIMALS, fetchErc20Decimals } from '../../utils/token';
 
@@ -140,10 +140,13 @@ function getTokenBalanceChanges(
 }
 
 // Compiles a list of balance changes from simulation data
-export const useBalanceChanges = (
-  simulationData: SimulationData | undefined,
-): { pending: boolean; value: BalanceChange[] } => {
-  const chainId = useSelector(getCurrentChainId);
+export const useBalanceChanges = ({
+  chainId,
+  simulationData,
+}: {
+  chainId: Hex;
+  simulationData?: SimulationData;
+}): { pending: boolean; value: BalanceChange[] } => {
   const fiatCurrency = useSelector(getCurrentCurrency);
   const nativeFiatRate = useSelector(getConversionRate);
 

diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
@@ -536,11 +536,7 @@ export default class ConfirmTransactionBase extends Component {
     const { simulationData } = txData;
 
     const simulationDetails = (
-      <SimulationDetails
-        simulationData={simulationData}
-        transactionId={txData.id}
-        enableMetrics
-      />
+      <SimulationDetails transaction={txData} enableMetrics />
     );
 
     const showTotals = Boolean(simulationData?.error);

diff --git a/ui/pages/smart-transactions/smart-transaction-status-page/smart-transaction-status-page.tsx b/ui/pages/smart-transactions/smart-transaction-status-page/smart-transaction-status-page.tsx
@@ -366,10 +366,7 @@ export const SmartTransactionStatusPage = ({
         </Box>
         {canShowSimulationDetails && (
           <Box width={BlockSize.Full}>
-            <SimulationDetails
-              simulationData={fullTxData.simulationData}
-              transactionId={fullTxData.id}
-            />
+            <SimulationDetails transaction={fullTxData} />
           </Box>
         )}
       </Box>