feat(staking): [LW-8837] add portfolio persistence one-time message (#671)

greatertomi · web-flow · commit b8119df29cb7 · 2023-10-31T15:14:54.000+01:00
diff --git a/apps/browser-extension-wallet/src/features/delegation/components/MultiDelegationStakingPopup.tsx b/apps/browser-extension-wallet/src/features/delegation/components/MultiDelegationStakingPopup.tsx
@@ -18,6 +18,10 @@ import { ContentLayout } from '@components/Layout';
 import { useTranslation } from 'react-i18next';
 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
+} from '@utils/constants';
 
 export const MultiDelegationStakingPopup = (): JSX.Element => {
   const { t } = useTranslation();
@@ -73,11 +77,14 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
   const { fiatCurrency } = useCurrencyStore();
   const { executeWithPassword } = useWalletManager();
   const isLoadingNetworkInfo = useWalletStore(networkInfoStatusSelector);
-  const MULTIDELEGATION_FIRST_VISIT_LS_KEY = 'multidelegationFirstVisit';
   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 walletAddress = walletInfo.addresses?.[0].address?.toString();
   const analytics = useAnalyticsContext();
 
@@ -91,6 +98,9 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
         analytics,
         multidelegationFirstVisit,
         triggerMultidelegationFirstVisit: () => setMultidelegationFirstVisit(false),
+        multidelegationFirstVisitSincePortfolioPersistence,
+        triggerMultidelegationFirstVisitSincePortfolioPersistence: () =>
+          setMultidelegationFirstVisitSincePortfolioPersistence(false),
         backgroundServiceAPIContextSetWalletPassword: setWalletPassword,
         expandStakingView: () => handleOpenBrowser({ section: BrowserViewSections.STAKING }),
         balancesBalance: balance,
diff --git a/apps/browser-extension-wallet/src/types/local-storage.ts b/apps/browser-extension-wallet/src/types/local-storage.ts
@@ -42,4 +42,5 @@ export interface ILocalStorage {
   analyticsAccepted?: EnhancedAnalyticsOptInStatus;
   isForgotPasswordFlow?: boolean;
   multidelegationFirstVisit?: boolean;
+  multidelegationFirstVisitSincePortfolioPersistence?: boolean;
 }
diff --git a/apps/browser-extension-wallet/src/utils/constants.ts b/apps/browser-extension-wallet/src/utils/constants.ts
@@ -103,3 +103,7 @@ export const APP_MODE_BROWSER: AppMode = 'browser';
 export const SEND_NFT_DEFAULT_AMOUNT = '1';
 
 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';
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
@@ -13,8 +13,10 @@ import { usePassword, useSubmitingState } from '@views/browser/features/send-tra
 import { useWalletStore } from '@stores';
 import { compactNumberWithUnit } from '@utils/format-number';
 import { useWalletActivities } from '@hooks/useWalletActivities';
-
-const MULTIDELEGATION_FIRST_VISIT_LS_KEY = 'multidelegationFirstVisit';
+import {
+  MULTIDELEGATION_FIRST_VISIT_LS_KEY,
+  MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY
+} from '@utils/constants';
 
 export const MultiDelegationStaking = (): JSX.Element => {
   const { theme } = useTheme();
@@ -71,6 +73,10 @@ export const MultiDelegationStaking = (): JSX.Element => {
     MULTIDELEGATION_FIRST_VISIT_LS_KEY,
     true
   );
+  const [
+    multidelegationFirstVisitSincePortfolioPersistence,
+    { updateLocalStorage: setMultidelegationFirstVisitSincePortfolioPersistence }
+  ] = useLocalStorage(MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY, true);
   const walletAddress = walletInfo.addresses?.[0].address?.toString();
   const analytics = useAnalyticsContext();
 
@@ -104,6 +110,9 @@ export const MultiDelegationStaking = (): JSX.Element => {
         compactNumber: compactNumberWithUnit,
         multidelegationFirstVisit,
         triggerMultidelegationFirstVisit: () => setMultidelegationFirstVisit(false),
+        multidelegationFirstVisitSincePortfolioPersistence,
+        triggerMultidelegationFirstVisitSincePortfolioPersistence: () =>
+          setMultidelegationFirstVisitSincePortfolioPersistence(false),
         walletAddress,
         currentChain
       }}
diff --git a/packages/staking/src/features/i18n/translations/en.ts b/packages/staking/src/features/i18n/translations/en.ts
@@ -91,6 +91,9 @@ export const en: Translations = {
   'modals.beta.description':
     'This feature allows you to stake to up to {{maxPools}} pools. This is still in beta version, so some functionality might not be available. Read more about multi-delegation in our <Link>dedicated blog.</Link>',
   'modals.beta.pill': 'Beta',
+  'modals.beta.portfolioPersistence.description':
+    "Lace now supports on-chain portfolio persistence! This feature helps protect portfolios from significant drift and ensures cross-device syncing. If you've previously submitted a delegation, please resubmit your current (or a new) delegation to enable on-chain portfolio persistence.",
+  'modals.beta.portfolioPersistence.title': 'Multi-delegation: Portfolio Persistence',
   'modals.beta.title': 'Multi-delegation',
   'modals.changingPreferences.buttons.cancel': 'Cancel',
   'modals.changingPreferences.buttons.confirm': 'Fine by me',
diff --git a/packages/staking/src/features/i18n/types.ts b/packages/staking/src/features/i18n/types.ts
@@ -155,6 +155,10 @@ type KeysStructure = {
       title: '';
       description: '';
       button: '';
+      portfolioPersistence: {
+        title: '';
+        description: '';
+      };
     };
     poolsManagement: {
       title: '';
diff --git a/packages/staking/src/features/modals/PortfolioPersistenceModal.tsx b/packages/staking/src/features/modals/PortfolioPersistenceModal.tsx
@@ -0,0 +1,49 @@
+import { Flex } from '@lace/ui';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StakingModal } from './StakingModal';
+
+interface PortfolioPersistenceModalProps {
+  visible: boolean;
+  onConfirm: () => void;
+  popupView?: boolean;
+}
+
+const CONFIRMATION_DELAY_IN_MS = 4000;
+
+export const PortfolioPersistenceModal = ({ popupView, visible, onConfirm }: PortfolioPersistenceModalProps) => {
+  const { t } = useTranslation();
+  const [confirmDisabled, setConfirmDisabled] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setConfirmDisabled(false);
+    }, CONFIRMATION_DELAY_IN_MS);
+  }, []);
+
+  return (
+    <StakingModal
+      announcement
+      popupView={popupView}
+      title={
+        <Flex
+          alignItems={popupView ? 'flex-start' : 'center'}
+          flexDirection={popupView ? 'column-reverse' : 'row'}
+          gap="$8"
+        >
+          {t('modals.beta.portfolioPersistence.title')}
+        </Flex>
+      }
+      visible={visible}
+      description={t('modals.beta.portfolioPersistence.description')}
+      actions={[
+        {
+          body: t('modals.beta.button'),
+          dataTestId: 'multidelegation-portfolio-persistence-modal-button',
+          disabled: confirmDisabled,
+          onClick: onConfirm,
+        },
+      ]}
+    />
+  );
+};
diff --git a/packages/staking/src/features/modals/index.ts b/packages/staking/src/features/modals/index.ts
@@ -1,3 +1,4 @@
 export { ChangingPreferencesModal } from './ChangingPreferencesModal';
 export { MultidelegationBetaModal } from './MultidelegationBetaModal';
 export { PoolsManagementModal, PoolsManagementModalType } from './PoolsManagementModal';
