fix(mfi-ui): fix for ios pwa token dropdowns

packages/mrgn-ui/package.json

@@ -43,8 +43,7 @@
     "recharts": "^2.13.0",
     "superstruct": "^1.0.4",
     "vaul": "^0.9.0",
-    "zustand": "^4.4.1",
-    "react-focus-on": "^3.9.4"
+    "zustand": "^4.4.1"
   },
   "devDependencies": {
     "@mrgnlabs/eslint-config-custom": "*",

packages/mrgn-ui/src/components/action-box-v2/actions/loop-box/components/action-input/components/bank-select/components/bank-list/bank-list.tsx

@@ -62,6 +62,30 @@ export const BankList = ({
     }
   }, [isOpen]);
 
+  const isDisabled = React.useCallback(
+    (bank: ExtendedBankInfo) => {
+      const isBorrowing = actionMode === ActionType.Borrow;
+
+      let isDisabled = false;
+      const noNativeBalance = bank?.info.state.mint.equals(WSOL_MINT)
+        ? nativeSolBalance === 0
+        : bank?.userInfo.tokenAccount.balance === 0;
+
+      if (isBorrowing) {
+        const isLending = bank.isActive && bank.position.isLending;
+        const isOtherBank = otherBank?.address.equals(bank.address) ?? false;
+
+        isDisabled = isOtherBank || isLending || noNativeBalance;
+      } else {
+        const isBorrowing = bank.isActive && !bank.position.isLending;
+        isDisabled = isBorrowing || noNativeBalance;
+      }
+
+      return isDisabled;
+    },
+    [actionMode, otherBank, nativeSolBalance]
+  );
+
   return (
     <>
       <BankListCommand selectedBank={selectedBank} onClose={onClose} onSetSearchQuery={setSearchQuery}>
@@ -79,13 +103,7 @@ export const BankList = ({
                 onClose();
               }}
               className="cursor-pointer h-[55px] px-3 font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-mfi-action-box-accent data-[selected=true]:text-mfi-action-box-accent-foreground"
-              disabled={
-                actionMode === ActionType.Borrow
-                  ? otherBank?.address.equals(bank.address)
-                  : bank.info.state.mint.equals(WSOL_MINT)
-                  ? nativeSolBalance === 0
-                  : bank.userInfo.tokenAccount.balance === 0
-              }
+              disabled={isDisabled(bank)}
             >
               <BankItem
                 rate={calculateRate(bank)}

packages/mrgn-ui/src/components/action-box-v2/components/action-input/bank-list-command/bank-list-command.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { FocusOn } from "react-focus-on";
 import { IconX } from "@tabler/icons-react";
 import { ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 
@@ -17,28 +16,22 @@ export const BankListCommand = ({ selectedBank, onSetSearchQuery, onClose, child
   const isMobile = useIsMobile();
 
   return (
-    // Using FocusOn to handle focus of command input but only on desktop
-    <FocusOn onEscapeKey={onClose} onClickOutside={onClose} autoFocus={!isMobile}>
-      <Command
-        className="bg-mfi-action-box-background relative"
-        shouldFilter={false}
-        value={selectedBank?.address?.toString().toLowerCase() ?? ""}
-      >
-        <CommandInput
-          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"
-          onValueChange={(value) => onSetSearchQuery(value)}
-        />
-        <button
-          onClick={onClose}
-          className={cn("fixed z-50", isMobile ? "top-9 right-4" : "top-8 right-6")}
-          aria-label="Close"
-        >
-          <IconX size={18} className="opacity-50" />
-        </button>
-        <CommandList className="overflow-auto mt-[60px]">{children}</CommandList>
-      </Command>
-    </FocusOn>
+    <Command
+      className="bg-mfi-action-box-background relative"
+      shouldFilter={false}
+      value={selectedBank?.address?.toString().toLowerCase() ?? ""}
+    >
+      <CommandInput
+        placeholder="Search token..."
+        wrapperClassName="fixed mx-2 lg:mx-0 bg-mfi-action-box-background w-[calc(100%-50px)] md:w-[calc(100%-30px)] px-4 lg:pl-3 border rounded-lg border-border z-40 flex justify-between"
+        className="h-12"
+        autoFocus={true}
+        onValueChange={(value) => onSetSearchQuery(value)}
+      />
+      <button onClick={() => onClose()} className={cn("fixed z-50 top-8 ", isMobile ? "right-10" : "right-6")}>
+        <IconX size={18} className="opacity-50" />
+      </button>
+      <CommandList className="overflow-auto mt-[60px]">{children}</CommandList>
+    </Command>
   );
 };

packages/mrgn-ui/src/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>
   );
 };