From d2831dbb0f1d181e7f0a0c2c73219884151101aa Mon Sep 17 00:00:00 2001 From: chambaz Date: Wed, 19 Feb 2025 15:26:01 -0500 Subject: [PATCH 1/2] feat: lendbox keyboard nav (wip) --- .../components/action-input/action-input.tsx | 12 +++++-- .../actions/lend-box/lend-box.tsx | 33 +++++++++++++++++-- 2 files changed, 40 insertions(+), 5 deletions(-) diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/action-input.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/action-input.tsx index 843e4f7c5..67abbd3d4 100644 --- a/packages/mrgn-ui/src/components/action-box-v2/actions/lend-box/components/action-input/action-input.tsx +++ b/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(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 (
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 index f8181239b..a35de9aec 100644 --- 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 @@ -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"; @@ -229,6 +228,8 @@ export const LendBox = ({ const [lstDialogCallback, setLSTDialogCallback] = React.useState<(() => void) | null>(null); const [additionalActionMessages, setAdditionalActionMessages] = React.useState([]); + const isMobile = useIsMobile(); + // Cleanup the store when the wallet disconnects React.useEffect(() => { if (!connected) { @@ -590,6 +591,34 @@ export const LendBox = ({ } }, [marginfiClient, banks, refreshSelectedBanks]); + React.useEffect(() => { + const handleKeyPress = async (event: KeyboardEvent) => { + if (isMobile || event.key !== "Enter" || isLoading || !connected) { + 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, + ]); + return (
From 542d08aa7461413a650d1efd2200c3ac04a4b0fe Mon Sep 17 00:00:00 2001 From: borcherd Date: Wed, 19 Feb 2025 17:55:34 -0300 Subject: [PATCH 2/2] fix: searchMode/shouldBeHidden stuff --- .../components/action-box-v2/action-box.tsx | 6 ++-- .../actions/lend-box/lend-box.tsx | 29 ++++++++++--------- 2 files changed, 20 insertions(+), 15 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 index 4faa6775e..f15e8a349 100644 --- 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} /> 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 index a35de9aec..33ad01206 100644 --- 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 @@ -66,6 +66,7 @@ export type LendBoxProps = { searchMode?: boolean; onCloseDialog?: () => void; + shouldBeHidden?: boolean; setShouldBeHidden?: (hidden: boolean) => void; onComplete?: (previousTxn: PreviousTxn) => void; @@ -94,6 +95,7 @@ export const LendBox = ({ stakeAccounts, setDisplaySettings, onCloseDialog, + shouldBeHidden = false, searchMode = false, setShouldBeHidden, }: LendBoxProps) => { @@ -141,16 +143,16 @@ 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); @@ -158,22 +160,22 @@ export const LendBox = ({ 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<{ @@ -593,7 +595,7 @@ export const LendBox = ({ React.useEffect(() => { const handleKeyPress = async (event: KeyboardEvent) => { - if (isMobile || event.key !== "Enter" || isLoading || !connected) { + if (isMobile || event.key !== "Enter" || isLoading || !connected || searchMode) { return; } @@ -617,6 +619,7 @@ export const LendBox = ({ handleCloseBalance, handleLendingAction, isMobile, + searchMode, ]); return ( @@ -637,9 +640,9 @@ export const LendBox = ({ showTokenSelectionGroups={showTokenSelectionGroups} setAmountRaw={setAmountRaw} setSelectedBank={setSelectedBank} - searchMode={searchMode} + searchMode={shouldBeHidden} onCloseDialog={() => { - searchMode && onCloseDialog?.(); + shouldBeHidden && onCloseDialog?.(); }} />