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 9294f7d1b5b5..e312de542772 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, ); @@ -141,4 +145,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 57ee1f2ff3fb..357f71230a0c 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; }; @@ -225,11 +226,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; @@ -244,6 +247,10 @@ export const SimulationDetails: React.FC = ({ transactionId, }); + if (metricsOnly) { + return null; + } + if (loading) { return (