feat: add simulation metrics when simulation UI is not visible (#28427)

## **Description**

This PR adds transaction simulation metrics when the UI is not shown and
the transaction simulation settings is turned on

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

## **Related issues**

Fixes: #28369

## **Manual testing steps**
Turn on MetaMetrics settings

1. Go to wallet dashboard
2. Initiate send transaction directly through wallet
3. Reject or Cancel the transaction
4. Observe simulation metrics

## **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**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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: Vinicius Stevam <[email protected]>
Co-authored-by: Vinicius Stevam <[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,
   );
@@ -141,4 +145,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;
 };
 
@@ -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<SimulationDetailsProps> = ({
   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<SimulationDetailsProps> = ({
     transactionId,
   });
 
+  if (metricsOnly) {
+    return null;
+  }
+
   if (loading) {
     return (
       <SimulationDetailsLayout