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 a68718d60ca..22a026d18b9 100644 --- a/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx +++ b/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx @@ -6,6 +6,8 @@ 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'; export function BroadcastErrorDialog() { const navigate = useNavigate(); @@ -13,15 +15,26 @@ export function BroadcastErrorDialog() { const message = get(location.state, 'message', ''); return ( - navigate('..')}> + } + onClose={() => navigate('..')} + footer={ +
+ +
+ } + > @@ -31,9 +44,6 @@ export function BroadcastErrorDialog() { Your transaction failed to broadcast{' '} {message && <>because of the error: {message.toLowerCase()}} - ); diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx index 5b5ef3f67fb..8fc4ce04e31 100644 --- a/src/app/features/container/container.tsx +++ b/src/app/features/container/container.tsx @@ -24,9 +24,8 @@ import { ContainerLayout } from '@app/ui/components/containers/container.layout' import { NetworkModeBadge } from '@app/ui/components/containers/headers/components/network-mode-badge'; import { Header } from '@app/ui/components/containers/headers/header'; import { Flag } from '@app/ui/components/flag/flag'; -import { IconButton } from '@app/ui/components/icon-button/icon-button'; import { Logo } from '@app/ui/components/logo'; -import { CloseIcon, HamburgerIcon } from '@app/ui/icons/'; +import { HamburgerIcon } from '@app/ui/icons/'; import { useRestoreFormState } from '../popup-send-form-restoration/use-restore-form-state'; import { Settings } from '../settings/settings'; @@ -46,6 +45,7 @@ import { hideSettingsOnSm, isLandingPage, isNoHeaderPopup, + isSummaryPage, } from './utils/route-helpers'; export function Container() { @@ -100,6 +100,8 @@ export function Container() { if (!hasStateRehydrated) return ; const showLogoSm = variant === 'home' || isSessionLocked || isKnownPopupRoute(pathname); + const hideSettings = + isKnownPopupRoute(pathname) || isSummaryPage(pathname) || variant === 'onboarding'; return ( <> @@ -114,14 +116,10 @@ export function Container() { displayHeader ? (
} onClick={() => navigate(RouteUrls.Home)} /> - ) - } onGoBack={canGoBack(pathname) ? () => getOnGoBackLocation(pathname) : undefined} + onClose={isSummaryPage(pathname) ? () => navigate(RouteUrls.Home) : undefined} settingsMenu={ - isKnownPopupRoute(pathname) ? null : ( + hideSettings ? null : ( (); return ( } isShowing={isShowingHighFeeConfirmation} onClose={() => setIsShowingHighFeeConfirmation(false)} + footer={ +
+ + +
+ } > - {isShowingHighFeeConfirmation && ( - - - - - Are you sure you want to pay {values.fee} {values.feeCurrency} in fees for this - transaction? - - - - This action cannot be undone and the fees won't be returned, even if the transaction - fails. - openInNewTab(learnMoreUrl)} size="sm"> - Learn more - - - - - - - - )} + + + + + Are you sure you want to pay {values.fee} {values.feeCurrency} in fees for this + transaction? + + + + This action cannot be undone and the fees won't be returned, even if the transaction + fails. + openInNewTab(learnMoreUrl)} size="sm"> + Learn more + + + ); } 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 1321c5b4626..43606978d31 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,6 +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 { immediatelyAttemptLedgerConnection } from '../../hooks/use-when-reattempt-ledger-connection'; import { ConnectLedger } from './connect-ledger'; @@ -35,7 +36,7 @@ export function ConnectLedgerStart() { } return ( - navigate('../')}> + } onClose={() => navigate('../')}> 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 749fdd460f6..d41937fd3e6 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,6 +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 { Link } from '@app/ui/components/link/link'; import { LedgerTitle } from '../../components/ledger-title'; @@ -13,7 +14,7 @@ export function UnsupportedBrowserLayout() { const navigate = useNavigate(); return ( - navigate(-1)}> + } isShowing onClose={() => navigate(-1)}> }> Your browser isn't supported 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 8123674bd31..b7199b3b33d 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 @@ -4,6 +4,8 @@ import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon'; 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'; interface RetrieveTaprootToNativeSegwitLayoutProps { isBroadcasting: boolean; @@ -16,8 +18,19 @@ export function RetrieveTaprootToNativeSegwitLayout( ) { const { onClose, onApproveTransaction, isBroadcasting, children } = props; return ( - onClose()}> - + } + onClose={() => onClose()} + footer={ +
+ +
+ } + > + Retrieve Bitcoin deposited to
Taproot addresses @@ -34,19 +47,11 @@ export function RetrieveTaprootToNativeSegwitLayout( This transaction may take upwards of 30 minutes to confirm. {children} - + We recommend you check the URL for each "Uninscribed UTXO" listed above to ensure it displays no inscription. If it does display one, do not proceed with retrieval or you may lose it! - ); diff --git a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx index 55ffe3a0c7e..ce7e6ddf6a4 100644 --- a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx +++ b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx @@ -27,10 +27,11 @@ export function AllowDiagnosticsLayout({ onUserAllowDiagnostics, onUserDenyDiagnostics, }: AllowDiagnosticsLayoutProps) { + // this dialog cannot close without a footer action has no header return ( null} isShowing + onClose={() => null} footer={