feat(staking): load multi-delegation for HW wallets

apps/browser-extension-wallet/.env.defaults

@@ -18,7 +18,8 @@ USE_DIFFERENT_MNEMONIC_LENGTHS=true
 USE_NFT_FOLDERS=true
 USE_MULTI_CURRENCY=true
 USE_HIDE_MY_BALANCE=true
-USE_MULTI_DELEGATION_STAKING=true
+USE_MULTI_DELEGATION_STAKING_LEDGER=false
+USE_MULTI_DELEGATION_STAKING_TREZOR=false
 USE_ADA_HANDLE=true
 USE_DATA_CHECK=false
 USE_POSTHOG_ANALYTICS=true

apps/browser-extension-wallet/.env.example

@@ -18,7 +18,8 @@ USE_DIFFERENT_MNEMONIC_LENGTHS=true
 USE_NFT_FOLDERS=true
 USE_MULTI_CURRENCY=true
 USE_HIDE_MY_BALANCE=true
-USE_MULTI_DELEGATION_STAKING=true
+USE_MULTI_DELEGATION_STAKING_LEDGER=false
+USE_MULTI_DELEGATION_STAKING_TREZOR=false
 USE_ADA_HANDLE=true
 USE_HANDLE_AB=false
 USE_DATA_CHECK=false

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

@@ -4,10 +4,16 @@ import { useMemo } from 'react';
 
 export const useMultiDelegationEnabled = (): boolean => {
   const { getKeyAgentType } = useWalletStore();
-  const inMemoryWallet = useMemo(
-    () => getKeyAgentType() === Wallet.KeyManagement.KeyAgentType.InMemory,
-    [getKeyAgentType]
-  );
 
-  return process.env.USE_MULTI_DELEGATION_STAKING === 'true' && inMemoryWallet;
+  return useMemo(() => {
+    const keyAgentType = getKeyAgentType();
+    switch (keyAgentType) {
+      case Wallet.KeyManagement.KeyAgentType.Ledger:
+        return process.env.USE_MULTI_DELEGATION_STAKING_LEDGER === 'true';
+      case Wallet.KeyManagement.KeyAgentType.Trezor:
+        return process.env.USE_MULTI_DELEGATION_STAKING_TREZOR === 'true';
+      default:
+        return true;
+    }
+  }, [getKeyAgentType]);
 };

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

@@ -72,17 +72,20 @@ export const StakePoolDetailsDrawer = ({
     });
   }, [password, portfolioMutators, backgroundServiceAPIContextSetWalletPassword, removePassword]);
 
