feat(staking): [LW-8879] persistence banner fix, minor banners refactor (#702)

refi93 · web-flow · commit 558d6384f0e9 · 2023-11-07T12:54:46.000+01:00
persistence banner fix, minor banners refactor
diff --git a/apps/browser-extension-wallet/src/features/delegation/components/MultiDelegationStakingPopup.tsx b/apps/browser-extension-wallet/src/features/delegation/components/MultiDelegationStakingPopup.tsx
@@ -99,8 +99,10 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
         multidelegationFirstVisit,
         triggerMultidelegationFirstVisit: () => setMultidelegationFirstVisit(false),
         multidelegationFirstVisitSincePortfolioPersistence,
-        triggerMultidelegationFirstVisitSincePortfolioPersistence: () =>
-          setMultidelegationFirstVisitSincePortfolioPersistence(false),
+        triggerMultidelegationFirstVisitSincePortfolioPersistence: () => {
+          setMultidelegationFirstVisit(false);
+          setMultidelegationFirstVisitSincePortfolioPersistence(false);
+        },
         backgroundServiceAPIContextSetWalletPassword: setWalletPassword,
         expandStakingView: () => handleOpenBrowser({ section: BrowserViewSections.STAKING }),
         balancesBalance: balance,
diff --git a/apps/browser-extension-wallet/src/hooks/__tests__/useWalletManager.test.tsx b/apps/browser-extension-wallet/src/hooks/__tests__/useWalletManager.test.tsx
@@ -758,7 +758,15 @@ describe('Testing useWalletManager hook', () => {
       await deleteWallet();
       expect(shutdownWalletMocked).toBeCalledWith(walletManagerUi);
       expect(clearLocalStorage).toBeCalledWith({
-        except: ['currency', 'lock', 'mode', 'hideBalance', 'isForgotPasswordFlow', 'multidelegationFirstVisit']
+        except: [
+          'currency',
+          'lock',
+          'mode',
+          'hideBalance',
+          'isForgotPasswordFlow',
+          'multidelegationFirstVisit',
+          'multidelegationFirstVisitSincePortfolioPersistence'
+        ]
       });
       expect(clearBackgroundStorage).toBeCalledWith({
         except: ['fiatPrices', 'userId', 'usePersistentUserId', 'experimentsConfiguration']
diff --git a/apps/browser-extension-wallet/src/hooks/useWalletManager.ts b/apps/browser-extension-wallet/src/hooks/useWalletManager.ts
@@ -316,7 +316,8 @@ export const useWalletManager = (): UseWalletManager => {
         'mode',
         'hideBalance',
         'isForgotPasswordFlow',
-        'multidelegationFirstVisit'
+        'multidelegationFirstVisit',
+        'multidelegationFirstVisitSincePortfolioPersistence'
       ];
 
       setCurrentChain(CHAIN);
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/MultiDelegationStaking.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/MultiDelegationStaking.tsx
@@ -111,8 +111,10 @@ export const MultiDelegationStaking = (): JSX.Element => {
         multidelegationFirstVisit,
         triggerMultidelegationFirstVisit: () => setMultidelegationFirstVisit(false),
         multidelegationFirstVisitSincePortfolioPersistence,
-        triggerMultidelegationFirstVisitSincePortfolioPersistence: () =>
-          setMultidelegationFirstVisitSincePortfolioPersistence(false),
+        triggerMultidelegationFirstVisitSincePortfolioPersistence: () => {
+          setMultidelegationFirstVisit(false);
+          setMultidelegationFirstVisitSincePortfolioPersistence(false);
+        },
         walletAddress,
         currentChain
       }}
diff --git a/packages/e2e-tests/src/fixture/localStorageInitializer.ts b/packages/e2e-tests/src/fixture/localStorageInitializer.ts
@@ -64,6 +64,10 @@ class LocalStorageInitializer {
   disableShowingMultidelegationBetaBanner = async () => {
     await localStorageManager.setItem('multidelegationFirstVisit', 'false');
   };
+
+  disableShowingMultidelegationPersistenceBanner = async () => {
+    await localStorageManager.setItem('multidelegationFirstVisitSincePortfolioPersistence', 'false');
+  };
 }
 
 export default new LocalStorageInitializer();
diff --git a/packages/e2e-tests/src/steps/commonSteps.ts b/packages/e2e-tests/src/steps/commonSteps.ts
@@ -262,6 +262,10 @@ Given(/^I disable showing Multidelegation beta banner$/, async () => {
   await localStorageInitializer.disableShowingMultidelegationBetaBanner();
 });
 
+Given(/^I disable showing Multidelegation persistence banner$/, async () => {
+  await localStorageInitializer.disableShowingMultidelegationPersistenceBanner();
+});
+
 Then(/^Clipboard contains address of wallet: "([^"]*)"$/, async (walletName: string) => {
   await commonAssert.assertClipboardContainsAddressOfWallet(walletName);
 });
diff --git a/packages/e2e-tests/src/steps/multidelegationSteps.ts b/packages/e2e-tests/src/steps/multidelegationSteps.ts
@@ -293,6 +293,7 @@ Given(/^I am on Start Staking page in (extended|popup) mode$/, async (mode: 'ext
   await TokensPageObject.waitUntilCardanoTokenLoaded();
   await TokensPageObject.saveTokenBalance('Cardano');
   await localStorageInitializer.disableShowingMultidelegationBetaBanner();
+  await localStorageInitializer.disableShowingMultidelegationPersistenceBanner();
   await mainMenuPageObject.navigateToSection('Staking', mode);
   const cardanoBalance = String(await TokensPageObject.loadTokenBalance('Cardano'));
   await StartStakingPageAssert.assertSeeStartStakingPage(cardanoBalance, mode);
diff --git a/packages/staking/src/features/Drawer/Drawer.tsx b/packages/staking/src/features/Drawer/Drawer.tsx
@@ -3,7 +3,6 @@ import { PostHogAction, useObservable } from '@lace/common';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOutsideHandles } from '../outside-handles-provider';
-import { isPortfolioDrifted } from '../portfolio-drift';
 import {
   DelegationFlow,
   DelegationPortfolioStore,
@@ -12,6 +11,7 @@ import {
   DrawerStep,
   MAX_POOLS_COUNT,
   PERCENTAGE_SCALE_MAX,
+  isPortfolioDrifted,
   sumPercentagesSanitized,
   useDelegationPortfolioStore,
 } from '../store';
diff --git a/packages/staking/src/features/overview/StakingNotificationBanners/PortfolioDriftBanner.css.ts b/packages/staking/src/features/overview/StakingNotificationBanners/PortfolioDriftBanner.css.ts
@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { theme } from '../theme';
+import { theme } from '../../theme';
 
 export const bannerBellIcon = style({
   color: theme.colors.$bannerBellIconColor,
diff --git a/packages/staking/src/features/overview/StakingNotificationBanners/PortfolioDriftBanner.tsx b/packages/staking/src/features/overview/StakingNotificationBanners/PortfolioDriftBanner.tsx
@@ -1,9 +1,9 @@
 import { Banner } from '@lace/common';
 import { VFC } from 'react';
 import { useTranslation } from 'react-i18next';
-import BellIcon from '../../assets/icons/bell-icon.svg';
-import { useOutsideHandles } from '../outside-handles-provider';
-import { useDelegationPortfolioStore } from '../store';
+import BellIcon from '../../../assets/icons/bell-icon.svg';
+import { useOutsideHandles } from '../../outside-handles-provider';
+import { useDelegationPortfolioStore } from '../../store';
 import * as styles from './PortfolioDriftBanner.css';
 
 type PortfolioDriftBannerProps = {
diff --git a/packages/staking/src/features/overview/StakingNotificationBanners/StakingNotificationBanners.tsx b/packages/staking/src/features/overview/StakingNotificationBanners/StakingNotificationBanners.tsx
@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
 import InfoIcon from '../../../assets/icons/info-icon.svg';
 import WarningTriangleIcon from '../../../assets/icons/warning-triangle.svg';
 import { useOutsideHandles } from '../../outside-handles-provider';
-import { PortfolioDriftBanner } from '../../portfolio-drift';
 import { useDelegationPortfolioStore } from '../../store';
+import { PortfolioDriftBanner } from './PortfolioDriftBanner';
 import * as styles from './StakingNotificationBanners.css';
 import { StakingNotificationType } from './types';
 
diff --git a/packages/staking/src/features/overview/StakingNotificationBanners/getCurrentStakingNotifications.ts b/packages/staking/src/features/overview/StakingNotificationBanners/getCurrentStakingNotifications.ts
@@ -1,7 +1,6 @@
-import type { CurrentPortfolioStakePool } from '../../store';
 import type { StakingNotificationType } from './types';
 import type { AssetActivityListProps } from '@lace/core';
-import { isPortfolioDrifted } from '../../portfolio-drift';
+import { CurrentPortfolioStakePool, isPortfolioDrifted } from '../../store';
 import { hasPendingDelegationTransaction, hasSaturatedOrRetiredPools } from '../helpers';
 
 type GetCurrentStakingNotificationsParams = {
diff --git a/packages/staking/src/features/portfolio-drift/index.ts b/packages/staking/src/features/portfolio-drift/index.ts
diff --git a/packages/staking/src/features/staking/OneTimeModals.tsx b/packages/staking/src/features/staking/OneTimeModals.tsx
@@ -0,0 +1,60 @@
+import { useDelegationPortfolioStore } from 'features/store';
+import { isPortfolioSavedOnChain } from 'features/store/delegationPortfolioStore/isPortfolioSavedOnChain';
+import { useEffect } from 'react';
+import { MultidelegationBetaModal, PortfolioPersistenceModal } from '../modals';
+import { useOutsideHandles } from '../outside-handles-provider';
+
+type OneTimeModalManagerProps = { popupView?: boolean };
+
+export const OneTimeModals = ({ popupView }: OneTimeModalManagerProps) => {
+  const {
+    multidelegationFirstVisit,
+    triggerMultidelegationFirstVisit,
+    multidelegationFirstVisitSincePortfolioPersistence,
+    triggerMultidelegationFirstVisitSincePortfolioPersistence,
+  } = useOutsideHandles();
+  const { currentPortfolio } = useDelegationPortfolioStore((store) => ({
+    currentPortfolio: store.currentPortfolio,
+  }));
+  const userAlreadyMultidelegated = currentPortfolio.length > 1;
+  const portfolioSavedOnChain = isPortfolioSavedOnChain(currentPortfolio);
+
+  // the useEffects below prevent the modals from appearing to the user in the future e.g. after undelegating the portfolio
+  useEffect(() => {
+    if (multidelegationFirstVisit && userAlreadyMultidelegated) {
+      triggerMultidelegationFirstVisit();
+    }
+  }, [userAlreadyMultidelegated, multidelegationFirstVisit, triggerMultidelegationFirstVisit]);
+
+  useEffect(() => {
+    if (multidelegationFirstVisitSincePortfolioPersistence && portfolioSavedOnChain) {
+      triggerMultidelegationFirstVisitSincePortfolioPersistence();
+    }
+  }, [
+    multidelegationFirstVisitSincePortfolioPersistence,
+    triggerMultidelegationFirstVisitSincePortfolioPersistence,
+    portfolioSavedOnChain,
+  ]);
+
+  if (!userAlreadyMultidelegated) {
+    return (
+      <MultidelegationBetaModal
+        visible={multidelegationFirstVisit}
+        onConfirm={triggerMultidelegationFirstVisit}
+        popupView={popupView}
+      />
+    );
+  }
+
+  if (!portfolioSavedOnChain) {
+    return (
+      <PortfolioPersistenceModal
+        visible={multidelegationFirstVisitSincePortfolioPersistence}
+        onConfirm={triggerMultidelegationFirstVisitSincePortfolioPersistence}
+        popupView={popupView}
+      />
+    );
+  }
+
+  return null;
+};
diff --git a/packages/staking/src/features/staking/StakingPopupView.tsx b/packages/staking/src/features/staking/StakingPopupView.tsx
@@ -1,19 +1,11 @@
 import { Drawer } from '../Drawer';
-import { MultidelegationBetaModal } from '../modals';
-import { useOutsideHandles } from '../outside-handles-provider';
 import { OverviewPopup } from '../overview';
+import { OneTimeModals } from './OneTimeModals';
 
-export const StakingPopupView = () => {
-  const { multidelegationFirstVisit, triggerMultidelegationFirstVisit } = useOutsideHandles();
-  return (
-    <>
-      <OverviewPopup />
-      <Drawer showBackIcon showExitConfirmation={() => false} popupView />
-      <MultidelegationBetaModal
-        popupView
-        visible={multidelegationFirstVisit}
-        onConfirm={triggerMultidelegationFirstVisit}
-      />
-    </>
-  );
-};
+export const StakingPopupView = () => (
+  <>
+    <OverviewPopup />
+    <Drawer showBackIcon showExitConfirmation={() => false} popupView />
+    <OneTimeModals popupView />
+  </>
+);
diff --git a/packages/staking/src/features/staking/StakingView.tsx b/packages/staking/src/features/staking/StakingView.tsx
@@ -3,27 +3,23 @@ import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BrowsePools } from '../BrowsePools';
 import { Drawer } from '../Drawer';
-import { ChangingPreferencesModal, MultidelegationBetaModal, PortfolioPersistenceModal } from '../modals';
+import { ChangingPreferencesModal } from '../modals';
 import { useOutsideHandles } from '../outside-handles-provider';
 import { Overview } from '../overview';
 import { DrawerManagementStep, DrawerStep, useDelegationPortfolioStore } from '../store';
 import { Navigation, Page } from './Navigation';
+import { OneTimeModals } from './OneTimeModals';
 
 const stepsWithBackBtn = new Set<DrawerStep>([DrawerManagementStep.Confirmation, DrawerManagementStep.Sign]);
 
 export const StakingView = () => {
   const { t } = useTranslation();
-  const { portfolioMutators, currentPortfolio } = useDelegationPortfolioStore((store) => ({
-    currentPortfolio: store.currentPortfolio,
+  const { portfolioMutators } = useDelegationPortfolioStore((store) => ({
     portfolioMutators: store.mutators,
   }));
   const {
     walletStoreFetchNetworkInfo: fetchNetworkInfo,
     walletStoreBlockchainProvider: blockchainProvider,
-    multidelegationFirstVisit,
-    triggerMultidelegationFirstVisit,
-    multidelegationFirstVisitSincePortfolioPersistence,
-    triggerMultidelegationFirstVisitSincePortfolioPersistence,
     currentChain,
   } = useOutsideHandles();
 
@@ -51,14 +47,7 @@ export const StakingView = () => {
       </Navigation>
       <Drawer showCloseIcon showBackIcon={(step: DrawerStep): boolean => stepsWithBackBtn.has(step)} />
       <ChangingPreferencesModal />
-      {currentPortfolio.length > 1 ? (
-        <PortfolioPersistenceModal
-          visible={multidelegationFirstVisitSincePortfolioPersistence}
-          onConfirm={triggerMultidelegationFirstVisitSincePortfolioPersistence}
-        />
-      ) : (
-        <MultidelegationBetaModal visible={multidelegationFirstVisit} onConfirm={triggerMultidelegationFirstVisit} />
-      )}
+      <OneTimeModals />
     </>
   );
 };
diff --git a/packages/staking/src/features/store/delegationPortfolioStore/index.ts b/packages/staking/src/features/store/delegationPortfolioStore/index.ts
@@ -5,3 +5,4 @@ export { DelegationFlow, DrawerDefaultStep, DrawerManagementStep, sumPercentages
 export type { CurrentPortfolioStakePool, DraftPortfolioStakePool, DrawerStep } from './stateMachine';
 export { useDelegationPortfolioStore } from './useDelegationPortfolioStore';
 export type { DelegationPortfolioStore, StakePoolDetails } from './types';
+export { isPortfolioDrifted } from './isPortfolioDrifted';
diff --git a/packages/staking/src/features/store/delegationPortfolioStore/isPortfolioDrifted.ts b/packages/staking/src/features/store/delegationPortfolioStore/isPortfolioDrifted.ts
@@ -2,8 +2,10 @@
 import { Wallet } from '@lace/cardano';
 import BigNumber from 'bignumber.js';
 import sum from 'lodash/sum';
-import type { CurrentPortfolioStakePool } from '../store';
-import { PERCENTAGE_SCALE_MAX, sumPercentagesSanitized } from '../store';
+import type { CurrentPortfolioStakePool } from './stateMachine/types';
+import { PERCENTAGE_SCALE_MAX } from './constants';
+import { isPortfolioSavedOnChain } from './isPortfolioSavedOnChain';
+import { sumPercentagesSanitized } from './stateMachine';
 
 const PORTFOLIO_DRIFT_PERCENTAGE_THRESHOLD = 15;
 
@@ -22,19 +24,13 @@ const getPortfolioTotalPercentageDrift = (
   );
 };
 
-const isPortfolioHavingSavedPercentages = (
-  currentPortfolio: CurrentPortfolioStakePool[]
-): currentPortfolio is (CurrentPortfolioStakePool & { savedIntegerPercentage: number })[] =>
-  currentPortfolio.every(({ savedIntegerPercentage }) => savedIntegerPercentage);
-
-// TODO: move this file to store. It gets imported also outside the overview feature so the store seems better place.
 export const isPortfolioDrifted = (currentPortfolio: CurrentPortfolioStakePool[]) => {
   const onChainPercentageSum = sumPercentagesSanitized({
     items: currentPortfolio,
     key: 'onChainPercentage',
   });
   if (onChainPercentageSum !== PERCENTAGE_SCALE_MAX) return true;
-  if (!isPortfolioHavingSavedPercentages(currentPortfolio)) return false;
+  if (!isPortfolioSavedOnChain(currentPortfolio)) return false;
   const drift = getPortfolioTotalPercentageDrift(currentPortfolio);
   return drift >= PORTFOLIO_DRIFT_PERCENTAGE_THRESHOLD;
 };
diff --git a/packages/staking/src/features/store/delegationPortfolioStore/isPortfolioSavedOnChain.ts b/packages/staking/src/features/store/delegationPortfolioStore/isPortfolioSavedOnChain.ts
@@ -0,0 +1,6 @@
+import type { CurrentPortfolioStakePool } from './stateMachine/types';
+
+export const isPortfolioSavedOnChain = (
+  currentPortfolio: CurrentPortfolioStakePool[]
+): currentPortfolio is (CurrentPortfolioStakePool & { savedIntegerPercentage: number })[] =>
+  currentPortfolio.length > 0 && currentPortfolio.every(({ savedIntegerPercentage }) => savedIntegerPercentage);
