From 34fa6becdd115ad917bf6156a624910722a1e478 Mon Sep 17 00:00:00 2001
From: sehyunc <41171808+sehyunc@users.noreply.github.com>
Date: Sat, 21 Sep 2024 13:52:49 -0700
Subject: [PATCH] mobile: convert drawers to full screen dialogs

---
 .../order-details/order-details-sheet.tsx     |  32 ++--
 .../mobile/new-order-stepper.tsx              |  16 +-
 .../order-stepper/mobile/steps/confirm.tsx    |  17 +-
 .../order-stepper/mobile/steps/default.tsx    |  22 +--
 .../mobile/steps/success-without-savings.tsx  |  27 ++-
 .../order-stepper/mobile/steps/success.tsx    | 159 ------------------
 components/dialogs/sign-in-dialog.tsx         |  57 +++----
 components/dialogs/token-select-dialog.tsx    |  36 ++--
 .../dialogs/transfer/transfer-dialog.tsx      |  90 +++++-----
 9 files changed, 153 insertions(+), 303 deletions(-)
 delete mode 100644 components/dialogs/order-stepper/mobile/steps/success.tsx

diff --git a/app/trade/[base]/components/order-details/order-details-sheet.tsx b/app/trade/[base]/components/order-details/order-details-sheet.tsx
index 5bc4e473..8503a17c 100644
--- a/app/trade/[base]/components/order-details/order-details-sheet.tsx
+++ b/app/trade/[base]/components/order-details/order-details-sheet.tsx
@@ -5,13 +5,13 @@ import { DetailsContent } from "@/app/trade/[base]/components/order-details/deta
 import { EmptyContent } from "@/app/trade/[base]/components/order-details/empty-content"
 
 import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/components/ui/drawer"
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
 import {
   Sheet,
   SheetContent,
@@ -58,15 +58,15 @@ export function OrderDetailsSheet({
     )
   }
   return (
-    <Drawer>
-      <DrawerTrigger asChild>{children}</DrawerTrigger>
-      <DrawerContent className="max-h-[90dvh]">
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="h-dvh p-0">
         <div className="overflow-auto">
           <VisuallyHidden>
-            <DrawerHeader>
-              <DrawerTitle>Order Details</DrawerTitle>
-              <DrawerDescription>View order details</DrawerDescription>
-            </DrawerHeader>
+            <DialogHeader>
+              <DialogTitle>Order Details</DialogTitle>
+              <DialogDescription>View order details</DialogDescription>
+            </DialogHeader>
           </VisuallyHidden>
           {order.fills.length ? (
             <DetailsContent order={order} />
@@ -74,7 +74,7 @@ export function OrderDetailsSheet({
             <EmptyContent order={order} />
           )}
         </div>
-      </DrawerContent>
-    </Drawer>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/components/dialogs/order-stepper/mobile/new-order-stepper.tsx b/components/dialogs/order-stepper/mobile/new-order-stepper.tsx
index bbd15f20..2692baeb 100644
--- a/components/dialogs/order-stepper/mobile/new-order-stepper.tsx
+++ b/components/dialogs/order-stepper/mobile/new-order-stepper.tsx
@@ -4,8 +4,7 @@ import { NewOrderConfirmationProps } from "@/components/dialogs/order-stepper/de
 import { ConfirmStep } from "@/components/dialogs/order-stepper/mobile/steps/confirm"
 import { DefaultStep } from "@/components/dialogs/order-stepper/mobile/steps/default"
 import { SuccessStepWithoutSavings } from "@/components/dialogs/order-stepper/mobile/steps/success-without-savings"
-import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer"
-import { ScrollArea } from "@/components/ui/scroll-area"
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
 
 export function NewOrderStepperInner({
   children,
@@ -23,17 +22,16 @@ export function NewOrderStepperInner({
   }
 
   return (
-    <Drawer
-      scrollLockTimeout={0}
+    <Dialog
       onOpenChange={() => {
         setLockedFormValues(null)
         setStep(Step.DEFAULT)
         setTaskId("")
       }}
     >
-      <DrawerTrigger asChild>{children}</DrawerTrigger>
-      <DrawerContent className="max-h-[90dvh]">
-        <div className="overflow-auto">
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="h-dvh p-0">
+        <div className="flex flex-col overflow-auto">
           {step === Step.DEFAULT && (
             <DefaultStep
               {...props}
@@ -45,8 +43,8 @@ export function NewOrderStepperInner({
           )}
           {step === Step.SUCCESS && <SuccessStepWithoutSavings />}
         </div>
-      </DrawerContent>
-    </Drawer>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/components/dialogs/order-stepper/mobile/steps/confirm.tsx b/components/dialogs/order-stepper/mobile/steps/confirm.tsx
index a5565311..363ea460 100644
--- a/components/dialogs/order-stepper/mobile/steps/confirm.tsx
+++ b/components/dialogs/order-stepper/mobile/steps/confirm.tsx
@@ -7,7 +7,7 @@ import { NewOrderConfirmationProps } from "@/components/dialogs/order-stepper/de
 import { ConfirmOrderDisplay } from "@/components/dialogs/order-stepper/desktop/steps/default"
 import { useStepper } from "@/components/dialogs/order-stepper/mobile/new-order-stepper"
 import { Button } from "@/components/ui/button"
-import { DrawerFooter, DrawerHeader, DrawerTitle } from "@/components/ui/drawer"
+import { DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { ScrollArea } from "@/components/ui/scroll-area"
 
 import { usePrepareCreateOrder } from "@/hooks/use-prepare-create-order"
@@ -52,18 +52,19 @@ export function ConfirmStep(props: NewOrderConfirmationProps) {
 
   return (
     <>
-      <DrawerHeader className="text-left">
-        <DrawerTitle className="font-extended">Review Order</DrawerTitle>
-      </DrawerHeader>
+      <DialogHeader className="p-6 text-left">
+        <DialogTitle className="font-extended">Review Order</DialogTitle>
+      </DialogHeader>
       <ScrollArea className="max-h-dvh overflow-auto">
-        <div className="space-y-6 p-4">
+        <div className="space-y-6 p-6">
           <ConfirmOrderDisplay {...props} />
         </div>
       </ScrollArea>
-      <DrawerFooter>
+      <DialogFooter className="mt-auto">
         <Button
           autoFocus
-          className="font-extended"
+          className="font-extended text-lg"
+          size="xl"
           onClick={() => {
             if (request instanceof Error) {
               toast.error(request.message)
@@ -74,7 +75,7 @@ export function ConfirmStep(props: NewOrderConfirmationProps) {
         >
           {props.isSell ? "Sell" : "Buy"} {props.base}
         </Button>
-      </DrawerFooter>
+      </DialogFooter>
     </>
   )
 }
diff --git a/components/dialogs/order-stepper/mobile/steps/default.tsx b/components/dialogs/order-stepper/mobile/steps/default.tsx
index 8c157acb..7e4001d1 100644
--- a/components/dialogs/order-stepper/mobile/steps/default.tsx
+++ b/components/dialogs/order-stepper/mobile/steps/default.tsx
@@ -4,14 +4,11 @@ import { AssetsSection } from "@/app/trade/[base]/components/new-order/assets-se
 import { NewOrderForm } from "@/app/trade/[base]/components/new-order/new-order-form"
 
 import { NewOrderConfirmationProps } from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
-import { Button } from "@/components/ui/button"
 import {
-  DrawerClose,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-} from "@/components/ui/drawer"
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
 import { Separator } from "@/components/ui/separator"
 
 export function DefaultStep(props: {
@@ -21,13 +18,13 @@ export function DefaultStep(props: {
 }) {
   return (
     <>
-      <DrawerHeader className="p-0">
+      <DialogHeader className="p-0">
         <VisuallyHidden>
-          <DrawerTitle>Place Order</DrawerTitle>
-          <DrawerDescription>Place a new order.</DrawerDescription>
+          <DialogTitle>Place Order</DialogTitle>
+          <DialogDescription>Place a new order.</DialogDescription>
         </VisuallyHidden>
-      </DrawerHeader>
-      <div className="p-6">
+      </DialogHeader>
+      <div className="mt-6 p-6">
         <AssetsSection
           disabled
           base={props.base}
@@ -37,7 +34,6 @@ export function DefaultStep(props: {
       <div className="pt-6">
         <NewOrderForm {...props} />
       </div>
-      <DrawerFooter />
     </>
   )
 }
diff --git a/components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx b/components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx
index b68acfb9..040a8f73 100644
--- a/components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx
+++ b/components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx
@@ -8,8 +8,13 @@ import { useStepper } from "@/components/dialogs/order-stepper/mobile/new-order-
 import { DidYouKnowContent } from "@/components/did-you-know-content"
 import { OrderStatusDisplay } from "@/components/order-status-display"
 import { Button } from "@/components/ui/button"
-import { DialogDescription, DialogTitle } from "@/components/ui/dialog"
-import { DrawerClose, DrawerFooter, DrawerHeader } from "@/components/ui/drawer"
+import {
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
 
 const states: TaskState[] = [
   "Proving",
@@ -53,15 +58,15 @@ export function SuccessStepWithoutSavings() {
 
   return (
     <>
-      <DrawerHeader className="text-left">
-        <DialogTitle className="flex items-center gap-2 font-extended">
+      <DialogHeader className="text-left">
+        <DialogTitle className="flex items-center gap-2 p-6 font-extended">
           {Icon}
           {title}
         </DialogTitle>
         <VisuallyHidden>
           <DialogDescription>Your order has been placed.</DialogDescription>
         </VisuallyHidden>
-      </DrawerHeader>
+      </DialogHeader>
       <div className="space-y-6 p-6 pb-0">
         <OrderStatusDisplay
           currentStatus={orderStatus}
@@ -69,7 +74,17 @@ export function SuccessStepWithoutSavings() {
         />
         <DidYouKnowContent />
       </div>
-      <DrawerFooter />
+      <DialogFooter className="mt-auto">
+        <DialogClose asChild>
+          <Button
+            autoFocus
+            className="font-extended text-lg"
+            size="xl"
+          >
+            Close
+          </Button>
+        </DialogClose>
+      </DialogFooter>
     </>
   )
 }
diff --git a/components/dialogs/order-stepper/mobile/steps/success.tsx b/components/dialogs/order-stepper/mobile/steps/success.tsx
deleted file mode 100644
index 74cc21bb..00000000
--- a/components/dialogs/order-stepper/mobile/steps/success.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import * as React from "react"
-
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
-import { useTaskHistoryWebSocket } from "@renegade-fi/react"
-import { Repeat } from "lucide-react"
-
-import {
-  NewOrderConfirmationProps,
-  useStepper,
-} from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
-import { GlowText } from "@/components/glow-text"
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import {
-  DialogClose,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import {
-  DrawerClose,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-} from "@/components/ui/drawer"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Spinner } from "@/components/ui/spinner"
-
-import { useMediaQuery } from "@/hooks/use-media-query"
-import { formatCurrency } from "@/lib/format"
-
-export function SuccessStep(props: NewOrderConfirmationProps) {
-  const isDesktop = useMediaQuery("(min-width: 1024px)")
-  const { taskId } = useStepper()
-  const [status, setStatus] = React.useState<"pending" | "success" | "error">(
-    "pending",
-  )
-
-  useTaskHistoryWebSocket({
-    onUpdate(task) {
-      if (task.id === taskId) {
-        if (task.state === "Completed") {
-          setStatus("success")
-        } else if (task.state === "Failed") {
-          setStatus("error")
-        }
-      }
-    },
-  })
-
-  const title =
-    status === "pending"
-      ? "Placing Order"
-      : status === "success"
-        ? "Order Placed"
-        : "Failed to Place Order"
-  const description =
-    status === "pending"
-      ? "Your order is being placed."
-      : status === "success"
-        ? "Your order has been placed."
-        : "Your order has failed."
-
-  if (isDesktop) {
-    return (
-      <>
-        <DialogHeader className="space-y-4 px-6 pt-6">
-          <DialogTitle className="flex items-center font-extended">
-            {title}
-            {status === "pending" && <Spinner className="ml-2 h-5 w-5" />}
-          </DialogTitle>
-          <VisuallyHidden>
-            <DialogDescription>{description}</DialogDescription>
-          </VisuallyHidden>
-        </DialogHeader>
-        <div className="space-y-6 p-6">
-          <OrderSuccessSection {...props} />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button
-              autoFocus
-              className="flex-1 border-x-0 border-b-0 border-t font-extended text-2xl"
-              size="xl"
-              variant="outline"
-            >
-              Close
-            </Button>
-          </DialogClose>
-        </DialogFooter>
-      </>
-    )
-  }
-
-  return (
-    <>
-      <DrawerHeader className="text-left">
-        <DrawerTitle className="font-extended">{title}</DrawerTitle>
-      </DrawerHeader>
-      <ScrollArea className="max-h-[60dvh] overflow-auto">
-        <div className="space-y-6 p-4">
-          <OrderSuccessSection {...props} />
-        </div>
-      </ScrollArea>
-      <DrawerFooter className="pt-2">
-        <DrawerClose asChild>
-          <Button
-            autoFocus
-            variant="outline"
-          >
-            Close
-          </Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </>
-  )
-}
-
-function OrderSuccessSection({ predictedSavings }: NewOrderConfirmationProps) {
-  const savingsLabel = predictedSavings
-    ? formatCurrency(predictedSavings)
-    : "--"
-  return (
-    <>
-      <div className="flex flex-col items-center space-y-4 text-pretty text-center">
-        <div>You&apos;re estimated to save</div>
-        <GlowText
-          className="bg-green-price text-4xl"
-          enabled={!!predictedSavings && savingsLabel !== "$0.00"}
-          text={savingsLabel}
-        />
-        <div>when your order fills at the realtime Binance midpoint price.</div>
-      </div>
-      <div className="border p-4 text-sm text-muted-foreground">
-        <div className="flex items-start justify-between">
-          Did you know?
-          <Button
-            className="rounded-none"
-            size="icon"
-            variant="ghost"
-          >
-            <Repeat className="h-4 w-4" />
-          </Button>
-        </div>
-        <div>All trades are pre-trade and post-trade private.</div>
-      </div>
-      <div className="flex items-center space-x-2 text-sm text-muted-foreground">
-        <Checkbox id="donot-show-again" />
-        <label
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-          htmlFor="donot-show-again"
-        >
-          Don&apos;t show again
-        </label>
-      </div>
-    </>
-  )
-}
diff --git a/components/dialogs/sign-in-dialog.tsx b/components/dialogs/sign-in-dialog.tsx
index 277605a6..65f45985 100644
--- a/components/dialogs/sign-in-dialog.tsx
+++ b/components/dialogs/sign-in-dialog.tsx
@@ -23,14 +23,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-} from "@/components/ui/drawer"
 
 import { useMediaQuery } from "@/hooks/use-media-query"
 import { STORAGE_REMEMBER_ME } from "@/lib/constants/storage"
@@ -186,32 +178,35 @@ export function SignInDialog({
   }
 
   return (
-    <Drawer
+    <Dialog
       open={open}
       onOpenChange={onOpenChange}
     >
-      <DrawerContent>
-        <DrawerHeader className="text-left">
-          <DrawerTitle>Unlock your Wallet</DrawerTitle>
-          <DrawerDescription>
-            To trade on Renegade, we require a one-time signature to create or
-            find your wallet on-chain.
-          </DrawerDescription>
-        </DrawerHeader>
-        <SignInContent />
-        <DrawerFooter>
-          <Button
-            className="font-extended"
-            disabled={isConnecting || signStatus === "pending"}
-            onClick={handleClick}
-          >
-            {signStatus === "pending" || isConnecting
-              ? "Confirm in wallet"
-              : "Sign in to Renegade"}
-          </Button>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
+      <DialogContent className="h-dvh p-0">
+        <div className="flex flex-col">
+          <DialogHeader className="p-6 text-left">
+            <DialogTitle>Unlock your Wallet</DialogTitle>
+            <DialogDescription>
+              To trade on Renegade, we require a one-time signature to create or
+              find your wallet on-chain.
+            </DialogDescription>
+          </DialogHeader>
+          <SignInContent />
+          <DialogFooter className="mt-auto">
+            <Button
+              className="font-extended text-lg"
+              disabled={isConnecting || signStatus === "pending"}
+              size="xl"
+              onClick={handleClick}
+            >
+              {signStatus === "pending" || isConnecting
+                ? "Confirm in wallet"
+                : "Sign in to Renegade"}
+            </Button>
+          </DialogFooter>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/components/dialogs/token-select-dialog.tsx b/components/dialogs/token-select-dialog.tsx
index 8e599415..bae10c85 100644
--- a/components/dialogs/token-select-dialog.tsx
+++ b/components/dialogs/token-select-dialog.tsx
@@ -17,14 +17,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/components/ui/drawer"
 import { Input } from "@/components/ui/input"
 import { ScrollArea } from "@/components/ui/scroll-area"
 
@@ -77,23 +69,29 @@ export function TokenSelectDialog({
   }
 
   return (
-    <Drawer
+    <Dialog
       open={open}
       onOpenChange={setOpen}
     >
-      <DrawerTrigger asChild>{children}</DrawerTrigger>
-      <DrawerContent className="max-h-[90dvh]">
-        <DrawerHeader className="space-y-4 text-left">
-          <DrawerTitle>Select Token</DrawerTitle>
-          <DrawerDescription>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent
+        className="h-dvh p-0"
+        onOpenAutoFocus={(e) => {
+          e.preventDefault()
+        }}
+      >
+        <DialogHeader className="mt-6 space-y-4 px-6 text-left">
+          <DialogTitle>Select Token</DialogTitle>
+          <DialogDescription>
             <Input
+              autoFocus={false}
               placeholder="Search tokens"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
-          </DrawerDescription>
-        </DrawerHeader>
-        <ScrollArea className="max-h-[50dvh] overflow-auto">
+          </DialogDescription>
+        </DialogHeader>
+        <ScrollArea className="max-h-dvh overflow-auto">
           <TokenList
             enabled={open}
             searchTerm={debouncedSearchTerm}
@@ -101,8 +99,8 @@ export function TokenSelectDialog({
             onClose={() => setOpen(false)}
           />
         </ScrollArea>
-      </DrawerContent>
-    </Drawer>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/components/dialogs/transfer/transfer-dialog.tsx b/components/dialogs/transfer/transfer-dialog.tsx
index 46532eaf..b1ef73b7 100644
--- a/components/dialogs/transfer/transfer-dialog.tsx
+++ b/components/dialogs/transfer/transfer-dialog.tsx
@@ -19,6 +19,7 @@ import { NumberInput } from "@/components/number-input"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -26,16 +27,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/components/ui/drawer"
 import {
   Form,
   FormControl,
@@ -178,17 +169,31 @@ export function TransferDialog({
   }
 
   return (
-    <Drawer
+    <Dialog
       open={open}
       onOpenChange={setOpen}
     >
-      <DrawerTrigger asChild>{children}</DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader className="p-0 pt-6">
-          <div className="flex flex-row border-y border-border font-extended">
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="h-dvh p-0">
+        <div className="flex flex-col">
+          <DialogHeader className="">
+            <VisuallyHidden>
+              <DialogTitle>
+                {direction === ExternalTransferDirection.Deposit
+                  ? "Deposit"
+                  : "Withdraw"}
+              </DialogTitle>
+              <DialogDescription>
+                {direction === ExternalTransferDirection.Deposit
+                  ? "Deposit tokens into Renegade"
+                  : "Withdraw tokens from Renegade"}
+              </DialogDescription>
+            </VisuallyHidden>
+          </DialogHeader>
+          <div className="mt-12 flex flex-row px-6 font-extended">
             <Button
               className={cn(
-                "flex-1 border-0 text-lg tracking-tight",
+                "flex-1 text-lg tracking-tight",
                 direction === ExternalTransferDirection.Deposit
                   ? "text-primary"
                   : "text-muted-foreground",
@@ -201,7 +206,7 @@ export function TransferDialog({
             </Button>
             <Button
               className={cn(
-                "border-l-1 flex-1 border-y-0 border-r-0 text-lg tracking-tight",
+                "flex-1 border-l-0 text-lg tracking-tight",
                 direction === ExternalTransferDirection.Withdraw
                   ? "text-primary"
                   : "text-muted-foreground",
@@ -213,27 +218,15 @@ export function TransferDialog({
               Withdraw
             </Button>
           </div>
-          <VisuallyHidden>
-            <DrawerTitle>
-              {direction === ExternalTransferDirection.Deposit
-                ? "Deposit"
-                : "Withdraw"}
-            </DrawerTitle>
-            <DrawerDescription>
-              {direction === ExternalTransferDirection.Deposit
-                ? "Deposit tokens into Renegade"
-                : "Withdraw tokens from Renegade"}
-            </DrawerDescription>
-          </VisuallyHidden>
-        </DrawerHeader>
-        <TransferForm
-          className="p-6"
-          direction={direction}
-          initialMint={mint}
-          onSuccess={() => setOpen(false)}
-        />
-      </DrawerContent>
-    </Drawer>
+          <TransferForm
+            className="p-6"
+            direction={direction}
+            initialMint={mint}
+            onSuccess={() => setOpen(false)}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 
@@ -464,7 +457,10 @@ function TransferForm({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
+      <form
+        className="flex flex-1 flex-col"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
         <div className={cn("space-y-8", className)}>
           <div className="grid w-full items-center gap-3">
             <FormField
@@ -569,9 +565,18 @@ function TransferForm({
             </Button>
           </DialogFooter>
         ) : (
-          <DrawerFooter>
+          <DialogFooter className="flex-1">
+            <DialogClose asChild>
+              <Button
+                className="font-extended text-lg"
+                size="xl"
+                variant="ghost"
+              >
+                Close
+              </Button>
+            </DialogClose>
             <Button
-              className="font-extended"
+              className="font-extended text-lg"
               disabled={
                 !form.formState.isValid ||
                 (direction === ExternalTransferDirection.Deposit &&
@@ -579,11 +584,12 @@ function TransferForm({
                 approveStatus === "pending" ||
                 depositStatus === "pending"
               }
+              size="xl"
               variant="default"
             >
               {buttonText}
             </Button>
-          </DrawerFooter>
+          </DialogFooter>
         )}
       </form>
     </Form>