fix: don't allow user to close non cancellable ledger actions, closes #…

…5143
leather-io · Apr 12, 2024 · 32eba94 · 32eba94
1 parent cf69f1c
commit 32eba94
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 46 deletions.
diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx
@@ -83,9 +83,6 @@ export function Container() {
         return navigate(RouteUrls.SendCryptoAssetForm.replace(':symbol', 'stx'));
       case RouteUrls.SendBtcConfirmation:
         return navigate(RouteUrls.SendCryptoAssetForm.replace(':symbol', 'btc'));
-      case RouteUrls.RpcSignBip322Message:
-        // console.log('Pete ');
-        return null;
       default:
         return navigate(-1);
     }

diff --git a/src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx b/src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx
@@ -178,17 +178,14 @@ export function LedgerSignJwtContainer() {
     awaitingDeviceConnection,
   };
 
+  const isWaitingOnPerformedAction = awaitingDeviceConnection || canUserCancelAction;
+
   return (
     <LedgerJwtSigningProvider value={ledgerContextValue}>
       <Dialog
         isShowing
-        header={
-          <Header
-            variant="dialog"
-            isWaitingOnPerformedAction={awaitingDeviceConnection || canUserCancelAction}
-          />
-        }
-        onClose={onCancelConnectLedger}
+        header={<Header variant="dialog" isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
+        onClose={isWaitingOnPerformedAction ? () => null : () => onCancelConnectLedger}
       >
         <Outlet />
       </Dialog>

diff --git a/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx b/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx
@@ -149,18 +149,14 @@ function LedgerSignStacksMsg({ account, unsignedMessage }: LedgerSignMsgProps) {
     awaitingDeviceConnection,
   };
 
+  const isWaitingOnPerformedAction = awaitingDeviceConnection || canUserCancelAction;
   return (
     <LedgerMsgSigningProvider value={ledgerContextValue}>
       <Dialog
         onGoBack={allowUserToGoBack ? () => navigate(-1) : undefined}
         isShowing
-        header={
-          <Header
-            variant="dialog"
-            isWaitingOnPerformedAction={awaitingDeviceConnection || canUserCancelAction}
-          />
-        }
-        onClose={ledgerNavigate.cancelLedgerAction}
+        header={<Header variant="dialog" isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
+        onClose={isWaitingOnPerformedAction ? () => null : () => ledgerNavigate.cancelLedgerAction}
       >
         <Outlet />
       </Dialog>

diff --git a/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx b/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx
@@ -24,7 +24,14 @@ export function RequestKeysFlow({
       <Dialog
         isShowing
         header={<Header variant="dialog" isWaitingOnPerformedAction={isActionCancellableByUser} />}
-        onClose={onCancelConnectLedger ? onCancelConnectLedger : () => navigate('../')}
+        // clean this up
+        onClose={
+          isActionCancellableByUser
+            ? () => null
+            : onCancelConnectLedger
+              ? onCancelConnectLedger
+              : () => navigate('../')
+        }
       >
         <Outlet />
       </Dialog>

diff --git a/src/app/features/ledger/generic-flows/tx-signing/tx-signing-flow.tsx b/src/app/features/ledger/generic-flows/tx-signing/tx-signing-flow.tsx
@@ -23,18 +23,14 @@ export function TxSigningFlow({
   const allowUserToGoBack = useLocationState<boolean>('goBack');
   const canUserCancelAction = useActionCancellableByUser();
 
+  const isWaitingOnPerformedAction = awaitingDeviceConnection || canUserCancelAction;
   return (
     <LedgerTxSigningProvider value={context}>
       <Dialog
         onGoBack={allowUserToGoBack ? () => navigate(-1) : undefined}
         isShowing
-        header={
-          <Header
-            variant="dialog"
-            isWaitingOnPerformedAction={awaitingDeviceConnection || canUserCancelAction}
-          />
-        }
-        onClose={closeAction}
+        header={<Header variant="dialog" isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
+        onClose={isWaitingOnPerformedAction ? () => null : () => closeAction}
       >
         <Outlet />
       </Dialog>

diff --git a/src/app/features/ledger/hooks/use-ledger-navigate.ts b/src/app/features/ledger/hooks/use-ledger-navigate.ts
@@ -100,12 +100,6 @@ export function useLedgerNavigate() {
       },
 
       cancelLedgerAction() {
-        // >> X in the dialog calls this same action but it doesn't know where the previous page is
-        // can propose removing this X in the ledger dialog as it doesn't do anything anyway???
-        // most of the time it's greyed out until you reject
-        // TODO - test what happens for Approve
-
-        console.log('pete', location.state);
         return navigate('..', { relative: 'path', replace: true, state: { ...location.state } });
       },
 

diff --git a/src/app/ui/components/containers/headers/components/header-action-button.tsx b/src/app/ui/components/containers/headers/components/header-action-button.tsx
@@ -4,28 +4,21 @@ import { IconButton } from '../../../icon-button/icon-button';
 
 interface HeaderActionButtonProps extends FlexProps {
   icon: React.JSX.Element;
-  isWaitingOnPerformedAction?: boolean;
-  onAction?(): void;
+  onAction(): void;
   dataTestId: string;
 }
-export function HeaderActionButton({
-  icon,
-  isWaitingOnPerformedAction,
-  onAction,
-  dataTestId,
-}: HeaderActionButtonProps) {
+export function HeaderActionButton({ icon, onAction, dataTestId }: HeaderActionButtonProps) {
   return (
     <IconButton
       height="headerContainerHeight"
       _hover={{
-        bg: isWaitingOnPerformedAction ? 'unset' : 'ink.component-background-hover',
-        cursor: isWaitingOnPerformedAction ? 'unset' : 'pointer',
+        bg: 'ink.component-background-hover',
+        cursor: 'pointer',
       }}
       color="ink.action-primary-default"
       data-testid={dataTestId}
       icon={icon}
-      onClick={isWaitingOnPerformedAction ? undefined : onAction}
-      opacity={isWaitingOnPerformedAction ? '0.3' : 'unset'}
+      onClick={onAction}
       transition="transition"
       userSelect="none"
       zIndex={999}

diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx
@@ -60,7 +60,6 @@ export function Header({
               {variant !== 'home' && onGoBack ? (
                 <HeaderActionButton
                   icon={<ArrowLeftIcon />}
-                  isWaitingOnPerformedAction={isWaitingOnPerformedAction}
                   onAction={onGoBack}
                   dataTestId={SharedComponentsSelectors.HeaderBackBtn}
                 />
@@ -77,11 +76,10 @@ export function Header({
             {networkBadge}
             {totalBalance && totalBalance}
             {settingsMenu}
-            {variant !== 'bigTitle' && onClose && (
+            {variant !== 'bigTitle' && onClose && !isWaitingOnPerformedAction && (
               <HeaderActionButton
                 icon={<CloseIcon />}
                 dataTestId={SharedComponentsSelectors.HeaderCloseBtn}
-                isWaitingOnPerformedAction={isWaitingOnPerformedAction}
                 onAction={onClose}
               />
             )}