Skip to content

Commit

Permalink
mobile: convert drawers to full screen dialogs
Browse files Browse the repository at this point in the history
  • Loading branch information
@sehyunc
sehyunc committed Sep 21, 2024
1 parent ea540d5 commit d56c237
Show file tree
Hide file tree
Showing 9 changed files with 231 additions and 321 deletions.
65 changes: 41 additions & 24 deletions app/trade/[base]/components/order-details/order-details-sheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,18 @@ import { OrderMetadata } from "@renegade-fi/react"
import { DetailsContent } from "@/app/trade/[base]/components/order-details/details-content"
import { EmptyContent } from "@/app/trade/[base]/components/order-details/empty-content"

import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerContent,
DrawerDescription,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
Sheet,
SheetContent,
Expand Down Expand Up @@ -58,23 +62,36 @@ export function OrderDetailsSheet({
)
}
return (
<Drawer>
<DrawerTrigger asChild>{children}</DrawerTrigger>
<DrawerContent className="max-h-[90dvh]">
<div className="overflow-auto">
<VisuallyHidden>
<DrawerHeader>
<DrawerTitle>Order Details</DrawerTitle>
<DrawerDescription>View order details</DrawerDescription>
</DrawerHeader>
</VisuallyHidden>
{order.fills.length ? (
<DetailsContent order={order} />
) : (
<EmptyContent order={order} />
)}
<Dialog>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="h-dvh p-0">
<div className="">
<ScrollArea className="max-h-[calc(100svh-64px)] overflow-auto">
<VisuallyHidden>
<DialogHeader>
<DialogTitle>Order Details</DialogTitle>
<DialogDescription>View order details</DialogDescription>
</DialogHeader>
</VisuallyHidden>
{order.fills.length ? (
<DetailsContent order={order} />
) : (
<EmptyContent order={order} />
)}
</ScrollArea>
<DialogFooter>
<DialogClose asChild>
<Button
className="font-extended text-lg"
size="xl"
variant="ghost"
>
Close
</Button>
</DialogClose>
</DialogFooter>
</div>
</DrawerContent>
</Drawer>
</DialogContent>
</Dialog>
)
}
16 changes: 7 additions & 9 deletions components/dialogs/order-stepper/mobile/new-order-stepper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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}
Expand All @@ -45,8 +43,8 @@ export function NewOrderStepperInner({
)}
{step === Step.SUCCESS && <SuccessStepWithoutSavings />}
</div>
</DrawerContent>
</Drawer>
</DialogContent>
</Dialog>
)
}

Expand Down
31 changes: 23 additions & 8 deletions components/dialogs/order-stepper/mobile/steps/confirm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@ 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 {
DialogClose,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { ScrollArea } from "@/components/ui/scroll-area"

import { usePrepareCreateOrder } from "@/hooks/use-prepare-create-order"
Expand Down Expand Up @@ -52,18 +57,28 @@ 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 flex-row">
<DialogClose asChild>
<Button
className="flex-1 font-extended text-lg"
size="xl"
variant="ghost"
>
Close
</Button>
</DialogClose>
<Button
autoFocus
className="font-extended"
className="flex-1 font-extended text-lg"
size="xl"
onClick={() => {
if (request instanceof Error) {
toast.error(request.message)
Expand All @@ -74,7 +89,7 @@ export function ConfirmStep(props: NewOrderConfirmationProps) {
>
{props.isSell ? "Sell" : "Buy"} {props.base}
</Button>
</DrawerFooter>
</DialogFooter>
</>
)
}
34 changes: 22 additions & 12 deletions components/dialogs/order-stepper/mobile/steps/default.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ import { NewOrderForm } from "@/app/trade/[base]/components/new-order/new-order-
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"
DialogClose,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { Separator } from "@/components/ui/separator"

export function DefaultStep(props: {
Expand All @@ -21,13 +21,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}
Expand All @@ -37,7 +37,17 @@ export function DefaultStep(props: {
<div className="pt-6">
<NewOrderForm {...props} />
</div>
<DrawerFooter />
<DialogFooter className="mt-auto">
<DialogClose asChild>
<Button
className="font-extended text-lg"
size="xl"
variant="ghost"
>
Close
</Button>
</DialogClose>
</DialogFooter>
</>
)
}
27 changes: 21 additions & 6 deletions components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -53,23 +58,33 @@ 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}
states={states}
/>
<DidYouKnowContent />
</div>
<DrawerFooter />
<DialogFooter className="mt-auto">
<DialogClose asChild>
<Button
className="font-extended text-lg"
size="xl"
variant="ghost"
>
Close
</Button>
</DialogClose>
</DialogFooter>
</>
)
}
Loading

0 comments on commit d56c237

Please sign in to comment.