fix: mock account api activity in e2e

Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>

Author: cursoragent

app/components/Views/UnifiedTransactionsView/UnifiedTransactionsView.tsx

@@ -188,7 +188,8 @@ const UnifiedTransactionsView = ({
         return false;
       }
 
-      const { chainId: _chainId, txParams, hash } = tx;
+      const { chainId: _chainId, txParams } = tx;
+      const hash = 'hash' in tx ? tx.hash : undefined;
       const { from, nonce, actionId } = txParams || {};
       // Some txs don't have nonce, like intent based swaps
       const hasNonce = nonce !== undefined && nonce !== null;

app/components/Views/UnifiedTransactionsView/helpers/mappers.ts

@@ -12,15 +12,15 @@ import { NATIVE_TOKEN_ADDRESS } from '../../confirmations/constants/tokens';
 import type { ConfirmedEvmTransaction } from './types';
 
 export interface ActivityHistoryQueryParams {
-  accountAddresses: string[];
-  networks: CaipChainId[];
+  accountAddresses: readonly string[];
+  networks: readonly CaipChainId[];
 }
 
 const EXCLUDED_TRANSACTION_TYPES = ['SPAM_TOKEN_TRANSFER'];
 
 // The API returns CAIP-10 account IDs, but the filtering logic only needs the
 // plain wallet address when deciding whether a tx belongs to the active account.
-const getPlainAddresses = (accountAddresses: string[]) =>
+const getPlainAddresses = (accountAddresses: readonly string[]) =>
   [
     ...new Set(
       accountAddresses
@@ -206,7 +206,7 @@ export const normalizeTransactions = (
 // rules first, then adapts the surviving rows into TransactionMeta-like items
 // for the existing mobile Activity renderers.
 export const selectConfirmedTransactions =
-  ({ accountAddresses }: { accountAddresses: string[] }) =>
+  ({ accountAddresses }: { accountAddresses: readonly string[] }) =>
   (data: InfiniteData<V4MultiAccountTransactionsResponse>) => {
     const plainAddresses = new Set(getPlainAddresses(accountAddresses));
 

app/components/Views/UnifiedTransactionsView/hooks/useTransactionsQuery.ts

@@ -1,5 +1,7 @@
 import {
+  InfiniteData,
   QueryFunctionContext,
+  QueryFunction,
   QueryKey,
   useInfiniteQuery,
 } from '@tanstack/react-query';
@@ -11,43 +13,69 @@ import { selectAccountGroupEvmAccountAddresses } from '../../../../selectors/mul
 import { selectEvmEnabledCaipNetworks } from '../../../../selectors/networkEnablementController';
 import { selectConfirmedTransactions } from '../helpers/mappers';
 import { MINUTE } from '../../../../constants/time';
+import type { ConfirmedEvmTransaction } from '../helpers/types';
+
+type ConfirmedEvmTransactionsPage = Omit<
+  V4MultiAccountTransactionsResponse,
+  'data'
+> & {
+  data: ConfirmedEvmTransaction[];
+};
 
 export const useTransactionsQuery = () => {
   const accountAddresses = useSelector(selectAccountGroupEvmAccountAddresses);
   const networks = useSelector(selectEvmEnabledCaipNetworks);
   const selectFn = useMemo(
     () =>
       selectConfirmedTransactions({
-        accountAddresses,
+        accountAddresses: [...accountAddresses],
       }),
     [accountAddresses],
   );
 
-  const queryOptions = useMemo(
-    () =>
+  const queryOptions = useMemo(() => {
+    const options =
       getApiClient().accounts.getV4MultiAccountTransactionsInfiniteQueryOptions(
         {
           accountAddresses: [...accountAddresses],
           networks: [...networks],
           includeTxMetadata: true,
         },
-      ),
-    [accountAddresses, networks],
-  );
+      );
+
+    return {
+      queryKey: options.queryKey as QueryKey,
+      queryFn: options.queryFn as QueryFunction<
+        V4MultiAccountTransactionsResponse,
+        QueryKey,
+        string | undefined
+      >,
+    };
+  }, [accountAddresses, networks]);
 
   return useInfiniteQuery<
     V4MultiAccountTransactionsResponse,
     Error,
-    ReturnType<ReturnType<typeof selectConfirmedTransactions>>,
+    ConfirmedEvmTransactionsPage,
     QueryKey
   >({
-    queryKey: queryOptions.queryKey as QueryKey,
-    queryFn: ({
+    queryKey: queryOptions.queryKey,
+    queryFn: (({
       pageParam,
       signal,
     }: QueryFunctionContext<QueryKey, string | undefined>) =>
-      queryOptions.queryFn({ pageParam, signal }),
-    getNextPageParam: queryOptions.getNextPageParam,
+      queryOptions.queryFn({
+        pageParam,
+        signal,
+        queryKey: queryOptions.queryKey,
+        meta: undefined,
+      })) as QueryFunction<
+      V4MultiAccountTransactionsResponse,
+      QueryKey,
+      string | undefined
+    >,
+    getNextPageParam: ({ pageInfo }) =>
+      pageInfo.hasNextPage ? pageInfo.endCursor : undefined,
     select: selectFn,
     enabled: accountAddresses.length > 0 && networks.length > 0,
     staleTime: 5 * MINUTE,

app/selectors/multichainAccounts/accountTreeController.ts

@@ -429,7 +429,9 @@ export const selectAccountGroupEvmInternalAccounts = createSelector(
 export const selectAccountGroupEvmAccountAddresses = createSelector(
   [selectSelectedInternalAccount, selectAccountGroupEvmInternalAccounts],
   (selectedInternalAccount, groupEvmAccounts) => {
-    const selectedEvmAccount = isEvmAccountType(selectedInternalAccount?.type)
+    const selectedEvmAccount =
+      selectedInternalAccount &&
+      isEvmAccountType(selectedInternalAccount.type)
       ? selectedInternalAccount
       : (groupEvmAccounts.find(
           (account) =>

tests/api-mocking/MockServerE2E.ts

@@ -14,6 +14,7 @@ import {
   findMatchingPostEvent,
   processPostRequestBody,
   setupAccountsV2SupportedNetworksMock,
+  setupAccountsV4TransactionsMock,
 } from './helpers/mockHelpers.ts';
 import { getLocalHost } from '../framework/fixtures/FixtureUtils.ts';
 import PortManager, { ResourceType } from '../framework/PortManager.ts';
@@ -298,6 +299,7 @@ export default class MockServerE2E implements Resource {
     }
 
     await setupAccountsV2SupportedNetworksMock(this._server);
+    await setupAccountsV4TransactionsMock(this._server);
 
     await this._server
       .forAnyRequest()

tests/api-mocking/helpers/mockHelpers.ts

@@ -463,6 +463,28 @@ export async function setupAccountsV2SupportedNetworksMock(
   });
 }
 
+/**
+ * Registers a default empty history response for Accounts API v4 transactions.
+ * Tests that need activity rows can override this with a test-specific mock.
+ */
+export async function setupAccountsV4TransactionsMock(
+  server: Mockttp,
+): Promise<void> {
+  await setupMockRequest(server, {
+    requestMethod: 'GET',
+    url: /^https:\/\/accounts\.api\.cx\.metamask\.io\/v4\/multiaccount\/transactions(\?.*)?$/,
+    response: {
+      data: [],
+      unprocessedNetworks: [],
+      pageInfo: {
+        count: 0,
+        hasNextPage: false,
+      },
+    },
+    responseCode: 200,
+  });
+}
+
 export interface SeenProxiedRequest {
   method: string;
   proxiedUrl: string;