chore: bump @metamask/core-backend and set up ApiPlatformClient

package.json

@@ -296,7 +296,7 @@
     "@metamask/connectivity-controller": "^0.1.0",
     "@metamask/contract-metadata": "^2.5.0",
     "@metamask/controller-utils": "^11.18.0",
-    "@metamask/core-backend": "^5.0.0",
+    "@metamask/core-backend": "^6.0.0",
     "@metamask/delegation-controller": "^1.0.0",
     "@metamask/delegation-core": "^0.2.0-rc.1",
     "@metamask/delegation-deployments": "^0.15.0",

ui/components/multichain/activity-v2/hooks.ts

@@ -10,21 +10,13 @@ import { NETWORK_TO_NAME_MAP } from '../../../../shared/constants/network';
 import { selectMarketRates } from '../../../selectors/activity';
 import { selectEvmAddress } from '../../../selectors/accounts';
 import { getUseExternalServices } from '../../../selectors';
-import { submitRequestToBackground } from '../../../store/background-connection';
 import { parseApprovalTransactionData } from '../../../../shared/modules/transaction.utils';
 import { SET_APPROVAL_FOR_ALL } from '../../../../shared/constants/transaction';
-import {
-  queries,
-  transactionsQueryKey,
-} from '../../../../shared/lib/multichain/queries';
-import type { Params } from '../../../../shared/lib/api-client';
 import { selectEnabledNetworksAsCaipChainIds } from '../../../selectors/multichain/networks';
+import { queries } from '../../../helpers/queries';
 import { calculateFiatFromMarketRates } from './helpers';
 
