feat(staking): save user preferences for staking feature

apps/browser-extension-wallet/src/features/delegation/components/MultiDelegationStakingPopup.tsx

@@ -20,7 +20,8 @@ import { BrowserViewSections } from '@lib/scripts/types';
 import { useWalletActivities } from '@hooks/useWalletActivities';
 import {
   MULTIDELEGATION_FIRST_VISIT_LS_KEY,
-  MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY
+  MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY,
+  DELEGATION_PREFERENCES_LS_KEY
 } from '@utils/constants';
 
 export const MultiDelegationStakingPopup = (): JSX.Element => {
@@ -85,6 +86,10 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
     multidelegationFirstVisitSincePortfolioPersistence,
     { updateLocalStorage: setMultidelegationFirstVisitSincePortfolioPersistence }
   ] = useLocalStorage(MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY, true);
+
+  const [delegationPreferencePersistence, { updateLocalStorage: setDelegationPreferencePersistence }] =
+    useLocalStorage(DELEGATION_PREFERENCES_LS_KEY);
+
   const walletAddress = walletInfo.addresses?.[0].address?.toString();
   const analytics = useAnalyticsContext();
 
@@ -96,6 +101,8 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
     <OutsideHandlesProvider
       {...{
         analytics,
+        delegationPreferencePersistence,
+        setDelegationPreferencePersistence,
         multidelegationFirstVisit,
         triggerMultidelegationFirstVisit: () => setMultidelegationFirstVisit(false),
         multidelegationFirstVisitSincePortfolioPersistence,

apps/browser-extension-wallet/src/types/local-storage.ts

@@ -1,5 +1,6 @@
 import { Wallet } from '@lace/cardano';
 import { EnhancedAnalyticsOptInStatus, TxCreationType } from '../providers/AnalyticsProvider/analyticsTracker/types';
+import { DelegationPreferences } from '@lace/staking';
 
 export interface WalletStorage {
   name: string;
@@ -52,4 +53,5 @@ export interface ILocalStorage {
   multidelegationFirstVisit?: boolean;
   multidelegationFirstVisitSincePortfolioPersistence?: boolean;
   unconfirmedTransactions: UnconfirmedTransaction[];
+  delegationPreferences: DelegationPreferences;
 }

apps/browser-extension-wallet/src/utils/constants.ts

@@ -107,3 +107,4 @@ export const COINGECKO_URL = 'https://www.coingecko.com';
 export const MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY =
   'multidelegationFirstVisitSincePortfolioPersistence';
 export const MULTIDELEGATION_FIRST_VISIT_LS_KEY = 'multidelegationFirstVisit';
+export const DELEGATION_PREFERENCES_LS_KEY = 'delegationPreferences';

apps/browser-extension-wallet/src/views/browser-view/features/staking/components/MultiDelegationStaking.tsx

@@ -14,6 +14,7 @@ import { useWalletStore } from '@stores';
 import { compactNumberWithUnit } from '@utils/format-number';
 import { useWalletActivities } from '@hooks/useWalletActivities';
 import {
+  DELEGATION_PREFERENCES_LS_KEY,
   MULTIDELEGATION_FIRST_VISIT_LS_KEY,
   MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY
 } from '@utils/constants';
@@ -85,6 +86,10 @@ export const MultiDelegationStaking = (): JSX.Element => {
     multidelegationFirstVisitSincePortfolioPersistence,
     { updateLocalStorage: setMultidelegationFirstVisitSincePortfolioPersistence }
   ] = useLocalStorage(MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY, true);
+
+  const [delegationPreferencePersistence, { updateLocalStorage: setDelegationPreferencePersistence }] =
+    useLocalStorage(DELEGATION_PREFERENCES_LS_KEY);
+
   const walletAddress = walletInfo.addresses?.[0].address?.toString();
   const analytics = useAnalyticsContext();
 
@@ -97,6 +102,8 @@ export const MultiDelegationStaking = (): JSX.Element => {
     <OutsideHandlesProvider
       {...{
         analytics,
+        delegationPreferencePersistence,
+        setDelegationPreferencePersistence,
         backgroundServiceAPIContextSetWalletPassword: setWalletPassword,
         balancesBalance: balance,
         delegationStoreSetDelegationTxBuilder: setDelegationTxBuilder,

packages/staking/src/features/BrowsePools/StakePoolsTable/StakePoolsTable.tsx

@@ -25,16 +25,6 @@ const searchDebounce = 300;
 const defaultFetchLimit = 100;
 
 export const StakePoolsTable = ({ scrollableTargetId }: StakePoolsTableProps) => {
-  const { t } = useTranslation();
-  const [searchValue, setSearchValue] = useState<string>('');
-  const [isSearching, setIsSearching] = useState<boolean>(true);
-  const [isLoadingList, setIsLoadingList] = useState<boolean>(true);
-  const [sort, setSort] = useState<StakePoolSortOptions>(DEFAULT_SORT_OPTIONS);
-  const [stakePools, setStakePools] = useState<Wallet.StakePoolSearchResults['pageResults']>([]);
-  const [skip, setSkip] = useState<number>(0);
-  const selectedPortfolioStakePools = useDelegationPortfolioStore((store) =>
-    store.selectedPortfolio.map(({ stakePool }) => stakePool)
-  );
   const {
     currentChain,
     walletStoreStakePoolSearchResults: {
@@ -47,7 +37,21 @@ export const StakePoolsTable = ({ scrollableTargetId }: StakePoolsTableProps) =>
     walletStoreStakePoolSearchResultsStatus,
     walletStoreFetchStakePools: fetchStakePools,
     analytics,
+    delegationPreferencePersistence,
+    setDelegationPreferencePersistence,
   } = useOutsideHandles();
+  const { t } = useTranslation();
+  const [searchValue, setSearchValue] = useState<string>(delegationPreferencePersistence?.searchQuery || '');
+  const [isSearching, setIsSearching] = useState<boolean>(true);
+  const [isLoadingList, setIsLoadingList] = useState<boolean>(true);
+  const [sort, setSort] = useState<StakePoolSortOptions>(
+    delegationPreferencePersistence?.sortOptions || DEFAULT_SORT_OPTIONS
+  );
+  const [stakePools, setStakePools] = useState<Wallet.StakePoolSearchResults['pageResults']>([]);
+  const [skip, setSkip] = useState<number>(0);
+  const selectedPortfolioStakePools = useDelegationPortfolioStore((store) =>
+    store.selectedPortfolio.map(({ stakePool }) => stakePool)
+  );
 
   const fetchingPools = walletStoreStakePoolSearchResultsStatus === StateStatus.LOADING;
 
@@ -68,7 +72,19 @@ export const StakePoolsTable = ({ scrollableTargetId }: StakePoolsTableProps) =>
     // Fetch pools on mount, network switching, searchValue change and sort change
     setIsLoadingList(true);
     debouncedSearch({ searchString: searchValue, sort });
-  }, [currentChain, searchValue, sort, debouncedSearch]);
+    setDelegationPreferencePersistence({
+      ...delegationPreferencePersistence,
+      searchQuery: searchValue,
+      sortOptions: sort,
+    });
+  }, [
+    currentChain,
+    searchValue,
+    sort,
+    debouncedSearch,
+    setDelegationPreferencePersistence,
+    delegationPreferencePersistence,
+  ]);
 
   const loadMoreData = () => fetchStakePools({ searchString: searchValue, skip: skip + defaultFetchLimit, sort });
 
@@ -141,6 +157,7 @@ export const StakePoolsTable = ({ scrollableTargetId }: StakePoolsTableProps) =>
         withSearchIcon
         inputPlaceholder={t('browsePools.stakePoolTableBrowser.searchInputPlaceholder')}
         onChange={onSearch}
+        value={searchValue}
         data-testid="search-input"
         loading={fetchingPools}
       />

packages/staking/src/features/outside-handles-provider/types.ts

@@ -40,6 +40,11 @@ export enum StateStatus {
   ERROR = 'error',
 }
 
+export interface DelegationPreferences {
+  sortOptions: StakePoolSortOptions;
+  searchQuery?: string;
+}
+
 export interface IBlockchainProvider {
   stakePoolProvider: Wallet.StakePoolProvider;
   assetProvider: Wallet.AssetProvider;
@@ -52,6 +57,8 @@ export interface IBlockchainProvider {
 
 export type OutsideHandlesContextValue = {
   analytics: IAnalyticsTracker;
+  delegationPreferencePersistence: DelegationPreferences;
+  setDelegationPreferencePersistence: (preferences: DelegationPreferences) => void;
   backgroundServiceAPIContextSetWalletPassword: (password?: Uint8Array) => void;
   expandStakingView?: () => void;
   balancesBalance?: Balance;

packages/staking/src/index.ts

@@ -9,4 +9,5 @@ export { config as stakePooltableConfig } from './features/BrowsePools/StakePool
 export type { TableRowProps } from './features/BrowsePools/StakePoolsTable/Table';
 export * from './features/BrowsePools/StakePoolsTable/types';
 export { OutsideHandlesProvider } from './features/outside-handles-provider';
+export type { DelegationPreferences } from './features/outside-handles-provider';
 export { MAX_POOLS_COUNT } from './features/store';