feat: improved keybaord nav support

mrgnlabs · Feb 19, 2025 · 890cdfa · 890cdfa
1 parent be3e68e
commit 890cdfa
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 10 deletions.
diff --git a/packages/mrgn-ui/src/components/action-box-v2/action-box.tsx b/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>

diff --git a/...ui/src/components/action-box-v2/actions/lend-box/components/action-input/action-input.tsx b/...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">

diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/lend-box.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/lend-box.tsx
@@ -21,6 +21,7 @@ import {
   ExecuteLendingActionProps,
   ExecuteLendingAction,
   usePrevious,
+  useIsMobile,
 } from "@mrgnlabs/mrgn-utils";
 
 import { ActionBoxContentWrapper, ActionButton, ActionSettingsButton } from "~/components/action-box-v2/components";
@@ -60,6 +61,8 @@ export type LendBoxProps = {
   stakeAccounts?: ValidatorStakeGroup[];
 
   searchMode?: boolean;
+  shouldBeHidden?: boolean;
+
   onCloseDialog?: () => void;
   setShouldBeHidden?: (hidden: boolean) => void;
 
@@ -90,6 +93,7 @@ export const LendBox = ({
   setDisplaySettings,
   onCloseDialog,
   searchMode = false,
+  shouldBeHidden = false,
   setShouldBeHidden,
 }: LendBoxProps) => {
   const [
@@ -134,9 +138,10 @@ export const LendBox = ({
     state.setSelectedStakeAccount,
   ]);
 
+  const isMobile = useIsMobile();
   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.
@@ -145,7 +150,7 @@ export const LendBox = ({
    * - If `searchMode` is first enabled and a bank was already selected, refresh the state.
    */
   React.useEffect(() => {
-    if (!searchMode) return;
+    if (!shouldBeHidden) return;
 
     if (!selectedBank) {
       setShouldBeHidden?.(true);
@@ -158,17 +163,17 @@ export const LendBox = ({
       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.
    */
   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 [simulationStatus, setSimulationStatus] = React.useState<{
@@ -365,6 +370,34 @@ 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) {
+        await handleLendingAction();
+      }
+    };
+
+    document.addEventListener("keypress", handleKeyPress);
+    return () => document.removeEventListener("keypress", handleKeyPress);
+  }, [
+    isLoading,
+    connected,
+    additionalActionMessages,
+    actionMessages,
+    showCloseBalance,
+    handleLendingAction,
+    isMobile,
+    searchMode,
+  ]);
+
   return (
     <ActionBoxContentWrapper>
       <div className="mb-4">