feat: prefetch transaction list on tokens screen (#2137)

# Prefetch Transaction Data for Improved Activity Tab Performance

## What changed (plus any additional context for devs)

- Added a `prefetchInfiniteTransactionList` function that loads transaction data in the background
- Implemented prefetching on the Tokens/balances screen to give the ListTransactions API a head start before users navigate to the Activity tab
- The prefetch function checks if data already exists in the cache to avoid unnecessary API calls
- Added proper type imports and store access for the prefetch function to work outside React components

## What to test

- Navigate to the Tokens/balances screen and verify that transaction data is being prefetched
- Check that navigating to the Activity tab feels faster since data is already loading
- Verify that the prefetch function doesn't make duplicate API calls if data already exists
- Test with different wallet addresses to ensure prefetching works correctly for all accounts
- Confirm that the prefetch function properly handles testnet mode and enabled chain IDs

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new feature to prefetch transaction data for a user's address when they are on the tokens/balances screen, enhancing performance by loading data in advance.

### Detailed summary
- Added `prefetchInfiniteTransactionList` function to prefetch transactions based on the user's address.
- Implemented `useEffect` in the `Tokens` component to call the prefetch function when `currentAddress` changes.
- Enhanced error handling and caching logic in the prefetch function.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: janek26

src/entries/popup/hooks/useInfiniteTransactionList.ts

@@ -1,5 +1,6 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Address } from 'viem';
 
 import { queryClient } from '~/core/react-query';
 import { shortcuts } from '~/core/references/shortcuts';
@@ -15,9 +16,10 @@ import {
   usePendingTransactionsStore,
 } from '~/core/state';
 import { useTestnetModeStore } from '~/core/state/currentSettings/testnetMode';
+import { useNetworkStore } from '~/core/state/networks/networks';
 import { useCustomNetworkTransactionsStore } from '~/core/state/transactions/customNetworkTransactions';
 import { RainbowTransaction } from '~/core/types/transactions';
-import { useSupportedChains } from '~/core/utils/chains';
+import { getSupportedChains, useSupportedChains } from '~/core/utils/chains';
 import { RainbowError, logger } from '~/logger';
 
 import { useKeyboardShortcut } from './useKeyboardShortcut';
@@ -33,6 +35,61 @@ interface UseInfiniteTransactionListParams {
 
 const stableEmptyPendingTransactionsArray: RainbowTransaction[] = [];
 
+/**
+ * Prefetch the first page of transactions for the given address.
+ * Only prefetches if data doesn't already exist in cache.
+ * Accesses currency and chain IDs from stores internally.
+ */
+export const prefetchInfiniteTransactionList = async ({
+  address,
+}: {
+  address: Address;
+}) => {
+  if (!address) return;
+
+  // Access stores directly (not hooks, since this is not a React component)
+  const { currentCurrency: currency } = useCurrentCurrencyStore.getState();
+  const { testnetMode } = useTestnetModeStore.getState();
+  const { enabledChainIds } = useNetworkStore.getState();
+
+  // Get supported chains based on testnet mode
+  const supportedChains = getSupportedChains({ testnets: testnetMode });
+  const userChainIds = Array.from(enabledChainIds);
+  const supportedChainIds = supportedChains
+    .map(({ id }) => id)
+    .filter((id) => userChainIds.includes(id));
+
+  if (!supportedChainIds.length) return;
+
+  const queryKey = consolidatedTransactionsQueryKey({
+    address,
+    currency,
+    userChainIds: supportedChainIds,
+  });
+
+  try {
+    // Check if data already exists in cache
+    const cachedData = queryClient.getQueryData(queryKey);
+    if (cachedData) {
+      // Data already exists, skip prefetch
+      return;
+    }
+
+    // Prefetch the first page of transactions in the background
+    await queryClient.prefetchInfiniteQuery({
+      queryKey,
+      queryFn: consolidatedTransactionsQueryFunction,
+      getNextPageParam: (lastPage: { nextPage?: string }) => lastPage?.nextPage,
+      initialPageParam: null as string | null,
+    });
+  } catch (error) {
+    // Silently fail - we don't want to disrupt the UI if prefetch fails
+    logger.error(new RainbowError('Failed to prefetch transaction list'), {
+      message: error,
+    });
+  }
+};
+
 export const useInfiniteTransactionList = ({
   getScrollElement,
 }: UseInfiniteTransactionListParams) => {

src/entries/popup/pages/home/Tokens.tsx

@@ -46,6 +46,7 @@ import { CoinRow } from '~/entries/popup/components/CoinRow/CoinRow';
 import { Asterisks } from '../../components/Asterisks/Asterisks';
 import { CoinbaseIcon } from '../../components/CoinbaseIcon/CoinbaseIcon';
 import { QuickPromo } from '../../components/QuickPromo/QuickPromo';
+import { prefetchInfiniteTransactionList } from '../../hooks/useInfiniteTransactionList';
 import useKeyboardAnalytics from '../../hooks/useKeyboardAnalytics';
 import { useKeyboardShortcut } from '../../hooks/useKeyboardShortcut';
 import { useRainbowNavigate } from '../../hooks/useRainbowNavigate';
@@ -159,6 +160,14 @@ export function Tokens({ scrollY }: { scrollY: MotionValue<number> }) {
       },
     );
 
+  // Prefetch transactions when on the tokens/balances screen
+  // This gives the slow ListTransactions API a headstart before user navigates to activity
+  useEffect(() => {
+    prefetchInfiniteTransactionList({
+      address: currentAddress,
+    });
+  }, [currentAddress]);
+
   const isPinned = useCallback(
     (assetUniqueId: string) =>
       !!pinnedStore[currentAddress]?.[assetUniqueId]?.pinned,