fix: [LW-10267] staking persistence local storage (#1064)

* fix(extension): add a fallback for stakingBrowserPreferencesPersistence localstorage object

* fix: lw-10267 add migration to fix broken staking center

* refactor(staking,extension): expose DEFAULT_STAKING_BROWSER_PREFERENCES and apply changes to popup

---------

Co-authored-by: przemyslaw.wlodek <przem.wlodek.github@gmail.com>

Author: mchappell

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

@@ -1,4 +1,4 @@
-import { OutsideHandlesProvider, StakingPopup } from '@lace/staking';
+import { DEFAULT_STAKING_BROWSER_PREFERENCES, OutsideHandlesProvider, StakingPopup } from '@lace/staking';
 import React, { useCallback, useEffect } from 'react';
 import {
   useAnalyticsContext,
@@ -89,7 +89,7 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
   ] = useLocalStorage(MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY, true);
 
   const [stakingBrowserPreferencesPersistence, { updateLocalStorage: setStakingBrowserPreferencesPersistence }] =
-    useLocalStorage(STAKING_BROWSER_PREFERENCES_LS_KEY);
+    useLocalStorage(STAKING_BROWSER_PREFERENCES_LS_KEY, DEFAULT_STAKING_BROWSER_PREFERENCES);
 
   const walletAddress = walletInfo.addresses?.[0].address?.toString();
   const analytics = useAnalyticsContext();

apps/browser-extension-wallet/src/lib/scripts/migrations/migrations.ts

@@ -43,7 +43,7 @@ export type Migration = {
   downgrade?: (password?: string) => MigrationPersistance | Promise<MigrationPersistance>;
 };
 
-const migrations: Migration[] = [versions.v_1_0_0];
+const migrations: Migration[] = [versions.v_1_10_2];
 
 /**
  * Applies all migrations in order between the two version provided
@@ -137,7 +137,6 @@ export const migrationsRequirePassword = async (
  */
 export const checkMigrations = async (previousVersion: string, migrationsArray = migrations): Promise<void> => {
   const currentVersion = runtime.getManifest().version;
-
   // Return if a downgrade is occurring
   if (isVersionOlderThanOrEqual(currentVersion, previousVersion)) {
     // TODO: allow migrations if downgrading versions too [LW-5595]

apps/browser-extension-wallet/src/lib/scripts/migrations/versions/index.ts

@@ -1 +1,2 @@
 export * from './v1_0_0';
+export * from './v1_10_2';

apps/browser-extension-wallet/src/lib/scripts/migrations/versions/v1_10_2.ts

@@ -0,0 +1,31 @@
+/* eslint-disable camelcase, @typescript-eslint/no-empty-function, no-console */
+import { getItemFromLocalStorage, removeItemFromLocalStorage } from '../util';
+import { Migration } from '../migrations';
+
+const MIGRATION_VERSION = '1.10.2';
+
+export const v_1_10_2: Migration = {
+  version: MIGRATION_VERSION,
+  upgrade: async () => ({
+    prepare: () => {
+      try {
+        /**
+         * Between the v1.9.0 and v1.10.0 releases, the 'stakingBrowserPreferences'
+         * localStorage was updated, and contained a change in spelling, removing this
+         * object allows it to be saved again and any issues related to spelling
+         * are mitigated
+         *  */
+        removeItemFromLocalStorage('stakingBrowserPreferences');
+      } catch (error) {
+        console.log(`error executing migration ${MIGRATION_VERSION}: ${error}`);
+        throw error;
+      }
+    },
+    assert: () => {
+      const stakingBrowserPreferences = getItemFromLocalStorage('stakingBrowserPreferences');
+      return !!stakingBrowserPreferences;
+    },
+    persist: () => {},
+    rollback: () => {}
+  })
+};

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

@@ -10,7 +10,7 @@ import { compactNumberWithUnit } from '@utils/format-number';
 import { isMultidelegationSupportedByDevice } from '@views/browser/features/staking';
 import { useWalletStore } from '@stores';
 import { useAnalyticsContext, useCurrencyStore, useExternalLinkOpener } from '@providers';
-import { OutsideHandlesProvider } from '@lace/staking';
+import { DEFAULT_STAKING_BROWSER_PREFERENCES, OutsideHandlesProvider } from '@lace/staking';
 import { useBalances, useFetchCoinPrice, useLocalStorage } from '@hooks';
 import {
   MULTIDELEGATION_FIRST_VISIT_LS_KEY,
@@ -27,7 +27,7 @@ export const StakingContainer = (): React.ReactElement => {
 
   const analytics = useAnalyticsContext();
   const [stakingBrowserPreferencesPersistence, { updateLocalStorage: setStakingBrowserPreferencesPersistence }] =
-    useLocalStorage(STAKING_BROWSER_PREFERENCES_LS_KEY);
+    useLocalStorage(STAKING_BROWSER_PREFERENCES_LS_KEY, DEFAULT_STAKING_BROWSER_PREFERENCES);
   const [multidelegationFirstVisit, { updateLocalStorage: setMultidelegationFirstVisit }] = useLocalStorage(
     MULTIDELEGATION_FIRST_VISIT_LS_KEY,
     true

packages/staking/src/features/BrowsePools/constants.ts

@@ -1,4 +1,4 @@
-import { BrowsePoolsView, StakePoolSortOptions } from './types';
+import { BrowsePoolsView, StakePoolSortOptions, StakingBrowserPreferences } from './types';
 import { getDefaultSortOrderByField } from './utils';
 
 export const SEARCH_DEBOUNCE_IN_MS = 300;
@@ -9,3 +9,8 @@ export const DEFAULT_SORT_OPTIONS: StakePoolSortOptions = {
 };
 
 export const DEFAULT_BROWSE_POOLS_VIEW: BrowsePoolsView = BrowsePoolsView.grid;
+
+export const DEFAULT_STAKING_BROWSER_PREFERENCES: StakingBrowserPreferences = {
+  poolsView: DEFAULT_BROWSE_POOLS_VIEW,
+  selectedPoolIds: [],
+};

packages/staking/src/features/BrowsePools/index.ts

@@ -2,11 +2,11 @@ export { BrowsePools } from './BrowsePools';
 export { BrowsePoolsPreferencesCard } from './BrowsePoolsPreferencesCard';
 export { getPoolInfos } from './queries';
 export { useBrowsePoolsPersistence } from './hooks';
-export { DEFAULT_SORT_OPTIONS } from './constants';
+export { DEFAULT_SORT_OPTIONS, DEFAULT_STAKING_BROWSER_PREFERENCES } from './constants';
 
 // TODO: remove once multi delegation feature is GA'd
 export { getSaturationLevel, isOversaturated, getDefaultSortOrderByField } from './utils';
-export type { StakePoolSortOptions, TranslationsFor, SortField, SortOrder } from './types';
+export type { StakingBrowserPreferences, StakePoolSortOptions, TranslationsFor, SortField, SortOrder } from './types';
 export { BrowsePoolsView } from './types';
 export { StakePoolCardProgressBar } from './StakePoolCard';
 export { StakePoolsListRowSkeleton, config as stakePoolTableConfig } from './StakePoolsList';

packages/staking/src/features/BrowsePools/types.ts

@@ -22,3 +22,8 @@ export type StakePoolSortOptions = {
 };
 
 export type TranslationsFor<T extends string> = Record<T, string>;
+
+export type StakingBrowserPreferences = {
+  poolsView: BrowsePoolsView;
+  selectedPoolIds: string[];
+};

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

@@ -1,7 +1,7 @@
 import { TxBuilder } from '@cardano-sdk/tx-construction';
 import { Wallet } from '@lace/cardano';
 import { AssetActivityListProps } from '@lace/core';
-import { BrowsePoolsView, StakePoolSortOptions } from 'features/BrowsePools/types';
+import { StakePoolSortOptions, StakingBrowserPreferences } from 'features/BrowsePools';
 import type { IAnalyticsTracker } from '@lace/common';
 
 type WalletBalance = {
@@ -40,11 +40,6 @@ export enum StateStatus {
   ERROR = 'error',
 }
 
-export interface StakingBrowserPreferences {
-  poolsView: BrowsePoolsView;
-  selectedPoolIds: string[];
-}
-
 export interface IBlockchainProvider {
   stakePoolProvider: Wallet.StakePoolProvider;
   assetProvider: Wallet.AssetProvider;

packages/staking/src/index.ts

@@ -1,7 +1,7 @@
 export { Staking, StakingPopup } from './features/staking';
-export { BrowsePoolsPreferencesCard } from './features/BrowsePools';
+export type { StakingBrowserPreferences } from 'features/BrowsePools';
+export { BrowsePoolsPreferencesCard, DEFAULT_STAKING_BROWSER_PREFERENCES } from './features/BrowsePools';
 export { OutsideHandlesProvider } from './features/outside-handles-provider';
-export type { StakingBrowserPreferences } from './features/outside-handles-provider';
 export { MAX_POOLS_COUNT } from './features/store';
 
 // TODO: remove once multi delegaion feature is GA'd