fix: display Interacting with in transaction details section

Author: vinistevam

shared/lib/transactions.utils.test.ts

@@ -1,5 +1,9 @@
 import React from 'react';
-import { AuthorizationList } from '@metamask/transaction-controller';
+import {
+  AuthorizationList,
+  NestedTransactionMetadata,
+  TransactionType,
+} from '@metamask/transaction-controller';
 import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers';
 import configureStore from '../../../../../../../store/store';
 import { getMockConfirmStateForTransaction } from '../../../../../../../../test/data/confirmations/helper';
@@ -20,14 +24,17 @@ jest.mock(
 
 function render({
   authorizationList,
+  nestedTransactions,
 }: {
   authorizationList?: AuthorizationList;
+  nestedTransactions?: NestedTransactionMetadata[];
 }) {
   const store = configureStore(
     getMockConfirmStateForTransaction(
       genUnapprovedContractInteractionConfirmation({
         address: FROM_MOCK,
         authorizationList,
+        nestedTransactions,
       }),
     ),
   );
@@ -44,12 +51,14 @@ describe('TransactionAccountDetails', () => {
     expect(getByText('0x12345...67890')).toBeInTheDocument();
   });
 
-  it('renders account type', () => {
-    const { getByText } = render({
+  it('renders type row', () => {
+    const { getByText, queryByText } = render({
       authorizationList: [{ address: DELEGATION_MOCK }],
     });
 
     expect(getByText('Smart account')).toBeInTheDocument();
+    expect(getByText('Type')).toBeInTheDocument();
+    expect(queryByText('Account type')).toBeNull();
   });
 
   it('does not render if no authorization list', () => {
@@ -58,4 +67,38 @@ describe('TransactionAccountDetails', () => {
     expect(queryByText('0x12345...67890')).toBeNull();
     expect(queryByText('Smart account')).toBeNull();
   });
+
+  it('renders Account Type when transaction is a batch transaction', () => {
+    const { getByText } = render({
+      authorizationList: [{ address: DELEGATION_MOCK }],
+      nestedTransactions: [{ to: FROM_MOCK }],
+    });
+
+    expect(getByText('Account type')).toBeInTheDocument();
+  });
+
+  describe('RecipientRow', () => {
+    it('renders when transaction is a batch transaction', () => {
+      const ADDRESS_2_MOCK = '0x1234567890123456789012345678901234567891';
+      const { getByText, getByTestId } = render({
+        authorizationList: [{ address: DELEGATION_MOCK }],
+        nestedTransactions: [
+          {
+            to: FROM_MOCK,
+            data: '0x1',
+            type: TransactionType.contractInteraction,
+          },
+          {
+            to: ADDRESS_2_MOCK,
+            data: '0x2',
+            type: TransactionType.contractInteraction,
+          },
+        ] as NestedTransactionMetadata[],
+      });
+      expect(
+        getByTestId('transaction-details-recipient-row'),
+      ).toBeInTheDocument();
+      expect(getByText('Interacting with')).toBeInTheDocument();
+    });
+  });
 });

shared/lib/transactions.utils.ts

@@ -12,18 +12,18 @@ import {
   useIsUpgradeTransaction,
 } from '../../hooks/useIsUpgradeTransaction';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
-import { isBatchTransaction } from '../../../../../../../../shared/lib/transactions.utils';
 import { ConfirmInfoAlertRow } from '../../../../../../../components/app/confirm/info/row/alert-row/alert-row';
 import { RowAlertKey } from '../../../../../../../components/app/confirm/info/row/constants';
+import { RecipientRow } from '../../shared/transaction-details/transaction-details';
 
 export function TransactionAccountDetails() {
   const t = useI18nContext();
   const { currentConfirmation } = useConfirmContext<TransactionMeta>();
   const isUpgrade = useIsUpgradeTransaction();
   const isDowngrade = useIsDowngradeTransaction();
   const { chainId, nestedTransactions, txParams, id } = currentConfirmation;
-  const { from, to } = txParams;
-  const isBatch = isBatchTransaction(from, nestedTransactions, to);
+  const { from } = txParams;
+  const isBatch = Boolean(nestedTransactions?.length);
 
   if (!isUpgrade && !isDowngrade) {
     return null;
@@ -60,6 +60,7 @@ export function TransactionAccountDetails() {
           </ConfirmInfoRow>
         </>
       )}
+      {isBatch && <RecipientRow />}
     </ConfirmInfoSection>
   );
 }

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

@@ -3,10 +3,6 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Hex } from '@metamask/utils';
 import { toHex } from '@metamask/controller-utils';
-import {
-  NestedTransactionMetadata,
-  TransactionType,
-} from '@metamask/transaction-controller';
 import {
   getMockConfirmState,
   getMockConfirmStateForTransaction,
@@ -232,38 +228,5 @@ describe('<TransactionDetails />', () => {
         getByTestId('transaction-details-recipient-row'),
       ).toBeInTheDocument();
     });
-
-    it('renders SmartContractWithLogo when transaction is a batch transaction', () => {
-      const ADDRESS_MOCK = '0x88aa6343307ec9a652ccddda3646e62b2f1a5125';
-      const ADDRESS_2_MOCK = '0x1234567890123456789012345678901234567891';
-      const contractInteraction = genUnapprovedContractInteractionConfirmation({
-        address: ADDRESS_MOCK,
-        nestedTransactions: [
-          {
-            to: ADDRESS_MOCK,
-            data: '0x1',
-            type: TransactionType.contractInteraction,
-          },
-          {
-            to: ADDRESS_2_MOCK,
-            data: '0x2',
-            type: TransactionType.contractInteraction,
-          },
-        ] as NestedTransactionMetadata[],
-      });
-      const state = getMockConfirmStateForTransaction(contractInteraction, {
-        metamask: {
-          preferences: {
-            showConfirmationAdvancedDetails: true,
-          },
-        },
-      });
-      const mockStore = configureMockStore(middleware)(state);
-      const { getByText } = renderWithConfirmContextProvider(
-        <TransactionDetails />,
-        mockStore,
-      );
-      expect(getByText('Smart contract')).toBeInTheDocument();
-    });
   });
 });

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

