Scroll to actions after hitting borrow button

marsfoundation · Dec 16, 2024 · 99b948f · 99b948f
1 parent ee4bdc7
commit 99b948f
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 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,
+    actionsPanelRef,
     riskAcknowledgement,
     actionsContext,
   } = useEasyBorrow()
@@ -53,7 +53,7 @@ function EasyBorrowContainer() {
       guestMode={guestMode}
       openConnectModal={openConnectModal}
       openSandboxModal={openSandboxModal}
-      healthFactorPanelRef={healthFactorPanelRef}
+      actionsPanelRef={actionsPanelRef}
       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>
+  actionsPanelRef: React.RefObject<HTMLDivElement>
   actionsContext: InjectedActionsContext
 }
 
@@ -75,7 +75,7 @@ export function EasyBorrowPanel(props: EasyBorrowPanelProps) {
                   )}
                 </Panel>
               )}
-              <Panel>
+              <Panel ref={props.actionsPanelRef}>
                 <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
@@ -61,7 +61,7 @@ export interface UseEasyBorrowResults {
   borrowDetails: BorrowDetails
   guestMode: boolean
   openSandboxModal: () => void
-  healthFactorPanelRef: React.RefObject<HTMLDivElement>
+  actionsPanelRef: React.RefObject<HTMLDivElement>
   actionsContext: InjectedActionsContext
 }
 
@@ -85,7 +85,7 @@ export function useEasyBorrow(): UseEasyBorrowResults {
   const upgradeOptions = useUpgradeOptions({ chainId, daiSymbol })
 
   const [pageStatus, setPageStatus] = useState<PageState>('form')
-  const healthFactorPanelRef = useRef<HTMLDivElement>(null)
+  const actionsPanelRef = useRef<HTMLDivElement>(null)
 
   const userPositions = imputeNativeAsset(marketInfo, nativeAssetInfo)
   const alreadyDeposited = useConditionalFreeze(
@@ -199,7 +199,7 @@ export function useEasyBorrow(): UseEasyBorrowResults {
   )
   useEffect(() => {
     if (pageStatus === 'confirmation') {
-      healthFactorPanelRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      actionsPanelRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
   }, [pageStatus])
 
@@ -243,7 +243,7 @@ export function useEasyBorrow(): UseEasyBorrowResults {
     borrowDetails,
     guestMode,
     openSandboxModal,
-    healthFactorPanelRef,
+    actionsPanelRef,
     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
@@ -111,7 +111,7 @@ function EasyBorrowViewStory(props: EasyBorrowViewStoryProps) {
       guestMode={guestMode}
       openConnectModal={openConnectModal}
       openSandboxModal={openSandboxModal}
-      healthFactorPanelRef={healthFactorPanelRef}
+      actionsPanelRef={healthFactorPanelRef}
       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>
+  actionsPanelRef: React.RefObject<HTMLDivElement>
   actionsContext: InjectedActionsContext
 }