From 21b14c440a8363af59394f9fb9d434fe709f3376 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Thu, 1 Aug 2024 11:57:44 +0100
Subject: [PATCH] chore: import DialogHeader from monorepo

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 39 ++++++++++++++++---
 .../broadcast-error-dialog.tsx                |  3 +-
 src/app/components/layout/dialog-header.tsx   | 36 -----------------
 .../container/headers/popup.header.tsx        |  3 ++
 .../edit-nonce-dialog/edit-nonce-dialog.tsx   |  3 +-
 .../increase-btc-fee-dialog.tsx               |  3 +-
 .../increase-stx-fee-dialog.tsx               |  3 +-
 .../switch-account-dialog.tsx                 |  3 +-
 .../jwt-signing/ledger-sign-jwt-container.tsx |  3 +-
 .../ledger-stacks-sign-msg-container.tsx      |  3 +-
 .../request-keys/request-keys-flow.tsx        |  3 +-
 .../tx-signing/tx-signing-flow.tsx            |  3 +-
 .../connect-device/connect-ledger-start.tsx   |  3 +-
 .../unsupported-browser.layout.tsx            |  3 +-
 ...trieve-taproot-to-native-segwit.layout.tsx |  3 +-
 src/app/features/settings/network/network.tsx |  3 +-
 .../features/settings/sign-out/sign-out.tsx   |  3 +-
 .../features/settings/theme/theme-dialog.tsx  |  3 +-
 .../stacks-high-fee-dialog.tsx                |  3 +-
 .../components/receive-tokens.layout.tsx      |  3 +-
 src/app/pages/receive/receive-dialog.tsx      |  3 +-
 .../send/broadcast-error/broadcast-error.tsx  |  3 +-
 .../send-inscription-choose-fee.tsx           |  3 +-
 .../send-inscription-form.tsx                 |  3 +-
 .../send-inscription-review.tsx               |  3 +-
 .../sent-inscription-summary.tsx              |  3 +-
 .../recipient-accounts-dialog.tsx             |  3 +-
 .../swap-asset-dialog-base.tsx                |  4 +-
 .../swap-asset-dialog-quote.tsx               |  4 +-
 30 files changed, 63 insertions(+), 97 deletions(-)
 delete mode 100644 src/app/components/layout/dialog-header.tsx

diff --git a/package.json b/package.json
index f89f677463e..fb99755a788 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
     "@leather.io/models": "0.10.2",
     "@leather.io/query": "2.1.0",
     "@leather.io/tokens": "0.7.0",
-    "@leather.io/ui": "1.9.0",
+    "@leather.io/ui": "1.9.2",
     "@leather.io/utils": "0.11.0",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 28a3535bae4..6a86d3d5abb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -52,8 +52,8 @@ importers:
         specifier: 0.7.0
         version: 0.7.0
       '@leather.io/ui':
-        specifier: 1.9.0
-        version: 1.9.0(@babel/core@7.24.9)(@babel/preset-env@7.24.8(@babel/core@7.24.9))(@swc/core@1.7.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(encoding@0.1.13)(expo-modules-autolinking@1.11.1)(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.7.0)(@types/node@20.12.12)(typescript@5.4.5))(typescript@5.4.5)
+        specifier: 1.9.2
+        version: 1.9.2(@babel/core@7.24.9)(@babel/preset-env@7.24.8(@babel/core@7.24.9))(@swc/core@1.7.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(encoding@0.1.13)(expo-modules-autolinking@1.11.1)(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.7.0)(@types/node@20.12.12)(typescript@5.4.5))(typescript@5.4.5)
       '@leather.io/utils':
         specifier: 0.11.0
         version: 0.11.0
@@ -2613,6 +2613,9 @@ packages:
   '@leather.io/models@0.10.2':
     resolution: {integrity: sha512-N4KTT0jApIZphx96/abD0xwA+4A23k+hmPWsf98N2LKxG5ZzYmuzoB5VUlw7hGdwpZFbDW625ALQjjPMPoyG8A==}
 
