feat(staking,extension,ui): StakePools Grid and List View integration, persistance adjustments [LW-9250, LW-9393, LW-9249, LW-9922]

apps/browser-extension-wallet/.env.defaults

@@ -28,6 +28,7 @@ USE_MULTI_DELEGATION_STAKING_LEDGER=false
 USE_MULTI_DELEGATION_STAKING_TREZOR=false
 USE_MULTI_DELEGATION_STAKING_ACTIVITY=true
 USE_MULTI_DELEGATION_STAKING_GRID_VIEW=false
+USE_MULTI_DELEGATION_STAKING_FILTERS=false
 USE_ROS_STAKING_COLUMN=false
 
 USE_POSTHOG_ANALYTICS_FOR_OPTED_OUT=false

apps/browser-extension-wallet/.env.example

@@ -28,6 +28,7 @@ USE_POSTHOG_ANALYTICS_FOR_OPTED_OUT=false
 USE_COMBINED_PASSWORD_NAME_STEP_COMPONENT=false
 USE_MULTI_DELEGATION_STAKING_ACTIVITY=true
 USE_MULTI_DELEGATION_STAKING_GRID_VIEW=false
+USE_MULTI_DELEGATION_STAKING_FILTERS=false
 USE_ROS_STAKING_COLUMN=false
 
 # In App URLs

apps/browser-extension-wallet/src/features/delegation/stores/createDelegationStore.ts

