fix (cherry-pick): add simulation metrics when simulation UI is not v…

…isible (#28427) (#28461)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
cherry pick PR #28427

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28461?quickstart=1)

## **Related issues**

Fixes: #28369

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **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 <[email protected]>

ui/pages/confirmations/components/confirm/info/native-transfer/native-transfer.tsx

@@ -19,15 +19,16 @@ const NativeTransferInfo = () => {
     <>
       <NativeSendHeading />
       <TransactionFlowSection />
-      {!isWalletInitiated && (
+      {
         <ConfirmInfoSection noPadding>
           <SimulationDetails
             transaction={transactionMeta}
             isTransactionsRedesign
             enableMetrics
+            metricsOnly={isWalletInitiated}
           />
         </ConfirmInfoSection>
-      )}
+      }
       <TokenDetailsSection />
       <GasFeesSection />
       <AdvancedDetails />

ui/pages/confirmations/components/confirm/info/nft-token-transfer/nft-token-transfer.tsx

@@ -19,15 +19,16 @@ const NFTTokenTransferInfo = () => {
     <>
       <NFTSendHeading />
       <TransactionFlowSection />
-      {!isWalletInitiated && (
+      {
         <ConfirmInfoSection noPadding>
           <SimulationDetails
             transaction={transactionMeta}
             isTransactionsRedesign
             enableMetrics
+            metricsOnly={isWalletInitiated}
           />
         </ConfirmInfoSection>
-      )}
+      }
       <TokenDetailsSection />
       <GasFeesSection />
       <AdvancedDetails />

ui/pages/confirmations/components/confirm/info/token-transfer/token-transfer.tsx

@@ -19,15 +19,16 @@ const TokenTransferInfo = () => {
     <>
       <SendHeading />
       <TransactionFlowSection />
-      {!isWalletInitiated && (
+      {
         <ConfirmInfoSection noPadding>
           <SimulationDetails
             transaction={transactionMeta}
             isTransactionsRedesign
             enableMetrics
+            metricsOnly={isWalletInitiated}
           />
         </ConfirmInfoSection>
-      )}
+      }
       <TokenDetailsSection />
       <GasFeesSection />
       <AdvancedDetails />

ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx

@@ -41,12 +41,16 @@ jest.mock('../../context/confirm', () => ({
   })),
 }));
 
-const renderSimulationDetails = (simulationData?: Partial<SimulationData>) =>
+const renderSimulationDetails = (
+  simulationData?: Partial<SimulationData>,
+  metricsOnly?: boolean,
+) =>
   renderWithProvider(
     <SimulationDetails
       transaction={
         { id: 'testTransactionId', simulationData } as TransactionMeta
       }
+      metricsOnly={metricsOnly}
     />,
     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();
+  });
 });

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<SimulationDetailsProps> = ({
   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<SimulationDetailsProps> = ({
     transactionId,
   });
 
+  if (metricsOnly) {
+    return null;
+  }
+
   if (loading) {
     return (
       <SimulationDetailsLayout