chore: fix onCloseDialog bug, show X on summary pages. Move dialog ac…

…tion buttons to container pattern
leather-io · Mar 21, 2024 · 91403ce · 91403ce
1 parent d820d76
commit 91403ce
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 65 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
@@ -6,22 +6,35 @@ 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();
   const location = useLocation();
   const message = get(location.state, 'message', '');
 
   return (
-    <Dialog isShowing onClose={() => navigate('..')}>
+    <Dialog
+      isShowing
+      header={<Header variant="dialog" />}
+      onClose={() => navigate('..')}
+      footer={
+        <Footer>
+          <Button fullWidth onClick={() => navigate('..')} mt="space.05">
+            Close
+          </Button>
+        </Footer>
+      }
+    >
       <Flex
         flexDirection="column"
         justifyContent="center"
         mx="space.06"
         mb="space.02"
         position="relative"
-        top="-24px"
         textAlign="center"
+        minHeight="30vh"
       >
         <styled.img src={GenericError} width="106px" height="72px" m="0 auto" />
         <styled.h1 mt="space.05" textStyle="heading.05">
@@ -31,9 +44,6 @@ export function BroadcastErrorDialog() {
           Your transaction failed to broadcast{' '}
           {message && <>because of the error: {message.toLowerCase()}</>}
         </styled.span>
-        <Button fullWidth onClick={() => navigate('..')} mt="space.05">
-          Close
-        </Button>
       </Flex>
     </Dialog>
   );

diff --git 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 <LoadingSpinner />;
 
   const showLogoSm = variant === 'home' || isSessionLocked || isKnownPopupRoute(pathname);
+  const hideSettings =
+    isKnownPopupRoute(pathname) || isSummaryPage(pathname) || variant === 'onboarding';
 
   return (
     <>
@@ -114,14 +116,10 @@ export function Container() {
           displayHeader ? (
             <Header
               variant={variant}
-              iconRight={
-                variant === 'summary' && (
-                  <IconButton icon={<CloseIcon />} onClick={() => navigate(RouteUrls.Home)} />
-                )
-              }
               onGoBack={canGoBack(pathname) ? () => getOnGoBackLocation(pathname) : undefined}
+              onClose={isSummaryPage(pathname) ? () => navigate(RouteUrls.Home) : undefined}
               settingsMenu={
-                isKnownPopupRoute(pathname) ? null : (
+                hideSettings ? null : (
                   <Settings
                     triggerButton={
                       <HamburgerIcon

diff --git a/src/app/features/container/utils/route-helpers.ts b/src/app/features/container/utils/route-helpers.ts
@@ -35,15 +35,14 @@ export function getPageVariant(pathname: RouteUrls) {
   if (isFundPage(pathname)) return 'fund';
   if (isHomePage(pathname)) return 'home';
   if (isOnboardingPage(pathname)) return 'onboarding';
-  if (isSummaryPage(pathname)) return 'summary';
   return 'page';
 }
 
 export function getIsSessionLocked(pathname: RouteUrls) {
   return pathname === RouteUrls.Unlock;
 }
 
-function isSummaryPage(pathname: RouteUrls) {
+export function isSummaryPage(pathname: RouteUrls) {
   /* TODO refactor the summary routes to make this cleaner
   we need to block going back from summary pages catching the dynamic routes:
   SentBtcTxSummary = '/sent/btc/:txId',

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
@@ -12,6 +12,8 @@ import {
 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 { Link } from '@app/ui/components/link/link';
 import { Caption } from '@app/ui/components/typography/caption';
 import { Title } from '@app/ui/components/typography/title';
@@ -36,39 +38,40 @@ export function HighFeeDialog({ learnMoreUrl, isShowing = false }: HighFeeDialog
   >();
   return (
     <Dialog
+      header={<Header variant="dialog" />}
       isShowing={isShowingHighFeeConfirmation}
       onClose={() => setIsShowingHighFeeConfirmation(false)}
+      footer={
+        <Footer flexDirection="row">
+          <Button
+            onClick={() => setIsShowingHighFeeConfirmation(false)}
+            variant="outline"
+            flexGrow={1}
+          >
+            Edit fee
+          </Button>
+          <Button onClick={() => handleSubmit()} type="submit" flexGrow={1}>
+            Yes, I'm sure
+          </Button>
+        </Footer>
+      }
     >
-      {isShowingHighFeeConfirmation && (
-        <Stack px="space.05" gap="space.05" pb="space.06">
-          <HStack>
-            <ErrorIcon color="red.action-primary-default" width="md" />
-            <Title>
-              Are you sure you want to pay {values.fee} {values.feeCurrency} in fees for this
-              transaction?
-            </Title>
-          </HStack>
-          <Caption>
-            This action cannot be undone and the fees won't be returned, even if the transaction
-            fails.
-            <Link onClick={() => openInNewTab(learnMoreUrl)} size="sm">
-              Learn more
-            </Link>
-          </Caption>
-          <HStack mt="space.05">
-            <Button
-              onClick={() => setIsShowingHighFeeConfirmation(false)}
-              width="50%"
-              variant="outline"
-            >
-              Edit fee
-            </Button>
-            <Button onClick={() => handleSubmit()} width="50%" type="submit">
-              Yes, I'm sure
-            </Button>
-          </HStack>
-        </Stack>
-      )}
+      <Stack px="space.05" gap="space.05" pb="space.06">
+        <HStack>
+          <ErrorIcon color="red.action-primary-default" width="md" />
+          <Title>
+            Are you sure you want to pay {values.fee} {values.feeCurrency} in fees for this
+            transaction?
+          </Title>
+        </HStack>
+        <Caption>
+          This action cannot be undone and the fees won't be returned, even if the transaction
+          fails.
+          <Link onClick={() => openInNewTab(learnMoreUrl)} size="sm">
+            Learn more
+          </Link>
+        </Caption>
+      </Stack>
     </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,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 (
-    <Dialog isShowing onClose={() => navigate('../')}>
+    <Dialog isShowing header={<Header variant="dialog" />} 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,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 (
-    <Dialog isShowing onClose={() => navigate(-1)}>
+    <Dialog header={<Header variant="dialog" />} 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
@@ -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 (
-    <Dialog isShowing onClose={() => onClose()}>
-      <Flex alignItems="start" flexDirection="column" mt="-45px" mx="space.06" textAlign="left">
+    <Dialog
+      isShowing
+      header={<Header variant="dialog" />}
+      onClose={() => onClose()}
+      footer={
+        <Footer flexDirection="row">
+          <Button onClick={onApproveTransaction} aria-busy={isBroadcasting} width="100%">
+            Retrieve bitcoin
+          </Button>
+        </Footer>
+      }
+    >
+      <Flex alignItems="start" flexDirection="column" mx="space.06" textAlign="left">
         <BtcAvatarIcon />
         <styled.span mt="space.04" textStyle="label.01">
           Retrieve Bitcoin deposited to <br /> Taproot addresses
@@ -34,19 +47,11 @@ export function RetrieveTaprootToNativeSegwitLayout(
           This transaction may take upwards of 30 minutes to confirm.
         </styled.span>
         {children}
-        <Callout variant="warning" mt="space.05">
+        <Callout variant="warning" mt="space.05" mb="space.05">
           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!
         </Callout>
-        <Button
-          onClick={onApproveTransaction}
-          aria-busy={isBroadcasting}
-          width="100%"
-          my="space.05"
-        >
-          Retrieve bitcoin
-        </Button>
       </Flex>
     </Dialog>
   );

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,10 +27,11 @@ export function AllowDiagnosticsLayout({
   onUserAllowDiagnostics,
   onUserDenyDiagnostics,
 }: AllowDiagnosticsLayoutProps) {
+  // this dialog cannot close without a footer action has no header
   return (
     <Dialog
-      onClose={() => null}
       isShowing
+      onClose={() => null}
       footer={
         <Footer>
           <Flex flexDirection="row" gap="space.04">

diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx
@@ -5,15 +5,13 @@ import { Flex, Grid, GridItem, HStack, styled } from 'leather-styles/jsx';
 
 import { ArrowLeftIcon, CloseIcon } from '@app/ui/icons';
 
-import { IconButton } from '../../icon-button/icon-button';
 import { BigTitleHeader } from './components/big-title-header';
 import { HeaderActionButton } from './components/header-action-button';
 
-type HeaderVariants = 'page' | 'home' | 'onboarding' | 'dialog' | 'bigTitle' | 'summary' | 'fund';
+type HeaderVariants = 'page' | 'home' | 'onboarding' | 'dialog' | 'bigTitle' | 'fund';
 
 export interface HeaderProps {
   variant: HeaderVariants;
-  iconRight?: ReactNode;
   isWaitingOnPerformedAction?: boolean;
   onClose?(): void;
   onGoBack?(): void;
@@ -27,7 +25,6 @@ export interface HeaderProps {
 
 export function Header({
   variant,
-  iconRight,
   isWaitingOnPerformedAction,
   onClose,
   onGoBack,
@@ -39,7 +36,6 @@ export function Header({
   logo,
 }: HeaderProps) {
   const logoItem = onGoBack || logo || account;
-  iconRight = variant === 'dialog' ? <IconButton icon={<CloseIcon />} onClick={onClose} /> : null;
 
   return (
     <styled.header
@@ -82,7 +78,15 @@ export function Header({
           <HStack alignItems="center" justifyContent="flex-end">
             {networkBadge}
             {totalBalance && totalBalance}
-            {variant !== 'onboarding' ? iconRight || settingsMenu : null}
+            {settingsMenu}
+            {variant !== 'bigTitle' && onClose && (
+              <HeaderActionButton
+                icon={<CloseIcon />}
+                dataTestId={SharedComponentsSelectors.HeaderCloseBtn}
+                isWaitingOnPerformedAction={isWaitingOnPerformedAction}
+                onAction={onClose}
+              />
+            )}
           </HStack>
         </GridItem>
       </Grid>