feat(mfi-v2-ui): lendbox keyboard nav

packages/mrgn-ui/src/components/action-box-v2/action-box.tsx

@@ -140,14 +140,16 @@ const BorrowLend = (
             {...combinedProps}
             requestedLendType={ActionType.Deposit}
             onCloseDialog={actionBoxProps.isDialog ? actionBoxProps.dialogProps?.onClose : undefined}
-            searchMode={shouldBeHidden}
+            searchMode={combinedProps.searchMode}
+            shouldBeHidden={shouldBeHidden}
             setShouldBeHidden={setShouldBeHidden}
           />
           <LendBox
             {...combinedProps}
             requestedLendType={ActionType.Borrow}
             onCloseDialog={actionBoxProps.isDialog ? actionBoxProps.dialogProps?.onClose : undefined}
-            searchMode={shouldBeHidden}
+            searchMode={combinedProps.searchMode}
+            shouldBeHidden={shouldBeHidden}
             setShouldBeHidden={setShouldBeHidden}
           />
         </ActionBoxNavigator>

packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/action-input.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 
-import { ActionType, ExtendedBankInfo, ValidatorStakeGroup } from "@mrgnlabs/marginfi-v2-ui-state";
-import { formatAmount } from "@mrgnlabs/mrgn-utils";
+import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
+import { formatAmount, useIsMobile } from "@mrgnlabs/mrgn-utils";
 import { tokenPriceFormatter, WSOL_MINT } from "@mrgnlabs/mrgn-common";
 
 import { Input } from "~/components/ui/input";
 import { LendingAction, BankSelect } from "./components";
-import { OracleSetup } from "@mrgnlabs/marginfi-client-v2";
 
 type ActionInputProps = {
   amountRaw: string;
@@ -51,6 +50,7 @@ export const ActionInput = ({
   setSelectedBank,
 }: ActionInputProps) => {
   const amountInputRef = React.useRef<HTMLInputElement>(null);
+  const isMobile = useIsMobile();
 
   const numberFormater = React.useMemo(() => new Intl.NumberFormat("en-US", { maximumFractionDigits: 10 }), []);
 
@@ -88,6 +88,12 @@ export const ActionInput = ({
     }
   }, [banks, selectedBank, isDepositingStakedCollat]);
 
+  React.useEffect(() => {
+    if (selectedBank && !isMobile) {
+      amountInputRef.current?.focus();
+    }
+  }, [selectedBank, isMobile]);
+
   return (
     <div className="rounded-lg p-2.5 bg-mfi-action-box-background-dark">
       <div className="flex justify-center gap-1 items-center font-medium text-3xl">

packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/lend-box.tsx

@@ -3,13 +3,11 @@ import React from "react";
 import Link from "next/link";
 
 import { WalletContextState } from "@solana/wallet-adapter-react";
-import { IconInfoCircle, IconSettings } from "@tabler/icons-react";
 
 import {
   ActiveBankInfo,
   ExtendedBankInfo,
   ActionType,
-  TokenAccountMap,
   AccountSummary,
   computeAccountSummary,
   DEFAULT_ACCOUNT_SUMMARY,
@@ -26,6 +24,7 @@ import {
   MultiStepToastHandle,
   PreviousTxn,
   usePrevious,
+  useIsMobile,
 } from "@mrgnlabs/mrgn-utils";
 
 import { ActionBoxContentWrapper, ActionButton, ActionSettingsButton } from "~/components/action-box-v2/components";
@@ -67,6 +66,7 @@ export type LendBoxProps = {
 
   searchMode?: boolean;
   onCloseDialog?: () => void;
+  shouldBeHidden?: boolean;
   setShouldBeHidden?: (hidden: boolean) => void;
 
   onComplete?: (previousTxn: PreviousTxn) => void;
@@ -95,6 +95,7 @@ export const LendBox = ({
   stakeAccounts,
   setDisplaySettings,
   onCloseDialog,
+  shouldBeHidden = false,
   searchMode = false,
   setShouldBeHidden,
 }: LendBoxProps) => {
@@ -142,39 +143,39 @@ export const LendBox = ({
 
   const hasRefreshed = React.useRef(false);
   const _prevSelectedBank = usePrevious(selectedBank);
-  const _prevSearchMode = usePrevious(searchMode);
+  const _prevShouldBeHidden = usePrevious(shouldBeHidden);
 
   /**
-   * Handles visibility and state refresh logic when `searchMode` is enabled.
+   * Handles visibility and state refresh logic when `shouldBeHidden` is enabled.
    * - If no bank is selected, hide the component.
    * - If a bank is selected, show the component.
-   * - If `searchMode` is first enabled and a bank was already selected, refresh the state.
+   * - If `shouldBeHidden` is first enabled and a bank was already selected, refresh the state.
    */
   React.useEffect(() => {
-    if (!searchMode) return;
+    if (!shouldBeHidden) return;
 
     if (!selectedBank) {
       setShouldBeHidden?.(true);
     } else {
       setShouldBeHidden?.(false);
     }
 
-    // Refresh state when searchMode is enabled and a bank was initially selected
+    // Refresh state when shouldBeHidden is enabled and a bank was initially selected
     if (!hasRefreshed.current && _prevSelectedBank === undefined && selectedBank) {
       refreshState();
       hasRefreshed.current = true;
     }
-  }, [searchMode, selectedBank, _prevSelectedBank, setShouldBeHidden, refreshState]);
+  }, [shouldBeHidden, selectedBank, _prevSelectedBank, setShouldBeHidden, refreshState]);
 
   /**
-   * Resets `hasRefreshed` when `searchMode` changes from `false` → `true`.
-   * This ensures `refreshState()` can run again when toggling `searchMode` on.
+   * Resets `hasRefreshed` when `shouldBeHidden` changes from `false` → `true`.
+   * This ensures `refreshState()` can run again when toggling `shouldBeHidden` on.
    */
   React.useEffect(() => {
-    if (_prevSearchMode === false && searchMode === true) {
+    if (_prevShouldBeHidden === false && shouldBeHidden === true) {
       hasRefreshed.current = false;
     }
-  }, [searchMode, _prevSearchMode]);
+  }, [shouldBeHidden, _prevShouldBeHidden]);
 
   const [isTransactionExecuting, setIsTransactionExecuting] = React.useState(false);
   const [isSimulating, setIsSimulating] = React.useState<{
@@ -229,6 +230,8 @@ export const LendBox = ({
   const [lstDialogCallback, setLSTDialogCallback] = React.useState<(() => void) | null>(null);
   const [additionalActionMessages, setAdditionalActionMessages] = React.useState<ActionMessageType[]>([]);
 
+  const isMobile = useIsMobile();
+
   // Cleanup the store when the wallet disconnects
   React.useEffect(() => {
     if (!connected) {
@@ -590,6 +593,35 @@ export const LendBox = ({
     }
   }, [marginfiClient, banks, refreshSelectedBanks]);
 
+  React.useEffect(() => {
+    const handleKeyPress = async (event: KeyboardEvent) => {
+      if (isMobile || event.key !== "Enter" || isLoading || !connected || searchMode) {
+        return;
+      }
+
+      const isActionEnabled = !additionalActionMessages
+        .concat(actionMessages)
+        .filter((value) => value.isEnabled === false).length;
+
+      if (isActionEnabled) {
+        showCloseBalance ? await handleCloseBalance() : await handleLendingAction();
+      }
+    };
+
+    document.addEventListener("keypress", handleKeyPress);
+    return () => document.removeEventListener("keypress", handleKeyPress);
+  }, [
+    isLoading,
+    connected,
+    additionalActionMessages,
+    actionMessages,
+    showCloseBalance,
+    handleCloseBalance,
+    handleLendingAction,
+    isMobile,
+    searchMode,
+  ]);
+
   return (
     <ActionBoxContentWrapper>
       <div className="mb-4">
@@ -608,9 +640,9 @@ export const LendBox = ({
           showTokenSelectionGroups={showTokenSelectionGroups}
           setAmountRaw={setAmountRaw}
           setSelectedBank={setSelectedBank}
-          searchMode={searchMode}
+          searchMode={shouldBeHidden}
           onCloseDialog={() => {
-            searchMode && onCloseDialog?.();
+            shouldBeHidden && onCloseDialog?.();
           }}
         />
       </div>