fix: rename dialog as sheet, closes ref leather-io/issues#268

package.json

@@ -144,7 +144,7 @@
     "@leather.io/query": "2.7.0",
     "@leather.io/stacks": "1.0.2",
     "@leather.io/tokens": "0.9.0",
-    "@leather.io/ui": "1.14.2",
+    "@leather.io/ui": "1.14.3",
     "@leather.io/utils": "0.13.2",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.4.0",

src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx

@@ -4,17 +4,17 @@ import GenericError from '@assets/images/generic-error.png';
 import { Flex, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
-import { Button, Dialog, DialogHeader } from '@leather.io/ui';
+import { Button, Sheet, SheetHeader } from '@leather.io/ui';
 
-export function BroadcastErrorDialog() {
+export function BroadcastErrorSheet() {
   const navigate = useNavigate();
   const location = useLocation();
   const message = get(location.state, 'message', '');
 
   return (
-    <Dialog
+    <Sheet
       isShowing
-      header={<DialogHeader />}
+      header={<SheetHeader />}
       onClose={() => navigate('..')}
       footer={
         <Button fullWidth onClick={() => navigate('..')} mt="space.05">
@@ -40,6 +40,6 @@ export function BroadcastErrorDialog() {
           {message && <>because of the error: {message.toLowerCase()}</>}
         </styled.span>
       </Flex>
-    </Dialog>
+    </Sheet>
   );
 }

src/app/features/container/container.tsx

@@ -11,7 +11,7 @@ import {
 } from '@app/common/app-analytics';
 import { ContainerLayout } from '@app/components/layout';
 import { LoadingSpinner } from '@app/components/loading-spinner';
-import { SwitchAccountDialog } from '@app/features/dialogs/switch-account-dialog/switch-account-dialog';
+import { SwitchAccountSheet } from '@app/features/dialogs/switch-account-dialog/switch-account-dialog';
 import { InAppMessages } from '@app/features/hiro-messages/in-app-messages';
 import { useOnChangeAccount } from '@app/routes/hooks/use-on-change-account';
 import { useOnSignOut } from '@app/routes/hooks/use-on-sign-out';
@@ -43,7 +43,7 @@ export function Container() {
   return (
     <>
       {isShowingSwitchAccount && (
-        <SwitchAccountDialog
+        <SwitchAccountSheet
           isShowing={isShowingSwitchAccount}
           onClose={() => setIsShowingSwitchAccount(false)}
         />

src/app/features/dialogs/edit-nonce-dialog/edit-nonce-dialog.tsx

@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import { Stack, styled } from 'leather-styles/jsx';
 
-import { Dialog, DialogHeader, Link } from '@leather.io/ui';
+import { Link, Sheet, SheetHeader } from '@leather.io/ui';
 
 import { StacksSendFormValues, StacksTransactionFormValues } from '@shared/models/form.model';
 
@@ -15,7 +15,7 @@ import { EditNonceForm } from './components/edit-nonce-form';
 
 const url = 'https://leather.gitbook.io/guides/transactions/nonces';
 
-export function EditNonceDialog() {
+export function EditNonceSheet() {
   const { errors, setFieldError, setFieldValue, validateField, values } = useFormikContext<
     StacksSendFormValues | StacksTransactionFormValues
   >();
@@ -47,7 +47,7 @@ export function EditNonceDialog() {
   }, [loadedNextNonce, onGoBack, setFieldError, setFieldValue, values.nonce]);
 
   return (
-    <Dialog isShowing onClose={onClose} header={<DialogHeader title="Edit nonce" />}>
+    <Sheet isShowing onClose={onClose} header={<SheetHeader 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.
@@ -57,6 +57,6 @@ export function EditNonceDialog() {
         </styled.span>
         <EditNonceForm onBlur={onBlur} onClose={onClose} onSubmit={onSubmit} />
       </Stack>
-    </Dialog>
+    </Sheet>
   );
 }

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, DialogHeader, Spinner } from '@leather.io/ui';
+import { Caption, Sheet, SheetHeader, Spinner } from '@leather.io/ui';
 import { btcToSat, createMoney, formatMoney } from '@leather.io/utils';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -20,7 +20,7 @@ import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/account
 import { IncreaseFeeActions } from './components/increase-fee-actions';
 import { useBtcIncreaseFee } from './hooks/use-btc-increase-fee';
 
-export function IncreaseBtcFeeDialog() {
+export function IncreaseBtcFeeSheet() {
   const tx = useLocationStateWithCache('btcTx') as BitcoinTx;
   const navigate = useNavigate();
   const location = useLocation();
@@ -60,10 +60,10 @@ export function IncreaseBtcFeeDialog() {
         validationSchema={validationSchema}
       >
         <>
-          <Dialog
+          <Sheet
             isShowing={location.pathname === RouteUrls.IncreaseBtcFee}
             onClose={onClose}
-            header={<DialogHeader title="Increase fee" />}
+            header={<SheetHeader title="Increase fee" />}
             footer={
               <IncreaseFeeActions
                 isDisabled={isBroadcasting}
@@ -101,7 +101,7 @@ export function IncreaseBtcFeeDialog() {
                 </Stack>
               </Suspense>
             </Stack>
-          </Dialog>
+          </Sheet>
           <Outlet />
         </>
       </Formik>

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, DialogHeader, Spinner } from '@leather.io/ui';
+import { Caption, Sheet, SheetHeader, Spinner } from '@leather.io/ui';
 import { microStxToStx, stxToMicroStx } from '@leather.io/utils';
 
 import { RouteUrls } from '@shared/route-urls';
@@ -31,7 +31,7 @@ import { useSubmittedTransactionsActions } from '@app/store/submitted-transactio
 import { IncreaseFeeActions } from './components/increase-fee-actions';
 import { IncreaseFeeField } from './components/increase-fee-field';
 
-export function IncreaseStxFeeDialog() {
+export function IncreaseStxFeeSheet() {
   const navigate = useNavigate();
   const location = useLocation();
   const { txid } = useParams();
@@ -83,10 +83,10 @@ export function IncreaseStxFeeDialog() {
       >
         {props => (
           <>
-            <Dialog
+            <Sheet
               isShowing={location.pathname === RouteUrls.IncreaseStxFee.replace(':txid', txid)}
               onClose={() => navigate(RouteUrls.Home)}
-              header={<DialogHeader title="Increase fee" />}
+              header={<SheetHeader title="Increase fee" />}
               footer={
                 <IncreaseFeeActions
                   isDisabled={stxToMicroStx(props.values.fee).isEqualTo(fee)}
@@ -124,7 +124,7 @@ export function IncreaseStxFeeDialog() {
                   </Stack>
                 </Suspense>
               </Stack>
-            </Dialog>
+            </Sheet>
             <Outlet />
           </>
         )}

src/app/features/dialogs/leather-intro-dialog/leather-intro-dialog.tsx

@@ -8,15 +8,15 @@ import { analytics } from '@shared/utils/analytics';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 
 import {
-  LeatherIntroDialog,
-  LeatherIntroDialogPart1,
-  LeatherIntroDialogPart2,
+  LeatherIntroSheet,
+  LeatherIntroSheetPart1,
+  LeatherIntroSheetPart2,
 } from './leather-intro-steps';
 
-export const leatherIntroDialogRoutes = (
-  <Route element={<LeatherIntroDialogContainer />}>
-    <Route path="we-have-a-new-name" element={<LeatherIntroDialogPart1 />} />
-    <Route path="introducing-leather" element={<LeatherIntroDialogPart2 />} />
+export const leatherIntroSheetRoutes = (
+  <Route element={<LeatherIntroSheetContainer />}>
+    <Route path="we-have-a-new-name" element={<LeatherIntroSheetPart1 />} />
+    <Route path="introducing-leather" element={<LeatherIntroSheetPart2 />} />
   </Route>
 );
 
@@ -27,15 +27,15 @@ interface IntroContextProps {
 }
 const introContext = createContext<IntroContextProps | null>(null);
 
-const { Provider: LeatherIntroDialogProvider } = introContext;
+const { Provider: LeatherIntroSheetProvider } = introContext;
 
-export function useLeatherIntroDialogContext() {
+export function useLeatherIntroSheetContext() {
   const context = useContext(introContext);
-  if (!context) throw new Error('useLeatherIntroDialogContext must be used within a Provider');
+  if (!context) throw new Error('useLeatherIntroSheetContext must be used within a Provider');
   return context;
 }
 
-function LeatherIntroDialogContainer() {
+function LeatherIntroSheetContainer() {
   const navigate = useNavigate();
   async function onRevealNewName() {
     void analytics.track('new_brand_reveal_name');
@@ -54,10 +54,10 @@ function LeatherIntroDialogContainer() {
   }
 
   return (
-    <LeatherIntroDialogProvider value={{ onRevealNewName, onAcceptTerms, onRejectAndUninstall }}>
-      <LeatherIntroDialog>
+    <LeatherIntroSheetProvider value={{ onRevealNewName, onAcceptTerms, onRejectAndUninstall }}>
+      <LeatherIntroSheet>
         <Outlet />
-      </LeatherIntroDialog>
-    </LeatherIntroDialogProvider>
+      </LeatherIntroSheet>
+    </LeatherIntroSheetProvider>
   );
 }

src/app/features/dialogs/leather-intro-dialog/leather-intro-steps.tsx

@@ -11,9 +11,9 @@ import { HasChildren } from '@app/common/has-children';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 
 import { confettiConfig } from './confetti-config';
-import { useLeatherIntroDialogContext } from './leather-intro-dialog';
+import { useLeatherIntroSheetContext } from './leather-intro-dialog';
 
-export function LeatherIntroDialog({ children }: HasChildren) {
+export function LeatherIntroSheet({ children }: HasChildren) {
   return (
     <Dialog.Root defaultOpen>
       <Dialog.Content
@@ -28,8 +28,8 @@ export function LeatherIntroDialog({ children }: HasChildren) {
   );
 }
 
-export function LeatherIntroDialogPart1() {
-  const context = useLeatherIntroDialogContext();
+export function LeatherIntroSheetPart1() {
+  const context = useLeatherIntroSheetContext();
   const [showConfetti, setShowConfetti] = useState(false);
 
   return (
@@ -69,9 +69,9 @@ export function LeatherIntroDialogPart1() {
   );
 }
 
-export function LeatherIntroDialogPart2() {
+export function LeatherIntroSheetPart2() {
   const ref = useRef<HTMLVideoElement>(null);
-  const context = useLeatherIntroDialogContext();
+  const context = useLeatherIntroSheetContext();
 
   useLayoutEffect(() => {
     if (ref.current) ref.current.playbackRate = 0.65;

src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx

@@ -3,7 +3,7 @@ import { Virtuoso } from 'react-virtuoso';
 
 import { Box } from 'leather-styles/jsx';
 
-import { Button, Dialog, DialogHeader } from '@leather.io/ui';
+import { Button, Sheet, SheetHeader } from '@leather.io/ui';
 
 import { useCreateAccount } from '@app/common/hooks/account/use-create-account';
 import { useWalletType } from '@app/common/use-wallet-type';
@@ -15,12 +15,12 @@ import { VirtuosoWrapper } from '@app/ui/components/virtuoso';
 import { AccountListUnavailable } from './components/account-list-unavailable';
 import { SwitchAccountListItem } from './components/switch-account-list-item';
 
-interface SwitchAccountDialogProps {
+interface SwitchAccountSheetProps {
   isShowing: boolean;
   onClose(): void;
 }
 
-export const SwitchAccountDialog = memo(({ isShowing, onClose }: SwitchAccountDialogProps) => {
+export const SwitchAccountSheet = memo(({ isShowing, onClose }: SwitchAccountSheetProps) => {
   const currentAccountIndex = useCurrentAccountIndex();
   const createAccount = useCreateAccount();
   const { whenWallet } = useWalletType();
@@ -45,8 +45,8 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: SwitchAccountDi
   const accountNum = stacksAddressesNum || btcAddressesNum;
 
   return (
-    <Dialog
-      header={<DialogHeader title="Select account" />}
+    <Sheet
+      header={<SheetHeader title="Select account" />}
       isShowing={isShowing}
       onClose={onClose}
       wrapChildren={false}
@@ -77,6 +77,6 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: SwitchAccountDi
           )}
         />
       </VirtuosoWrapper>
-    </Dialog>
+    </Sheet>
   );
 });

src/app/features/feedback-button/feedback-button.tsx

@@ -6,7 +6,7 @@ import { analytics, sentryFeedback } from '@shared/utils/analytics';
 
 import { useThemeSwitcher } from '@app/common/theme-provider';
 
-export async function openFeedbackDialog() {
+export async function openFeedbackSheet() {
   void analytics.track('user_clicked_feedback_button');
   const form = await sentryFeedback.createForm();
   if (!form) return null;
@@ -39,7 +39,7 @@ export function FeedbackButton() {
           : undefined
       }
       zIndex={9}
-      onClick={openFeedbackDialog}
+      onClick={openFeedbackSheet}
     >
       <Flex>
         <Box mr="space.01" mt="2px">

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, DialogHeader } from '@leather.io/ui';
+import { Sheet, SheetHeader } from '@leather.io/ui';
 import { delay, isError } from '@leather.io/utils';
 
 import { finalizeAuthResponse } from '@shared/actions/finalize-auth-response';
@@ -181,13 +181,13 @@ export function LedgerSignJwtContainer() {
 
   return (
     <LedgerJwtSigningProvider value={ledgerContextValue}>
-      <Dialog
+      <Sheet
         isShowing
-        header={<DialogHeader />}
+        header={<SheetHeader />}
         onClose={canCancelLedgerAction ? () => onCancelConnectLedger() : undefined}
       >
         <Outlet />
-      </Dialog>
+      </Sheet>
     </LedgerJwtSigningProvider>
   );
 }