diff --git a/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx b/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx
index a1ed4a1e43dc..e4199935ba70 100644
--- a/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx
+++ b/ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx
@@ -26,8 +26,7 @@ const BaseTransactionInfo = () => {
<>
diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx
index 5971e513e3a1..5bb182ac7e66 100644
--- 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) =>
renderWithProvider(
,
store,
);
diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx
index 79d5c2105a9c..498e34743184 100644
--- 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 = ({
- 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
index 10e4cca518b7..8101fa0b477c 100644
--- 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
index 2a198d76ea36..1c3fa3702c31 100644
--- 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
index 96fd5315e317..a808a67e2481 100644
--- 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 = (
-
+
);
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
index 4492ed4e4844..5e4ef2511a51 100644
--- 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 = ({
{canShowSimulationDetails && (
-
+
)}