feat: Add new metric sending_value to Transaction * events

ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts

@@ -76,6 +76,7 @@ describe('useTokenValues', () => {
       decodedTransferValue: '7',
       displayTransferValue: '7',
       fiatDisplayValue: '$6.37',
+      fiatValue: 6.37,
       pending: false,
     });
   });
@@ -122,6 +123,7 @@ describe('useTokenValues', () => {
       decodedTransferValue: '7',
       displayTransferValue: '7',
       fiatDisplayValue: null,
+      fiatValue: null,
       pending: false,
     });
   });

ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts

@@ -89,6 +89,7 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
     decodedTransferValue,
     displayTransferValue,
     fiatDisplayValue,
+    fiatValue,
     pending: pending || isDecodedTransferValuePending,
   };
 };

ui/pages/confirmations/components/confirm/info/hooks/useSendingValueMetric.test.ts

@@ -0,0 +1,104 @@
+import { TransactionMeta } from '@metamask/transaction-controller';
+import { renderHook } from '@testing-library/react-hooks';
+import { useEffect, useState } from 'react';
+import { genUnapprovedTokenTransferConfirmation } from '../../../../../../../test/data/confirmations/token-transfer';
+import { useTransactionEventFragment } from '../../../../hooks/useTransactionEventFragment';
+import { useSendingValueMetric } from './useSendingValueMetric';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useEffect: jest.fn(),
+  useState: jest.fn(),
+}));
+
+jest.mock('../../../../hooks/useTransactionEventFragment');
+
+describe('useSimulationMetrics', () => {
+  const useTransactionEventFragmentMock = jest.mocked(
+    useTransactionEventFragment,
+  );
+
+  const useStateMock = jest.mocked(useState);
+  const useEffectMock = jest.mocked(useEffect);
+
+  // TODO: Replace `any` with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let updateTransactionEventFragmentMock: jest.MockedFunction<any>;
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+
+    updateTransactionEventFragmentMock = jest.fn();
+
+    useTransactionEventFragmentMock.mockReturnValue({
+      updateTransactionEventFragment: updateTransactionEventFragmentMock,
+    });
+
+    // TODO: Replace `any` with type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    useStateMock.mockImplementation(((initialValue: any) => [
+      initialValue,
+      jest.fn(),
+      // TODO: Replace `any` with type
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ]) as any);
+
+    useEffectMock.mockImplementation((fn) => fn());
+  });
+
+  describe('useSendingValueMetric', () => {
+    it('Updates the event property', async () => {
+      const MOCK_FIAT_VALUE = 10;
+      const transactionMeta = genUnapprovedTokenTransferConfirmation(
+        {},
+      ) as TransactionMeta;
+      const props = { transactionMeta, fiatValue: MOCK_FIAT_VALUE };
+
+      renderHook(() => useSendingValueMetric(props));
+
+      expect(updateTransactionEventFragmentMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          properties: expect.objectContaining({
+            sending_value: MOCK_FIAT_VALUE,
+          }),
+        }),
+        '1d7c08c0-fe54-11ee-9243-91b1e533746a',
+      );
+
+      jest.restoreAllMocks();
+    });
+
+    it('Does not updates the event property if fiat value is undefined', async () => {
+      const MOCK_FIAT_VALUE = undefined;
+      const transactionMeta = genUnapprovedTokenTransferConfirmation(
+        {},
+      ) as TransactionMeta;
+      const props = { transactionMeta, fiatValue: MOCK_FIAT_VALUE };
+
+      renderHook(() => useSendingValueMetric(props));
+
+      expect(updateTransactionEventFragmentMock).not.toHaveBeenCalled();
+
+      jest.restoreAllMocks();
+    });
+
+    it('Does not updates the event property if fiat value is empty string', async () => {
+      const MOCK_FIAT_VALUE = '' as const;
+      const transactionMeta = genUnapprovedTokenTransferConfirmation(
+        {},
+      ) as TransactionMeta;
+      const props = { transactionMeta, fiatValue: MOCK_FIAT_VALUE };
+
+      renderHook(() => useSendingValueMetric(props));
+
+      expect(updateTransactionEventFragmentMock).not.toHaveBeenCalled();
+
+      jest.restoreAllMocks();
+    });
+  });
+});

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

@@ -0,0 +1,26 @@
+import { TransactionMeta } from '@metamask/transaction-controller';
+import { useEffect } from 'react';
+import { useTransactionEventFragment } from '../../../../hooks/useTransactionEventFragment';
+
+export type UseSendingValueMetricProps = {
+  transactionMeta: TransactionMeta;
+  fiatValue: number | undefined | '';
+};
+
+export const useSendingValueMetric = ({
+  transactionMeta,
+  fiatValue,
+}: UseSendingValueMetricProps) => {
+  const { updateTransactionEventFragment } = useTransactionEventFragment();
+
+  const transactionId = transactionMeta.id;
+  const properties = { sending_value: fiatValue };
+  const sensitiveProperties = {};
+  const params = { properties, sensitiveProperties };
+
+  useEffect(() => {
+    if (fiatValue !== undefined && fiatValue !== '') {
+      updateTransactionEventFragment(params, transactionId);
+    }
+  }, [updateTransactionEventFragment, transactionId, JSON.stringify(params)]);
+};

ui/pages/confirmations/components/confirm/info/shared/native-send-heading/native-send-heading.tsx

@@ -32,6 +32,7 @@ import {
 import { getMultichainNetwork } from '../../../../../../../selectors/multichain';
 import { useConfirmContext } from '../../../../../context/confirm';
 import { formatAmount } from '../../../../simulation-details/formatAmount';
+import { useSendingValueMetric } from '../../hooks/useSendingValueMetric';
 
 const NativeSendHeading = () => {
   const { currentConfirmation: transactionMeta } =
@@ -114,6 +115,8 @@ const NativeSendHeading = () => {
       </Text>
     );
 
+  useSendingValueMetric({ transactionMeta, fiatValue });
+
   return (
     <Box
       display={Display.Flex}

ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx

@@ -22,6 +22,7 @@ import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
 import { getPreferences } from '../../../../../../../selectors';
 import { useConfirmContext } from '../../../../../context/confirm';
 import { useTokenValues } from '../../hooks/use-token-values';
+import { useSendingValueMetric } from '../../hooks/useSendingValueMetric';
 import { useTokenDetails } from '../../hooks/useTokenDetails';
 import { ConfirmLoader } from '../confirm-loader/confirm-loader';
 
@@ -34,6 +35,7 @@ const SendHeading = () => {
     decodedTransferValue,
     displayTransferValue,
     fiatDisplayValue,
+    fiatValue,
     pending,
   } = useTokenValues(transactionMeta);
 
@@ -85,6 +87,8 @@ const SendHeading = () => {
       </Text>
     );
 
+  useSendingValueMetric({ transactionMeta, fiatValue });
+
   if (pending) {
     return <ConfirmLoader />;
   }