fix: [lw-10100] show exit confirmation for staking drawer

packages/staking/src/features/modals/ExitStakingModal.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useOutsideHandles } from '../outside-handles-provider';
+import { useDelegationPortfolioStore, useStakingStore } from '../store';
+import { StakingModal } from './StakingModal';
+
+type StakingModalsProps = {
+  popupView?: boolean;
+};
+
+export const ExitStakingModal = ({ popupView }: StakingModalsProps): React.ReactElement => {
+  const { t } = useTranslation();
+  const { portfolioMutators } = useDelegationPortfolioStore((store) => ({
+    portfolioMutators: store.mutators,
+  }));
+  const {
+    delegationStoreSetDelegationTxBuilder,
+    password: { clearSecrets: removePassword },
+  } = useOutsideHandles();
+  const { isExitStakingVisible, setExitStakingVisible } = useStakingStore();
+
+  return (
+    <StakingModal
+      visible={isExitStakingVisible}
+      title={t('modals.exitStaking.title')}
+      description={t('modals.exitStaking.description')}
+      actions={[
+        {
+          body: t('modals.exitStaking.buttons.cancel'),
+          color: 'secondary',
+          dataTestId: 'exit-staking-modal-cancel',
+          onClick: () => {
+            setExitStakingVisible(false);
+          },
+        },
+        {
+          body: t('modals.exitStaking.buttons.confirm'),
+          dataTestId: 'exit-staking-modal-confirm',
+          onClick: () => {
+            delegationStoreSetDelegationTxBuilder();
+            removePassword();
+            portfolioMutators.executeCommand({ type: 'CancelDrawer' });
+            setExitStakingVisible(false);
+          },
+        },
+      ]}
+      popupView={popupView}
+      focusTriggerAfterClose={false}
+    />
+  );
+};

packages/staking/src/features/staking/StakingView.tsx

@@ -1,17 +1,24 @@
 import { Box, Text } from '@input-output-hk/lace-ui-toolkit';
 import { Activity } from 'features/activity';
-import { useOutsideHandles } from 'features/outside-handles-provider';
+import { ExitStakingModal } from 'features/modals/ExitStakingModal';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BrowsePools } from '../BrowsePools';
 import { Drawer } from '../Drawer';
 import { ChangingPreferencesModal } from '../modals';
+import { useOutsideHandles } from '../outside-handles-provider';
 import { Overview } from '../overview';
 import { DrawerManagementStep, DrawerStep } from '../store';
 import { Navigation } from './Navigation';
 import { OneTimeModals } from './OneTimeModals';
 import { StakingPage } from './types';
 
+const stepsWithExitConfirmation = new Set<DrawerStep>([
+  DrawerManagementStep.Confirmation,
+  DrawerManagementStep.Sign,
+  DrawerManagementStep.Preferences,
+]);
+
 export const StakingView = () => {
   const { t } = useTranslation();
   const { isSharedWallet } = useOutsideHandles();
@@ -49,8 +56,13 @@ export const StakingView = () => {
           </>
         )}
       </Navigation>
-      <Drawer showCloseIcon showBackIcon={(step: DrawerStep): boolean => stepsWithBackBtn.has(step)} />
+      <Drawer
+        showCloseIcon
+        showBackIcon={(step: DrawerStep): boolean => stepsWithBackBtn.has(step)}
+        showExitConfirmation={(step: DrawerStep): boolean => stepsWithExitConfirmation.has(step)}
+      />
       <ChangingPreferencesModal />
+      <ExitStakingModal />
       {!isSharedWallet && <OneTimeModals />}
     </>
   );

packages/translation/src/lib/translations/staking/en.json

@@ -160,6 +160,10 @@
   "modals.poolsManagement.description.adjustment": "Reducing pool numbers needs a stake key de-registration, triggering the return of the initial ADA deposit and possibly losing any undistributed rewards. When changing pools, you'll get rewards from the former pool for two epochs, then start receiving them from the new pool.",
   "modals.poolsManagement.description.reduction": "Reducing your pool count requires stake key de-registration, which returns the initial ADA deposit and may cause the loss of undistributed rewards in the calculation epoch phase.",
   "modals.poolsManagement.title": "Switching Pool?",
+  "modals.exitStaking.title": "You'll have to start again",
+  "modals.exitStaking.description": "Are you sure you want to exit? This will not be saved",
+  "modals.exitStaking.buttons.cancel": "Cancel",
+  "modals.exitStaking.buttons.confirm": "Exit",
   "overview.banners.pendingFirstDelegation.message": "You will see your staking portfolio here once the transaction has been validated",
   "overview.banners.pendingFirstDelegation.title": "Your staking transaction has been submitted",
   "overview.banners.pendingPortfolioModification.message": "In case of changing pools you will continue to receive rewards from your former stake pool(s) for two epochs",