From 62ae591ddc6b6ec916a0804deca46e4dfc8de8e8 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Thu, 14 Dec 2023 11:45:58 +0100
Subject: [PATCH] Fix issues for eslint

---
 .../components/Overview/PositionDetails.tsx   |  4 +++-
 .../src/components/shared/ModalBase/index.tsx | 22 +++++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx
index ea5dcdb17..903972f27 100644
--- a/dapp/src/components/Overview/PositionDetails.tsx
+++ b/dapp/src/components/Overview/PositionDetails.tsx
@@ -36,7 +36,9 @@ export default function PositionDetails(props: CardProps) {
       </CardBody>
       <CardFooter flexDirection="column" gap={2}>
         {/* TODO: Handle click actions */}
-        <Button size="lg" onClick={() => setIsOpenStakingModal(true)}>Stake</Button>
+        <Button size="lg" onClick={() => setIsOpenStakingModal(true)}>
+          Stake
+        </Button>
         <Button size="lg" variant="outline">
           Unstake
         </Button>
diff --git a/dapp/src/components/shared/ModalBase/index.tsx b/dapp/src/components/shared/ModalBase/index.tsx
index 8e454c3b5..a91a7224f 100644
--- a/dapp/src/components/shared/ModalBase/index.tsx
+++ b/dapp/src/components/shared/ModalBase/index.tsx
@@ -14,6 +14,7 @@ export default function ModalBase({
   isOpen: boolean
   onClose: () => void
   steps: string[]
+  // eslint-disable-next-line react/require-default-props
   defaultIndex?: number
   children: React.ReactNode
 }) {
@@ -30,6 +31,11 @@ export default function ModalBase({
     onClose()
   }, [onClose])
 
+  const resetState = useCallback(() => {
+    setActiveStep(steps[defaultIndex])
+    setIndex(defaultIndex)
+  }, [defaultIndex, steps])
+
   useEffect(() => {
     if (index >= steps.length) {
       handleClose()
@@ -39,18 +45,16 @@ export default function ModalBase({
   }, [steps, index, handleClose])
 
   useEffect(() => {
-    if (!isOpen) {
-      closeSidebar()
+    let timeout: NodeJS.Timeout
 
-      const timeout = setTimeout(() => {
-        setActiveStep(steps[defaultIndex])
-        setIndex(defaultIndex)
-      }, 100)
-      return () => clearTimeout(timeout)
-    } else {
+    if (isOpen) {
       openSideBar()
+    } else {
+      closeSidebar()
+      timeout = setTimeout(() => resetState, 100)
     }
-  }, [isOpen, steps, defaultIndex, closeSidebar, openSideBar])
+    return () => clearTimeout(timeout)
+  }, [isOpen, resetState, openSideBar, closeSidebar])
 
   const contextValue: ModalFlowContextValue = useMemo<ModalFlowContextValue>(
     () => ({