chore: refactor DialogHeaders to simplify

leather-io · Apr 12, 2024 · 082e711 · 082e711
1 parent 32eba94
commit 082e711
Show file tree

Hide file tree

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

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

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

diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
@@ -18,7 +18,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';
 
@@ -61,7 +61,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/switch-account-dialog.tsx b/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx
@@ -10,15 +10,20 @@ import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitco
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useHasLedgerKeys } from '@app/store/ledger/ledger.selectors';
 import { Button } from '@app/ui/components/button/button';
-import { Dialog, DialogProps, getHeightOffset } from '@app/ui/components/containers/dialog/dialog';
+import { Dialog, getHeightOffset } 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 { virtuosoHeight, virtuosoStyles } from '@app/ui/shared/virtuoso';
 
 import { AccountListUnavailable } from './components/account-list-unavailable';
 import { SwitchAccountListItem } from './components/switch-account-list-item';
 
-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();
@@ -47,7 +52,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}
       footer={whenWallet({

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';
@@ -184,8 +184,8 @@ export function LedgerSignJwtContainer() {
     <LedgerJwtSigningProvider value={ledgerContextValue}>
       <Dialog
         isShowing
-        header={<Header variant="dialog" isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
-        onClose={isWaitingOnPerformedAction ? () => null : () => onCancelConnectLedger}
+        header={<DialogHeader isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
+        onClose={isWaitingOnPerformedAction ? undefined : () => onCancelConnectLedger}
       >
         <Outlet />
       </Dialog>

diff --git a/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx b/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx
@@ -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';
@@ -155,8 +155,8 @@ function LedgerSignStacksMsg({ account, unsignedMessage }: LedgerSignMsgProps) {
       <Dialog
         onGoBack={allowUserToGoBack ? () => navigate(-1) : undefined}
         isShowing
-        header={<Header variant="dialog" isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
-        onClose={isWaitingOnPerformedAction ? () => null : () => ledgerNavigate.cancelLedgerAction}
+        header={<DialogHeader isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
+        onClose={isWaitingOnPerformedAction ? undefined : () => ledgerNavigate.cancelLedgerAction}
       >
         <Outlet />
       </Dialog>

diff --git a/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx b/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx
@@ -2,7 +2,7 @@ import { Outlet, useNavigate } 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 { LedgerRequestKeysContext, LedgerRequestKeysProvider } from './ledger-request-keys.context';
 
@@ -23,7 +23,7 @@ export function RequestKeysFlow({
     <LedgerRequestKeysProvider value={context}>
       <Dialog
         isShowing
-        header={<Header variant="dialog" isWaitingOnPerformedAction={isActionCancellableByUser} />}
+        header={<DialogHeader isWaitingOnPerformedAction={isActionCancellableByUser} />}
         // clean this up
         onClose={
           isActionCancellableByUser

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
@@ -3,7 +3,7 @@ import { Outlet, useNavigate } 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';
@@ -29,8 +29,8 @@ export function TxSigningFlow({
       <Dialog
         onGoBack={allowUserToGoBack ? () => navigate(-1) : undefined}
         isShowing
-        header={<Header variant="dialog" isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
-        onClose={isWaitingOnPerformedAction ? () => null : () => closeAction}
+        header={<DialogHeader isWaitingOnPerformedAction={isWaitingOnPerformedAction} />}
+        onClose={isWaitingOnPerformedAction ? undefined : () => closeAction}
       >
         <Outlet />
       </Dialog>

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">

diff --git a/...retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx b/...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
@@ -10,13 +10,18 @@ import { NetworkListItem } from '@app/features/settings/network/network-list-ite
 import { useCurrentNetworkState, useNetworksActions } from '@app/store/networks/networks.hooks';
 import { useNetworks } from '@app/store/networks/networks.selectors';
 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';
 
 const defaultNetworkIds = Object.values(WalletDefaultNetworkConfigurationIds) as string[];
 
-export function NetworkDialog({ isShowing, onClose }: DialogProps) {
+export interface NetworkDialogProps {
+  isShowing: boolean;
+  onClose(): void;
+}
+
+export function NetworkDialog({ isShowing, onClose }: NetworkDialogProps) {
   const navigate = useNavigate();
   const networks = useNetworks();
   const analytics = useAnalytics();
@@ -40,7 +45,7 @@ export function NetworkDialog({ isShowing, onClose }: DialogProps) {
 
   return (
     <Dialog
-      header={<Header variant="dialog" title="Change network" />}
+      header={<DialogHeader title="Change network" />}
       isShowing={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
@@ -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
@@ -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, DialogProps } 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';
 
@@ -25,11 +25,7 @@ export function ThemeDialog({ isShowing, onClose }: DialogProps) {
   const { userSelectedTheme } = useThemeSwitcher();
 
   return (
-    <Dialog
-      header={<Header variant="dialog" title="Change theme" />}
-      isShowing={isShowing}
-      onClose={onClose}
-    >
+    <Dialog header={<DialogHeader title="Change theme" />} isShowing={isShowing} onClose={onClose}>
       {themes.map(theme => (
         <ThemeListItem
           key={theme}

diff --git a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
@@ -27,11 +27,9 @@ export function AllowDiagnosticsLayout({
   onUserAllowDiagnostics,
   onUserDenyDiagnostics,
 }: AllowDiagnosticsLayoutProps) {
-  // this dialog cannot close without a footer action has no header
   return (
     <Dialog
       isShowing
-      onClose={() => null}
       footer={
         <Footer>
           <Flex flexDirection="row" gap="space.04">

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
@@ -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';
@@ -50,7 +50,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
@@ -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)}