feat: Adding code to capture metrics for dapp swaps

app/scripts/metamask-controller.js

@@ -2987,6 +2987,10 @@ export default class MetamaskController extends EventEmitter {
           this.controllerMessenger,
           `${BRIDGE_CONTROLLER_NAME}:${BridgeBackgroundAction.TRACK_METAMETRICS_EVENT}`,
         ),
+      [BridgeBackgroundAction.FETCH_QUOTES]: this.controllerMessenger.call.bind(
+        this.controllerMessenger,
+        `${BRIDGE_CONTROLLER_NAME}:${BridgeBackgroundAction.FETCH_QUOTES}`,
+      ),
 
       // Bridge Tx submission
       [BridgeStatusAction.SUBMIT_TX]: this.controllerMessenger.call.bind(

ui/pages/confirmations/components/confirm/dapp-swap-comparison-banner/dapp-swap-comparison-banner.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+
+import { getMockConfirmStateForTransaction } from '../../../../../../test/data/confirmations/helper';
+import { renderWithConfirmContextProvider } from '../../../../../../test/lib/confirmations/render-helpers';
+import { genUnapprovedContractInteractionConfirmation } from '../../../../../../test/data/confirmations/contract-interaction';
+import { DappSwapComparisonBanner } from './dapp-swap-comparison-banner';
+
+jest.mock('../../../hooks/transactions/useDappSwapComparisonInfo', () => ({
+  useDappSwapComparisonInfo: jest.fn(() => undefined),
+}));
+
+function render() {
+  const state = getMockConfirmStateForTransaction(
+    genUnapprovedContractInteractionConfirmation(),
+  );
+
+  const mockStore = configureMockStore()(state);
+
+  return renderWithConfirmContextProvider(
+    <DappSwapComparisonBanner />,
+    mockStore,
+  );
+}
+
+describe('<DappSwapComparisonBanner />', () => {
+  it('renders component without errors', () => {
+    const { container } = render();
+    expect(container).toBeEmptyDOMElement();
+  });
+});

ui/pages/confirmations/components/confirm/dapp-swap-comparison-banner/dapp-swap-comparison-banner.tsx

@@ -0,0 +1,12 @@
+import 'react';
+
+import { useDappSwapComparisonInfo } from '../../../hooks/transactions/useDappSwapComparisonInfo';
+
+// The component is conditionally included for dapp swap origin
+// The only purpose of the component currently is to capture dapp swap comparison related metrics.
+
+export const DappSwapComparisonBanner = () => {
+  useDappSwapComparisonInfo();
+
+  return null;
+};

ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.tsx

@@ -1,12 +1,15 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import React from 'react';
 import { useConfirmContext } from '../../../../context/confirm';
+import { DappSwapComparisonBanner } from '../../dapp-swap-comparison-banner/dapp-swap-comparison-banner';
 import { AdvancedDetails } from '../shared/advanced-details/advanced-details';
 import { GasFeesSection } from '../shared/gas-fees-section/gas-fees-section';
 import { TransactionDetails } from '../shared/transaction-details/transaction-details';
 import { TransactionAccountDetails } from '../batch/transaction-account-details';
 import { BatchSimulationDetails } from '../batch/batch-simulation-details/batch-simulation-details';
 
+const DAPP_SWAP_COMPARISON_ORIGIN = 'https://app.uniswap.org';
+
 const BaseTransactionInfo = () => {
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
@@ -17,6 +20,9 @@ const BaseTransactionInfo = () => {
 
   return (
     <>
+      {transactionMeta.origin === DAPP_SWAP_COMPARISON_ORIGIN && (
+        <DappSwapComparisonBanner />
+      )}
       <TransactionAccountDetails />
       <BatchSimulationDetails />
       <TransactionDetails />

ui/pages/confirmations/components/simulation-details/useBalanceChanges.ts

@@ -17,7 +17,10 @@ import {
   selectConversionRateByChainId,
 } from '../../../../selectors';
 import { fetchTokenExchangeRates } from '../../../../helpers/utils/util';
-import { ERC20_DEFAULT_DECIMALS, fetchErc20Decimals } from '../../utils/token';
+import {
+  ERC20_DEFAULT_DECIMALS,
+  fetchAllErc20Decimals,
+} from '../../utils/token';
 
 import {
   BalanceChange,
@@ -63,22 +66,6 @@ function getAssetAmount(
   );
 }
 
-// Fetches token details for all the token addresses in the SimulationTokenBalanceChanges
-async function fetchAllErc20Decimals(
-  addresses: Hex[],
-  chainId: Hex,
-): Promise<Record<Hex, number>> {
-  const uniqueAddresses = [
-    ...new Set(addresses.map((address) => address.toLowerCase() as Hex)),
-  ];
-  const allDecimals = await Promise.all(
-    uniqueAddresses.map((address) => fetchErc20Decimals(address, chainId)),
-  );
-  return Object.fromEntries(
-    allDecimals.map((decimals, i) => [uniqueAddresses[i], decimals]),
-  );
-}
-
 async function fetchTokenFiatRates(
   fiatCurrency: string,
   erc20TokenAddresses: Hex[],