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

…5143
leather-io · May 8, 2024 · a50a550 · a50a550
1 parent b5c9c79
commit a50a550
Show file tree

Hide file tree

Showing 34 changed files with 175 additions and 132 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/container/container.tsx b/src/app/features/container/container.tsx
@@ -69,6 +69,8 @@ export function Container() {
   const displayHeader = !isLandingPage(pathname) && !isNoHeaderPopup(pathname);
   const isSessionLocked = getIsSessionLocked(pathname);
 
+  console.log('pathname', pathname);
+
   // TODO: Refactor? This is very hard to manage with dynamic routes. Temporarily
   // added a fix to catch the swap route: '/swap/:base/:quote?'
   function getOnGoBackLocation(pathname: RouteUrls) {

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
@@ -116,7 +116,7 @@ function LedgerSignBitcoinTxContainer() {
     <TxSigningFlow
       context={ledgerContextValue}
       awaitingDeviceConnection={awaitingDeviceConnection}
-      closeAction={ledgerNavigate.cancelLedgerAction}
+      closeAction={ledgerNavigate.cancelLedgerAction} // test if this needs ()=>ledgerNavigate()
     />
   );
 }
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,14 @@ 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/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';
@@ -149,18 +149,18 @@ function LedgerSignStacksMsg({ account, unsignedMessage }: LedgerSignMsgProps) {
     awaitingDeviceConnection,
   };
 
+  // Pete - fix this as this is not right
+  ///
+  // const isWaitingOnPerformedAction = awaitingDeviceConnection || canUserCancelAction;
+  const canClose = !awaitingDeviceConnection && canUserCancelAction;
+  // console.log('canClose');
   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/generic-flows/request-keys/request-keys-flow.tsx b/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx
@@ -1,30 +1,31 @@
-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;
+  // >>> check this as not allowing X from connect screen now
+  console.log('requestKeys ', onCancelConnectLedger, isActionCancellableByUser);
+
+  // need to make sure they can 'X' out of failed connect. Maybe I'm better to just lave the greyed out X alone?????
   return (
     <LedgerRequestKeysProvider value={context}>
       <Dialog
         isShowing
-        header={<Header variant="dialog" isWaitingOnPerformedAction={isActionCancellableByUser} />}
-        onClose={onCancelConnectLedger ? onCancelConnectLedger : () => navigate('../')}
+        header={<DialogHeader />}
+        onClose={isActionCancellableByUser ? onCancelConnectLedger : undefined}
       >
         <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
@@ -1,9 +1,8 @@
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 
-import { useLocationState } from '@app/common/hooks/use-location-state';
 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 { useActionCancellableByUser } from '../../utils/stacks-ledger-utils';
 import { LedgerTxSigningContext, LedgerTxSigningProvider } from './ledger-sign-tx.context';
@@ -18,24 +17,13 @@ export function TxSigningFlow({
   awaitingDeviceConnection,
   closeAction,
 }: TxSigningFlowProps) {
-  const navigate = useNavigate();
   useScrollLock(true);
-  const allowUserToGoBack = useLocationState<boolean>('goBack');
   const canUserCancelAction = useActionCancellableByUser();
 
+  const canClose = !awaitingDeviceConnection && canUserCancelAction;
   return (
     <LedgerTxSigningProvider value={context}>
-      <Dialog
-        onGoBack={allowUserToGoBack ? () => navigate(-1) : undefined}
-        isShowing
-        header={
-          <Header
-            variant="dialog"
-            isWaitingOnPerformedAction={awaitingDeviceConnection || canUserCancelAction}
-          />
-        }
-        onClose={closeAction}
-      >
+      <Dialog isShowing header={<DialogHeader />} onClose={canClose ? closeAction : undefined}>
         <Outlet />
       </Dialog>
     </LedgerTxSigningProvider>

diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx
@@ -38,7 +38,9 @@ export function ConnectLedgerErrorLayout(props: ConnectLedgerErrorLayoutProps) {
       <Box mt="space.02">
         <ConnectLedgerErr />
       </Box>
-      <LedgerTitle mt="space.07">We're unable to connect to your Ledger device</LedgerTitle>
+      <LedgerTitle mt={{ base: 'space.04', sm: 'space.07' }}>
+        We're unable to connect to your Ledger device
+      </LedgerTitle>
 
       <Callout variant={warningText ? 'warning' : 'error'} mt="space.04">
         {warningText ? warningText : 'Unable to connect'}

diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-start.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-start.tsx
@@ -6,7 +6,7 @@ import { closeWindow } from '@shared/utils';
 import { doesBrowserSupportWebUsbApi, whenPageMode } from '@app/common/utils';
 import { openIndexPageInNewTab } 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 { immediatelyAttemptLedgerConnection } from '../../hooks/use-when-reattempt-ledger-connection';
 import { ConnectLedger } from './connect-ledger';
@@ -36,7 +36,7 @@ export function ConnectLedgerStart() {
   }
 
   return (
-    <Dialog isShowing header={<Header variant="dialog" />} onClose={() => navigate('../')}>
+    <Dialog isShowing header={<DialogHeader />} onClose={() => navigate('../')}>
       <ConnectLedger
         connectBitcoin={() => connectChain('bitcoin')}
         connectStacks={() => connectChain('stacks')}

diff --git a/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx b/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx
@@ -4,7 +4,7 @@ import { styled } from 'leather-styles/jsx';
 
 import { UnsupportedBrowserImg } from '@app/features/ledger/illustrations/ledger-illu-unsupported-browser';
 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 { LedgerTitle } from '../../components/ledger-title';
@@ -14,7 +14,7 @@ export function UnsupportedBrowserLayout() {
   const navigate = useNavigate();
 
   return (
-    <Dialog header={<Header variant="dialog" />} isShowing onClose={() => navigate(-1)}>
+    <Dialog header={<DialogHeader />} isShowing onClose={() => navigate(-1)}>
       <LedgerWrapper image={<UnsupportedBrowserImg />}>
         <LedgerTitle mb="space.03">Your browser isn't supported</LedgerTitle>
         <styled.span textStyle="label.03" color="ink.text-subdued">