+export { PortfolioPersistenceModal } from './PortfolioPersistenceModal';
diff --git a/packages/staking/src/features/outside-handles-provider/types.ts b/packages/staking/src/features/outside-handles-provider/types.ts
@@ -103,6 +103,8 @@ export type OutsideHandlesContextValue = {
   compactNumber: (value: number | string, decimal?: number) => string;
   multidelegationFirstVisit: boolean;
   triggerMultidelegationFirstVisit: () => void;
+  multidelegationFirstVisitSincePortfolioPersistence: boolean;
+  triggerMultidelegationFirstVisitSincePortfolioPersistence: () => void;
   walletAddress: string;
   currentChain: Wallet.Cardano.ChainId;
 };
diff --git a/packages/staking/src/features/staking/StakingView.tsx b/packages/staking/src/features/staking/StakingView.tsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BrowsePools } from '../BrowsePools';
 import { Drawer } from '../Drawer';
-import { ChangingPreferencesModal, MultidelegationBetaModal } from '../modals';
+import { ChangingPreferencesModal, MultidelegationBetaModal, PortfolioPersistenceModal } from '../modals';
 import { useOutsideHandles } from '../outside-handles-provider';
 import { Overview } from '../overview';
 import { DrawerManagementStep, DrawerStep, useDelegationPortfolioStore } from '../store';
@@ -13,14 +13,17 @@ const stepsWithBackBtn = new Set<DrawerStep>([DrawerManagementStep.Confirmation,
 
 export const StakingView = () => {
   const { t } = useTranslation();
-  const { portfolioMutators } = useDelegationPortfolioStore((store) => ({
+  const { portfolioMutators, currentPortfolio } = useDelegationPortfolioStore((store) => ({
+    currentPortfolio: store.currentPortfolio,
     portfolioMutators: store.mutators,
   }));
   const {
     walletStoreFetchNetworkInfo: fetchNetworkInfo,
     walletStoreBlockchainProvider: blockchainProvider,
     multidelegationFirstVisit,
     triggerMultidelegationFirstVisit,
+    multidelegationFirstVisitSincePortfolioPersistence,
+    triggerMultidelegationFirstVisitSincePortfolioPersistence,
     currentChain,
   } = useOutsideHandles();
 
@@ -48,7 +51,14 @@ export const StakingView = () => {
       </Navigation>
       <Drawer showCloseIcon showBackIcon={(step: DrawerStep): boolean => stepsWithBackBtn.has(step)} />
       <ChangingPreferencesModal />
-      <MultidelegationBetaModal visible={multidelegationFirstVisit} onConfirm={triggerMultidelegationFirstVisit} />
+      {currentPortfolio.length > 1 ? (
+        <PortfolioPersistenceModal
+          visible={multidelegationFirstVisitSincePortfolioPersistence}
+          onConfirm={triggerMultidelegationFirstVisitSincePortfolioPersistence}
+        />
+      ) : (
+        <MultidelegationBetaModal visible={multidelegationFirstVisit} onConfirm={triggerMultidelegationFirstVisit} />
+      )}
     </>
   );
 };

Original file line number	Diff line number	Diff line change
`@@ -42,4 +42,5 @@ export interface ILocalStorage {`
`42`	`42`	`analyticsAccepted?: EnhancedAnalyticsOptInStatus;`
`43`	`43`	`isForgotPasswordFlow?: boolean;`
`44`	`44`	`multidelegationFirstVisit?: boolean;`
	`45`	`+ multidelegationFirstVisitSincePortfolioPersistence?: boolean;`
`45`	`46`	`}`