-const getBearerToken = () =>
-  submitRequestToBackground<string | undefined>('getBearerToken');
-
-function useTransactionParams(): Params {
+function useTransactionParams() {
   const evmAddress = (useSelector(selectEvmAddress) || '').toLowerCase();
   const enabledNetworks = useSelector(selectEnabledNetworksAsCaipChainIds);
 
@@ -33,30 +25,32 @@ function useTransactionParams(): Params {
     [enabledNetworks],
   );
 
+  const accountAddresses = useMemo(
+    () => (evmAddress ? [`eip155:0:${evmAddress}`] : []),
+    [evmAddress],
+  );
+
   return useMemo(
     () => ({
-      accountAddresses: evmAddress ? [evmAddress] : [],
+      evmAddress,
+      accountAddresses,
       networks: evmNetworks,
     }),
-    [evmAddress, evmNetworks],
+    [evmAddress, accountAddresses, evmNetworks],
   );
 }
 
 export function useTransactionsQuery() {
   const useExternalServices = useSelector(getUseExternalServices);
-  const params = useTransactionParams();
+  const { evmAddress, accountAddresses, networks } = useTransactionParams();
 
   const queryOptions = useMemo(
     () =>
-      queries.transactions({
-        params,
-        options: {
-          enabled: Boolean(useExternalServices),
-          keepPreviousData: true,
-        },
-        getBearerToken,
-      }),
-    [params, useExternalServices],
+      queries.transactions(
+        { accountAddresses, evmAddress, networks },
+        { enabled: Boolean(useExternalServices), keepPreviousData: true },
+      ),
+    [evmAddress, accountAddresses, networks, useExternalServices],
   );
 
   return useInfiniteQuery(queryOptions);
@@ -65,29 +59,31 @@ export function useTransactionsQuery() {
 export function usePrefetchTransactions() {
   const queryClient = useQueryClient();
   const useExternalServices = useSelector(getUseExternalServices);
-  const params = useTransactionParams();
-  const evmAddress = params.accountAddresses[0] ?? '';
+  const { evmAddress, accountAddresses, networks } = useTransactionParams();
+
+  const queryOptions = useMemo(
+    () => queries.transactions({ accountAddresses, evmAddress, networks }),
+    [evmAddress, accountAddresses, networks],
+  );
 
   return useCallback(() => {
     if (!useExternalServices || !evmAddress) {
       return;
     }
 
-    const queryKey = [...transactionsQueryKey, params];
-    if (queryClient.getQueryData(queryKey)) {
+    const { queryKey } = queryOptions;
+    if (!queryKey || queryClient.getQueryData(queryKey)) {
       return;
     }
 
     if (queryClient.isFetching({ queryKey }) > 0) {
       return;
     }
 
-    queryClient
-      .prefetchInfiniteQuery(queries.transactions({ params, getBearerToken }))
-      .catch(() => {
-        // Prefetch is opportunistic
-      });
-  }, [evmAddress, params, queryClient, useExternalServices]);
+    queryClient.prefetchInfiniteQuery(queryOptions).catch(() => {
+      // Prefetch is opportunistic
+    });
+  }, [evmAddress, queryOptions, queryClient, useExternalServices]);
 }
 
 export function useGetTitle(transaction: TransactionViewModel): string {

ui/helpers/api-client.ts

@@ -0,0 +1,8 @@
+import { createApiPlatformClient } from '@metamask/core-backend';
+import { submitRequestToBackground } from '../store/background-connection';
+
+export const apiClient = createApiPlatformClient({
+  clientProduct: 'metamask-extension',
+  getBearerToken: () =>
+    submitRequestToBackground<string | undefined>('getBearerToken'),
+});

ui/helpers/queries.ts

@@ -0,0 +1,63 @@
+import type { UseInfiniteQueryOptions } from '@tanstack/react-query';
+import type { V4MultiAccountTransactionsResponse } from '@metamask/core-backend';
+import type { NormalizedV4MultiAccountTransactionsResponse } from '../../shared/lib/multichain/types';
+import { selectTransactions } from '../../shared/lib/multichain/transformations';
+import { apiClient } from './api-client';
+
+type QueryOptions = Partial<
+  UseInfiniteQueryOptions<
+    V4MultiAccountTransactionsResponse,
+    unknown,
+    NormalizedV4MultiAccountTransactionsResponse
+  >
+>;
+
+type Params = {
+  accountAddresses: string[];
+  evmAddress: string;
+  networks: string[];
+};
+
+export const queries = {
+  transactions: (
+    params: Params,
+    options?: QueryOptions,
+  ): UseInfiniteQueryOptions<
+    V4MultiAccountTransactionsResponse,
+    unknown,
+    NormalizedV4MultiAccountTransactionsResponse
+  > => {
+    const { accountAddresses, evmAddress, networks } = params;
+    const queryParams = { networks, includeTxMetadata: true as const };
+
+    const { queryKey } =
+      apiClient.accounts.getV4MultiAccountTransactionsQueryOptions(
+        accountAddresses,
+        queryParams,
+      );
+
+    return {
+      queryKey,
+      queryFn: ({ pageParam, signal }) => {
+        const { queryFn: fetchPage } =
+          apiClient.accounts.getV4MultiAccountTransactionsQueryOptions(
+            accountAddresses,
+            { ...queryParams, cursor: pageParam },
+          );
+        return (
+          fetchPage as (ctx: {
+            signal?: AbortSignal;
+          }) => Promise<V4MultiAccountTransactionsResponse>
+        )({ signal });
+      },
+      select: selectTransactions(evmAddress),
+      getNextPageParam: ({ pageInfo }) =>
+        pageInfo.hasNextPage ? pageInfo.endCursor : undefined,
+      refetchOnWindowFocus: false,
+      refetchInterval: 15 * 1000,
+      staleTime: 15 * 1000,
+      ...options,
+      enabled: Boolean(accountAddresses[0]) && (options?.enabled ?? true),
+    };
+  },
+};

yarn.lock

@@ -6277,6 +6277,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/core-backend@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "@metamask/core-backend@npm:6.0.0"
+  dependencies:
+    "@metamask/accounts-controller": "npm:^36.0.0"
+    "@metamask/controller-utils": "npm:^11.18.0"
+    "@metamask/keyring-controller": "npm:^25.1.0"
+    "@metamask/messenger": "npm:^0.3.0"
+    "@metamask/profile-sync-controller": "npm:^27.1.0"
+    "@metamask/utils": "npm:^11.9.0"
+    "@tanstack/query-core": "npm:^5.62.16"
+    uuid: "npm:^8.3.2"
+  checksum: 10/b663aa0ce78ffd493f556070906d7f008c0bd97ce613445366340fe61c0db4b85ca5ce7153a21fb4358a1b5fac31973b708ecb1795fa13fb1d827f62718eaca8
+  languageName: node
+  linkType: hard
+
 "@metamask/delegation-controller@npm:^1.0.0":
   version: 1.0.0
   resolution: "@metamask/delegation-controller@npm:1.0.0"
@@ -33748,7 +33764,7 @@ __metadata:
     "@metamask/connectivity-controller": "npm:^0.1.0"
     "@metamask/contract-metadata": "npm:^2.5.0"
     "@metamask/controller-utils": "npm:^11.18.0"
-    "@metamask/core-backend": "npm:^5.0.0"
+    "@metamask/core-backend": "npm:^6.0.0"
     "@metamask/delegation-controller": "npm:^1.0.0"
     "@metamask/delegation-core": "npm:^0.2.0-rc.1"
     "@metamask/delegation-deployments": "npm:^0.15.0"