mobile compatible

renegade-fi · Oct 25, 2024 · e7722df · e7722df
1 parent 0b5cba1
commit e7722df
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 24 deletions.
diff --git a/components/dialogs/order-stepper/desktop/new-order-stepper.tsx b/components/dialogs/order-stepper/desktop/new-order-stepper.tsx
@@ -7,14 +7,7 @@ import { NewOrderFormProps } from "@/app/trade/[base]/components/new-order/new-o
 import { DefaultStep } from "@/components/dialogs/order-stepper/desktop/steps/default"
 import { SuccessStepWithoutSavings } from "@/components/dialogs/order-stepper/desktop/steps/success-without-savings"
 import { IOISection } from "@/components/dialogs/order-stepper/ioi-section"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
 
 import { cn } from "@/lib/utils"
 
@@ -64,15 +57,7 @@ export function NewOrderStepperInner({
               },
             )}
           >
-            <DialogHeader className="p-6">
-              <DialogTitle className="text-nowrap font-extended">
-                Indications of Interest
-              </DialogTitle>
-              <DialogDescription>
-                Optionally reveal order details for faster fills
-              </DialogDescription>
-            </DialogHeader>
-            <div className="space-y-6 px-6 pb-6">
+            <div className="space-y-6 p-6">
               <IOISection
                 {...props}
                 allowExternalMatches={allowExternalMatches}

diff --git a/components/dialogs/order-stepper/desktop/steps/default.tsx b/components/dialogs/order-stepper/desktop/steps/default.tsx
@@ -164,10 +164,6 @@ export function ConfirmOrderDisplay({
         </div>
       </div> */}
       <Separator />
-      <div className="space-y-3">
-        <div>Indications of Interest</div>
-      </div>
-      <Separator />
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <ResponsiveTooltip>

diff --git a/components/dialogs/order-stepper/ioi-section.tsx b/components/dialogs/order-stepper/ioi-section.tsx
@@ -11,6 +11,14 @@ export function IOISection(
 ) {
   return (
     <>
+      <div className="space-y-1.5">
+        <div className="font-extended text-lg font-semibold leading-none tracking-tight">
+          Indications of Interest
+        </div>
+        <div className="text-sm text-muted-foreground">
+          Optionally reveal order details for faster fills
+        </div>
+      </div>
       <div className="items-top flex">
         <Checkbox
           checked={props.allowExternalMatches}

diff --git a/components/dialogs/order-stepper/mobile/steps/confirm.tsx b/components/dialogs/order-stepper/mobile/steps/confirm.tsx
@@ -6,6 +6,7 @@ import { toast } from "sonner"
 
 import { NewOrderConfirmationProps } from "@/components/dialogs/order-stepper/desktop/new-order-stepper"
 import { ConfirmOrderDisplay } from "@/components/dialogs/order-stepper/desktop/steps/default"
+import { IOISection } from "@/components/dialogs/order-stepper/ioi-section"
 import { useStepper } from "@/components/dialogs/order-stepper/mobile/new-order-stepper"
 import { Button } from "@/components/ui/button"
 import {
@@ -14,14 +15,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog"
-import { ScrollArea } from "@/components/ui/scroll-area"
 
 import { usePrepareCreateOrder } from "@/hooks/use-prepare-create-order"
 import { usePriceQuery } from "@/hooks/use-price-query"
 import { constructStartToastMessage } from "@/lib/constants/task"
 import { decimalCorrectPrice } from "@/lib/utils"
 
 export function ConfirmStep(props: NewOrderConfirmationProps) {
+  const [allowExternalMatches, setAllowExternalMatches] = React.useState(false)
   const { onNext, setTaskId } = useStepper()
 
   const baseToken = Token.findByTicker(props.base)
@@ -40,6 +41,7 @@ export function ConfirmStep(props: NewOrderConfirmationProps) {
     side: props.isSell ? "sell" : "buy",
     amount: props.amount,
     worstCasePrice: worstCasePrice.toFixed(18),
+    allowExternalMatches,
   })
 
   const { createOrder } = useCreateOrder({
@@ -59,11 +61,18 @@ export function ConfirmStep(props: NewOrderConfirmationProps) {
 
   return (
     <>
-      <DialogHeader className="p-6 text-left">
+      <DialogHeader className="px-6 pt-6 text-left">
         <DialogTitle className="font-extended">Review Order</DialogTitle>
       </DialogHeader>
-      <div className="space-y-6 overflow-y-auto px-6">
+      <div className="flex flex-col gap-6 overflow-y-auto p-6">
         <ConfirmOrderDisplay {...props} />
+        <div className="space-y-6 border p-6">
+          <IOISection
+            {...props}
+            allowExternalMatches={allowExternalMatches}
+            setAllowExternalMatches={setAllowExternalMatches}
+          />
+        </div>
       </div>
       <DialogFooter className="mt-auto flex-row p-6 pt-0">
         <DialogClose asChild>