diff --git a/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.tsx b/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.tsx index c098936989dd..f3433511fd01 100644 --- a/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.tsx +++ b/ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.tsx @@ -19,15 +19,16 @@ const NativeTransferInfo = () => { <> - {!isWalletInitiated && ( + { - )} + } diff --git a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx b/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx index 113920a6aec2..2911e32f7696 100644 --- a/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx +++ b/ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx @@ -19,15 +19,16 @@ const NFTTokenTransferInfo = () => { <> - {!isWalletInitiated && ( + { - )} + } diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx index 50e9d85936f0..dd95e841c2c0 100644 --- a/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx +++ b/ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx @@ -19,15 +19,16 @@ const TokenTransferInfo = () => { <> - {!isWalletInitiated && ( + { - )} + } 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 339ffbdd6a1a..129e89134159 100644 --- a/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx +++ b/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx @@ -41,12 +41,16 @@ jest.mock('../../context/confirm', () => ({ })), })); -const renderSimulationDetails = (simulationData?: Partial) => +const renderSimulationDetails = ( + simulationData?: Partial, + metricsOnly?: boolean, +) => renderWithProvider( , store, ); @@ -145,4 +149,9 @@ describe('SimulationDetails', () => { {}, ); }); + + it('does not render any UI elements when metricsOnly is true', () => { + const { container } = renderSimulationDetails({}, true); + expect(container).toBeEmptyDOMElement(); + }); }); diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx index 382fcb180f82..f950c1846968 100644 --- a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx +++ b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx @@ -34,6 +34,7 @@ import { useSimulationMetrics } from './useSimulationMetrics'; export type SimulationDetailsProps = { enableMetrics?: boolean; isTransactionsRedesign?: boolean; + metricsOnly?: boolean; transaction: TransactionMeta; }; @@ -219,11 +220,13 @@ const SimulationDetailsLayout: React.FC<{ * @param props.enableMetrics - Whether to enable simulation metrics. * @param props.isTransactionsRedesign - Whether or not the component is being * used inside the transaction redesign flow. + * @param props.metricsOnly - Whether to only track metrics and not render the UI. */ export const SimulationDetails: React.FC = ({ transaction, enableMetrics = false, isTransactionsRedesign = false, + metricsOnly = false, }: SimulationDetailsProps) => { const t = useI18nContext(); const { chainId, id: transactionId, simulationData } = transaction; @@ -238,6 +241,10 @@ export const SimulationDetails: React.FC = ({ transactionId, }); + if (metricsOnly) { + return null; + } + if (loading) { return (