From 30976bcc67182b07c540c27b469a990922fcc9fd Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Tue, 9 Apr 2024 11:06:52 +0100
Subject: [PATCH] fix: go back properly and don't allow user to close non
 cancellable ledger actions, closes #5143

---
 .../broadcast-error-dialog.tsx                |  4 +-
 .../edit-nonce-dialog/edit-nonce-dialog.tsx   |  4 +-
 .../high-fee-dialog/high-fee-dialog.tsx       |  4 +-
 .../increase-btc-fee-dialog.tsx               |  4 +-
 .../increase-fee-sent-dialog.tsx              |  4 +-
 .../increase-stx-fee-dialog.tsx               |  4 +-
 .../components/account-list-unavailable.tsx   | 38 ++++++++---------
 .../switch-account-dialog.tsx                 | 13 ++++--
 .../ledger-bitcoin-sign-tx-container.tsx      |  6 ++-
 .../jwt-signing/ledger-sign-jwt-container.tsx | 12 ++----
 .../ledger-request-bitcoin-keys.tsx           |  2 +-
 .../ledger-request-stacks-keys.tsx            |  2 +-
 .../ledger-stacks-sign-msg-container.tsx      | 15 ++-----
 .../ledger-sign-stacks-tx-container.tsx       | 10 ++---
 .../request-keys/request-keys-flow.tsx        | 20 ++++-----
 .../tx-signing/tx-signing-flow.tsx            | 31 +++-----------
 .../connect-ledger-error.layout.tsx           |  4 +-
 .../connect-device/connect-ledger-start.tsx   |  4 +-
 .../unsupported-browser.layout.tsx            |  4 +-
 .../ledger/hooks/use-ledger-navigate.ts       | 10 ++---
 .../ledger/utils/stacks-ledger-utils.ts       |  3 +-
 ...trieve-taproot-to-native-segwit.layout.tsx |  4 +-
 src/app/features/settings/network/network.tsx |  4 +-
 .../features/settings/sign-out/sign-out.tsx   |  4 +-
 .../features/settings/theme/theme-dialog.tsx  |  4 +-
 .../rpc-sign-bip322-message.tsx               | 17 +++++++-
 .../send-inscription-choose-fee.tsx           |  4 +-
 .../send-inscription-form.tsx                 |  4 +-
 .../send-inscription-review.tsx               |  4 +-
 .../sent-inscription-summary.tsx              |  4 +-
 .../recipient-accounts-dialog.tsx             |  4 +-
 .../components/containers/dialog/dialog.tsx   |  4 +-
 .../components/header-action-button.tsx       | 17 +++-----
 .../containers/headers/dialog-header.tsx      | 41 +++++++++++++++++++
 .../components/containers/headers/header.tsx  |  6 +--
 35 files changed, 168 insertions(+), 151 deletions(-)
 create mode 100644 src/app/ui/components/containers/headers/dialog-header.tsx

diff --git a/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx b/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx
index 22a026d18b9..574a2a99a5a 100644
--- 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
index 3d517a7d150..92bce3793d0 100644
--- 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
index 36cc180da11..8b0a1aff694 100644
--- 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
index 5c5c71c623b..2dc2d333ee5 100644
--- 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
index 0edbf888d6e..9be82e867c9 100644
--- 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
index bd4291f0722..063c8df83b4 100644
--- 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
index 5ced903f54d..5ad30bb5cf2 100644
--- 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
index 1b0e7bdafdc..a8cbd427f32 100644
--- 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
index 84e04f45a15..3058be4d787 100644
--- 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
index b50dc940b29..80896ab4480 100644
--- 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
index 04806f3fc58..b70161901d8 100644
--- 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
index c6162a6740d..53e946ff5fa 100644
--- 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
index 4ef7eaf1d46..abaa31ac72f 100644
--- 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,8 +140,6 @@ function LedgerSignStacksMsg({ account, unsignedMessage }: LedgerSignMsgProps) {
     }
   }
 