+  '@leather.io/models@0.11.0':
+    resolution: {integrity: sha512-iKhEno6aVhFKvsnsMKbHQYXIqEGo4TOkJcPs/4yHq2EZmPEMFk8FMxUNZZKcKnVSxedInjzFaFhYF/sz+tTxjQ==}
+
   '@leather.io/panda-preset@0.3.4':
     resolution: {integrity: sha512-q+ri1ObAPe0GsYWKZe/5AWjSwH1lEgRnBn5NIVE7OJUt8eXa1vQuXMeXFLmY+UU7dhVYSY148RU+SNiRl1DfSw==}
 
@@ -2627,15 +2630,21 @@ packages:
   '@leather.io/rpc@2.1.1':
     resolution: {integrity: sha512-rAoPxiooffpbF9mtpSleA8Y5O9WZS6VEvGFYDLQPkt3JxAEm0+cVykDYypJWbrnMAqKNL3FVSSnR2TDtsZ8GiA==}
 
+  '@leather.io/rpc@2.1.2':
+    resolution: {integrity: sha512-Smv00bOQF3Suju3peJWAywpFjTurLg+GZgKi7uymKHfkXhnrUmOxYkXKE1azac8E4MardseZIP7jjGU/hgmFnQ==}
+
   '@leather.io/tokens@0.7.0':
     resolution: {integrity: sha512-RLF8enOE+t/KdcTjjyQUf6rMEyxLb/PPMYZgvoT/FWoQgnjYluhG6zc1HROu7wM8XEBF4kESABIM6UYKtkAs1Q==}
 
-  '@leather.io/ui@1.9.0':
-    resolution: {integrity: sha512-KNfjqsULmj9S697oh4eGkmGBNiEDXl3vH9Ghddv+RcN2IwuWA8ulNbp8C268HyI/PWhBdm3sbM2LMRXpf9qDSA==}
+  '@leather.io/ui@1.9.2':
+    resolution: {integrity: sha512-Aeuz49O9HicqQ00KVFD4gq8kzASzc8Izlw+yWdP2rQNTaENEuA5qIrDblm4WUC4OBaqhIm2m7SUMmfO34r3P0A==}
 
   '@leather.io/utils@0.11.0':
     resolution: {integrity: sha512-/i1auGETc6WlPCdukbkMKtMUsliDQwUZ/YNJ8noCjXkZTGKvecvH8VXt+nY3lnqUSAigCfSTMk/c8CGLFUJkxQ==}
 
+  '@leather.io/utils@0.11.1':
+    resolution: {integrity: sha512-uRwWihcI0U/QUCheAr9TwKa9NvUb7HB5vtIpiCpYKDeGmjer4lvvIcPvyPxm5G0/ccB/umtqni9nK5EtwJJ6vA==}
+
   '@ledgerhq/devices@8.4.0':
     resolution: {integrity: sha512-TUrMlWZJ+5AFp2lWMw4rGQoU+WtjIqlFX5SzQDL9phaUHrt4TFierAGHsaj5+tUHudhD4JhIaLI2cn1NOyq5NQ==}
 
@@ -17249,6 +17258,12 @@ snapshots:
       '@stacks/stacks-blockchain-api-types': 7.8.2
       bignumber.js: 9.1.2
 
+  '@leather.io/models@0.11.0':
+    dependencies:
+      '@stacks/stacks-blockchain-api-types': 7.8.2
+      bignumber.js: 9.1.2
+      zod: 3.23.6
+
   '@leather.io/panda-preset@0.3.4(jsdom@22.1.0)(typescript@5.4.5)':
     dependencies:
       '@pandacss/dev': 0.40.1(jsdom@22.1.0)(typescript@5.4.5)
@@ -17302,13 +17317,18 @@ snapshots:
       '@leather.io/models': 0.10.2
       zod: 3.23.6
 
+  '@leather.io/rpc@2.1.2':
+    dependencies:
+      '@leather.io/models': 0.11.0
+      zod: 3.23.6
+
   '@leather.io/tokens@0.7.0': {}
 
