Add short-term results caching, adjust search store configs

rainbow-me · Jan 10, 2025 · 90a45cb · 90a45cb
1 parent 798d454
commit 90a45cb
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 28 deletions.
diff --git a/src/__swaps__/screens/Swap/hooks/useSearchCurrencyLists.ts b/src/__swaps__/screens/Swap/hooks/useSearchCurrencyLists.ts
@@ -239,10 +239,10 @@ const buildListSectionsData = ({
 
 let lastLogTime: number | null = null;
 
-export function useSearchCurrencyLists() {
-  const verifiedAssets = useTokenSearchStore(state => state.results);
+export function useSearchCurrencyListsV2() {
+  const verifiedAssets = useTokenSearchStore(state => state.getData());
   const bridgeAsset = useTokenSearchStore(state => state.bridgeAsset);
-  const unverifiedAssets = useUnverifiedTokenSearchStore(state => state.results);
+  const unverifiedAssets = useUnverifiedTokenSearchStore(state => state.getData());
   const popularAssets = usePopularTokensStore(state => state.getData());
   const { favoritesMetadata: favorites } = useFavorites();
 
@@ -309,12 +309,14 @@ export function useSearchCurrencyLists() {
     const query = useSwapsSearchStore.getState().searchQuery.trim();
     if (!query.length) return { crosschainExactMatches: undefined, verifiedResults: verifiedAssets };
 
-    return verifiedAssets?.reduce(
-      (acc: { crosschainExactMatches: SearchAsset[]; verifiedResults: SearchAsset[] }, asset) => {
-        acc[asset.chainId === toChainId ? 'verifiedResults' : 'crosschainExactMatches'].push(asset);
-        return acc;
-      },
-      { crosschainExactMatches: [], verifiedResults: [] }
+    return (
+      verifiedAssets?.reduce(
+        (acc: { crosschainExactMatches: SearchAsset[]; verifiedResults: SearchAsset[] }, asset) => {
+          acc[asset.chainId === toChainId ? 'verifiedResults' : 'crosschainExactMatches'].push(asset);
+          return acc;
+        },
+        { crosschainExactMatches: [], verifiedResults: [] }
+      ) ?? { crosschainExactMatches: undefined, verifiedResults: undefined }
     );
   }, [toChainId, verifiedAssets]);
 
@@ -328,8 +330,8 @@ export function useSearchCurrencyLists() {
           crosschainExactMatches,
           popularAssets: popularAssetsForChain,
           recentSwaps: recentsForChain,
-          unverifiedAssets,
-          verifiedAssets: verifiedResults,
+          unverifiedAssets: unverifiedAssets ?? undefined,
+          verifiedAssets: verifiedResults ?? undefined,
         },
         favoritesList,
         filteredBridgeAssetAddress: bridgeAsset?.address,

diff --git a/src/__swaps__/screens/Swap/resources/search/searchV2.ts b/src/__swaps__/screens/Swap/resources/search/searchV2.ts
@@ -29,11 +29,6 @@ type TokenSearchParams = {
 
 type TokenSearchState = {
   bridgeAsset: SearchAsset | null;
-  results: SearchAsset[];
-};
-
-type UnverifiedTokenSearchState = {
-  results: SearchAsset[];
 };
 
 type SearchQueryState = {
@@ -54,45 +49,54 @@ export const useSwapsSearchStore = createRainbowStore<SearchQueryState>(() => ({
 
 export const useTokenSearchStore = createQueryStore<SearchAsset[], TokenSearchParams, TokenSearchState>(
   {
-    fetcher: tokenSearchQueryFunction,
-    setData: ({ data, params, set }) => {
-      if (params.query?.length) set({ results: data });
-      else set({ bridgeAsset: extractBridgeAsset(data, params), results: data });
+    fetcher: async (params, abortController) => {
+      const results = await tokenSearchQueryFunction(params, abortController);
+      if (!params.query?.length) setBridgeAsset(extractBridgeAsset(results, params));
+      return results;
     },
 
-    disableCache: true,
+    cacheTime: params => (params.query?.length ? time.minutes(2) : time.seconds(10)),
+    disableAutoRefetching: true,
+    keepPreviousData: true,
     params: {
       list: TokenLists.Verified,
       chainId: $ => $(useSwapsStore).selectedOutputChainId,
       keys: $ => $(useSwapsSearchStore, state => getSearchKeys(state.searchQuery.trim())),
       query: $ => $(useSwapsSearchStore, state => (state.searchQuery.trim().length ? state.searchQuery.trim() : undefined)),
       threshold: $ => $(useSwapsSearchStore, state => getSearchThreshold(state.searchQuery.trim())),
     },
-    staleTime: Infinity,
+    staleTime: time.seconds(30),
   },
 
-  () => ({ bridgeAsset: null, results: [] })
+  () => ({ bridgeAsset: null }),
+
+  { storageKey: 'verifiedTokenSearch' }
 );
 
-export const useUnverifiedTokenSearchStore = createQueryStore<SearchAsset[], TokenSearchParams, UnverifiedTokenSearchState>(
+function setBridgeAsset(bridgeAsset: SearchAsset | null) {
+  useTokenSearchStore.setState({ bridgeAsset });
+}
+
+export const useUnverifiedTokenSearchStore = createQueryStore<SearchAsset[], TokenSearchParams>(
   {
     fetcher: (params, abortController) => (params.query?.length ?? 0 > 2 ? tokenSearchQueryFunction(params, abortController) : NO_RESULTS),
-    setData: ({ data, set }) => set({ results: data }),
     transform: (data, { query }) =>
       query && isAddress(query) ? getExactMatches(data, query, MAX_UNVERIFIED_RESULTS) : data.slice(0, MAX_UNVERIFIED_RESULTS),
 
-    disableCache: true,
+    cacheTime: params => (params.query?.length ? time.minutes(2) : time.seconds(10)),
+    disableAutoRefetching: true,
+    keepPreviousData: true,
     params: {
       list: TokenLists.HighLiquidity,
       chainId: $ => $(useSwapsStore).selectedOutputChainId,
       keys: $ => $(useSwapsSearchStore, state => getSearchKeys(state.searchQuery.trim())),
       query: $ => $(useSwapsSearchStore, state => state.searchQuery.trim()),
       threshold: $ => $(useSwapsSearchStore, state => getSearchThreshold(state.searchQuery.trim())),
     },
-    staleTime: Infinity,
+    staleTime: time.seconds(30),
   },
 
-  () => ({ results: [] })
+  { storageKey: 'unverifiedTokenSearch' }
 );
 
 function selectTopSearchResults({