Adding code to capture metrics for uniswap shield

Author: jpuri

app/scripts/metamask-controller.js

@@ -2892,6 +2892,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/info/base-transaction-info/base-transaction-info.tsx

@@ -6,6 +6,9 @@ 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';
+import { DappSwapComparisonBanner } from '../shared/dapp-swap-comparison-banner/dapp-swap-comparison-banner';
+
+const DAPP_SWAP_COMPARISON_ORIGIN = 'https://app.uniswap.org';
 
 const BaseTransactionInfo = () => {
   const { currentConfirmation: transactionMeta } =
@@ -17,6 +20,9 @@ const BaseTransactionInfo = () => {
 
   return (
     <>
+      {transactionMeta.origin === DAPP_SWAP_COMPARISON_ORIGIN && (
+        <DappSwapComparisonBanner />
+      )}
       <TransactionAccountDetails />
       <BatchSimulationDetails />
       <TransactionDetails />

ui/pages/confirmations/components/confirm/info/hooks/useDappSwapComparisonInfo.ts

@@ -0,0 +1,82 @@
+import { Hex } from '@metamask/utils';
+import { TransactionMeta } from '@metamask/transaction-controller';
+import { useCallback, useEffect } from 'react';
+
+import { fetchQuotes } from '../../../../../../store/actions';
+import { useConfirmContext } from '../../../../context/confirm';
+import { useTransactionEventFragment } from '../../../../hooks/useTransactionEventFragment';
+import {
+  getDataFromSwap,
+  getBestQuote,
+  getPercentageValue,
+  getPercentageGasDifference,
+} from '../uniswap-shield-utils';
+
+export function useDappSwapComparisonInfo() {
+  const { currentConfirmation } = useConfirmContext<TransactionMeta>();
+  const {
+    chainId,
+    id: transactionId,
+    simulationData,
+    txParams,
+  } = currentConfirmation ?? {
+    txParams: {},
+  };
+  const { data, gas, value: amount } = txParams ?? {};
+  const { updateTransactionEventFragment } = useTransactionEventFragment();
+
+  const captureDappSwapComparisonMetricsProperties = useCallback(
+    (properties: Record<string, string>) => {
+      updateTransactionEventFragment(
+        {
+          properties: {
+            uniswap_shield: properties,
+          },
+        },
+        transactionId,
+      );
+    },
+    [transactionId, updateTransactionEventFragment],
+  );
+
+  useEffect(() => {
+    captureDappSwapComparisonMetricsProperties({ loading: 'true' });
+
+    const { quotesInput, amountMin } = getDataFromSwap(chainId, amount, data);
+    if (!quotesInput || !amountMin) {
+      return;
+    }
+
+    fetchQuotes(quotesInput).then((quotes) => {
+      const selectedQuoteIndex = getBestQuote(quotes);
+
+      const percentageChangeInTokenAmount = getPercentageValue(
+        quotes[selectedQuoteIndex].quote.destTokenAmount,
+        amountMin,
+      );
+
+      const percentageChangeInTokenMinAmount = getPercentageValue(
+        quotes[selectedQuoteIndex].quote.minDestTokenAmount,
+        amountMin,
+      );
+
+      const percentageChangeInGas = getPercentageGasDifference(
+        quotes[selectedQuoteIndex],
+        gas as Hex,
+      );
+
+      captureDappSwapComparisonMetricsProperties({
+        percentage_change_in_token_amount: percentageChangeInTokenAmount,
+        percentage_change_in_token_min_amount: percentageChangeInTokenMinAmount,
+        percentage_change_in_gas: percentageChangeInGas,
+      });
+    });
+  }, [
+    amount,
+    captureDappSwapComparisonMetricsProperties,
+    chainId,
+    data,
+    gas,
+    simulationData,
+  ]);
+}

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

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

ui/pages/confirmations/components/confirm/info/uniswap-shield-utils.ts

@@ -0,0 +1,167 @@
+import { Hex } from '@metamask/utils';
+import { Interface, TransactionDescription } from '@ethersproject/abi';
+import { QuoteResponse } from '@metamask/bridge-controller';
+import { addHexPrefix } from 'ethereumjs-util';
+import { getNativeTokenAddress } from '@metamask/assets-controllers';
+
+import { Numeric } from '../../../../../../shared/modules/Numeric';
+
+export const ABI = [
+  {
+    constant: true,
+    inputs: [
+      {
+        name: 'commands',
+        type: 'bytes',
+      },
+      {
+        name: 'inputs',
+        type: 'bytes[]',
+      },
+      {
+        name: 'deadline',
+        type: 'uint256',
+      },
+    ],
+    name: 'execute',
+    type: 'function',
+  },
+  {
+    constant: true,
+    inputs: [
+      {
+        name: 'commands',
+        type: 'bytes',
+      },
+      {
+        name: 'inputs',
+        type: 'bytes[]',
+      },
+    ],
+    name: 'execute',
+    type: 'function',
+  },
+];
+
+export const getWordsFromInput = (input: string) => {
+  return input.slice(2).match(/.{1,64}/g) as string[];
+};
+
+export const wordToAddress = (word: string) => {
+  return addHexPrefix(word.slice(24));
+};
+
+export const wordToAmount = (word: string) => {
+  const amount = word.replace(/^0+/, '');
+  return addHexPrefix(amount);
+};
+
+export const parseTransactionData = (data?: string) => {
+  const contractInterface = new Interface(ABI);
+
+  let parsedTransactionData: TransactionDescription;
+
+  try {
+    parsedTransactionData = contractInterface.parseTransaction({
+      data: data as Hex,
+    });
+  } catch (error) {
+    return { inputs: [], commandBytes: [] };
+  }
+
+  const commands = parsedTransactionData.args.commands as string;
+  const inputs = parsedTransactionData.args.inputs as string[];
+  const commandBytes = commands.slice(2).match(/.{1,2}/gu) as string[];
+
+  return { inputs, commandBytes };
+};
+
+export const getDataFromSwap = (
+  chainId: Hex,
+  amount?: string,
+  data?: string,
+) => {
+  let quotesInput;
+  let amountMin;
+  const { commandBytes, inputs } = parseTransactionData(data);
+
+  const sweepIndex = commandBytes.findIndex(
+    (commandByte) => commandByte === '04',
+  );
+
+  if (sweepIndex >= 0) {
+    const words = getWordsFromInput(inputs[sweepIndex]);
+    amountMin = wordToAmount(words[2]);
+    quotesInput = {
+      walletAddress: wordToAddress(words[1]),
+      srcChainId: chainId,
+      destChainId: chainId,
+      srcTokenAddress: getNativeTokenAddress(chainId),
+      destTokenAddress: wordToAddress(words[0]),
+      srcTokenAmount: amount ?? '0x0',
+      gasIncluded: false,
+      gasIncluded7702: false,
+    };
+  } else {
+    const seaportIndex = commandBytes.findIndex(
+      (commandByte) => commandByte === '10',
+    );
+
+    if (seaportIndex >= 0) {
+      const words = getWordsFromInput(inputs[seaportIndex]);
+      amountMin = wordToAmount(words[13]);
+      quotesInput = {
+        walletAddress: wordToAddress(words[28]),
+        srcChainId: chainId,
+        destChainId: chainId,
+        srcTokenAddress: wordToAddress(words[10]),
+        destTokenAddress: wordToAddress(words[16]),
+        srcTokenAmount: wordToAmount(words[12]),
+        gasIncluded: false,
+        gasIncluded7702: false,
+      };
+    }
+  }
+
+  return { quotesInput, amountMin };
+};
+
+export const getBestQuote = (quotes: QuoteResponse[]) => {
+  let selectedQuoteIndex = -1;
+  let highestMinDestTokenAmount = '0';
+
+  quotes.forEach((quote, index) => {
+    if (
+      new Numeric(quote.quote.minDestTokenAmount, 10).greaterThan(
+        new Numeric(highestMinDestTokenAmount, 10),
+      )
+    ) {
+      highestMinDestTokenAmount = quote.quote.minDestTokenAmount;
+      selectedQuoteIndex = index;
+    }
+  });
+
+  return selectedQuoteIndex;
+};
+
+export const getPercentageValue = (value: string, baseValue: string) => {
+  return new Numeric(value, 10)
+    .minus(new Numeric(baseValue, 10))
+    .divide(new Numeric(baseValue, 10))
+    .times(100, 10)
+    .toNumber()
+    .toFixed(2);
+};
+
+export const getPercentageGasDifference = (quote: QuoteResponse, gas: Hex) => {
+  const totalGasInQuote =
+    (quote.approval?.gasLimit ?? 0) + (quote.trade?.gasLimit ?? 0);
+
+  const totalGasInCurrentTransaction = new Numeric(gas ?? '0x0', 16).toNumber();
+
+  return (
+    ((totalGasInQuote - totalGasInCurrentTransaction) /
+      totalGasInCurrentTransaction) *
+    100
+  ).toFixed(2);
+};

ui/store/actions.ts

@@ -74,6 +74,13 @@ import {
   Subscription,
   UpdatePaymentMethodOpts,
 } from '@metamask/subscription-controller';
+import {
+  GenericQuoteRequest,
+  L1GasFees,
+  NonEvmFees,
+  QuoteResponse,
+} from '@metamask/bridge-controller';
+
 import { captureException } from '../../shared/lib/sentry';
 import { switchDirection } from '../../shared/lib/switch-direction';
 import {
@@ -7432,3 +7439,9 @@ export async function getLayer1GasFeeValue({
     { chainId, networkClientId, transactionParams },
   ]);
 }
+
+export async function fetchQuotes(
+  quoteRequest: GenericQuoteRequest,
+): Promise<QuoteResponse[]> {
+  return await submitRequestToBackground('fetchQuotes', [quoteRequest]);
+}