fix: cp-13.11.0 dapp swap request for batch requests (#38190)

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

Fix issue with dapp swap comparison metrics and UI not working for
batched requests.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: MetaMask/metamask-mobile#23186

## **Manual testing steps**

1. Submit batched swap request
2. Check that metrics and UI work as expected

## **Screenshots/Recordings**
TODO

## **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/main/.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/main/.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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds batch support for dapp swap comparison, moves quote fetching to a
shared util used by middleware and wallet_sendCalls, and improves
metrics/error capture and UI tab control.
> 
> - **Backend/Controllers**:
> - Expand `AppStateController` `dappSwapComparisonData` to include
`commands`, `error`, and `tokenAddresses`; add `Hex` usage.
> - Extract `getQuotesForConfirmation` to
`app/scripts/lib/dapp-swap/dapp-swap-util` and simplify
`dapp-swap-middleware` to call it; also call from `wallet_sendCalls` to
access `securityAlertId`.
> - Add batch transaction validation and command parsing
(`parseTransactionData`, `checkValidSingleOrBatchTransaction`); change
`getDataFromSwap` to accept `commandBytes`/`inputs`.
>   - Update selectors to surface new dapp swap fields.
> - **UI**:
>   - Make `Tabs` controllable via new `activeTabKey`; update tests.
> - Update Dapp Swap banner to use controlled tabs and `SwapType` enum;
refine selection/metrics flow.
> - Show decoded tx data from quoted swap only when selected
(`isQuotedSwapDisplayedInInfo`).
> - Metrics hooks now include commands and detailed failure reasons;
submit capture timing adjusted.
> - **Tests**:
> - Add/adjust tests for middleware error/command capture, batch
validation/parsing, tabs control, hooks, and transaction confirm
behavior.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
83873f0. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: jpuri

app/scripts/controllers/app-state-controller.ts

@@ -11,7 +11,12 @@ import {
   AcceptRequest,
   AddApprovalRequest,
 } from '@metamask/approval-controller';
-import { DeferredPromise, Json, createDeferredPromise } from '@metamask/utils';
+import {
+  DeferredPromise,
+  Hex,
+  Json,
+  createDeferredPromise,
+} from '@metamask/utils';
 import type { QrScanRequest, SerializedUR } from '@metamask/eth-qr-keyring';
 import type { Messenger } from '@metamask/messenger';
 import { Browser } from 'webextension-polyfill';
@@ -61,6 +66,14 @@ import type {
   PreferencesControllerStateChangeEvent,
 } from './preferences-controller';
 
+export type DappSwapComparisonData = {
+  quotes?: QuoteResponse[];
+  latency?: number;
+  commands?: string;
+  error?: string;
+  tokenAddresses?: Hex[];
+};
+
 export type AppStateControllerState = {
   activeQrCodeScanRequest: QrScanRequest | null;
   addressSecurityAlertResponses: Record<string, CachedScanAddressResponse>;
@@ -133,7 +146,7 @@ export type AppStateControllerState = {
   pendingShieldCohortTxType: string | null;
   defaultSubscriptionPaymentOptions?: DefaultSubscriptionPaymentOptions;
   dappSwapComparisonData?: {
-    [uniqueId: string]: { quotes?: QuoteResponse[]; latency?: number };
+    [uniqueId: string]: DappSwapComparisonData;
   };
 
   /**
@@ -1636,7 +1649,7 @@ export class AppStateController extends BaseController<
 
   setDappSwapComparisonData(
     uniqueId: string,
-    info: { quotes?: QuoteResponse[]; latency?: number },
+    info: DappSwapComparisonData,
   ): void {
     this.update((state) => {
       state.dappSwapComparisonData = {
@@ -1646,12 +1659,9 @@ export class AppStateController extends BaseController<
     });
   }
 
-  getDappSwapComparisonData(uniqueId: string):
-    | {
-        quotes?: QuoteResponse[];
-        latency?: number;
-      }
-    | undefined {
+  getDappSwapComparisonData(
+    uniqueId: string,
+  ): DappSwapComparisonData | undefined {
     return this.state.dappSwapComparisonData?.[uniqueId] ?? undefined;
   }
 }

app/scripts/lib/dapp-swap/dapp-swap-middleware.test.ts

@@ -2,10 +2,8 @@ import { JsonRpcResponseStruct } from '@metamask/utils';
 
 import { flushPromises } from '../../../../test/lib/timer-helpers';
 import { mockBridgeQuotes } from '../../../../test/data/confirmations/contract-interaction';
-import {
-  createDappSwapMiddleware,
-  DappSwapMiddlewareRequest,
-} from './dapp-swap-middleware';
+import { createDappSwapMiddleware } from './dapp-swap-middleware';
+import { DappSwapMiddlewareRequest } from './dapp-swap-util';
 
 const REQUEST_MOCK = {
   params: [],
@@ -15,8 +13,8 @@ const REQUEST_MOCK = {
   networkClientId: 'networkClientId',
 };
 
-const fetchQuotes = jest.fn();
-const setSwapQuotes = jest.fn();
+let fetchQuotes = jest.fn();
+const setDappSwapComparisonData = jest.fn();
 const getNetworkConfigurationByNetworkClientId = jest.fn();
 
 const createMiddleware = (
@@ -27,7 +25,7 @@ const createMiddleware = (
 ) => {
   const middlewareFunction = createDappSwapMiddleware({
     fetchQuotes,
-    setSwapQuotes,
+    setDappSwapComparisonData,
     getNetworkConfigurationByNetworkClientId,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     dappSwapMetricsFlag: { enabled: true, bridge_quote_fees: 250 },
@@ -139,4 +137,88 @@ describe('DappSwapMiddleware', () => {
       walletAddress: '0x12312312312312',
     });
   });
+
+  it('capture error and commands if quote fetching fails', async () => {
+    fetchQuotes = jest.fn().mockRejectedValue(new Error('fail'));
+    getNetworkConfigurationByNetworkClientId.mockReturnValueOnce({
+      chainId: '0x1',
+      rpcEndpoints: [],
+    });
+    const { middlewareFunction } = createMiddleware();
+
+    const req = {
+      ...REQUEST_MOCK,
+      method: 'eth_sendTransaction',
+      origin: 'https://metamask.github.io',
+      securityAlertResponse: {
+        securityAlertId: '123',
+      },
+      params: [
+        {
+          data: '0x3593564c000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a00000000000000000000000000000000000000000000000000000000068f0dd1b0000000000000000000000000000000000000000000000000000000000000003100604000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000030000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000044000000000000000000000000000000000000000000000000000000000000004c000000000000000000000000000000000000000000000000000000000000003c0000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000800000000000000000000000000000000000000000000000000000000000000003070b0e000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000030000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000022000000000000000000000000000000000000000000000000000000000000002a000000000000000000000000000000000000000000000000000000000000001a000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000000000000000005af3107a4000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000020000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e583100000000000000000000000000000000000000000000000000000000000001f4000000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000060000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e5831000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000060000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e58310000000000000000000000007ffc3dbf3b2b50ff3a1d5523bc24bb5043837b1400000000000000000000000000000000000000000000000000000000000000190000000000000000000000000000000000000000000000000000000000000060000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e5831000000000000000000000000178239802520a9c99dcbd791f81326b70298d62900000000000000000000000000000000000000000000000000000000000601470c',
+          from: '0x12312312312312',
+          calls: [],
+        },
+      ],
+      networkClientId: 'networkClientId',
+    };
+
+    await middlewareFunction(
+      req as unknown as DappSwapMiddlewareRequest<(string | { to: string })[]>,
+      { ...JsonRpcResponseStruct.TYPE },
+      () => undefined,
+    );
+
+    await flushPromises();
+
+    expect(setDappSwapComparisonData).toHaveBeenCalledWith('123', {
+      commands: '0x100604',
+      error: 'Error fetching bridge quotes: fail',
+    });
+  });
+
+  it('capture error if request if not valid batch request', async () => {
+    fetchQuotes = jest.fn().mockRejectedValue(new Error('fail'));
+    getNetworkConfigurationByNetworkClientId.mockReturnValueOnce({
+      chainId: '0x1',
+      rpcEndpoints: [],
+    });
+    const { middlewareFunction } = createMiddleware();
+
+    const req = {
+      ...REQUEST_MOCK,
+      method: 'eth_sendTransaction',
+      origin: 'https://metamask.github.io',
+      securityAlertResponse: {
+        securityAlertId: '123',
+      },
+      params: [
+        {
+          data: '0x3593564c000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a00000000000000000000000000000000000000000000000000000000068f0dd1b0000000000000000000000000000000000000000000000000000000000000003100604000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000030000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000044000000000000000000000000000000000000000000000000000000000000004c000000000000000000000000000000000000000000000000000000000000003c0000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000800000000000000000000000000000000000000000000000000000000000000003070b0e000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000030000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000022000000000000000000000000000000000000000000000000000000000000002a000000000000000000000000000000000000000000000000000000000000001a000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000000000000000005af3107a4000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000020000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e583100000000000000000000000000000000000000000000000000000000000001f4000000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000060000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e5831000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000060000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e58310000000000000000000000007ffc3dbf3b2b50ff3a1d5523bc24bb5043837b1400000000000000000000000000000000000000000000000000000000000000190000000000000000000000000000000000000000000000000000000000000060000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e5831000000000000000000000000178239802520a9c99dcbd791f81326b70298d62900000000000000000000000000000000000000000000000000000000000601470c',
+          from: '0x12312312312312',
+          calls: [
+            {
+              data: '0x3593564c000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a00000000000000000000000000000000000000000000000000000000068f0dd1b0000000000000000000000000000000000000000000000000000000000000003100604000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000030000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000044000000000000000000000000000000000000000000000000000000000000004c000000000000000000000000000000000000000000000000000000000000003c0000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000800000000000000000000000000000000000000000000000000000000000000003070b0e000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000030000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000022000000000000000000000000000000000000000000000000000000000000002a000000000000000000000000000000000000000000000000000000000000001a000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000008000000000000000000000000000000000000000000000000000005af3107a4000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000020000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e583100000000000000000000000000000000000000000000000000000000000001f4000000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000060000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e5831000000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000060000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e58310000000000000000000000007ffc3dbf3b2b50ff3a1d5523bc24bb5043837b1400000000000000000000000000000000000000000000000000000000000000190000000000000000000000000000000000000000000000000000000000000060000000000000000000000000af88d065e77c8cc2239327c5edb3a432268e5831000000000000000000000000178239802520a9c99dcbd791f81326b70298d62900000000000000000000000000000000000000000000000000000000000601470c',
+            },
+            { data: 'dummy_test_data' },
+          ],
+        },
+      ],
+      networkClientId: 'networkClientId',
+    };
+
+    await middlewareFunction(
+      req as unknown as DappSwapMiddlewareRequest<(string | { to: string })[]>,
+      { ...JsonRpcResponseStruct.TYPE },
+      () => undefined,
+    );
+
+    await flushPromises();
+
+    expect(setDappSwapComparisonData).toHaveBeenCalledWith('123', {
+      commands: '0x100604',
+      error:
+        'Error fetching bridge quotes: Error: Error getting data from swap: invalid batch transaction, invalid command',
+    });
+  });
 });

app/scripts/lib/dapp-swap/dapp-swap-middleware.ts

@@ -1,79 +1,32 @@
-import log from 'loglevel';
+import { Json, JsonRpcResponse } from '@metamask/utils';
 import {
-  Hex,
-  Json,
-  JsonRpcParams,
-  JsonRpcRequest,
-  JsonRpcResponse,
-} from '@metamask/utils';
+  GenericQuoteRequest,
+  QuoteResponse,
+} from '@metamask/bridge-controller';
 import {
   NetworkClientId,
   NetworkConfiguration,
 } from '@metamask/network-controller';
-import {
-  GenericQuoteRequest,
-  QuoteResponse,
-} from '@metamask/bridge-controller';
-
-import { captureException } from '../../../../shared/lib/sentry';
-import { getDataFromSwap } from '../../../../shared/modules/dapp-swap-comparison/dapp-swap-comparison-utils';
-import { SecurityAlertResponse } from '../ppom/types';
 
-export type DappSwapMiddlewareRequest<
-  Params extends JsonRpcParams = JsonRpcParams,
-> = Required<JsonRpcRequest<Params>> & {
-  origin?: string;
-  securityAlertResponse?: SecurityAlertResponse | undefined;
-  networkClientId: NetworkClientId;
-  params: {
-    data: string;
-    from: string;
-    calls: { data: string; from: string }[];
-  }[];
-};
-
-const FOUR_BYTE_EXECUTE_SWAP_CONTRACT = '0x3593564c';
-const DAPP_SWAP_COMPARISON_ORIGIN = 'https://app.uniswap.org';
-const TEST_DAPP_ORIGIN = 'https://metamask.github.io';
-const DEFAULT_QUOTEFEE = 250;
-
-const getSwapDetails = (params: DappSwapMiddlewareRequest['params']) => {
-  if (!params?.length) {
-    return {
-      data: undefined,
-      from: undefined,
-      chainId: undefined,
-    };
-  }
-  const { calls, data, from } = params[0];
-  let transactionData = data;
-  if (calls?.length) {
-    const executeSwapCall = calls?.find(({ data: trxnData }) =>
-      trxnData?.startsWith(FOUR_BYTE_EXECUTE_SWAP_CONTRACT),
-    );
-    if (executeSwapCall) {
-      transactionData = executeSwapCall?.data;
-    }
-  }
-  return {
-    data: transactionData,
-    from,
-  };
-};
+import { DappSwapComparisonData } from '../../controllers/app-state-controller';
+import {
+  DappSwapMiddlewareRequest,
+  getQuotesForConfirmation,
+} from './dapp-swap-util';
 
 export function createDappSwapMiddleware<
   Params extends (string | { to: string })[],
   Result extends Json,
 >({
   fetchQuotes,
-  setSwapQuotes,
+  setDappSwapComparisonData,
   getNetworkConfigurationByNetworkClientId,
   dappSwapMetricsFlag,
 }: {
   fetchQuotes: (quotesInput: GenericQuoteRequest) => Promise<QuoteResponse[]>;
-  setSwapQuotes: (
+  setDappSwapComparisonData: (
     uniqueId: string,
-    info: { quotes?: QuoteResponse[]; latency?: number },
+    info: DappSwapComparisonData,
   ) => void;
   getNetworkConfigurationByNetworkClientId: (
     networkClientId: NetworkClientId,
@@ -86,54 +39,20 @@ export function createDappSwapMiddleware<
     _res: JsonRpcResponse<Result>,
     next: () => void,
   ) => {
-    try {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      const { enabled: dappSwapEnabled, bridge_quote_fees: bridgeQuoteFees } =
-        dappSwapMetricsFlag;
-      if (!dappSwapEnabled) {
-        next();
-        return;
-      }
-      const { securityAlertResponse, params, origin } = req;
-      const { securityAlertId } = securityAlertResponse ?? {};
-
-      if (
-        (req.method === 'eth_sendTransaction' ||
-          req.method === 'wallet_sendCalls') &&
-        (origin === DAPP_SWAP_COMPARISON_ORIGIN || origin === TEST_DAPP_ORIGIN)
-      ) {
-        const { chainId } =
-          getNetworkConfigurationByNetworkClientId(req.networkClientId) ?? {};
+    const { securityAlertResponse } = req;
+    const { securityAlertId } = securityAlertResponse ?? {};
 
-        const { data, from } = getSwapDetails(params);
-        if (data && securityAlertId && chainId) {
-          const { quotesInput } = getDataFromSwap(chainId as Hex, data);
-          if (quotesInput) {
-            const startTime = new Date().getTime();
-            fetchQuotes({
-              ...quotesInput,
-              walletAddress: from,
-              fee: bridgeQuoteFees ?? DEFAULT_QUOTEFEE,
-            })
-              .then((quotes) => {
-                const endTime = new Date().getTime();
-                const latency = endTime - startTime;
-                if (quotes) {
-                  setSwapQuotes(securityAlertId, { quotes, latency });
-                }
-              })
-              .catch((error) => {
-                log.error('Error fetching dapp swap quotes', error);
-                captureException(error);
-              });
-          }
-        }
-      }
-    } catch (error) {
-      log.error('Error fetching dapp swap quotes', error);
-      captureException(error);
-    } finally {
-      next();
+    if (securityAlertId && req.method === 'eth_sendTransaction') {
+      getQuotesForConfirmation({
+        req,
+        fetchQuotes,
+        setDappSwapComparisonData,
+        getNetworkConfigurationByNetworkClientId,
+        dappSwapMetricsFlag,
+        securityAlertId,
+      });
     }
+
+    next();
   };
 }