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 && ( - + )}