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

…#1133)

* feat(extension): add multi delegation and dapp issues modal

* fix(extension): fix multi deleg banner visibility

* fix(extension): show modal from manage portfolio

* fix(extension): rename LS key

* fix(extension): handle select by checking checkbox from list view

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/e2e-tests/src/elements/staking/MultidelegationDAppIssueModal.ts

@@ -0,0 +1,22 @@
+/* eslint-disable no-undef */
+import { ChainablePromiseElement } from 'webdriverio';
+
+class MultidelegationDAppIssueModal {
+  private TITLE = '[data-testid="stake-modal-title"]';
+  private DESCRIPTION = '[data-testid="stake-modal-description"]';
+  private GOT_IT_BUTTON = '[data-testid="multidelegation-dapp-modal-button"]';
+
+  get title(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.TITLE);
+  }
+
+  get description(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.DESCRIPTION);
+  }
+
+  get gotItButton(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $(this.GOT_IT_BUTTON);
+  }
+}
+
+export default new MultidelegationDAppIssueModal();

packages/e2e-tests/src/features/e2e/StakingInitialFundsE2E.feature

@@ -28,6 +28,7 @@ Feature: Delegating funds to new pool E2E
     And I navigate to Transactions extended page
     Then the Received transaction is displayed with value: "5.00 tADA" and tokens count 1
     And I disable showing Multidelegation beta banner
+    And I disable showing Multidelegation DApps issue modal
     And I navigate to Staking extended page
     And I open Browse pools tab
     And I switch to list view on "Browse pools" tab

packages/e2e-tests/src/fixture/localStorageInitializer.ts

@@ -85,6 +85,10 @@ class LocalStorageInitializer {
     await localStorageManager.setItem('analyticsStatus', '');
   };
 
+  disableShowingMultidelegationDAppsIssueModal = async () => {
+    await localStorageManager.setItem('isMultiDelegationDAppCompatibilityModalVisible', 'false');
+  };
+
   initialiseBasicLocalStorageData = async (
     walletName: string,
     chainName: 'Preprod' | 'Preview' | 'Mainnet'

packages/e2e-tests/src/hooks/beforeTagHooks.ts

@@ -152,11 +152,13 @@ Before(
 Before({ tags: '@Staking-NonDelegatedFunds-Extended' }, async () => {
   await extendedViewWalletInitialization(TestWalletName.TAWalletNonDelegatedFunds);
   await localStorageInitializer.disableShowingMultidelegationBetaBanner();
+  await localStorageInitializer.disableShowingMultidelegationDAppsIssueModal();
 });
 
 Before({ tags: '@Staking-NonDelegatedFunds-Popup' }, async () => {
   await popupViewWalletInitialization(TestWalletName.TAWalletNonDelegatedFunds);
   await localStorageInitializer.disableShowingMultidelegationBetaBanner();
+  await localStorageInitializer.disableShowingMultidelegationDAppsIssueModal();
 });
 
 Before(
@@ -174,6 +176,7 @@ Before({ tags: '@AdaHandle-popup' }, async () => await popupViewWalletInitializa
 Before({ tags: '@Multidelegation-SwitchingPools-Extended-E2E' }, async () => {
   await extendedViewWalletInitialization(TestWalletName.WalletMultidelegationSwitchPoolsE2E);
   await localStorageInitializer.disableShowingMultidelegationBetaBanner();
+  await localStorageInitializer.disableShowingMultidelegationDAppsIssueModal();
 });
 
 Before(
@@ -189,23 +192,27 @@ Before(
 Before({ tags: '@Multidelegation-DelegatedFunds-SinglePool-Popup' }, async () => {
   await popupViewWalletInitialization(TestWalletName.MultidelegationDelegatedSingle);
   await localStorageInitializer.disableShowingMultidelegationBetaBanner();
+  await localStorageInitializer.disableShowingMultidelegationDAppsIssueModal();
   await localStorageInitializer.initializeShowMultiAddressDiscoveryModal(false);
 });
 
 Before({ tags: '@Multidelegation-DelegatedFunds-SinglePool-Extended' }, async () => {
   await extendedViewWalletInitialization(TestWalletName.MultidelegationDelegatedSingle);
   await localStorageInitializer.disableShowingMultidelegationBetaBanner();
+  await localStorageInitializer.disableShowingMultidelegationDAppsIssueModal();
   await localStorageInitializer.initializeShowMultiAddressDiscoveryModal(false);
 });
 
 Before({ tags: '@Multidelegation-DelegatedFunds-MultiplePools-Popup' }, async () => {
   await popupViewWalletInitialization(TestWalletName.MultidelegationDelegatedMulti);
   await localStorageInitializer.disableShowingMultidelegationBetaBanner();
+  await localStorageInitializer.disableShowingMultidelegationDAppsIssueModal();
   await localStorageInitializer.initializeShowMultiAddressDiscoveryModal(false);
 });
 
 Before({ tags: '@Multidelegation-DelegatedFunds-MultiplePools-Extended' }, async () => {
   await extendedViewWalletInitialization(TestWalletName.MultidelegationDelegatedMulti);
   await localStorageInitializer.disableShowingMultidelegationBetaBanner();
+  await localStorageInitializer.disableShowingMultidelegationDAppsIssueModal();
   await localStorageInitializer.initializeShowMultiAddressDiscoveryModal(false);
 });

packages/e2e-tests/src/steps/commonSteps.ts

@@ -321,6 +321,10 @@ Given(/^I disable showing Multidelegation persistence banner$/, async () => {
   await localStorageInitializer.disableShowingMultidelegationPersistenceBanner();
 });
 
+Given(/^I disable showing Multidelegation DApps issue modal$/, async () => {
+  await localStorageInitializer.disableShowingMultidelegationDAppsIssueModal();
+});
+
 Given(/^I enable showing Analytics consent banner$/, async () => {
   await localStorageInitializer.enableShowingAnalyticsBanner();
   await browser.refresh();

packages/e2e-tests/src/steps/multidelegationSteps.ts

@@ -33,6 +33,7 @@ import MoreOptionsComponentAssert from '../assert/multidelegation/MoreOptionsCom
 import { mapColumnNameStringToEnum, mapSortingOptionNameStringToEnum } from '../utils/stakePoolListContent';
 import { browser } from '@wdio/globals';
 import { StakePoolSortingOption } from '../enums/StakePoolSortingOption';
+import MultidelegationDAppIssueModal from '../elements/staking/MultidelegationDAppIssueModal';
 
 const validPassword = 'N_8J@bne87A';
 
@@ -584,3 +585,9 @@ Then(
     );
   }
 );
+
+When(/^I close the modal about issues with multidelegation and DApps$/, async () => {
+  if (await MultidelegationDAppIssueModal.gotItButton.isDisplayed()) {
+    await MultidelegationDAppIssueModal.gotItButton.click();
+  }
+});

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 />,