feat(extension): [LW-9230] add multi delegation and dapp issues modal

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

@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { BrowserViewSections } from '@lib/scripts/types';
 import { useWalletActivities } from '@hooks/useWalletActivities';
 import {
+  MULTIDELEGATION_DAPP_COMPATIBILITY_LS_KEY,
   MULTIDELEGATION_FIRST_VISIT_LS_KEY,
   MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY,
   STAKING_BROWSER_PREFERENCES_LS_KEY
@@ -86,6 +87,8 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
     MULTIDELEGATION_FIRST_VISIT_LS_KEY,
     true
   );
+  const [multidelegationDAppCompatibility, { updateLocalStorage: setMultidelegationDAppCompatibility }] =
+    useLocalStorage(MULTIDELEGATION_DAPP_COMPATIBILITY_LS_KEY, true);
   const [
     multidelegationFirstVisitSincePortfolioPersistence,
     { updateLocalStorage: setMultidelegationFirstVisitSincePortfolioPersistence }
@@ -109,6 +112,8 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
         setStakingBrowserPreferencesPersistence,
         multidelegationFirstVisit,
         triggerMultidelegationFirstVisit: () => setMultidelegationFirstVisit(false),
+        multidelegationDAppCompatibility,
+        triggerMultidelegationDAppCompatibility: () => setMultidelegationDAppCompatibility(false),
         multidelegationFirstVisitSincePortfolioPersistence,
         triggerMultidelegationFirstVisitSincePortfolioPersistence: () => {
           setMultidelegationFirstVisit(false);

apps/browser-extension-wallet/src/hooks/__tests__/useWalletManager.test.tsx

@@ -554,6 +554,7 @@ describe('Testing useWalletManager hook', () => {
           'hideBalance',
           'isForgotPasswordFlow',
           'multidelegationFirstVisit',
+          'isMultiDelegationDAppCompatibilityModalVisible',
           'multidelegationFirstVisitSincePortfolioPersistence'
         ]
       });

apps/browser-extension-wallet/src/hooks/useWalletManager.ts

@@ -614,6 +614,7 @@ export const useWalletManager = (): UseWalletManager => {
         'hideBalance',
         'isForgotPasswordFlow',
         'multidelegationFirstVisit',
+        'isMultiDelegationDAppCompatibilityModalVisible',
         'multidelegationFirstVisitSincePortfolioPersistence'
       ];
 

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

@@ -58,6 +58,7 @@ export interface ILocalStorage {
   analyticsStatus?: EnhancedAnalyticsOptInStatus;
   isForgotPasswordFlow?: boolean;
   multidelegationFirstVisit?: boolean;
+  isMultiDelegationDAppCompatibilityModalVisible?: boolean;
   multidelegationFirstVisitSincePortfolioPersistence?: boolean;
   unconfirmedTransactions: UnconfirmedTransaction[];
   stakingBrowserPreferences: StakingBrowserPreferences;

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

@@ -107,4 +107,5 @@ 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 MULTIDELEGATION_DAPP_COMPATIBILITY_LS_KEY = 'isMultiDelegationDAppCompatibilityModalVisible';
 export const STAKING_BROWSER_PREFERENCES_LS_KEY = 'stakingBrowserPreferences';

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

@@ -13,6 +13,7 @@ import { useAnalyticsContext, useCurrencyStore, useExternalLinkOpener } from '@p
 import { DEFAULT_STAKING_BROWSER_PREFERENCES, OutsideHandlesProvider } from '@lace/staking';
 import { useBalances, useCustomSubmitApi, useFetchCoinPrice, useLocalStorage } from '@hooks';
 import {
+  MULTIDELEGATION_DAPP_COMPATIBILITY_LS_KEY,
   MULTIDELEGATION_FIRST_VISIT_LS_KEY,
   MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY,
   STAKING_BROWSER_PREFERENCES_LS_KEY
@@ -32,6 +33,8 @@ export const StakingContainer = (): React.ReactElement => {
     MULTIDELEGATION_FIRST_VISIT_LS_KEY,
     true
   );
+  const [multidelegationDAppCompatibility, { updateLocalStorage: setMultidelegationDAppCompatibility }] =
+    useLocalStorage(MULTIDELEGATION_DAPP_COMPATIBILITY_LS_KEY, true);
   const [
     multidelegationFirstVisitSincePortfolioPersistence,
     { updateLocalStorage: setMultidelegationFirstVisitSincePortfolioPersistence }
@@ -125,6 +128,8 @@ export const StakingContainer = (): React.ReactElement => {
           compactNumber: compactNumberWithUnit,
           multidelegationFirstVisit,
           triggerMultidelegationFirstVisit: () => setMultidelegationFirstVisit(false),
+          multidelegationDAppCompatibility,
+          triggerMultidelegationDAppCompatibility: () => setMultidelegationDAppCompatibility(false),
           multidelegationFirstVisitSincePortfolioPersistence,
           triggerMultidelegationFirstVisitSincePortfolioPersistence: () => {
             setMultidelegationFirstVisit(false);

packages/staking/.storybook/StakingStorybookProvider.tsx

@@ -43,6 +43,8 @@ const outsideHandlesMocks: OutsideHandlesContextValue = {
   compactNumber: undefined,
   multidelegationFirstVisit: undefined,
   triggerMultidelegationFirstVisit: undefined,
+  multidelegationDAppCompatibility: undefined,
+  triggerMultidelegationDAppCompatibility: undefined,
   multidelegationFirstVisitSincePortfolioPersistence: undefined,
   triggerMultidelegationFirstVisitSincePortfolioPersistence: undefined,
   walletAddress: undefined,

packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRow.tsx

@@ -1,9 +1,11 @@
 import { PostHogAction } from '@lace/common';
 import { Table } from '@lace/ui';
-import React from 'react';
+import { MultidelegationDAppCompatibilityModal } from 'features/modals/MultidelegationDAppCompatibilityModal';
+import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOutsideHandles } from '../../outside-handles-provider';
 import { MAX_POOLS_COUNT, StakePoolDetails, isPoolSelectedSelector, useDelegationPortfolioStore } from '../../store';
+
 import { config } from './config';
 
 export const StakePoolsListRow = ({ stakePool, hexId, id, ...data }: StakePoolDetails): React.ReactElement => {
@@ -16,33 +18,57 @@ export const StakePoolsListRow = ({ stakePool, hexId, id, ...data }: StakePoolDe
     selectionsFull: store.selectedPortfolio.length === MAX_POOLS_COUNT,
   }));
 
+  const { multidelegationDAppCompatibility, triggerMultidelegationDAppCompatibility } = useOutsideHandles();
+  const [showDAppCompatibilityModal, setShowDAppCompatibilityModal] = useState(false);
+
   const onClick = () => {
     portfolioMutators.executeCommand({ data: stakePool, type: 'ShowPoolDetailsFromList' });
     analytics.sendEventToPostHog(PostHogAction.StakingBrowsePoolsStakePoolDetailClick);
   };
 
-  const onSelect = () => {
+  const onPoolSelect = useCallback(() => {
     if (poolAlreadySelected) {
       portfolioMutators.executeCommand({ data: hexId, type: 'UnselectPoolFromList' });
       analytics.sendEventToPostHog(PostHogAction.StakingBrowsePoolsUnselectClick);
     } else {
       portfolioMutators.executeCommand({ data: [stakePool], type: 'SelectPoolFromList' });
       analytics.sendEventToPostHog(PostHogAction.StakingBrowsePoolsStakeClick);
     }
-  };
+  }, [analytics, hexId, poolAlreadySelected, portfolioMutators, stakePool]);
+
+  const onDAppCompatibilityConfirm = useCallback(() => {
+    triggerMultidelegationDAppCompatibility();
+    onPoolSelect();
+  }, [onPoolSelect, triggerMultidelegationDAppCompatibility]);
+
+  const onSelect = useCallback(() => {
+    if (multidelegationDAppCompatibility && !poolAlreadySelected) {
+      setShowDAppCompatibilityModal(true);
+    } else {
+      onPoolSelect();
+    }
+  }, [multidelegationDAppCompatibility, onPoolSelect, poolAlreadySelected]);
 
   return (
-    <Table.Row<Omit<StakePoolDetails, 'stakePool' | 'hexId' | 'id'>>
-      columns={config.columns}
-      cellRenderers={config.renderer}
-      data={data}
-      selected={poolAlreadySelected}
-      onClick={onClick}
-      selectionDisabledMessage={t('browsePools.tooltips.maxNumberPoolsSelected')}
-      dataTestId="stake-pool"
-      withSelection
-      keyProp={id}
-      {...((!selectionsFull || poolAlreadySelected) && { onSelect })}
-    />
+    <>
+      <Table.Row<Omit<StakePoolDetails, 'stakePool' | 'hexId' | 'id'>>
+        columns={config.columns}
+        cellRenderers={config.renderer}
+        data={data}
+        selected={poolAlreadySelected}
+        onClick={onClick}
+        selectionDisabledMessage={t('browsePools.tooltips.maxNumberPoolsSelected')}
+        dataTestId="stake-pool"
+        withSelection
+        keyProp={id}
+        {...((!selectionsFull || poolAlreadySelected) && { onSelect })}
+      />
+      {showDAppCompatibilityModal && (
+        <MultidelegationDAppCompatibilityModal
+          visible={multidelegationDAppCompatibility}
+          onConfirm={onDAppCompatibilityConfirm}
+        />
+      )}
+    </>
   );
 };

packages/staking/src/features/Drawer/Drawer.tsx

@@ -97,7 +97,7 @@ export const Drawer = ({
   const contentsMap = useMemo(
     (): Record<DrawerStep, React.ReactElement> => ({
       [DrawerDefaultStep.PoolDetails]: <StakePoolDetail popupView={popupView} />,
-      [DrawerManagementStep.Preferences]: <StepPreferencesContent />,
+      [DrawerManagementStep.Preferences]: <StepPreferencesContent popupView={popupView} />,
       [DrawerManagementStep.Confirmation]: <StakePoolConfirmationContent />,
       [DrawerManagementStep.Sign]: <SignConfirmation />,
       [DrawerManagementStep.Success]: <TransactionSuccess />,

packages/staking/src/features/Drawer/StakePoolDetail.tsx

@@ -6,8 +6,9 @@ import { Button, Flex } from '@lace/ui';
 import cn from 'classnames';
 import { StakePoolCardProgressBar } from 'features/BrowsePools';
 import { isOversaturated } from 'features/BrowsePools/utils';
+import { MultidelegationDAppCompatibilityModal } from 'features/modals/MultidelegationDAppCompatibilityModal';
 import { TFunction } from 'i18next';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOutsideHandles } from '../outside-handles-provider';
 import {
@@ -254,6 +255,7 @@ const makeSelector =
       poolInCurrentPortfolio,
       poolSelected,
       selectionsEmpty: selectedPortfolio.length === 0,
+      userAlreadyMultidelegated: currentPortfolio.length > 1,
     };
   };
 
@@ -312,15 +314,22 @@ const makeActionButtons = (
 
 export const StakePoolDetailFooter = ({ popupView }: StakePoolDetailFooterProps): React.ReactElement => {
   const { t } = useTranslation();
-  const { analytics } = useOutsideHandles();
+  const { analytics, multidelegationDAppCompatibility, triggerMultidelegationDAppCompatibility } = useOutsideHandles();
   const { walletStoreWalletType } = useOutsideHandles();
+  const [showDAppCompatibilityModal, setShowDAppCompatibilityModal] = useState(false);
   const { openPoolDetails, portfolioMutators, viewedStakePool } = useDelegationPortfolioStore((store) => ({
     openPoolDetails: stakePoolDetailsSelector(store),
     portfolioMutators: store.mutators,
     viewedStakePool: store.viewedStakePool,
   }));
-  const { ableToSelect, ableToStakeOnlyOnThisPool, selectionsEmpty, poolInCurrentPortfolio, poolSelected } =
-    useDelegationPortfolioStore(makeSelector(openPoolDetails));
+  const {
+    ableToSelect,
+    ableToStakeOnlyOnThisPool,
+    selectionsEmpty,
+    poolInCurrentPortfolio,
+    poolSelected,
+    userAlreadyMultidelegated,
+  } = useDelegationPortfolioStore(makeSelector(openPoolDetails));
 
   const isInMemory = walletStoreWalletType === WalletType.InMemory;
 
@@ -329,16 +338,7 @@ export const StakePoolDetailFooter = ({ popupView }: StakePoolDetailFooterProps)
     portfolioMutators.executeCommand({ type: 'BeginSingleStaking' });
   }, [analytics, portfolioMutators]);
 
-  useEffect(() => {
-    if (isInMemory) return;
-    if (popupView) return;
-    const hasPersistedHwStakepool = !!localStorage.getItem('TEMP_POOLID');
-    if (!hasPersistedHwStakepool) return;
-    onStakeOnThisPool();
-    localStorage.removeItem('TEMP_POOLID');
-  }, [isInMemory, onStakeOnThisPool, popupView]);
-
-  const onSelectClick = useCallback(() => {
+  const selectPoolFromDetails = useCallback(() => {
     if (!viewedStakePool) return;
     analytics.sendEventToPostHog(PostHogAction.StakingBrowsePoolsStakePoolDetailAddStakingPoolClick);
     portfolioMutators.executeCommand({
@@ -347,6 +347,27 @@ export const StakePoolDetailFooter = ({ popupView }: StakePoolDetailFooterProps)
     });
   }, [viewedStakePool, portfolioMutators, analytics]);
 
+  const onSelectClick = useCallback(() => {
+    if (!userAlreadyMultidelegated && multidelegationDAppCompatibility) {
+      setShowDAppCompatibilityModal(true);
+    } else {
+      selectPoolFromDetails();
+    }
+  }, [multidelegationDAppCompatibility, selectPoolFromDetails, userAlreadyMultidelegated]);
+
+  const onDAppCompatibilityConfirm = useCallback(() => {
+    triggerMultidelegationDAppCompatibility();
+    selectPoolFromDetails();
+  }, [selectPoolFromDetails, triggerMultidelegationDAppCompatibility]);
+
+  useEffect(() => {
+    if (isInMemory || popupView) return;
+    const hasPersistedHwStakepool = !!localStorage.getItem('TEMP_POOLID');
+    if (!hasPersistedHwStakepool) return;
+    onStakeOnThisPool();
+    localStorage.removeItem('TEMP_POOLID');
+  }, [isInMemory, onStakeOnThisPool, popupView]);
+
   const onUnselectClick = useCallback(() => {
     if (!viewedStakePool) return;
     analytics.sendEventToPostHog(PostHogAction.StakingBrowsePoolsStakePoolDetailUnselectPoolClick);
@@ -392,18 +413,27 @@ export const StakePoolDetailFooter = ({ popupView }: StakePoolDetailFooterProps)
   const [callToActionButton, ...secondaryButtons] = actionButtons;
 
   return (
-    <Flex flexDirection="column" alignItems="stretch" gap="$16">
-      {callToActionButton && (
-        <Button.CallToAction
-          label={callToActionButton.label}
-          data-testid={callToActionButton.dataTestId}
-          onClick={callToActionButton.callback}
-          w="$fill"
+    <>
+      <Flex flexDirection="column" alignItems="stretch" gap="$16">
+        {callToActionButton && (
+          <Button.CallToAction
+            label={callToActionButton.label}
+            data-testid={callToActionButton.dataTestId}
+            onClick={callToActionButton.callback}
+            w="$fill"
+          />
+        )}
+        {secondaryButtons.map(({ callback, dataTestId, label }) => (
+          <Button.Secondary key={dataTestId} onClick={callback} data-testid={dataTestId} label={label} w="$fill" />
+        ))}
+      </Flex>
+      {showDAppCompatibilityModal && (
+        <MultidelegationDAppCompatibilityModal
+          visible={multidelegationDAppCompatibility}
+          onConfirm={onDAppCompatibilityConfirm}
+          popupView={popupView}
         />
       )}
-      {secondaryButtons.map(({ callback, dataTestId, label }) => (
-        <Button.Secondary key={dataTestId} onClick={callback} data-testid={dataTestId} label={label} w="$fill" />
-      ))}
-    </Flex>
+    </>
   );
 };