+  const shouldShowBackIcon =
+    activeDrawerStep && typeof showBackIcon === 'function' ? showBackIcon(activeDrawerStep) : showBackIcon;
+
   useKeyboardShortcut(['Escape'], () => {
-    if (activeDrawerStep && typeof showBackIcon === 'function' ? showBackIcon(activeDrawerStep) : showBackIcon) {
+    if (shouldShowBackIcon) {
       onGoBack();
     } else {
       closeDrawer();
     }
   });
 
-  const createArrowIconCallback = () => {
-    if (activeDrawerStep && typeof showBackIcon === 'function' ? showBackIcon(activeDrawerStep) : showBackIcon) {
-      return popupView ? closeDrawer : onGoBack;
+  const arrowIconCallback = () => {
+    if (shouldShowBackIcon) {
+      return popupView ? closeDrawer() : onGoBack();
     }
     // eslint-disable-next-line consistent-return, unicorn/no-useless-undefined
     return undefined;
@@ -97,10 +100,14 @@ export const StakePoolDetailsDrawer = ({
         <DrawerNavigation
           title={DrawerDefaultStep.PoolDetails === activeDrawerStep ? t('drawer.title') : t('drawer.titleSecond')}
           // If undefined is passed to onArrowIconClick, arrow component will not be rendered
-          onArrowIconClick={() => {
-            onBackButtonClick?.();
-            createArrowIconCallback();
-          }}
+          onArrowIconClick={
+            !shouldShowBackIcon
+              ? undefined
+              : () => {
+                  onBackButtonClick?.();
+                  arrowIconCallback();
+                }
+          }
           onCloseIconClick={() => {
             if (
               activeDrawerStep && typeof showCloseIcon === 'function' ? showCloseIcon(activeDrawerStep) : showCloseIcon

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

@@ -99,8 +99,8 @@ export const TransactionFailFooter = ({ popupView }: TransactionFailProps): Reac
         </Button>
       ) : (
         <Button
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          onClick={() => executeWithPassword(password!, onSubmit)}
+          // password defined only for inMemory wallet
+          onClick={() => (password ? executeWithPassword(password, onSubmit) : onSubmit())}
           className={styles.btn}
           size="large"
           loading={isLoading}

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

@@ -19,10 +19,10 @@ export const StakePoolConfirmationFooter = ({ popupView }: StakePoolConfirmation
   const { t } = useTranslation();
   const { analytics } = useOutsideHandles();
   const {
-    // walletStoreInMemoryWallet: inMemoryWallet,
+    walletStoreInMemoryWallet: inMemoryWallet,
     walletStoreGetKeyAgentType: getKeyAgentType,
-    // submittingState: { setIsRestaking },
-    // delegationStoreDelegationTxBuilder: delegationTxBuilder,
+    submittingState: { setIsRestaking },
+    delegationStoreDelegationTxBuilder: delegationTxBuilder,
   } = useOutsideHandles();
   const { isBuildingTx, stakingError } = useStakingStore();
   const [isConfirmingTx, setIsConfirmingTx] = useState(false);
@@ -38,13 +38,33 @@ export const StakePoolConfirmationFooter = ({ popupView }: StakePoolConfirmation
   const isInMemory = useMemo(() => keyAgentType === Wallet.KeyManagement.KeyAgentType.InMemory, [keyAgentType]);
 
   // TODO unify
-  // const signAndSubmitTransaction = useCallback(async () => {
-  //   if (!delegationTxBuilder) throw new Error('Unable to submit transaction. The delegationTxBuilder not available');
-  //   const signedTx = await delegationTxBuilder.build().sign();
-  //   await inMemoryWallet.submitTx(signedTx.tx);
-  // }, [delegationTxBuilder, inMemoryWallet]);
+  const signAndSubmitTransaction = useCallback(async () => {
+    if (!delegationTxBuilder) throw new Error('Unable to submit transaction. The delegationTxBuilder not available');
+    const signedTx = await delegationTxBuilder.build().sign();
+    await inMemoryWallet.submitTx(signedTx.tx);
+  }, [delegationTxBuilder, inMemoryWallet]);
 
-  const handleConfirmation = useCallback(async () => {
+  const handleSubmission = useCallback(async () => {
+    setOpenPoolsManagementConfirmationModal(null);
+    if (isInMemory) {
+      portfolioMutators.executeCommand({ type: 'DrawerContinue' });
+      return;
+    }
+
+    // HW-WALLET
+    setIsConfirmingTx(true);
+    try {
+      await signAndSubmitTransaction();
+      setIsRestaking(currentPortfolio.length > 0);
+      portfolioMutators.executeCommand({ type: 'HwSkipToSuccess' });
+    } catch {
+      portfolioMutators.executeCommand({ type: 'HwSkipToFailure' });
+    } finally {
+      setIsConfirmingTx(false);
+    }
+  }, [currentPortfolio, isInMemory, portfolioMutators, setIsRestaking, signAndSubmitTransaction]);
+
+  const onClick = useCallback(async () => {
     analytics.sendEventToPostHog(PostHogAction.StakingManageDelegationStakePoolConfirmationNextClick);
     setIsConfirmingTx(false);
 
@@ -61,21 +81,8 @@ export const StakePoolConfirmationFooter = ({ popupView }: StakePoolConfirmation
 
     if (isPoolsReduced) return setOpenPoolsManagementConfirmationModal(PoolsManagementModalType.REDUCTION);
 
-    // HW-WALLET (FIX LATER):
-    // if (!isInMemory) {
-    //   setIsConfirmingTx(true);
-    //   try {
-    //     await signAndSubmitTransaction();
-    //     setIsRestaking(currentPortfolio.length > 0);
-    //     return setSection(sectionsConfig[Sections.SUCCESS_TX]);
-    //   } catch {
-    //     return setSection(sectionsConfig[Sections.FAIL_TX]);
-    //   } finally {
-    //     setIsConfirmingTx(false);
-    //   }
-    // }
-    return portfolioMutators.executeCommand({ type: 'DrawerContinue' });
-  }, [analytics, currentPortfolio, draftPortfolio, portfolioMutators]);
+    return handleSubmission();
+  }, [analytics, currentPortfolio, draftPortfolio, handleSubmission]);
 
   const confirmLabel = useMemo(() => {
     if (!isInMemory) {
@@ -94,7 +101,7 @@ export const StakePoolConfirmationFooter = ({ popupView }: StakePoolConfirmation
           data-testid="stake-pool-confirmation-btn"
           disabled={isBuildingTx || !!stakingError}
           loading={isConfirmingTx || isBuildingTx}
-          onClick={handleConfirmation}
+          onClick={onClick}
           style={{ width: '100%' }}
           size="large"
         >
@@ -104,7 +111,7 @@ export const StakePoolConfirmationFooter = ({ popupView }: StakePoolConfirmation
       <PoolsManagementModal
         type={openPoolsManagementConfirmationModal}
         visible={!!openPoolsManagementConfirmationModal}
-        onConfirm={() => portfolioMutators.executeCommand({ type: 'DrawerContinue' })}
+        onConfirm={handleSubmission}
         onCancel={() => setOpenPoolsManagementConfirmationModal(null)}
       />
     </>

packages/staking/src/features/store/delegationPortfolioStore/stateMachine/commands.ts

@@ -104,6 +104,14 @@ export type ManageDelegationFromDetails = {
   type: 'ManageDelegationFromDetails';
 };
 
+export type HwSkipToSuccess = {
+  type: 'HwSkipToSuccess';
+};
+
+export type HwSkipToFailure = {
+  type: 'HwSkipToFailure';
+};
+
 export type ActivityCommand = GoToOverview | GoToBrowsePools;
 
 export type OverviewCommand = ShowDelegatedPoolDetails | ManagePortfolio | GoToBrowsePools | GoToActivity;
@@ -133,11 +141,16 @@ export type PortfolioManagementPreferencesCommand =
   | RemoveStakePool
   | UpdateStakePercentage;
 
-export type PortfolioManagementConfirmationCommand = CancelDrawer | DrawerContinue | DrawerBack;
+export type PortfolioManagementConfirmationCommand =
+  | CancelDrawer
+  | DrawerContinue
+  | DrawerBack
+  | HwSkipToSuccess
+  | HwSkipToFailure;
 
 export type PortfolioManagementSignCommand = CancelDrawer | DrawerContinue | DrawerFailure | DrawerBack;
 
-export type PortfolioManagementFailureCommand = CancelDrawer | DrawerContinue | DrawerBack;
+export type PortfolioManagementFailureCommand = CancelDrawer | DrawerContinue;
 
 export type PortfolioManagementSuccessCommand = CancelDrawer;
 
@@ -150,11 +163,16 @@ export type NewPortfolioPreferencesCommand =
   | RemoveStakePool
   | UpdateStakePercentage;
 
-export type NewPortfolioConfirmationCommand = CancelDrawer | DrawerContinue | DrawerBack;
+export type NewPortfolioConfirmationCommand =
+  | CancelDrawer
+  | DrawerContinue
+  | DrawerBack
+  | HwSkipToSuccess
+  | HwSkipToFailure;
 
 export type NewPortfolioSignCommand = CancelDrawer | DrawerContinue | DrawerFailure | DrawerBack;
 
-export type NewPortfolioFailureCommand = CancelDrawer | DrawerContinue | DrawerBack;
+export type NewPortfolioFailureCommand = CancelDrawer | DrawerContinue;
 
 export type NewPortfolioSuccessCommand = CancelDrawer;
 

packages/staking/src/features/store/delegationPortfolioStore/stateMachine/processExpandedViewCases.ts

@@ -18,6 +18,8 @@ import {
   GoToActivity,
   GoToBrowsePools,
   GoToOverview,
+  HwSkipToFailure,
+  HwSkipToSuccess,
   ManageDelegationFromDetails,
   ManagePortfolio,
   NewPortfolioConfirmationCommand,
@@ -310,6 +312,18 @@ export const processExpandedViewCases: Handler = (params) =>
                   activeDrawerStep: DrawerManagementStep.Sign,
                 })
               ),
+              HwSkipToFailure: handler<HwSkipToFailure, StatePortfolioManagement, StatePortfolioManagement>(
+                ({ state }) => ({
+                  ...state,
+                  activeDrawerStep: DrawerManagementStep.Failure,
+                })
+              ),
+              HwSkipToSuccess: handler<HwSkipToSuccess, StatePortfolioManagement, StatePortfolioManagement>(
+                ({ state }) => ({
+                  ...state,
+                  activeDrawerStep: DrawerManagementStep.Success,
+                })
+              ),
             },
             params.command.type,
             DrawerManagementStep.Confirmation
@@ -362,10 +376,6 @@ export const processExpandedViewCases: Handler = (params) =>
                 ...atomicStateMutators.cancelDrawer({ state, targetFlow: DelegationFlow.Overview }),
                 draftPortfolio: undefined,
               })),
-              DrawerBack: handler<DrawerBack, StatePortfolioManagement, StatePortfolioManagement>(({ state }) => ({
-                ...state,
-                activeDrawerStep: DrawerManagementStep.Sign,
-              })),
               DrawerContinue: handler<DrawerContinue, StatePortfolioManagement, StatePortfolioManagement>(
                 ({ state }) => ({
                   ...state,
@@ -421,12 +431,10 @@ export const processExpandedViewCases: Handler = (params) =>
                 ...atomicStateMutators.cancelDrawer({ state, targetFlow: DelegationFlow.BrowsePools }),
                 draftPortfolio: undefined,
               })),
-              DrawerContinue: handler<DrawerContinue, StatePortfolioManagement, StatePortfolioManagement>(
-                ({ state }) => ({
-                  ...state,
-                  activeDrawerStep: DrawerManagementStep.Confirmation,
-                })
-              ),
+              DrawerContinue: handler<DrawerContinue, StateNewPortfolio, StateNewPortfolio>(({ state }) => ({
+                ...state,
+                activeDrawerStep: DrawerManagementStep.Confirmation,
+              })),
               RemoveStakePool: handler<RemoveStakePool, StateNewPortfolio, StateNewPortfolio>(
                 ({ state, command: { data } }) => ({
                   ...state,
@@ -459,12 +467,18 @@ export const processExpandedViewCases: Handler = (params) =>
                 ...state,
                 activeDrawerStep: DrawerManagementStep.Preferences,
               })),
-              DrawerContinue: handler<DrawerContinue, StatePortfolioManagement, StatePortfolioManagement>(
-                ({ state }) => ({
-                  ...state,
-                  activeDrawerStep: DrawerManagementStep.Sign,
-                })
-              ),
+              DrawerContinue: handler<DrawerContinue, StateNewPortfolio, StateNewPortfolio>(({ state }) => ({
+                ...state,
+                activeDrawerStep: DrawerManagementStep.Sign,
+              })),
+              HwSkipToFailure: handler<HwSkipToFailure, StateNewPortfolio, StateNewPortfolio>(({ state }) => ({
+                ...state,
+                activeDrawerStep: DrawerManagementStep.Failure,
+              })),
+              HwSkipToSuccess: handler<HwSkipToSuccess, StateNewPortfolio, StateNewPortfolio>(({ state }) => ({
+                ...state,
+                activeDrawerStep: DrawerManagementStep.Success,
+              })),
             },
             params.command.type,
             DrawerManagementStep.Confirmation
@@ -481,18 +495,14 @@ export const processExpandedViewCases: Handler = (params) =>
                 ...state,
                 activeDrawerStep: DrawerManagementStep.Confirmation,
               })),
-              DrawerContinue: handler<DrawerContinue, StatePortfolioManagement, StatePortfolioManagement>(
-                ({ state }) => ({
-                  ...state,
-                  activeDrawerStep: DrawerManagementStep.Success,
-                })
-              ),
-              DrawerFailure: handler<DrawerContinue, StatePortfolioManagement, StatePortfolioManagement>(
-                ({ state }) => ({
-                  ...state,
-                  activeDrawerStep: DrawerManagementStep.Failure,
-                })
-              ),
+              DrawerContinue: handler<DrawerContinue, StateNewPortfolio, StateNewPortfolio>(({ state }) => ({
+                ...state,
+                activeDrawerStep: DrawerManagementStep.Success,
+              })),
+              DrawerFailure: handler<DrawerContinue, StateNewPortfolio, StateNewPortfolio>(({ state }) => ({
+                ...state,
+                activeDrawerStep: DrawerManagementStep.Failure,
+              })),
             },
             params.command.type,
             DrawerManagementStep.Sign
@@ -517,16 +527,10 @@ export const processExpandedViewCases: Handler = (params) =>
                 ...atomicStateMutators.cancelDrawer({ state, targetFlow: DelegationFlow.BrowsePools }),
                 draftPortfolio: undefined,
               })),
-              DrawerBack: handler<DrawerBack, StateNewPortfolio, StateNewPortfolio>(({ state }) => ({
+              DrawerContinue: handler<DrawerContinue, StateNewPortfolio, StateNewPortfolio>(({ state }) => ({
                 ...state,
-                activeDrawerStep: DrawerManagementStep.Sign,
+                activeDrawerStep: DrawerManagementStep.Success,
               })),
-              DrawerContinue: handler<DrawerContinue, StatePortfolioManagement, StatePortfolioManagement>(
-                ({ state }) => ({
-                  ...state,
-                  activeDrawerStep: DrawerManagementStep.Success,
-                })
-              ),
             },
             params.command.type,
             DrawerManagementStep.Failure