move search history to a separate storage item

Author: zerts

src/background/Wallet/Wallet.ts

@@ -121,6 +121,7 @@ import type { Credentials, SessionCredentials } from '../account/Credentials';
 import { isSessionCredentials } from '../account/Credentials';
 import { lastUsedAddressStore } from '../user-activity';
 import { transactionService } from '../transactions/TransactionService';
+import { searchStore } from '../search/SearchStore';
 import { toEthersWallet } from './helpers/toEthersWallet';
 import { maskWallet, maskWalletGroup, maskWalletGroups } from './helpers/mask';
 import type { PendingWallet, WalletRecord } from './model/types';
@@ -855,6 +856,33 @@ export class Wallet {
     return Model.getPreferences(this.record);
   }
 
+  async getSearchHistory({ context }: WalletMethodParams): Promise<string[]> {
+    this.verifyInternalOrigin(context);
+    await searchStore.ready();
+    return searchStore.getSearchHistory();
+  }
+
+  async addRecentSearch({
+    context,
+    params: { fungibleId },
+  }: WalletMethodParams<{ fungibleId: string }>) {
+    this.verifyInternalOrigin(context);
+    searchStore.addRecentSearch(fungibleId);
+  }
+
+  async clearSearchHistory({ context }: WalletMethodParams) {
+    this.verifyInternalOrigin(context);
+    searchStore.clearSearchHistory();
+  }
+
+  async removeRecentSearch({
+    context,
+    params: { fungibleId },
+  }: WalletMethodParams<{ fungibleId: string }>) {
+    this.verifyInternalOrigin(context);
+    searchStore.removeRecentSearch(fungibleId);
+  }
+
   /** bound to instance */
   private async notifyChainConfigStore() {
     const preferences = await this.getPreferences({

src/background/Wallet/WalletRecord.ts

@@ -848,7 +848,6 @@ export class WalletRecordModel {
       configurableNonce: false,
       invitationBannerDismissed: false,
       recentAddresses: [],
-      recentSearch: [],
       mintDnaBannerDismissed: false,
       upgradeDnaBannerDismissed: false,
       inviteFriendsBannerDismissed: false,

src/background/Wallet/model/types.ts

@@ -45,7 +45,6 @@ interface PublicPreferences {
   configurableNonce?: boolean;
   invitationBannerDismissed?: boolean;
   recentAddresses?: string[];
-  recentSearch?: string[];
   mintDnaBannerDismissed?: boolean;
   upgradeDnaBannerDismissed?: boolean;
   inviteFriendsBannerDismissed?: boolean;

src/background/search/SearchStore.ts

@@ -0,0 +1,60 @@
+import { PersistentStore } from 'src/modules/persistent-store';
+
+type SearchStoreState = {
+  version: 1;
+  searchHistory: string[];
+};
+
+const MAX_RECENT_SEARCH_SIZE = 10;
+
+function updateSearchHistory(
+  fungibleId: string,
+  recentSearch: string[]
+): string[] {
+  const searchIndex = recentSearch.findIndex((item) => item === fungibleId);
+  if (searchIndex >= 0) {
+    return [
+      fungibleId,
+      ...recentSearch.slice(0, searchIndex),
+      ...recentSearch.slice(searchIndex + 1, MAX_RECENT_SEARCH_SIZE),
+    ];
+  }
+  return [fungibleId, ...recentSearch.slice(0, MAX_RECENT_SEARCH_SIZE - 1)];
+}
+
+class SearchStore extends PersistentStore<SearchStoreState> {
+  static initialState: SearchStoreState = {
+    version: 1,
+    searchHistory: [],
+  };
+
+  addRecentSearch(fungibleId: string) {
+    this.setState((state) => ({
+      ...state,
+      searchHistory: updateSearchHistory(fungibleId, state.searchHistory),
+    }));
+  }
+
+  removeRecentSearch(fungibleId: string) {
+    this.setState((state) => ({
+      ...state,
+      searchHistory: state.searchHistory.filter((id) => id !== fungibleId),
+    }));
+  }
+
+  clearSearchHistory() {
+    this.setState((state) => ({
+      ...state,
+      searchHistory: [],
+    }));
+  }
+
+  getSearchHistory() {
+    return this.getState().searchHistory;
+  }
+}
+
+export const searchStore = new SearchStore(
+  SearchStore.initialState,
+  'search-store'
+);

src/ui/pages/Search/Search.tsx

@@ -23,15 +23,15 @@ import { Media } from 'src/ui/ui-kit/Media';
 import VerifiedIcon from 'jsx:src/ui/assets/verified.svg';
 import { HStack } from 'src/ui/ui-kit/HStack/HStack';
 import { walletPort } from 'src/ui/shared/channels';
-import { usePreferences } from 'src/ui/features/preferences';
 import { UnstyledButton } from 'src/ui/ui-kit/UnstyledButton';
 import CloseIcon from 'jsx:src/ui/assets/close.svg';
 import { useAssetFullInfo } from 'src/modules/zerion-api/hooks/useAssetFullInfo';
 import { useHttpClientSource } from 'src/modules/zerion-api/hooks/useHttpClientSource';
 import { invariant } from 'src/shared/invariant';
 import { Button } from 'src/ui/ui-kit/Button';
 import { useEvent } from 'src/ui/shared/useEvent';
-import { updateRecentSearch } from './updateRecentSearch';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { queryClient } from 'src/ui/shared/requests/queryClient';
 import { useSearchQuery } from './useSearchQuery';
 
 const FungibleView = React.forwardRef<
@@ -125,7 +125,6 @@ const RecentItem = React.forwardRef<
   }
 >(({ fungibleId, index, highlighted, onClick }, ref) => {
   const { currency } = useCurrency();
-  const { preferences, setPreferences } = usePreferences();
 
   const { data, isLoading } = useAssetFullInfo(
     { fungibleId, currency },
@@ -134,15 +133,12 @@ const RecentItem = React.forwardRef<
 
   const fungible = data?.data.fungible;
 
-  const handleRemoveItemClick = useCallback(() => {
-    if (preferences) {
-      setPreferences({
-        recentSearch: preferences.recentSearch.filter(
-          (id) => id !== fungibleId
-        ),
-      });
-    }
-  }, [fungibleId, preferences, setPreferences]);
+  const removeRecentSearchMutation = useMutation({
+    mutationFn: () => walletPort.request('removeRecentSearch', { fungibleId }),
+    onSuccess: () => {
+      queryClient.refetchQueries(['wallet/getSearchHistory']);
+    },
+  });
 
   if (!isLoading && !fungible) {
     return null;
@@ -173,7 +169,8 @@ const RecentItem = React.forwardRef<
         style={{ display: 'flex' }}
         size={28}
         aria-label="Remove item from recent"
-        onClick={handleRemoveItemClick}
+        onClick={() => removeRecentSearchMutation.mutate()}
+        disabled={removeRecentSearchMutation.isLoading}
       >
         <CloseIcon
           style={{ width: 20, height: 20, color: 'var(--neutral-500)' }}
@@ -202,21 +199,26 @@ export function Search() {
     500
   );
   const normalizedQuery = urlQuery.trim();
+  const { data: searchHistory } = useQuery({
+    queryKey: ['wallet/getSearchHistory'],
+    queryFn: () => walletPort.request('getSearchHistory'),
+    suspense: false,
+    keepPreviousData: true,
+  });
 
-  const { preferences, setPreferences } = usePreferences();
   const { data: searchResults, isLoading } = useSearchQuery({
     query: normalizedQuery,
     currency,
   });
 
   const recentItems = useMemo<SearchPageItem[]>(() => {
     return (
-      preferences?.recentSearch.map((id) => ({
+      searchHistory?.map((id) => ({
         kind: 'recent',
         fungibleId: id,
       })) || []
     );
-  }, [preferences]);
+  }, [searchHistory]);
 
   const searchItems = useMemo<SearchPageItem[]>(() => {
     return (
@@ -238,21 +240,14 @@ export function Search() {
    */
   const handleFungibleClick = useCallback(
     (fungibleId: string) => {
-      if (preferences) {
-        setPreferences({
-          recentSearch: updateRecentSearch(
-            fungibleId,
-            preferences.recentSearch
-          ),
-        });
-      }
+      walletPort.request('addRecentSearch', { fungibleId });
       walletPort.request('assetClicked', {
         assetId: fungibleId,
         pathname,
         section: 'Search',
       });
     },
-    [pathname, preferences, setPreferences]
+    [pathname]
   );
 
   const { getItemProps, getInputProps, getMenuProps, highlightedIndex } =
@@ -331,9 +326,12 @@ export function Search() {
     });
   }, [items, getItemProps, highlightedIndex, handleFungibleClick]);
 
-  const handleClearRecentClick = useCallback(() => {
-    setPreferences({ recentSearch: [] });
-  }, [setPreferences]);
+  const clearSearchHistoryMutation = useMutation({
+    mutationFn: () => walletPort.request('clearSearchHistory'),
+    onSuccess: () => {
+      queryClient.refetchQueries(['wallet/getSearchHistory']);
+    },
+  });
 
   return (
     <>
@@ -362,7 +360,7 @@ export function Search() {
             <UIText kind="body/accent" style={{ paddingInline: 8 }}>
               Results
             </UIText>
-          ) : preferences?.recentSearch.length ? (
+          ) : searchHistory?.length ? (
             <HStack gap={4} justifyContent="space-between" alignItems="center">
               <UIText kind="body/accent" style={{ paddingInline: 8 }}>
                 Recent
@@ -371,7 +369,8 @@ export function Search() {
                 <UnstyledButton
                   className="hover:underline"
                   aria-label="Clear recent search"
-                  onClick={handleClearRecentClick}
+                  onClick={() => clearSearchHistoryMutation.mutate()}
+                  disabled={clearSearchHistoryMutation.isLoading}
                 >
                   Clear
                 </UnstyledButton>