fix: address account api transaction ci failures

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

Author: cursoragent

app/components/Views/UnifiedTransactionsView/UnifiedTransactionsView.tsx

@@ -58,6 +58,10 @@ import type { ConfirmedEvmTransaction } from './helpers/types';
 type SmartTransactionWithId = SmartTransaction & { id: string };
 type EvmTransaction = TransactionMeta | SmartTransactionWithId;
 
+const isEvmTransaction = (
+  tx: TransactionMeta | SmartTransaction,
+): tx is EvmTransaction => 'id' in tx && typeof tx.id === 'string';
+
 const getTransactionId = (tx: EvmTransaction) => tx.id;
 
 const getEvmTransactionTime = (tx: EvmTransaction) => tx.time ?? 0;
@@ -179,7 +183,11 @@ const UnifiedTransactionsView = ({
   }>(() => {
     // Deduplicate submitted by (address + chain + nonce) and drop if already confirmed
     const seenSubmittedNonces = new Set<string>();
-    const submittedTxsFiltered = submittedTxs.filter((tx) => {
+    const submittedTxsFiltered = submittedTxs.filter((tx): tx is EvmTransaction => {
+      if (!isEvmTransaction(tx)) {
+        return false;
+      }
+
       const { chainId: _chainId, txParams, hash } = tx;
       const { from, nonce, actionId } = txParams || {};
       // Some txs don't have nonce, like intent based swaps

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

@@ -1,6 +1,11 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
+import {
+  QueryFunctionContext,
+  QueryKey,
+  useInfiniteQuery,
+} from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import { V4MultiAccountTransactionsResponse } from '@metamask/core-backend';
 import { getApiClient } from '../../../../core/apiClient';
 import { selectAccountGroupEvmAccountAddresses } from '../../../../selectors/multichainAccounts/accountTreeController';
 import { selectEvmEnabledCaipNetworks } from '../../../../selectors/networkEnablementController';
@@ -18,15 +23,31 @@ export const useTransactionsQuery = () => {
     [accountAddresses],
   );
 
-  const queryOptions =
-    getApiClient().accounts.getV4MultiAccountTransactionsInfiniteQueryOptions({
-      accountAddresses,
-      networks,
-      includeTxMetadata: true,
-    });
+  const queryOptions = useMemo(
+    () =>
+      getApiClient().accounts.getV4MultiAccountTransactionsInfiniteQueryOptions(
+        {
+          accountAddresses: [...accountAddresses],
+          networks: [...networks],
+          includeTxMetadata: true,
+        },
+      ),
+    [accountAddresses, networks],
+  );
 
-  return useInfiniteQuery({
-    ...queryOptions,
+  return useInfiniteQuery<
+    V4MultiAccountTransactionsResponse,
+    Error,
+    ReturnType<ReturnType<typeof selectConfirmedTransactions>>,
+    QueryKey
+  >({
+    queryKey: queryOptions.queryKey as QueryKey,
+    queryFn: ({
+      pageParam,
+      signal,
+    }: QueryFunctionContext<QueryKey, string | undefined>) =>
+      queryOptions.queryFn({ pageParam, signal }),
+    getNextPageParam: queryOptions.getNextPageParam,
     select: selectFn,
     enabled: accountAddresses.length > 0 && networks.length > 0,
     staleTime: 5 * MINUTE,

app/components/hooks/useNetworksByNamespace/useNetworksByNamespace.test.ts

@@ -10,6 +10,11 @@ jest.mock('@metamask/keyring-utils', () => ({}));
 jest.mock('@metamask/keyring-api', () => ({}));
 jest.mock('@metamask/rpc-errors', () => ({}));
 jest.mock('@metamask/network-controller', () => ({}));
+jest.mock('@metamask/multichain-network-controller', () => ({
+  toEvmCaipChainId: jest.fn(
+    (chainId: string) => `eip155:${parseInt(chainId, 16)}`,
+  ),
+}));
 jest.mock('@metamask/controller-utils', () => ({
   hasProperty: jest.fn(),
   toHex: jest.fn(),

app/core/apiClient.ts

@@ -1,6 +1,5 @@
 import { createApiPlatformClient } from '@metamask/core-backend';
 import Engine from './Engine';
-import ReactQueryService from './ReactQueryService/ReactQueryService';
 
 let apiClient: ReturnType<typeof createApiPlatformClient> | undefined;
 
@@ -15,7 +14,6 @@ export const getApiClient = () => {
           return undefined;
         }
       },
-      queryClient: ReactQueryService.queryClient,
     });
   }
 

app/selectors/multichainAccounts/accountTreeController.ts

@@ -17,7 +17,7 @@ import {
   AccountGroupObject,
   AccountTreeControllerState,
 } from '@metamask/account-tree-controller';
-import { CaipAccountId } from '@metamask/utils';
+import { CaipAccountId, CaipChainId } from '@metamask/utils';
 import { InternalAccount } from '@metamask/keyring-internal-api';
 import { isEvmAccountType } from '@metamask/keyring-api';
 import { AccountGroupWithInternalAccounts } from './accounts.type';