@@ -62,6 +62,8 @@ export const OriginRow = () => {
 };
 
 export const RecipientRow = ({ recipient }: { recipient?: Hex } = {}) => {
+  console.log('RecipientRow >>>>');
+
   const t = useI18nContext();
   const { currentConfirmation } = useConfirmContext<TransactionMeta>();
   const { from } = currentConfirmation?.txParams ?? {};
@@ -71,6 +73,7 @@ export const RecipientRow = ({ recipient }: { recipient?: Hex } = {}) => {
     Boolean(nestedTransactions?.length) &&
     to?.toLowerCase() === from.toLowerCase();
 
+  console.log('<>>>>>>>', to, from, isBatch);
   if (!to || !isValidAddress(to)) {
     return null;
   }
@@ -182,13 +185,19 @@ export const TransactionDetails = () => {
   if (currentConfirmation?.type === TransactionType.revokeDelegation) {
     return null;
   }
+  const { nestedTransactions, txParams } = currentConfirmation ?? {};
+  const { from, to } = txParams ?? {};
+
+  const isBatch =
+    Boolean(nestedTransactions?.length) &&
+    to?.toLowerCase() === from.toLowerCase();
 
   return (
     <>
       <ConfirmInfoSection data-testid="transaction-details-section">
         <NetworkRow isShownWithAlertsOnly />
         <OriginRow />
-        <RecipientRow />
+        {!isBatch && <RecipientRow />}
         {showAdvancedDetails && <MethodDataRow />}
         <SigningInWithRow />
       </ConfirmInfoSection>

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

@@ -3,7 +3,6 @@ import {
   TransactionStatus,
   TransactionType,
 } from '@metamask/transaction-controller';
-import { isBatchTransaction } from '../../../../../../shared/lib/transactions.utils';
 import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants';
 import { Severity } from '../../../../../helpers/constants/design-system';
 import { getMockConfirmStateForTransaction } from '../../../../../../test/data/confirmations/helper';
@@ -49,19 +48,15 @@ function runHook({
 }
 
 describe('useAccountTypeUpgrade', () => {
-  const isBatchTransactionMock = jest.mocked(isBatchTransaction);
-
   beforeEach(() => {
     jest.resetAllMocks();
   });
 
   it('returns an empty array when the transaction is not a batch transaction', () => {
-    isBatchTransactionMock.mockReturnValue(false);
     expect(runHook()).toEqual([]);
   });
 
   it('returns an alert when the transaction is a batch transaction', () => {
-    isBatchTransactionMock.mockReturnValue(true);
     expect(
       runHook({
         currentConfirmation: {

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

@@ -3,19 +3,17 @@ import { TransactionMeta } from '@metamask/transaction-controller';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { useConfirmContext } from '../../../context/confirm';
 import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts';
-import { isBatchTransaction } from '../../../../../../shared/lib/transactions.utils';
 import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants';
 import { Severity } from '../../../../../helpers/constants/design-system';
 import { AccountTypeMessage } from './AccountTypeMessage';
 
 export function useAccountTypeUpgrade(): Alert[] {
   const t = useI18nContext();
   const { currentConfirmation } = useConfirmContext<TransactionMeta>();
-  const { nestedTransactions, txParams } = currentConfirmation ?? {};
-  const { from, to } = txParams ?? {};
-console.log('currentConfirmation', from, nestedTransactions, to);
-  const isBatch = isBatchTransaction(from, nestedTransactions, to);
-console.log('isBatch', isBatch);
+  const { nestedTransactions } = currentConfirmation ?? {};
+
+  const isBatch = Boolean(nestedTransactions?.length);
+
   return useMemo(() => {
     if (!isBatch) {
       return [];