fix: default to dialog version token dropdown on ios pwa

mrgnlabs · Dec 7, 2024 · b5f2794 · b5f2794
1 parent f2bd2b9
commit b5f2794
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 38 deletions.
diff --git a/.../components/action-box-v2/components/action-input/bank-list-command/bank-list-command.tsx b/.../components/action-box-v2/components/action-input/bank-list-command/bank-list-command.tsx
@@ -28,7 +28,7 @@ export const BankListCommand = ({ selectedBank, onSetSearchQuery, onClose, child
           placeholder="Search token..."
           wrapperClassName="fixed mx-2 lg:mx-0 bg-mfi-action-box-background w-[calc(100%-30px)] px-4 lg:pl-3 border rounded-lg border-border z-40 flex justify-between"
           className="h-12"
-          autoFocus={false}
+          autoFocus={true}
           onValueChange={(value) => onSetSearchQuery(value)}
         />
         <button onClick={() => onClose()} className={cn("fixed z-50", isMobile ? "top-9 right-4" : "top-8 right-6")}>

diff --git a/.../components/action-box-v2/components/action-input/bank-list-wrapper/bank-list-wrapper.tsx b/.../components/action-box-v2/components/action-input/bank-list-wrapper/bank-list-wrapper.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Desktop, Mobile } from "@mrgnlabs/mrgn-utils";
+import { useOs, useIsMobile, cn } from "@mrgnlabs/mrgn-utils";
 
 import {
   Dialog,
@@ -11,6 +11,7 @@ import {
   DialogTrigger,
 } from "~/components/ui/dialog";
 import { Drawer, DrawerContent, DrawerTrigger } from "~/components/ui/drawer";
+import { is } from "superstruct";
 
 type BankListWrapperProps = {
   isOpen: boolean;
@@ -27,41 +28,41 @@ export const BankListWrapper = ({
   Content,
   label = "Select Token",
 }: BankListWrapperProps) => {
-  return (
-    <>
-      <Desktop>
-        <Dialog open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
-          <DialogTrigger asChild>
-            <div>{Trigger}</div>
-          </DialogTrigger>
-          <DialogContent
-            className="p-4 bg-mfi-action-box-background m-0"
-            hideClose={true}
-            hidePadding={true}
-            size="sm"
-            position="top"
-          >
-            <DialogHeader className="sr-only">
-              <DialogTitle>{label}</DialogTitle>
-              <DialogDescription>Select a token to add to your wallet</DialogDescription>
-            </DialogHeader>
-            <div className="h-[500px] relative overflow-auto">{Content}</div>
-          </DialogContent>
-        </Dialog>
-      </Desktop>
-      <Mobile>
-        <Drawer open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
-          <DrawerTrigger asChild>
-            <div>{Trigger}</div>
-          </DrawerTrigger>
-          <DrawerContent className="h-full z-[55] mt-0" hideTopTrigger={true}>
-            <div className="pt-7 px-2 bg-mfi-action-box-background h-full">
-              <h3 className="text-2xl pl-3 mb-4 font-semibold">{label}</h3>
-              {Content}
-            </div>
-          </DrawerContent>
-        </Drawer>
-      </Mobile>
-    </>
+  const { isIOS, isPWA } = useOs();
+  const isMobile = useIsMobile();
+
+  const shouldShowDialog = !isMobile || (isIOS && isPWA);
+
+  return shouldShowDialog ? (
+    <Dialog open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
+      <DialogTrigger asChild>
+        <div>{Trigger}</div>
+      </DialogTrigger>
+      <DialogContent
+        className={cn("p-4 bg-mfi-action-box-background m-0", isIOS && isPWA && "justify-start")}
+        hideClose={true}
+        hidePadding={true}
+        size="sm"
+        position="top"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>{label}</DialogTitle>
+          <DialogDescription>Select a token to add to your wallet</DialogDescription>
+        </DialogHeader>
+        <div className="h-[500px] relative overflow-auto">{Content}</div>
+      </DialogContent>
+    </Dialog>
+  ) : (
+    <Drawer open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
+      <DrawerTrigger asChild>
+        <div>{Trigger}</div>
+      </DrawerTrigger>
+      <DrawerContent className="h-full z-[55] mt-0" hideTopTrigger={true}>
+        <div className="pt-7 px-2 bg-mfi-action-box-background h-full">
+          <h3 className="text-2xl pl-3 mb-4 font-semibold">{label}</h3>
+          {Content}
+        </div>
+      </DrawerContent>
+    </Drawer>
   );
 };