From b86383d13ce31dc9ae0b1b3fbca3ec20c14949bc Mon Sep 17 00:00:00 2001 From: Vinicius Stevam <45455812+vinistevam@users.noreply.github.com> Date: Thu, 14 Nov 2024 17:23:46 +0000 Subject: [PATCH] fix (cherry-pick): add simulation metrics when simulation UI is not visible (#28427) (#28461) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** cherry pick PR #28427 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28461?quickstart=1) ## **Related issues** Fixes: https://github.com/MetaMask/metamask-extension/issues/28369 ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** ### **Before** ### **After** ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. Co-authored-by: digiwand <20778143+digiwand@users.noreply.github.com> --- .../confirm/info/native-transfer/native-transfer.tsx | 5 +++-- .../info/nft-token-transfer/nft-token-transfer.tsx | 5 +++-- .../confirm/info/token-transfer/token-transfer.tsx | 5 +++-- .../simulation-details/simulation-details.test.tsx | 11 ++++++++++- .../simulation-details/simulation-details.tsx | 7 +++++++ 5 files changed, 26 insertions(+), 7 deletions(-) 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 (