@@ -17,7 +17,7 @@ DelegationStore): stakePoolDetailsSelectorProps => {
       cost,
       hexId,
       metadata: { description = '', name = '', ticker = '', homepage, ext } = {},
-      metrics: { apy, delegators, stake, saturation, blocksCreated } = {},
+      metrics: { ros, delegators, stake, saturation, blocksCreated } = {},
       margin,
       owners,
       logo,
@@ -45,7 +45,7 @@ DelegationStore): stakePoolDetailsSelectorProps => {
         : { number: '-' },
       ticker,
       status,
-      apy: apy && formatPercentages(apy),
+      ros: ros && formatPercentages(ros),
       fee: Wallet.util.lovelacesToAdaString(cost.toString()),
       contact: {
         primary: homepage,

apps/browser-extension-wallet/src/features/delegation/types/index.ts

@@ -23,7 +23,7 @@ export interface StakePool {
   ticker?: string;
   logo?: string;
   retired?: boolean;
-  apy?: number | string;
+  ros?: number | string;
   size?: string;
   saturation?: number | string;
   fee?: number | string;
@@ -43,7 +43,7 @@ export type stakePoolDetailsSelectorProps = {
   activeStake: { number: string; unit?: string };
   liveStake: { number: string; unit?: string };
   ticker: string;
-  apy: number | string;
+  ros: number | string;
   status: Wallet.Cardano.StakePool['status'];
   fee: string;
   contact: Wallet.Cardano.PoolContactData;

apps/browser-extension-wallet/src/lib/translations/en.json

@@ -1123,7 +1123,7 @@
           "title": "Cost",
           "tooltip": "The cost is not directly paid by the delegator; they are deducted from a pool's rewards, consisting of a fixed cost and a variable cost, which fund the pool's operational costs"
         },
-        "apy": {
+        "ros": {
           "title": "ROS",
           "tooltip": "An estimation of the potential rewards you will earn per epoch if you delegate the intended amount of stake. The system looks at the pool's parameters and historical performance data to calculate potential rewards, assuming that the pool reaches optimal saturation."
         },

apps/browser-extension-wallet/src/stores/slices/stake-pool-search-slice.ts

@@ -1,7 +1,7 @@
 /* eslint-disable unicorn/no-null */
-import isNumber from 'lodash/isNumber';
+import isEqual from 'lodash/isEqual';
 import { Wallet } from '@lace/cardano';
-import { StateStatus, StakePoolSearchSlice, BlockchainProviderSlice, ZustandHandlers, SliceCreator } from '../types';
+import { BlockchainProviderSlice, SliceCreator, StakePoolSearchSlice, StateStatus, ZustandHandlers } from '../types';
 
 const defaultFetchLimit = 100;
 
@@ -11,7 +11,11 @@ const fetchStakePools =
     get
   }: ZustandHandlers<StakePoolSearchSlice & BlockchainProviderSlice>): StakePoolSearchSlice['fetchStakePools'] =>
   async ({ searchString, skip = 0, limit = defaultFetchLimit, sort }) => {
-    const { totalResultCount: prevTotalCount, pageResults: prevPageResults } = get().stakePoolSearchResults || {};
+    const {
+      totalResultCount: prevTotalCount,
+      pageResults: prevPageResults,
+      searchFilters: prevSort
+    } = get().stakePoolSearchResults || {};
     set({ stakePoolSearchResultsStatus: StateStatus.LOADING });
 
     let filtersValues = [];
@@ -40,14 +44,18 @@ const fetchStakePools =
         startAt: skip,
         limit: limit - skip + 1
       },
-      sort
+      // @ts-expect-error TODO remove when ticker sort is available; https://input-output.atlassian.net/browse/LW-9981
+      sort: sort && {
+        ...sort,
+        ...(sort.field === 'ticker' ? { field: 'name' } : {})
+      }
     };
     const { totalResultCount, pageResults } = await get().blockchainProvider.stakePoolProvider.queryStakePools(filters);
 
-    const stakePools: (Wallet.Cardano.StakePool | undefined)[] =
-      isNumber(prevTotalCount) && totalResultCount === prevTotalCount
-        ? [...prevPageResults]
-        : Array.from({ length: totalResultCount });
+    const paginating = isEqual(prevSort, sort) && prevTotalCount === totalResultCount;
+    const stakePools: (Wallet.Cardano.StakePool | undefined)[] = paginating
+      ? [...prevPageResults]
+      : Array.from({ length: totalResultCount });
 
     if (pageResults.length > 0) {
       stakePools.splice(skip, pageResults?.length, ...pageResults);

apps/browser-extension-wallet/src/stores/types.ts

@@ -72,12 +72,13 @@ export interface NetworkSlice {
 }
 
 export interface StakePoolSearchSlice {
-  stakePoolSearchResults: Omit<Wallet.StakePoolSearchResults, 'pageResults'> & {
+  stakePoolSearchResults: {
     skip?: number;
     limit?: number;
     searchQuery?: string;
     searchFilters?: StakePoolSortOptions;
     pageResults: (Wallet.Cardano.StakePool | undefined)[];
+    totalResultCount: number | null;
   };
   stakePoolSearchResultsStatus: StateStatus;
   selectedStakePool: Wallet.Cardano.StakePool;

apps/browser-extension-wallet/src/utils/mocks/test-helpers.tsx

@@ -282,7 +282,6 @@ export const cardanoStakePoolMock: Wallet.StakePoolSearchResults = {
         saturation: Percent(0.0512),
         stake: undefined,
         size: undefined,
-        apy: Percent(0.013),
         ros: Percent(0.69),
         lastRos: Percent(0.88)
       },
@@ -566,21 +565,20 @@ export const cardanoStakePoolSelectedDetails = {
     'stake_test1uq7g7kqeucnqfweqzgxk3dw34e8zg4swnc7nagysug2mm4cm77jrx'
   ],
   saturation: '5.12',
-  apy: '1.30',
   activeStake: {
     number: '-'
   },
   liveStake: {
     number: '-'
   },
+  ros: '69.00',
   status: 'active',
   ticker: 'STTST',
   blocks: '20',
   pledge: '2000.00'
 };
 
 export const transformedStakePool = {
-  apy: '1.30',
   cost: '2.00% + 6ADA',
   description: 'This is the STTST description',
   fee: '6.04',

apps/browser-extension-wallet/src/views/browser-view/components/CollapsiblePanelContainer/CollapsiblePanelContainer.module.scss

@@ -19,6 +19,7 @@
   position: sticky;
   top: 0;
   right: 32px;
+  z-index: 1;
 }
 
 .container {

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

@@ -1,47 +1,16 @@
-import { OutsideHandlesProvider, Staking } from '@lace/staking';
-import React, { useCallback, useEffect } from 'react';
-import { useAnalyticsContext, useCurrencyStore, useExternalLinkOpener, useTheme } from '@providers';
-import { useBalances, useFetchCoinPrice, useLocalStorage } from '@hooks';
-import { useDelegationStore } from '@src/features/delegation/stores';
-import { usePassword, useSubmitingState } from '@views/browser/features/send-transaction';
+import { Staking } from '@lace/staking';
+import React, { useEffect } from 'react';
+import { useTheme } from '@providers';
+import { useFetchCoinPrice } from '@hooks';
 import { useWalletStore } from '@stores';
-import { compactNumberWithUnit } from '@utils/format-number';
-import { useWalletActivities } from '@hooks/useWalletActivities';
-import {
-  STAKING_BROWSER_PREFERENCES_LS_KEY,
-  MULTIDELEGATION_FIRST_VISIT_LS_KEY,
-  MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY
-} from '@utils/constants';
 import { ActivityDetail } from '../../activity';
 import { Drawer, DrawerNavigation } from '@lace/common';
 import { useTranslation } from 'react-i18next';
-import { withSignTxConfirmation } from '@lib/wallet-api-ui';
-import { isMultidelegationSupportedByDevice } from '../helpers';
 
 export const MultiDelegationStaking = (): JSX.Element => {
   const { theme } = useTheme();
-  const { delegationTxBuilder, setDelegationTxBuilder, delegationTxFee, setDelegationTxFee } = useDelegationStore();
-  const openExternalLink = useExternalLinkOpener();
-  const password = usePassword();
-  const submittingState = useSubmitingState();
   const { priceResult } = useFetchCoinPrice();
-  const { balance } = useBalances(priceResult?.cardano?.price);
-  const {
-    walletInfo,
-    walletType,
-    inMemoryWallet,
-    walletUI: { cardanoCoin },
-    stakePoolSearchResults,
-    stakePoolSearchResultsStatus,
-    fetchStakePools,
-    resetStakePools,
-    fetchNetworkInfo,
-    networkInfo,
-    blockchainProvider,
-    currentChain,
-    activityDetail,
-    resetActivityState
-  } = useWalletStore((state) => ({
+  const { blockchainProvider, currentChain, activityDetail, resetActivityState } = useWalletStore((state) => ({
     walletType: state.walletType,
     inMemoryWallet: state.inMemoryWallet,
     walletUI: { cardanoCoin: state.walletUI.cardanoCoin },
@@ -58,85 +27,14 @@ export const MultiDelegationStaking = (): JSX.Element => {
     resetActivityState: state.resetActivityState
   }));
   const { t } = useTranslation();
-  const sendAnalytics = useCallback(() => {
-    // TODO implement analytics for the new flow
-    const analytics = {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      sendEvent: () => {}
-    };
-
-    // @ts-expect-error TODO implement analytics
-    analytics.sendEvent({
-      action: 'AnalyticsEventActions.CLICK_EVENT',
-      category: 'AnalyticsEventCategories.STAKING',
-      name: 'AnalyticsEventNames.Staking.STAKING_MULTI_DELEGATION_BROWSER'
-    });
-  }, []);
-  const { walletActivities, walletActivitiesStatus } = useWalletActivities({ sendAnalytics });
-  const { fiatCurrency } = useCurrencyStore();
-  const [multidelegationFirstVisit, { updateLocalStorage: setMultidelegationFirstVisit }] = useLocalStorage(
-    MULTIDELEGATION_FIRST_VISIT_LS_KEY,
-    true
-  );
-  const [
-    multidelegationFirstVisitSincePortfolioPersistence,
-    { updateLocalStorage: setMultidelegationFirstVisitSincePortfolioPersistence }
-  ] = useLocalStorage(MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY, true);
-
-  const [stakingBrowserPreferencesPersistence, { updateLocalStorage: setStakingBrowserPreferencesPersistence }] =
-    useLocalStorage(STAKING_BROWSER_PREFERENCES_LS_KEY);
-
-  const walletAddress = walletInfo.addresses?.[0].address?.toString();
-  const analytics = useAnalyticsContext();
 
   // Reset current transaction details and close drawer if network (blockchainProvider) has changed
   useEffect(() => {
     resetActivityState();
   }, [resetActivityState, blockchainProvider]);
 
   return (
-    <OutsideHandlesProvider
-      {...{
-        analytics,
-        stakingBrowserPreferencesPersistence,
-        setStakingBrowserPreferencesPersistence,
-        balancesBalance: balance,
-        delegationStoreSetDelegationTxBuilder: setDelegationTxBuilder,
-        delegationStoreDelegationTxBuilder: delegationTxBuilder,
-        delegationStoreSetDelegationTxFee: setDelegationTxFee,
-        delegationStoreDelegationTxFee: delegationTxFee,
-        fetchCoinPricePriceResult: priceResult,
-        openExternalLink,
-        walletManagerExecuteWithPassword: withSignTxConfirmation,
-        password,
-        submittingState,
-        walletStoreWalletType: walletType,
-        walletStoreInMemoryWallet: inMemoryWallet,
-        walletStoreWalletUICardanoCoin: cardanoCoin,
-        currencyStoreFiatCurrency: fiatCurrency,
-        walletStoreStakePoolSearchResults: stakePoolSearchResults,
-        walletStoreStakePoolSearchResultsStatus: stakePoolSearchResultsStatus,
-        walletStoreFetchStakePools: fetchStakePools,
-        walletStoreResetStakePools: resetStakePools,
-        walletStoreFetchNetworkInfo: fetchNetworkInfo,
-        walletStoreNetworkInfo: networkInfo,
-        walletStoreBlockchainProvider: blockchainProvider,
-        walletStoreWalletActivities: walletActivities,
-        walletStoreWalletActivitiesStatus: walletActivitiesStatus,
-        // TODO: LW-7575 make compactNumber reusable and not pass it here.
-        compactNumber: compactNumberWithUnit,
-        multidelegationFirstVisit,
-        triggerMultidelegationFirstVisit: () => setMultidelegationFirstVisit(false),
-        multidelegationFirstVisitSincePortfolioPersistence,
-        triggerMultidelegationFirstVisitSincePortfolioPersistence: () => {
-          setMultidelegationFirstVisit(false);
-          setMultidelegationFirstVisitSincePortfolioPersistence(false);
-        },
-        walletAddress,
-        currentChain,
-        isMultidelegationSupportedByDevice
-      }}
-    >
+    <>
       <Staking currentChain={currentChain} theme={theme.name} />
       {/*
         Note: Mounting the browser-extension activity details drawer here is just a workaround.
@@ -159,6 +57,6 @@ export const MultiDelegationStaking = (): JSX.Element => {
       >
         {activityDetail && priceResult && <ActivityDetail price={priceResult} />}
       </Drawer>
-    </OutsideHandlesProvider>
+    </>
   );
 };

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

@@ -13,7 +13,7 @@ import { useWalletStore } from '@src/stores';
 
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
-import { StakePoolCardProgressBar, utils } from '@lace/staking';
+import { StakePoolCardProgressBar, isOversaturated } from '@lace/staking';
 
 const listItem = [
   'browserView.staking.details.clickOnAPoolFromTheListInTheMainPage',
@@ -33,7 +33,7 @@ export const StakePoolDetail = ({ popupView, setIsStaking }: stakePoolDetailProp
     id,
     hexId,
     owners = [],
-    apy,
+    ros,
     saturation,
     activeStake,
     liveStake,
@@ -74,7 +74,7 @@ export const StakePoolDetail = ({ popupView, setIsStaking }: stakePoolDetailProp
     liveStake: t('cardano.stakePoolMetricsBrowser.liveStake'),
     saturation: t('cardano.stakePoolMetricsBrowser.saturation'),
     delegators: t('cardano.stakePoolMetricsBrowser.delegators'),
-    apy: t('cardano.stakePoolMetricsBrowser.ros'),
+    ros: t('cardano.stakePoolMetricsBrowser.ros'),
     blocks: t('cardano.stakePoolMetricsBrowser.blocks'),
     cost: t('cardano.stakePoolMetricsBrowser.cost'),
     margin: t('cardano.stakePoolMetricsBrowser.margin'),
@@ -95,7 +95,7 @@ export const StakePoolDetail = ({ popupView, setIsStaking }: stakePoolDetailProp
       { t: metricsTranslations.activeStake, testId: 'active-stake', unit: activeStake.unit, value: activeStake.number },
       { t: metricsTranslations.liveStake, testId: 'live-stake', unit: liveStake.unit, value: liveStake.number },
       { t: metricsTranslations.delegators, testId: 'delegators', value: delegators || '-' },
-      { t: metricsTranslations.apy, testId: 'apy', unit: '%', value: apy || '-' },
+      { t: metricsTranslations.ros, testId: 'ros', unit: '%', value: ros || '-' },
       { t: metricsTranslations.blocks, testId: 'blocks', value: blocks },
       { t: metricsTranslations.cost, testId: 'cost', unit: formattedCost.unit, value: formattedCost.number },
       { t: metricsTranslations.pledge, testId: 'pledge', unit: formattedPledge.unit, value: formattedPledge.number },
@@ -110,7 +110,7 @@ export const StakePoolDetail = ({ popupView, setIsStaking }: stakePoolDetailProp
   }, [
     activeStake.number,
     activeStake.unit,
-    apy,
+    ros,
     blocks,
     delegators,
     formattedCost.number,
@@ -121,13 +121,13 @@ export const StakePoolDetail = ({ popupView, setIsStaking }: stakePoolDetailProp
     liveStake.unit,
     margin,
     metricsTranslations.activeStake,
-    metricsTranslations.apy,
     metricsTranslations.blocks,
     metricsTranslations.cost,
     metricsTranslations.delegators,
     metricsTranslations.liveStake,
     metricsTranslations.margin,
     metricsTranslations.pledge,
+    metricsTranslations.ros,
     metricsTranslations.saturation,
     popupView,
     saturation
@@ -144,7 +144,7 @@ export const StakePoolDetail = ({ popupView, setIsStaking }: stakePoolDetailProp
             id,
             status,
             isDelegated: isDelegatingToThisPool,
-            isOversaturated: saturation !== undefined && utils.isOversaturated(Number(saturation))
+            isOversaturated: saturation !== undefined && isOversaturated(Number(saturation))
           }}
           translations={statusLogoTranslations}
         />