fix: Change visibility of AmountRow in contract interaction

ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { SimulationErrorCode } from '@metamask/transaction-controller';
+import { Hex } from '@metamask/utils';
 import {
   getMockConfirmState,
   getMockConfirmStateForTransaction,
@@ -44,21 +44,96 @@ describe('<TransactionDetails />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('renders component for transaction details with amount', () => {
-    const simulationDataMock = {
-      error: { code: SimulationErrorCode.Disabled },
-      tokenBalanceChanges: [],
-    };
-    const contractInteraction = genUnapprovedContractInteractionConfirmation({
-      simulationData: simulationDataMock,
-      chainId: CHAIN_IDS.GOERLI,
+  describe('AmountRow', () => {
+    describe('should be in the document', () => {
+      it('when showAdvancedDetails is true', () => {
+        const contractInteraction =
+          genUnapprovedContractInteractionConfirmation({
+            chainId: CHAIN_IDS.GOERLI,
+          });
+        const state = getMockConfirmStateForTransaction(contractInteraction, {
+          metamask: {
+            preferences: {
+              showConfirmationAdvancedDetails: true,
+            },
+          },
+        });
+        const mockStore = configureMockStore(middleware)(state);
+        const { getByTestId } = renderWithConfirmContextProvider(
+          <TransactionDetails />,
+          mockStore,
+        );
+        expect(
+          getByTestId('transaction-details-amount-row'),
+        ).toBeInTheDocument();
+      });
+
+      it('when value and simulated native balance mismatch', () => {
+        // Transaction value is set to 0x3782dace9d900000 below mock
+        const simulationDataMock = {
+          tokenBalanceChanges: [],
+          nativeBalanceChange: {
+            difference: '0x1' as Hex,
+            isDecrease: false,
+            previousBalance: '0x2' as Hex,
+            newBalance: '0x1' as Hex,
+          },
+        };
+        const contractInteraction =
+          genUnapprovedContractInteractionConfirmation({
+            simulationData: simulationDataMock,
+            chainId: CHAIN_IDS.GOERLI,
+          });
+        const state = getMockConfirmStateForTransaction(contractInteraction, {
+          metamask: {
+            preferences: {
+              // Intentionally setting to false to test the condition
+              showConfirmationAdvancedDetails: false,
+            },
+          },
+        });
+        const mockStore = configureMockStore(middleware)(state);
+        const { getByTestId } = renderWithConfirmContextProvider(
+          <TransactionDetails />,
+          mockStore,
+        );
+        expect(
+          getByTestId('transaction-details-amount-row'),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it('should not be in the document when value and simulated native balance mismatch is within threshold', () => {
+      // Transaction value is set to 0x3782dace9d900000 below mock
+      const simulationDataMock = {
+        tokenBalanceChanges: [],
+        nativeBalanceChange: {
+          difference: '0x3782dace9d900000' as Hex,
+          isDecrease: true,
+          previousBalance: '0x3782dace9d900001' as Hex,
+          newBalance: '0x0000000000000001' as Hex,
+        },
+      };
+      const contractInteraction = genUnapprovedContractInteractionConfirmation({
+        simulationData: simulationDataMock,
+        chainId: CHAIN_IDS.GOERLI,
+      });
+      const state = getMockConfirmStateForTransaction(contractInteraction, {
+        metamask: {
+          preferences: {
+            // Intentionally setting to false to test the condition
+            showConfirmationAdvancedDetails: false,
+          },
+        },
+      });
+      const mockStore = configureMockStore(middleware)(state);
+      const { queryByTestId } = renderWithConfirmContextProvider(
+        <TransactionDetails />,
+        mockStore,
+      );
+      expect(
+        queryByTestId('transaction-details-amount-row'),
+      ).not.toBeInTheDocument();
     });
-    const state = getMockConfirmStateForTransaction(contractInteraction);
-    const mockStore = configureMockStore(middleware)(state);
-    const { getByTestId } = renderWithConfirmContextProvider(
-      <TransactionDetails />,
-      mockStore,
-    );
-    expect(getByTestId('transaction-details-amount-row')).toBeInTheDocument();
   });
 });

ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.tsx

@@ -1,6 +1,6 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import { isValidAddress } from 'ethereumjs-util';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import {
   ConfirmInfoRow,
@@ -20,6 +20,7 @@ import { ConfirmInfoRowCurrency } from '../../../../../../../components/app/conf
 import { PRIMARY } from '../../../../../../../helpers/constants/common';
 import { useUserPreferencedCurrency } from '../../../../../../../hooks/useUserPreferencedCurrency';
 import { HEX_ZERO } from '../constants';
+import { hasValueAndNativeBalanceMismatch as checkValueAndNativeBalanceMismatch } from '../../utils';
 import { SigningInWithRow } from '../sign-in-with-row/sign-in-with-row';
 
 export const OriginRow = () => {
@@ -99,9 +100,8 @@ const AmountRow = () => {
   const { currency } = useUserPreferencedCurrency(PRIMARY);
 
   const value = currentConfirmation?.txParams?.value;
-  const simulationData = currentConfirmation?.simulationData;
 
-  if (!value || value === HEX_ZERO || !simulationData?.error) {
+  if (!value || value === HEX_ZERO) {
     return null;
   }
 
@@ -150,6 +150,11 @@ export const TransactionDetails = () => {
   const showAdvancedDetails = useSelector(
     selectConfirmationAdvancedDetailsOpen,
   );
+  const { currentConfirmation } = useConfirmContext<TransactionMeta>();
+  const hasValueAndNativeBalanceMismatch = useMemo(
+    () => checkValueAndNativeBalanceMismatch(currentConfirmation),
+    [currentConfirmation],
+  );
 
   return (
     <>
@@ -159,7 +164,9 @@ export const TransactionDetails = () => {
         {showAdvancedDetails && <MethodDataRow />}
         <SigningInWithRow />
       </ConfirmInfoSection>
-      <AmountRow />
+      {(showAdvancedDetails || hasValueAndNativeBalanceMismatch) && (
+        <AmountRow />
+      )}
       <PaymasterRow />
     </>
   );

ui/pages/confirmations/components/confirm/info/utils.ts

@@ -1,9 +1,15 @@
+import { TransactionMeta } from '@metamask/transaction-controller';
+import type { Hex } from '@metamask/utils';
+import { remove0x } from '@metamask/utils';
+import { BN } from 'bn.js';
 import { DecodedTransactionDataResponse } from '../../../../../../shared/types/transaction-decode';
 import {
   BackgroundColor,
   TextColor,
 } from '../../../../../helpers/constants/design-system';
 
+const VALUE_COMPARISON_PERCENT_THRESHOLD = 5;
+
 export function getIsRevokeSetApprovalForAll(
   value: DecodedTransactionDataResponse | undefined,
 ): boolean {
@@ -27,3 +33,80 @@ export const getAmountColors = (credit?: boolean, debit?: boolean) => {
   }
   return { color, backgroundColor };
 };
+
+/**
+ * Calculate the absolute percentage change between two values.
+ *
+ * @param originalValue - The first value.
+ * @param newValue - The second value.
+ * @returns The percentage change from the first value to the second value.
+ * If the original value is zero and the new value is not, returns 100.
+ */
+export function getPercentageChange(
+  originalValue: InstanceType<typeof BN>,
+  newValue: InstanceType<typeof BN>,
+): number {
+  const precisionFactor = new BN(10).pow(new BN(18));
+  const originalValuePrecision = originalValue.mul(precisionFactor);
+  const newValuePrecision = newValue.mul(precisionFactor);
+
+  const difference = newValuePrecision.sub(originalValuePrecision);
+
+  if (difference.isZero()) {
+    return 0;
+  }
+
+  if (originalValuePrecision.isZero() && !newValuePrecision.isZero()) {
+    return 100;
+  }
+
+  return difference.muln(100).div(originalValuePrecision).abs().toNumber();
+}
+
+/**
+ * Determine if the percentage change between two values is within a threshold.
+ *
+ * @param originalValue - The original value.
+ * @param newValue - The new value.
+ * @param newNegative - Whether the new value is negative.
+ * @returns Whether the percentage change between the two values is within a threshold.
+ */
+function percentageChangeWithinThreshold(
+  originalValue: Hex,
+  newValue: Hex,
+  newNegative?: boolean,
+): boolean {
+  const originalValueBN = new BN(remove0x(originalValue), 'hex');
+  let newValueBN = new BN(remove0x(newValue), 'hex');
+
+  if (newNegative) {
+    newValueBN = newValueBN.neg();
+  }
+
+  return (
+    getPercentageChange(originalValueBN, newValueBN) <=
+    VALUE_COMPARISON_PERCENT_THRESHOLD
+  );
+}
+
+/**
+ * Determine if a transaction has a value and simulation native balance mismatch.
+ *
+ * @param transactionMeta - The transaction metadata.
+ * @returns Whether the transaction has a value and simulation native balance mismatch.
+ */
+export function hasValueAndNativeBalanceMismatch(
+  transactionMeta: TransactionMeta,
+): boolean {
+  const value = transactionMeta?.txParams?.value ?? '0x0';
+  const nativeBalanceChange =
+    transactionMeta?.simulationData?.nativeBalanceChange;
+  const simulatedNativeBalanceDifference =
+    nativeBalanceChange?.difference ?? '0x0';
+
+  return !percentageChangeWithinThreshold(
+    value as Hex,
+    simulatedNativeBalanceDifference,
+    nativeBalanceChange?.isDecrease === false,
+  );
+}