fix: go back properly and don't allow user to close non cancellable l…

…edger actions, closes #5143
leather-io · May 9, 2024 · 30976bc · 30976bc
1 parent b5c9c79
commit 30976bc
Show file tree

Hide file tree

Showing 35 changed files with 168 additions and 151 deletions.
diff --git a/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx b/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx
@@ -7,7 +7,7 @@ import get from 'lodash.get';
 import { Button } from '@app/ui/components/button/button';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 import { Footer } from '@app/ui/components/containers/footers/footer';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
 
 export function BroadcastErrorDialog() {
   const navigate = useNavigate();
@@ -17,7 +17,7 @@ export function BroadcastErrorDialog() {
   return (
     <Dialog
       isShowing
-      header={<Header variant="dialog" />}
+      header={<DialogHeader />}
       onClose={() => navigate('..')}
       footer={
         <Footer>

diff --git a/src/app/features/dialogs/edit-nonce-dialog/edit-nonce-dialog.tsx b/src/app/features/dialogs/edit-nonce-dialog/edit-nonce-dialog.tsx
@@ -9,7 +9,7 @@ import { StacksSendFormValues, StacksTransactionFormValues } from '@shared/model
 import { useOnMount } from '@app/common/hooks/use-on-mount';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
 import { Link } from '@app/ui/components/link/link';
 
 import { EditNonceForm } from './components/edit-nonce-form';
@@ -48,7 +48,7 @@ export function EditNonceDialog() {
   }, [loadedNextNonce, onGoBack, setFieldError, setFieldValue, values.nonce]);
 
   return (
-    <Dialog isShowing onClose={onClose} header={<Header variant="dialog" title="Edit nonce" />}>
+    <Dialog isShowing onClose={onClose} header={<DialogHeader title="Edit nonce" />}>
       <Stack gap="space.05" pb="space.06" px="space.05">
         <styled.span textStyle="caption.01">
           If your transaction has been pending for a long time, its nonce might not be correct.

diff --git a/src/app/features/dialogs/high-fee-dialog/high-fee-dialog.tsx b/src/app/features/dialogs/high-fee-dialog/high-fee-dialog.tsx
@@ -13,7 +13,7 @@ import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { Button } from '@app/ui/components/button/button';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 import { Footer } from '@app/ui/components/containers/footers/footer';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
 import { Link } from '@app/ui/components/link/link';
 import { Caption } from '@app/ui/components/typography/caption';
 import { Title } from '@app/ui/components/typography/title';
@@ -38,7 +38,7 @@ export function HighFeeDialog({ learnMoreUrl, isShowing = false }: HighFeeDialog
   >();
   return (
     <Dialog
-      header={<Header variant="dialog" />}
+      header={<DialogHeader />}
       isShowing={isShowingHighFeeConfirmation}
       onClose={() => setIsShowingHighFeeConfirmation(false)}
       footer={

diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
@@ -19,7 +19,7 @@ import { LoadingSpinner } from '@app/components/loading-spinner';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 import { Footer } from '@app/ui/components/containers/footers/footer';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
 import { Spinner } from '@app/ui/components/spinner';
 import { Caption } from '@app/ui/components/typography/caption';
 
@@ -69,7 +69,7 @@ export function IncreaseBtcFeeDialog() {
           <Dialog
             isShowing={location.pathname === RouteUrls.IncreaseBtcFee}
             onClose={onClose}
-            header={<Header variant="dialog" title="Increase fee" />}
+            header={<DialogHeader title="Increase fee" />}
             footer={
               <Footer flexDirection="row">
                 <IncreaseFeeActions isDisabled={false} onCancel={() => navigate(RouteUrls.Home)} />

diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-fee-sent-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-fee-sent-dialog.tsx
@@ -5,7 +5,7 @@ import { Flex } from 'leather-styles/jsx';
 import { RouteUrls } from '@shared/route-urls';
 
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
 import { CheckmarkIcon } from '@app/ui/icons/checkmark-icon';
 
 export function IncreaseFeeSentDialog() {
@@ -18,7 +18,7 @@ export function IncreaseFeeSentDialog() {
       <Dialog
         isShowing={isShowing}
         onClose={() => navigate(RouteUrls.Home)}
-        header={<Header variant="dialog" title="Confirmed" />}
+        header={<DialogHeader title="Confirmed" />}
       >
         <Flex justifyContent="center" pb="space.06" px="space.05">
           <CheckmarkIcon mt="2px" width="lg" />

diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx
@@ -24,7 +24,7 @@ import { useSubmittedTransactionsActions } from '@app/store/submitted-transactio
 import { useRawDeserializedTxState, useRawTxIdState } from '@app/store/transactions/raw.hooks';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 import { Footer } from '@app/ui/components/containers/footers/footer';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
 import { Spinner } from '@app/ui/components/spinner';
 import { Caption } from '@app/ui/components/typography/caption';
 
@@ -103,7 +103,7 @@ export function IncreaseStxFeeDialog() {
             <Dialog
               isShowing={location.pathname === RouteUrls.IncreaseStxFee}
               onClose={onClose}
-              header={<Header variant="dialog" title="Increase fee" />}
+              header={<DialogHeader title="Increase fee" />}
               footer={
                 <Footer flexDirection="row">
                   <IncreaseFeeActions

diff --git a/src/app/features/dialogs/switch-account-dialog/components/account-list-unavailable.tsx b/src/app/features/dialogs/switch-account-dialog/components/account-list-unavailable.tsx
@@ -1,21 +1,21 @@
-import { memo } from 'react';
-
 import { Box, Flex, styled } from 'leather-styles/jsx';
 
-export const AccountListUnavailable = memo(() => (
-  <Flex
-    flexDirection="column"
-    justifyContent="center"
-    minHeight="120px"
-    mb="space.06"
-    px="space.05"
-  >
-    <Box>
-      <styled.span textStyle="label.01">Unable to load account information</styled.span>
-      <styled.span mt="space.03" textStyle="body.02">
-        We're unable to load information about your accounts. This may be a problem with the
-        wallet's API. If this problem persists, contact support.
-      </styled.span>
-    </Box>
-  </Flex>
-));
+export function AccountListUnavailable() {
+  return (
+    <Flex
+      flexDirection="column"
+      justifyContent="center"
+      minHeight="120px"
+      mb="space.06"
+      px="space.05"
+    >
+      <Box>
+        <styled.span textStyle="label.01">Unable to load account information</styled.span>
+        <styled.span mt="space.03" textStyle="body.02">
+          We're unable to load information about your accounts. This may be a problem with the
+          wallet's API. If this problem persists, contact support.
+        </styled.span>
+      </Box>
+    </Flex>
+  );
+}
diff --git a/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx b/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx
@@ -9,9 +9,9 @@ import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { Button } from '@app/ui/components/button/button';
-import { Dialog, DialogProps } from '@app/ui/components/containers/dialog/dialog';
+import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 import { Footer } from '@app/ui/components/containers/footers/footer';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
 import { VirtuosoWrapper } from '@app/ui/components/virtuoso';
 
 import { AccountListUnavailable } from './components/account-list-unavailable';
@@ -22,7 +22,12 @@ export interface SwitchAccountOutletContext {
   setIsShowingSwitchAccount(isShowing: boolean): void;
 }
 
-export const SwitchAccountDialog = memo(({ isShowing, onClose }: DialogProps) => {
+interface SwitchAccountDialogProps {
+  isShowing: boolean;
+  onClose(): void;
+}
+
+export const SwitchAccountDialog = memo(({ isShowing, onClose }: SwitchAccountDialogProps) => {
   const currentAccountIndex = useCurrentAccountIndex();
   const createAccount = useCreateAccount();
   const { whenWallet } = useWalletType();
@@ -48,7 +53,7 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: DialogProps) =>
 
   return (
     <Dialog
-      header={<Header variant="dialog" title="Select account" />}
+      header={<DialogHeader title="Select account" />}
       isShowing={isShowing}
       onClose={onClose}
       wrapChildren={false}

diff --git a/src/app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container.tsx b/src/app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container.tsx
@@ -26,6 +26,7 @@ import {
   getBitcoinAppVersion,
   isBitcoinAppOpen,
 } from '@app/features/ledger/utils/bitcoin-ledger-utils';
+import { useActionCancellableByUser } from '@app/features/ledger/utils/stacks-ledger-utils';
 import { useToast } from '@app/features/toasts/use-toast';
 import { useSignLedgerBitcoinTx } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
@@ -42,6 +43,7 @@ function LedgerSignBitcoinTxContainer() {
   const location = useLocation();
   const ledgerNavigate = useLedgerNavigate();
   const ledgerAnalytics = useLedgerAnalytics();
+  const canUserCancelAction = useActionCancellableByUser();
   useScrollLock(true);
 
   const [unsignedTransactionRaw, setUnsignedTransactionRaw] = useState<null | string>(null);
@@ -112,11 +114,11 @@ function LedgerSignBitcoinTxContainer() {
     awaitingDeviceConnection,
   };
 
+  const canClose = !awaitingDeviceConnection && canUserCancelAction;
   return (
     <TxSigningFlow
       context={ledgerContextValue}
-      awaitingDeviceConnection={awaitingDeviceConnection}
-      closeAction={ledgerNavigate.cancelLedgerAction}
+      closeAction={canClose ? ledgerNavigate.cancelLedgerAction : undefined}
     />
   );
 }
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
@@ -25,7 +25,7 @@ import {
   useStacksAccounts,
 } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
 
 import { useLedgerNavigate } from '../../hooks/use-ledger-navigate';
 import { checkLockedDeviceError, useLedgerResponseState } from '../../utils/generic-ledger-utils';
@@ -178,17 +178,13 @@ export function LedgerSignJwtContainer() {
     awaitingDeviceConnection,
   };
 
+  const canClose = !awaitingDeviceConnection && canUserCancelAction;
   return (
     <LedgerJwtSigningProvider value={ledgerContextValue}>
       <Dialog
         isShowing
-        header={
-          <Header
-            variant="dialog"
-            isWaitingOnPerformedAction={awaitingDeviceConnection || canUserCancelAction}
-          />
-        }
-        onClose={onCancelConnectLedger}
+        header={<DialogHeader />}
+        onClose={canClose ? () => onCancelConnectLedger() : undefined}
       >
         <Outlet />
       </Dialog>

diff --git a/src/app/features/ledger/flows/request-bitcoin-keys/ledger-request-bitcoin-keys.tsx b/src/app/features/ledger/flows/request-bitcoin-keys/ledger-request-bitcoin-keys.tsx
@@ -67,7 +67,7 @@ function LedgerRequestBitcoinKeys() {
   return (
     <RequestKeysFlow
       context={ledgerContextValue}
-      isActionCancellableByUser={awaitingDeviceConnection || canUserCancelAction}
+      isActionCancellableByUser={!awaitingDeviceConnection && canUserCancelAction}
     />
   );
 }

diff --git a/src/app/features/ledger/flows/request-stacks-keys/ledger-request-stacks-keys.tsx b/src/app/features/ledger/flows/request-stacks-keys/ledger-request-stacks-keys.tsx
@@ -79,7 +79,7 @@ function LedgerRequestStacksKeys() {
   return (
     <RequestKeysFlow
       context={ledgerContextValue}
-      isActionCancellableByUser={awaitingDeviceConnection || canUserCancelAction}
+      isActionCancellableByUser={!awaitingDeviceConnection && canUserCancelAction}
     />
   );
 }

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
@@ -21,7 +21,7 @@ import {
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
 
 import { useLedgerAnalytics } from '../../hooks/use-ledger-analytics.hook';
 import { useLedgerNavigate } from '../../hooks/use-ledger-navigate';
@@ -140,27 +140,20 @@ function LedgerSignStacksMsg({ account, unsignedMessage }: LedgerSignMsgProps) {
     }
   }
 
-  const allowUserToGoBack = get(location.state, 'goBack');
-
   const ledgerContextValue: LedgerMessageSigningContext = {
     message: unsignedMessage,
     signMessage,
     latestDeviceResponse,
     awaitingDeviceConnection,
   };
 
+  const canClose = !awaitingDeviceConnection && canUserCancelAction;
   return (
     <LedgerMsgSigningProvider value={ledgerContextValue}>
       <Dialog
-        onGoBack={allowUserToGoBack ? () => navigate(-1) : undefined}
         isShowing
-        header={
-          <Header
-            variant="dialog"
-            isWaitingOnPerformedAction={awaitingDeviceConnection || canUserCancelAction}
-          />
-        }
-        onClose={ledgerNavigate.cancelLedgerAction}
+        header={<DialogHeader />}
+        onClose={canClose ? () => ledgerNavigate.cancelLedgerAction() : undefined}
       >
         <Outlet />
       </Dialog>

diff --git a/src/app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container.tsx b/src/app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container.tsx
@@ -18,6 +18,7 @@ import {
   isVersionOfLedgerStacksAppWithContractPrincipalBug,
   signLedgerStacksTransaction,
   signStacksTransactionWithSignature,
+  useActionCancellableByUser,
 } from '@app/features/ledger/utils/stacks-ledger-utils';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
@@ -45,6 +46,7 @@ function LedgerSignStacksTxContainer() {
   const verifyLedgerPublicKey = useVerifyMatchingLedgerStacksPublicKey();
   const [unsignedTx, setUnsignedTx] = useState<null | string>(null);
   const navigate = useNavigate();
+  const canUserCancelAction = useActionCancellableByUser();
 
   const chain = 'stacks' as const;
 
@@ -148,11 +150,9 @@ function LedgerSignStacksTxContainer() {
     hasUserSkippedBuggyAppWarning,
   };
 
+  const canClose = !awaitingDeviceConnection && canUserCancelAction;
+
   return (
-    <TxSigningFlow
-      context={ledgerContextValue}
-      awaitingDeviceConnection={awaitingDeviceConnection}
-      closeAction={closeAction}
-    />
+    <TxSigningFlow context={ledgerContextValue} closeAction={canClose ? closeAction : undefined} />
   );
 }
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
@@ -1,30 +1,28 @@
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
 
+import { useLedgerNavigate } from '../../hooks/use-ledger-navigate';
 import { LedgerRequestKeysContext, LedgerRequestKeysProvider } from './ledger-request-keys.context';
 
 interface RequestKeysFlowProps {
   context: LedgerRequestKeysContext;
   isActionCancellableByUser: boolean;
-  onCancelConnectLedger?(): void;
 }
-export function RequestKeysFlow({
-  context,
-  isActionCancellableByUser,
-  onCancelConnectLedger,
-}: RequestKeysFlowProps) {
-  const navigate = useNavigate();
+export function RequestKeysFlow({ context, isActionCancellableByUser }: RequestKeysFlowProps) {
+  const ledgerNavigate = useLedgerNavigate();
   useScrollLock(true);
 
+  const onCancelConnectLedger = ledgerNavigate.cancelLedgerAction;
+
   return (
     <LedgerRequestKeysProvider value={context}>
       <Dialog
         isShowing
-        header={<Header variant="dialog" isWaitingOnPerformedAction={isActionCancellableByUser} />}
-        onClose={onCancelConnectLedger ? onCancelConnectLedger : () => navigate('../')}
+        header={<DialogHeader />}
+        onClose={isActionCancellableByUser ? onCancelConnectLedger : undefined}
       >
         <Outlet />
       </Dialog>