-  '@leather.io/ui@1.9.0(@babel/core@7.24.9)(@babel/preset-env@7.24.8(@babel/core@7.24.9))(@swc/core@1.7.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(encoding@0.1.13)(expo-modules-autolinking@1.11.1)(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.7.0)(@types/node@20.12.12)(typescript@5.4.5))(typescript@5.4.5)':
+  '@leather.io/ui@1.9.2(@babel/core@7.24.9)(@babel/preset-env@7.24.8(@babel/core@7.24.9))(@swc/core@1.7.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(encoding@0.1.13)(expo-modules-autolinking@1.11.1)(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.7.0)(@types/node@20.12.12)(typescript@5.4.5))(typescript@5.4.5)':
     dependencies:
       '@expo/vector-icons': 14.0.0
       '@leather.io/tokens': 0.7.0
-      '@leather.io/utils': 0.11.0
+      '@leather.io/utils': 0.11.1
       '@radix-ui/react-accessible-icon': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-accordion': 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-avatar': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -17359,6 +17379,13 @@ snapshots:
       '@leather.io/rpc': 2.1.1
       bignumber.js: 9.1.2
 
+  '@leather.io/utils@0.11.1':
+    dependencies:
+      '@leather.io/constants': 0.8.2
+      '@leather.io/models': 0.11.0
+      '@leather.io/rpc': 2.1.2
+      bignumber.js: 9.1.2
+
   '@ledgerhq/devices@8.4.0':
     dependencies:
       '@ledgerhq/errors': 6.17.0
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 1bd742258f1..3d84c8a4f92 100644
--- a/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx
+++ b/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx
@@ -4,10 +4,9 @@ import GenericError from '@assets/images/generic-error.png';
 import { Flex, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
-import { Button, Dialog } from '@leather.io/ui';
+import { Button, Dialog, DialogHeader } from '@leather.io/ui';
 
 import { Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 
 export function BroadcastErrorDialog() {
   const navigate = useNavigate();
diff --git a/src/app/components/layout/dialog-header.tsx b/src/app/components/layout/dialog-header.tsx
deleted file mode 100644
index 4fed3c77c90..00000000000
--- a/src/app/components/layout/dialog-header.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { ReactNode } from 'react';
-
-import { Flex, styled } from 'leather-styles/jsx';
-
-import { CloseIcon, IconButton } from '@leather.io/ui';
-
-interface DialogHeaderProps {
-  onClose?(): void;
-  title?: ReactNode;
-  variant?: 'default' | 'large';
-}
-
-export function DialogHeader({ onClose, title, variant = 'default' }: DialogHeaderProps) {
-  return (
-    <Flex
-      justifyContent="flex-end"
-      alignItems="center"
-      m={{ base: 0, md: 'auto' }}
-      p="space.04"
-      bg="transparent"
-      width="100%"
-      minHeight="40px"
-    >
-      {title && (
-        <styled.h2
-          flex="1"
-          textAlign={variant === 'large' ? 'left' : 'center'}
-          textStyle={variant === 'large' ? 'heading.03' : 'heading.05'}
-        >
-          {title}
-        </styled.h2>
-      )}
-      {onClose && <IconButton icon={<CloseIcon />} onClick={onClose} position="absolute" />}
-    </Flex>
-  );
-}
diff --git a/src/app/features/container/headers/popup.header.tsx b/src/app/features/container/headers/popup.header.tsx
index c29a71c5d6f..324e24d0156 100644
--- a/src/app/features/container/headers/popup.header.tsx
+++ b/src/app/features/container/headers/popup.header.tsx
@@ -20,6 +20,9 @@ interface PopupHeaderProps {
 export function PopupHeader({ showSwitchAccount, balance }: PopupHeaderProps) {
   const { isShowingSwitchAccount, setIsShowingSwitchAccount } =
     useOutletContext<SwitchAccountOutletContext>();
+
+  // Popup switch account not showing anything now
+
   return (
     <Header>
       <HeaderGrid
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 b4e85091017..86fa318bc18 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
@@ -4,13 +4,12 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import { Stack, styled } from 'leather-styles/jsx';
 
-import { Dialog, Link } from '@leather.io/ui';
+import { Dialog, DialogHeader, Link } from '@leather.io/ui';
 
 import { StacksSendFormValues, StacksTransactionFormValues } from '@shared/models/form.model';
 
 import { useOnMount } from '@app/common/hooks/use-on-mount';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 
 import { EditNonceForm } from './components/edit-nonce-form';
 
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 4b1176eaa3b..bdbf8e02d22 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
@@ -5,7 +5,7 @@ import { Formik } from 'formik';
 import { Flex, Stack } from 'leather-styles/jsx';
 
 import type { BitcoinTx } from '@leather.io/models';
-import { Caption, Dialog, Spinner } from '@leather.io/ui';
+import { Caption, Dialog, DialogHeader, Spinner } from '@leather.io/ui';
 import { btcToSat, createMoney, formatMoney } from '@leather.io/utils';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -15,7 +15,6 @@ import { getBitcoinTxValue } from '@app/common/transactions/bitcoin/utils';
 import { BitcoinCustomFeeInput } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee-input';
 import { BitcoinTransactionItem } from '@app/components/bitcoin-transaction-item/bitcoin-transaction-item';
 import { Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 
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 2f87abdfb4a..fc4aef13c2d 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
@@ -12,7 +12,7 @@ import {
   useStacksRawTransaction,
   useStxAvailableUnlockedBalance,
 } from '@leather.io/query';
-import { Caption, Dialog, Spinner } from '@leather.io/ui';
+import { Caption, Dialog, DialogHeader, Spinner } from '@leather.io/ui';
 import { microStxToStx, stxToMicroStx } from '@leather.io/utils';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -22,7 +22,6 @@ import { stacksValue } from '@app/common/stacks-utils';
 import { safelyFormatHexTxid } from '@app/common/utils/safe-handle-txid';
 import { stxFeeValidator } from '@app/common/validation/forms/fee-validators';
 import { Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { StacksTransactionItem } from '@app/components/stacks-transaction-item/stacks-transaction-item';
 import { useStacksBroadcastTransaction } from '@app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction';
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 1db4120d860..42442e647e6 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
@@ -3,12 +3,11 @@ import { Virtuoso } from 'react-virtuoso';
 
 import { Box } from 'leather-styles/jsx';
 
-import { Button, Dialog } from '@leather.io/ui';
+import { Button, Dialog, DialogHeader } from '@leather.io/ui';
 
 import { useCreateAccount } from '@app/common/hooks/account/use-create-account';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 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';
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 d6622cd8b9f..e0c28065c00 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
@@ -5,7 +5,7 @@ import { TransactionVersion, getAddressFromPublicKey } from '@stacks/transaction
 import { LedgerError } from '@zondax/ledger-stacks';
 import get from 'lodash.get';
 
-import { Dialog } from '@leather.io/ui';
+import { Dialog, DialogHeader } from '@leather.io/ui';
 import { delay, isError } from '@leather.io/utils';
 
 import { finalizeAuthResponse } from '@shared/actions/finalize-auth-response';
@@ -17,7 +17,6 @@ import { useDefaultRequestParams } from '@app/common/hooks/use-default-request-s
 import { useKeyActions } from '@app/common/hooks/use-key-actions';
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { makeLedgerCompatibleUnsignedAuthResponsePayload } from '@app/common/unsafe-auth-response';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 import { useCancelLedgerAction } from '@app/features/ledger/utils/generic-ledger-utils';
 import {
   getStacksAppVersion,
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 fe0a7462c6e..396e4cb2003 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
@@ -5,14 +5,13 @@ import { bytesToHex, signatureVrsToRsv } from '@stacks/common';
 import { serializeCV } from '@stacks/transactions';
 import { LedgerError } from '@zondax/ledger-stacks';
 
-import { Dialog } from '@leather.io/ui';
+import { Dialog, DialogHeader } from '@leather.io/ui';
 import { delay, isError } from '@leather.io/utils';
 
 import { UnsignedMessage, whenSignableMessageOfType } from '@shared/signature/signature-types';
 
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { appEvents } from '@app/common/publish-subscribe';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 import { useCancelLedgerAction } from '@app/features/ledger/utils/generic-ledger-utils';
 import {
   getStacksAppVersion,
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 29727e22fe0..5c648aa0e35 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,9 +1,8 @@
 import { Outlet } from 'react-router-dom';
 
-import { Dialog } from '@leather.io/ui';
+import { Dialog, DialogHeader } from '@leather.io/ui';
 
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 
 import { useLedgerNavigate } from '../../hooks/use-ledger-navigate';
 import { LedgerRequestKeysContext, LedgerRequestKeysProvider } from './ledger-request-keys.context';
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 c1c05c1b55a..36ede161f72 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,9 +1,8 @@
 import { Outlet } from 'react-router-dom';
 
-import { Dialog } from '@leather.io/ui';
+import { Dialog, DialogHeader } from '@leather.io/ui';
 
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 
 import { LedgerTxSigningContext, LedgerTxSigningProvider } from './ledger-sign-tx.context';
 
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 a749aca2443..74f0a1c4439 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
@@ -1,13 +1,12 @@
 import { useNavigate } from 'react-router-dom';
 
-import { Dialog } from '@leather.io/ui';
+import { Dialog, DialogHeader } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 import { closeWindow } from '@shared/utils';
 
 import { doesBrowserSupportWebUsbApi, whenPageMode } from '@app/common/utils';
 import { openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 
 import { immediatelyAttemptLedgerConnection } from '../../hooks/use-when-reattempt-ledger-connection';
 import { ConnectLedger } from './connect-ledger';
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 7d795b5605c..50640cab0a2 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
@@ -2,9 +2,8 @@ import { useNavigate } from 'react-router-dom';
 
 import { styled } from 'leather-styles/jsx';
 
-import { Dialog, Link } from '@leather.io/ui';
+import { Dialog, DialogHeader, Link } from '@leather.io/ui';
 
-import { DialogHeader } from '@app/components/layout/dialog-header';
 import { UnsupportedBrowserImg } from '@app/features/ledger/illustrations/ledger-illu-unsupported-browser';
 
 import { LedgerTitle } from '../../components/ledger-title';
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 5258aed624e..8b05860953c 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
@@ -1,9 +1,8 @@
 import { Flex, styled } from 'leather-styles/jsx';
 
-import { BtcAvatarIcon, Button, Callout, Dialog } from '@leather.io/ui';
+import { BtcAvatarIcon, Button, Callout, Dialog, DialogHeader } from '@leather.io/ui';
 
 import { Card, Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 
 interface RetrieveTaprootToNativeSegwitLayoutProps {
   isBroadcasting: boolean;
diff --git a/src/app/features/settings/network/network.tsx b/src/app/features/settings/network/network.tsx
index c35adafa658..30ecbfa1c15 100644
--- a/src/app/features/settings/network/network.tsx
+++ b/src/app/features/settings/network/network.tsx
@@ -3,13 +3,12 @@ import { useNavigate } from 'react-router-dom';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
 import { WalletDefaultNetworkConfigurationIds } from '@leather.io/models';
-import { Button, Dialog } from '@leather.io/ui';
+import { Button, Dialog, DialogHeader } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 import { analytics } from '@shared/utils/analytics';
 
 import { Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 import { NetworkListItem } from '@app/features/settings/network/network-list-item';
 import { useCurrentNetworkState, useNetworksActions } from '@app/store/networks/networks.hooks';
 import { useNetworks } from '@app/store/networks/networks.selectors';
diff --git a/src/app/features/settings/sign-out/sign-out.tsx b/src/app/features/settings/sign-out/sign-out.tsx
index 1ced3982d6a..54a3f0811a3 100644
--- a/src/app/features/settings/sign-out/sign-out.tsx
+++ b/src/app/features/settings/sign-out/sign-out.tsx
@@ -2,11 +2,10 @@ import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { useFormik } from 'formik';
 import { Flex, HStack, styled } from 'leather-styles/jsx';
 
-import { Button, Callout, Dialog } from '@leather.io/ui';
+import { Button, Callout, Dialog, DialogHeader } from '@leather.io/ui';
 
 import { useWalletType } from '@app/common/use-wallet-type';
 import { Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 
 interface SignOutDialogProps {
   isShowing: boolean;
diff --git a/src/app/features/settings/theme/theme-dialog.tsx b/src/app/features/settings/theme/theme-dialog.tsx
index ac7e0ef14a9..9ad35a84ad1 100644
--- a/src/app/features/settings/theme/theme-dialog.tsx
+++ b/src/app/features/settings/theme/theme-dialog.tsx
@@ -1,11 +1,10 @@
 import { useCallback } from 'react';
 
-import { Dialog } from '@leather.io/ui';
+import { Dialog, DialogHeader } from '@leather.io/ui';
 
 import { analytics } from '@shared/utils/analytics';
 
 import { UserSelectedTheme, themeLabelMap, useThemeSwitcher } from '@app/common/theme-provider';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 
 import { ThemeListItem } from './theme-list-item';
 
diff --git a/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx b/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx
index d93d699812d..4079cf6630b 100644
--- a/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx
+++ b/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx
@@ -2,13 +2,12 @@ import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { useFormikContext } from 'formik';
 import { HStack, Stack } from 'leather-styles/jsx';
 
-import { Button, Caption, Dialog, ErrorIcon, Link, Title } from '@leather.io/ui';
+import { Button, Caption, Dialog, DialogHeader, ErrorIcon, Link, Title } from '@leather.io/ui';
 
 import { StacksSendFormValues } from '@shared/models/form.model';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 
 import { useStacksHighFeeWarningContext } from './stacks-high-fee-warning-container';
 
diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx
index 69c95e6d455..cbf96db96e4 100644
--- a/src/app/pages/receive/components/receive-tokens.layout.tsx
+++ b/src/app/pages/receive/components/receive-tokens.layout.tsx
@@ -5,11 +5,10 @@ import { SharedComponentsSelectors } from '@tests/selectors/shared-component.sel
 import { Box, Flex, styled } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
-import { AddressDisplayer, Button, Dialog } from '@leather.io/ui';
+import { AddressDisplayer, Button, Dialog, DialogHeader } from '@leather.io/ui';
 
 import { useLocationState } from '@app/common/hooks/use-location-state';
 import { Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect';
 
 interface ReceiveTokensLayoutProps {
diff --git a/src/app/pages/receive/receive-dialog.tsx b/src/app/pages/receive/receive-dialog.tsx
index d415492b900..71608c4a27b 100644
--- a/src/app/pages/receive/receive-dialog.tsx
+++ b/src/app/pages/receive/receive-dialog.tsx
@@ -4,13 +4,12 @@ import { HomePageSelectors } from '@tests/selectors/home.selectors';
 import { Box } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
-import { Dialog, Tabs } from '@leather.io/ui';
+import { Dialog, DialogHeader, Tabs } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 import { analytics } from '@shared/utils/analytics';
 
 import { useLocationState } from '@app/common/hooks/use-location-state';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect';
 import { useZeroIndexTaprootAddress } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
diff --git a/src/app/pages/send/broadcast-error/broadcast-error.tsx b/src/app/pages/send/broadcast-error/broadcast-error.tsx
index ed3bfed80e5..1b1afa1ba6d 100644
--- a/src/app/pages/send/broadcast-error/broadcast-error.tsx
+++ b/src/app/pages/send/broadcast-error/broadcast-error.tsx
@@ -2,13 +2,12 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import get from 'lodash.get';
 
-import { Dialog } from '@leather.io/ui';
+import { Dialog, DialogHeader } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 import { analytics } from '@shared/utils/analytics';
 
 import { useOnMount } from '@app/common/hooks/use-on-mount';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 
 import { BroadcastErrorLayout } from './components/broadcast-error.layout';
 
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 8190c869257..5f7d5c9a6e9 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
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Outlet, useNavigate } from 'react-router-dom';
 
 import type { BtcFeeType } from '@leather.io/models';
-import { Dialog } from '@leather.io/ui';
+import { Dialog, DialogHeader } from '@leather.io/ui';
 import { createMoney } from '@leather.io/utils';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -11,7 +11,6 @@ import {
   BitcoinFeesList,
   OnChooseFeeArgs,
 } from '@app/components/bitcoin-fees-list/bitcoin-fees-list';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 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';
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 2429260caf4..c57b848b57e 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { Form, Formik } from 'formik';
 import { Box, Flex } from 'leather-styles/jsx';
 
-import { Button, Dialog, OrdinalAvatarIcon } from '@leather.io/ui';
+import { Button, Dialog, DialogHeader, OrdinalAvatarIcon } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 
@@ -11,7 +11,6 @@ import { ErrorLabel } from '@app/components/error-label';
 import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
 import { InscriptionPreviewCard } from '@app/components/inscription-preview-card/inscription-preview-card';
 import { Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 
 import { RecipientAddressTypeField } from '../send-crypto-asset-form/components/recipient-address-type-field';
 import { CollectibleAsset } from './components/collectible-asset';
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 afe3d8fcdf5..b1e0ad03a44 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
@@ -5,7 +5,7 @@ import { Box, Flex, Stack } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
 import { useBitcoinBroadcastTransaction } from '@leather.io/query';
-import { Button, Dialog } from '@leather.io/ui';
+import { Button, Dialog, DialogHeader } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 import { analytics } from '@shared/utils/analytics';
@@ -14,7 +14,6 @@ import { FormAddressDisplayer } from '@app/components/address-displayer/form-add
 import { InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';
 import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
 import { Card, Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
 import { useAppDispatch } from '@app/store';
 import { inscriptionSent } from '@app/store/ordinals/ordinals.slice';
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 a0d4be8d875..3dc7341b58a 100644
--- a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx
+++ b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx
@@ -4,7 +4,7 @@ import { Box, Flex, HStack, Stack } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
 import type { Blockchains, Inscription } from '@leather.io/models';
-import { CheckmarkIcon, CopyIcon, Dialog, ExternalLinkIcon } from '@leather.io/ui';
+import { CheckmarkIcon, CopyIcon, Dialog, DialogHeader, ExternalLinkIcon } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 import { analytics } from '@shared/utils/analytics';
@@ -15,7 +15,6 @@ import { FormAddressDisplayer } from '@app/components/address-displayer/form-add
 import { InfoCardBtn, InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';
 import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
 import { Card, Footer } from '@app/components/layout';
-import { DialogHeader } from '@app/components/layout/dialog-header';
 import { useToast } from '@app/features/toasts/use-toast';
 
 import { InscriptionPreviewCard } from '../../../components/inscription-preview-card/inscription-preview-card';
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 1c5f51bfe7f..8b2b093ea0f 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
@@ -4,9 +4,8 @@ import { Virtuoso } from 'react-virtuoso';
 
 import { Box } from 'leather-styles/jsx';
 
-import { Dialog } from '@leather.io/ui';
+import { Dialog, DialogHeader } from '@leather.io/ui';
 
-import { DialogHeader } from '@app/components/layout/dialog-header';
 import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { VirtuosoWrapper } from '@app/ui/components/virtuoso';
diff --git a/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx
index 2a0c9a9fb58..5733b032f5b 100644
--- a/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx
+++ b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx
@@ -1,9 +1,7 @@
-import { Dialog } from '@leather.io/ui';
+import { Dialog, DialogHeader } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 
-import { DialogHeader } from '@app/components/layout/dialog-header';
-
 import { useSwapNavigate } from '../../hooks/use-swap-navigate';
 import { useSwapContext } from '../../swap.context';
 import { SwapAssetList } from './components/swap-asset-list';
diff --git a/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx
index afd7a6041c8..c387b560347 100644
--- a/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx
+++ b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx
@@ -1,9 +1,7 @@
-import { Dialog } from '@leather.io/ui';
+import { Dialog, DialogHeader } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 
-import { DialogHeader } from '@app/components/layout/dialog-header';
-
 import { useSwapNavigate } from '../../hooks/use-swap-navigate';
 import { useSwapContext } from '../../swap.context';
 import { SwapAssetList } from './components/swap-asset-list';