Scroll to actions after hitting borrow button (#493)

* Scroll to actions after hitting borrow button * Replace useEffect with ref callback to focus on actions panel * Move function declaration
marsfoundation · Dec 17, 2024 · b2bd1b9 · b2bd1b9
1 parent ee4bdc7
commit b2bd1b9
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 16 deletions.
diff --git a/packages/app/src/features/easy-borrow/EasyBorrowContainer.tsx b/packages/app/src/features/easy-borrow/EasyBorrowContainer.tsx
@@ -25,7 +25,7 @@ function EasyBorrowContainer() {
     borrowDetails,
     guestMode,
     openSandboxModal,
-    healthFactorPanelRef,
+    focusOnActionsPanel,
     riskAcknowledgement,
     actionsContext,
   } = useEasyBorrow()
@@ -53,7 +53,7 @@ function EasyBorrowContainer() {
       guestMode={guestMode}
       openConnectModal={openConnectModal}
       openSandboxModal={openSandboxModal}
-      healthFactorPanelRef={healthFactorPanelRef}
+      focusOnActionsPanel={focusOnActionsPanel}
       riskAcknowledgement={riskAcknowledgement}
       actionsContext={actionsContext}
     />

diff --git a/packages/app/src/features/easy-borrow/components/EasyBorrowPanel.tsx b/packages/app/src/features/easy-borrow/components/EasyBorrowPanel.tsx
@@ -35,7 +35,7 @@ export interface EasyBorrowPanelProps {
   guestMode: boolean
   openConnectModal: () => void
   openSandboxModal: () => void
-  healthFactorPanelRef: React.RefObject<HTMLDivElement>
+  focusOnActionsPanel: (node: HTMLDivElement | null) => void
   actionsContext: InjectedActionsContext
 }
 
@@ -75,7 +75,7 @@ export function EasyBorrowPanel(props: EasyBorrowPanelProps) {
                   )}
                 </Panel>
               )}
-              <Panel>
+              <Panel ref={props.focusOnActionsPanel}>
                 <ActionsContainer
                   objectives={objectives}
                   context={actionsContext}

diff --git a/packages/app/src/features/easy-borrow/logic/useEasyBorrow.ts b/packages/app/src/features/easy-borrow/logic/useEasyBorrow.ts
@@ -19,7 +19,7 @@ import { sandboxDialogConfig } from '@/features/dialogs/sandbox/SandboxDialog'
 import { assert, raise } from '@/utils/assert'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Percentage } from '@marsfoundation/common-universal'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { UseFormReturn, useForm } from 'react-hook-form'
 import { useAccount } from 'wagmi'
 import { getBorrowableAssets, getDepositableAssets, imputeNativeAsset, sortByDecreasingBalances } from './assets'
@@ -61,7 +61,7 @@ export interface UseEasyBorrowResults {
   borrowDetails: BorrowDetails
   guestMode: boolean
   openSandboxModal: () => void
-  healthFactorPanelRef: React.RefObject<HTMLDivElement>
+  focusOnActionsPanel: (node: HTMLDivElement | null) => void
   actionsContext: InjectedActionsContext
 }
 
@@ -85,7 +85,6 @@ export function useEasyBorrow(): UseEasyBorrowResults {
   const upgradeOptions = useUpgradeOptions({ chainId, daiSymbol })
 
   const [pageStatus, setPageStatus] = useState<PageState>('form')
-  const healthFactorPanelRef = useRef<HTMLDivElement>(null)
 
   const userPositions = imputeNativeAsset(marketInfo, nativeAssetInfo)
   const alreadyDeposited = useConditionalFreeze(
@@ -197,11 +196,13 @@ export function useEasyBorrow(): UseEasyBorrowResults {
     },
     [account.chainId],
   )
-  useEffect(() => {
-    if (pageStatus === 'confirmation') {
-      healthFactorPanelRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+
+  const focusOnActionsPanel = useCallback((node: HTMLDivElement | null) => {
+    if (!node) {
+      return
     }
-  }, [pageStatus])
+    node.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }, [])
 
   function openSandboxModal(): void {
     openDialog(sandboxDialogConfig, { mode: 'ephemeral' } as const)
@@ -243,7 +244,7 @@ export function useEasyBorrow(): UseEasyBorrowResults {
     borrowDetails,
     guestMode,
     openSandboxModal,
-    healthFactorPanelRef,
+    focusOnActionsPanel,
     riskAcknowledgement,
     actionsContext: {
       marketInfo,

diff --git a/packages/app/src/features/easy-borrow/views/EasyBorrowView.stories.tsx b/packages/app/src/features/easy-borrow/views/EasyBorrowView.stories.tsx
@@ -10,7 +10,6 @@ import { tokens } from '@sb/tokens'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
 import BigNumber from 'bignumber.js'
-import { useRef } from 'react'
 import { useForm } from 'react-hook-form'
 import { withRouter } from 'storybook-addon-remix-react-router'
 import { EasyBorrowFormSchema } from '../logic/form/validation'
@@ -85,6 +84,7 @@ function EasyBorrowViewStory(props: EasyBorrowViewStoryProps) {
   const setDesiredLoanToValue = () => {}
   const openConnectModal = () => {}
   const openSandboxModal = () => {}
+  const focusOnActionsPanel = () => {}
   /* eslint-enable func-style */
 
   const pageStatus = {
@@ -94,7 +94,6 @@ function EasyBorrowViewStory(props: EasyBorrowViewStoryProps) {
     goToSuccessScreen: () => {},
     submitForm: () => {},
   }
-  const healthFactorPanelRef = useRef<HTMLDivElement>(null)
 
   return (
     <EasyBorrowView
@@ -111,7 +110,7 @@ function EasyBorrowViewStory(props: EasyBorrowViewStoryProps) {
       guestMode={guestMode}
       openConnectModal={openConnectModal}
       openSandboxModal={openSandboxModal}
-      healthFactorPanelRef={healthFactorPanelRef}
+      focusOnActionsPanel={focusOnActionsPanel}
       riskAcknowledgement={riskAcknowledgement}
       actionsContext={{ marketInfo: mockMarketInfo }}
     />

diff --git a/packages/app/src/features/easy-borrow/views/EasyBorrowView.tsx b/packages/app/src/features/easy-borrow/views/EasyBorrowView.tsx
@@ -28,7 +28,7 @@ export interface EasyBorrowViewProps {
   guestMode: boolean
   openConnectModal: () => void
   openSandboxModal: () => void
-  healthFactorPanelRef: React.RefObject<HTMLDivElement>
+  focusOnActionsPanel: (node: HTMLDivElement | null) => void
   actionsContext: InjectedActionsContext
 }