From e7722dfcd9f7775fc4a17c6640533476f1906cc0 Mon Sep 17 00:00:00 2001
From: sehyunc <41171808+sehyunc@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:02:38 -0700
Subject: [PATCH] mobile compatible

---
 .../desktop/new-order-stepper.tsx             | 19 ++-----------------
 .../order-stepper/desktop/steps/default.tsx   |  4 ----
 .../dialogs/order-stepper/ioi-section.tsx     |  8 ++++++++
 .../order-stepper/mobile/steps/confirm.tsx    | 15 ++++++++++++---
 4 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/components/dialogs/order-stepper/desktop/new-order-stepper.tsx b/components/dialogs/order-stepper/desktop/new-order-stepper.tsx
index 8094830e..e9f28194 100644
--- 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
index 0d38c0ac..57967432 100644
--- 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
index f139781f..dc44f0c1 100644
--- 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
index 6aa92c38..25df48f3 100644
--- 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,7 +15,6 @@ 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"
@@ -22,6 +22,7 @@ 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>