-  const allowUserToGoBack = get(location.state, 'goBack');
-
   const ledgerContextValue: LedgerMessageSigningContext = {
     message: unsignedMessage,
     signMessage,
@@ -149,18 +147,13 @@ function LedgerSignStacksMsg({ account, unsignedMessage }: LedgerSignMsgProps) {
     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
index fb9d9b7396b..e589a64de74 100644
--- 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
index d1aaec30355..3205c6f814f 100644
--- 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>
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
index 1dcf101f95a..27768798cdb 100644
--- 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,41 +1,20 @@
-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';
 
 interface TxSigningFlowProps {
   context: LedgerTxSigningContext;
-  awaitingDeviceConnection: boolean;
-  closeAction(): void;
+  closeAction?(): void;
 }
-export function TxSigningFlow({
-  context,
-  awaitingDeviceConnection,
-  closeAction,
-}: TxSigningFlowProps) {
-  const navigate = useNavigate();
+export function TxSigningFlow({ context, closeAction }: TxSigningFlowProps) {
   useScrollLock(true);
-  const allowUserToGoBack = useLocationState<boolean>('goBack');
-  const canUserCancelAction = useActionCancellableByUser();
-
   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={closeAction}>
         <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
index a77b4b54a75..9c3c96ba411 100644
--- 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
index 43606978d31..a59b5c2f98b 100644
--- 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
index d41937fd3e6..602dba1862b 100644
--- 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">
diff --git a/src/app/features/ledger/hooks/use-ledger-navigate.ts b/src/app/features/ledger/hooks/use-ledger-navigate.ts
index bf91dbdb70f..e84644fb760 100644
--- a/src/app/features/ledger/hooks/use-ledger-navigate.ts
+++ b/src/app/features/ledger/hooks/use-ledger-navigate.ts
@@ -141,15 +141,13 @@ export function useLedgerNavigate() {
       },
 
       cancelLedgerAction() {
-        // for send ordinal '..' brings you back to the `choose-fee` step but you lose context of the ordinal
-        const backLocation = location.pathname.match(RouteUrls.SendOrdinalInscription)
-          ? RouteUrls.Home
-          : '..';
+        // Use baseUrl to determine where to go on close
+        const baseUrl = `/${location.pathname.split('/')[1]}`;
 
-        return navigate(backLocation, {
+        return navigate(baseUrl, {
           relative: 'path',
           replace: true,
-          state: { ...location.state },
+          state: { ...location.state, wentBack: true },
         });
       },
 
diff --git a/src/app/features/ledger/utils/stacks-ledger-utils.ts b/src/app/features/ledger/utils/stacks-ledger-utils.ts
index 18cf3b1d251..7aaaf5c240e 100644
--- a/src/app/features/ledger/utils/stacks-ledger-utils.ts
+++ b/src/app/features/ledger/utils/stacks-ledger-utils.ts
@@ -88,8 +88,9 @@ export function signStacksTransactionWithSignature(transaction: string, signatur
 export function useActionCancellableByUser() {
   const { pathname } = useLocation();
   return (
-    pathname.includes(RouteUrls.DeviceBusy) ||
+    pathname.includes(RouteUrls.ConnectLedger) ||
     pathname.includes(RouteUrls.ConnectLedgerSuccess) ||
+    pathname.includes(RouteUrls.ConnectLedgerError) ||
     pathname.includes(RouteUrls.AwaitingDeviceUserAction)
   );
 }
diff --git a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
index 3e24d893ccb..7dc43f92d1e 100644
--- a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
+++ b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
@@ -5,7 +5,7 @@ import { Button } from '@app/ui/components/button/button';
 import { Callout } from '@app/ui/components/callout/callout';
 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 { Card } from '@app/ui/layout/card/card';
 
 interface RetrieveTaprootToNativeSegwitLayoutProps {
@@ -21,7 +21,7 @@ export function RetrieveTaprootToNativeSegwitLayout(
   return (
     <Dialog
       isShowing
-      header={<Header variant="dialog" />}
+      header={<DialogHeader />}
       onClose={() => onClose()}
       footer={
         <Footer flexDirection="row">
diff --git a/src/app/features/settings/network/network.tsx b/src/app/features/settings/network/network.tsx
index d8afaf4d1b9..97a99fd7670 100644
--- a/src/app/features/settings/network/network.tsx
+++ b/src/app/features/settings/network/network.tsx
@@ -12,7 +12,7 @@ import { useNetworks } from '@app/store/networks/networks.selectors';
 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';
 
 const defaultNetworkIds = Object.values(WalletDefaultNetworkConfigurationIds) as string[];
 
@@ -43,7 +43,7 @@ export function NetworkDialog({ onClose }: NetworkDialogProps) {
 
   return (
     <Dialog
-      header={<Header variant="dialog" title="Change network" />}
+      header={<DialogHeader title="Change network" />}
       isShowing
       onClose={onClose}
       footer={
diff --git a/src/app/features/settings/sign-out/sign-out.tsx b/src/app/features/settings/sign-out/sign-out.tsx
index a2112056695..7591576c592 100644
--- a/src/app/features/settings/sign-out/sign-out.tsx
+++ b/src/app/features/settings/sign-out/sign-out.tsx
@@ -7,7 +7,7 @@ import { Button } from '@app/ui/components/button/button';
 import { Callout } from '@app/ui/components/callout/callout';
 import { Dialog, DialogProps } 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';
 
 interface SignOutDialogProps extends DialogProps {
   onUserDeleteWallet(): void;
@@ -28,7 +28,7 @@ export function SignOutDialog({ isShowing, onUserDeleteWallet, onClose }: SignOu
 
   return (
     <Dialog
-      header={<Header variant="dialog" title="Sign out" />}
+      header={<DialogHeader title="Sign out" />}
       isShowing={isShowing}
       onClose={onClose}
       footer={
diff --git a/src/app/features/settings/theme/theme-dialog.tsx b/src/app/features/settings/theme/theme-dialog.tsx
index 2e1739f6b6b..56e37c38653 100644
--- a/src/app/features/settings/theme/theme-dialog.tsx
+++ b/src/app/features/settings/theme/theme-dialog.tsx
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { UserSelectedTheme, themeLabelMap, useThemeSwitcher } from '@app/common/theme-provider';
 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 { ThemeListItem } from './theme-list-item';
 
@@ -29,7 +29,7 @@ export function ThemeDialog({ onClose }: ThemeDialogProps) {
   const { userSelectedTheme } = useThemeSwitcher();
 
   return (
-    <Dialog header={<Header variant="dialog" title="Change theme" />} isShowing onClose={onClose}>
+    <Dialog header={<DialogHeader title="Change theme" />} isShowing onClose={onClose}>
       {themes.map(theme => (
         <ThemeListItem
           key={theme}
diff --git a/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx b/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx
index 2b5cffebb77..1b98f5f6bca 100644
--- a/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx
+++ b/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx
@@ -1,4 +1,5 @@
-import { Outlet } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
 
 import { closeWindow } from '@shared/utils';
 
@@ -29,13 +30,25 @@ function RpcSignBip322Message() {
     origin,
     message,
     address,
-    isLoading,
+    isLoading: signBip322MessageIsLoading,
     onUserApproveBip322MessageSigningRequest,
     onUserRejectBip322MessageSigningRequest,
   } = useSignBip322Message();
 
+  const location = useLocation();
   const { chain } = useCurrentNetwork();
 
+  const [isLoading, setIsLoading] = useState(false);
+
+  // needed to stop button loading spin on goBack - could do better?
+  useEffect(() => {
+    if (location?.state?.wentBack) {
+      setIsLoading(false);
+    } else {
+      setIsLoading(signBip322MessageIsLoading);
+    }
+  }, [location, signBip322MessageIsLoading, isLoading, setIsLoading]);
+
   if (origin === null) {
     closeWindow();
     throw new Error('Origin is null');
diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx
index 32064c78e4a..219a68a5bed 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx
@@ -13,7 +13,7 @@ import { LoadingSpinner } from '@app/components/loading-spinner';
 import { BitcoinChooseFee } from '@app/features/bitcoin-choose-fee/bitcoin-choose-fee';
 import { useValidateBitcoinSpend } from '@app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend';
 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 { useSendInscriptionState } from './components/send-inscription-container';
 import { useSendInscriptionFeesList } from './hooks/use-send-inscription-fees-list';
@@ -57,7 +57,7 @@ export function SendInscriptionChooseFee() {
   return (
     <>
       <Dialog
-        header={<Header variant="dialog" title="Choose fee" />}
+        header={<DialogHeader title="Choose fee" />}
         isShowing
         onGoBack={() => navigate(RouteUrls.Home)}
         onClose={() => navigate(RouteUrls.Home)}
diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
index eb9cfe1a6ef..f238991c984 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
@@ -12,7 +12,7 @@ import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon
 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 { RecipientAddressTypeField } from '../send-crypto-asset-form/components/recipient-address-type-field';
 import { CollectibleAsset } from './components/collectible-asset';
@@ -42,7 +42,7 @@ export function SendInscriptionForm() {
         return (
           <Form>
             <Dialog
-              header={<Header variant="dialog" title="Send" />}
+              header={<DialogHeader title="Send" />}
               onGoBack={() => navigate(-1)}
               isShowing
               onClose={() => navigate(RouteUrls.Home)}
diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
index 8c791bfe762..2ecddb2c72c 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
@@ -16,7 +16,7 @@ import { inscriptionSent } from '@app/store/ordinals/ordinals.slice';
 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 { Card } from '@app/ui/layout/card/card';
 
 import { InscriptionPreviewCard } from '../../../components/inscription-preview-card/inscription-preview-card';
@@ -76,7 +76,7 @@ export function SendInscriptionReview() {
 
   return (
     <Dialog
-      header={<Header variant="dialog" title="Review" />}
+      header={<DialogHeader title="Review" />}
       isShowing
       onGoBack={() => navigate(-1)}
       onClose={() => navigate(RouteUrls.Home)}
diff --git a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx
index d21789ebdfa..7d63b91d782 100644
--- a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx
+++ b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx
@@ -16,7 +16,7 @@ import { InscriptionPreview } from '@app/components/inscription-preview-card/com
 import { useToast } from '@app/features/toasts/use-toast';
 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 { CheckmarkIcon } from '@app/ui/icons/checkmark-icon';
 import { CopyIcon } from '@app/ui/icons/copy-icon';
 import { ExternalLinkIcon } from '@app/ui/icons/external-link-icon';
@@ -60,7 +60,7 @@ export function SendInscriptionSummary() {
 
   return (
     <Dialog
-      header={<Header variant="dialog" title="Sent" />}
+      header={<DialogHeader title="Sent" />}
       isShowing
       onClose={() => navigate(RouteUrls.Home)}
     >
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx
index 9ec21d9831f..f6535e80597 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx
@@ -7,7 +7,7 @@ import { Box } from 'leather-styles/jsx';
 import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 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 { VirtuosoWrapper } from '@app/ui/components/virtuoso';
 
 import { AccountListItem } from './account-list-item';
@@ -26,7 +26,7 @@ export function RecipientAccountsDialog() {
 
   return (
     <Dialog
-      header={<Header variant="dialog" title="My accounts" />}
+      header={<DialogHeader title="My accounts" />}
       isShowing
       onClose={onGoBack}
       wrapChildren={false}
diff --git a/src/app/ui/components/containers/dialog/dialog.tsx b/src/app/ui/components/containers/dialog/dialog.tsx
index 84ec243ac56..b584c85a105 100644
--- a/src/app/ui/components/containers/dialog/dialog.tsx
+++ b/src/app/ui/components/containers/dialog/dialog.tsx
@@ -9,12 +9,12 @@ import { pxStringToNumber } from '@shared/utils/px-string-to-number';
 
 export interface DialogProps {
   isShowing: boolean;
-  onClose(): void;
+  onClose?(): void;
 }
 interface RadixDialogProps extends DialogProps {
   children: ReactNode;
   footer?: ReactNode;
-  header: ReactElement<any, string | JSXElementConstructor<any>>;
+  header?: ReactElement<any, string | JSXElementConstructor<any>>;
   onGoBack?(): void;
   wrapChildren?: boolean;
 }
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
index cb966581f54..1a86ff8c8c8 100644
--- 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/dialog-header.tsx b/src/app/ui/components/containers/headers/dialog-header.tsx
new file mode 100644
index 00000000000..7214152f5c2
--- /dev/null
+++ b/src/app/ui/components/containers/headers/dialog-header.tsx
@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+
+import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
+import { Box, Flex } from 'leather-styles/jsx';
+
+import { CloseIcon } from '@app/ui/icons';
+
+import { HeaderActionButton } from './components/header-action-button';
+
+export interface DialogHeaderProps {
+  onClose?(): void;
+  title?: ReactNode;
+}
+
+export function DialogHeader({ onClose, title }: DialogHeaderProps) {
+  return (
+    <Flex
+      justifyContent="center"
+      m={{ base: 0, md: 'auto' }}
+      p="space.04"
+      bg="transparent"
+      width="100%"
+      minHeight="40px"
+    >
+      {title && (
+        <Flex flex="none" m="auto" alignItems="center" textStyle="heading.05">
+          {title}
+        </Flex>
+      )}
+      {onClose && (
+        <Box ml="auto">
+          <HeaderActionButton
+            icon={<CloseIcon />}
+            dataTestId={SharedComponentsSelectors.HeaderCloseBtn}
+            onAction={onClose}
+          />
+        </Box>
+      )}
+    </Flex>
+  );
+}
diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx
index 96fefc811bd..8aadac76bdd 100644
--- a/src/app/ui/components/containers/headers/header.tsx
+++ b/src/app/ui/components/containers/headers/header.tsx
@@ -8,11 +8,10 @@ import { ArrowLeftIcon, CloseIcon } from '@app/ui/icons';
 import { BigTitleHeader } from './components/big-title-header';
 import { HeaderActionButton } from './components/header-action-button';
 
-type HeaderVariants = 'page' | 'home' | 'onboarding' | 'dialog' | 'bigTitle' | 'fund';
+type HeaderVariants = 'page' | 'home' | 'onboarding' | 'bigTitle' | 'fund';
 
 export interface HeaderProps {
   variant: HeaderVariants;
-  isWaitingOnPerformedAction?: boolean;
   onClose?(): void;
   onGoBack?(): void;
   title?: ReactNode;
@@ -25,7 +24,6 @@ export interface HeaderProps {
 
 export function Header({
   variant,
-  isWaitingOnPerformedAction,
   onClose,
   onGoBack,
   account,
@@ -60,7 +58,6 @@ export function Header({
               {variant !== 'home' && onGoBack ? (
                 <HeaderActionButton
                   icon={<ArrowLeftIcon />}
-                  isWaitingOnPerformedAction={isWaitingOnPerformedAction}
                   onAction={onGoBack}
                   dataTestId={SharedComponentsSelectors.HeaderBackBtn}
                 />
@@ -81,7 +78,6 @@ export function Header({
               <HeaderActionButton
                 icon={<CloseIcon />}
                 dataTestId={SharedComponentsSelectors.HeaderCloseBtn}
-                isWaitingOnPerformedAction={isWaitingOnPerformedAction}
                 onAction={onClose}
               />
             )}