Return an activeStep as a number

Actually, the ModalFlowContext should not know specific steps and should only return the current index.

dapp/src/components/StakingModal/index.tsx

@@ -8,9 +8,9 @@ function StakingModalSteps() {
   const { activeStep, goNext } = useModalFlowContext()
 
   switch (activeStep) {
-    case "overview":
+    case 1:
       return <StakingOverviewModal goNext={goNext} />
-    case "stake":
+    case 2:
       return <StakeModal goNext={goNext} />
     default:
       return null
@@ -25,7 +25,7 @@ export default function StakingModal({
   onClose: () => void
 }) {
   return (
-    <ModalBase isOpen={isOpen} onClose={onClose} steps={["overview", "stake"]}>
+    <ModalBase isOpen={isOpen} onClose={onClose} numberOfSteps={2}>
       <StakingModalSteps />
     </ModalBase>
   )

dapp/src/components/shared/ModalBase/index.tsx

@@ -7,42 +7,38 @@ import { useSidebar } from "../../../hooks"
 export default function ModalBase({
   isOpen,
   onClose,
-  steps,
-  defaultIndex = 0,
+  numberOfSteps,
+  defaultStep = 1,
   children,
 }: {
   isOpen: boolean
   onClose: () => void
-  steps: string[]
+  numberOfSteps: number
   // eslint-disable-next-line react/require-default-props
-  defaultIndex?: number
+  defaultStep?: number
   children: React.ReactNode
 }) {
   const { onOpen: openSideBar, onClose: closeSidebar } = useSidebar()
 
-  const [activeStep, setActiveStep] = useState(steps[defaultIndex])
-  const [index, setIndex] = useState(defaultIndex)
+  const [activeStep, setActiveStep] = useState(defaultStep)
 
   const handleGoNext = useCallback(() => {
-    setIndex((prevIndex) => prevIndex + 1)
+    setActiveStep((prevStep) => prevStep + 1)
   }, [])
 
   const handleClose = useCallback(() => {
     onClose()
   }, [onClose])
 
   const resetState = useCallback(() => {
-    setActiveStep(steps[defaultIndex])
-    setIndex(defaultIndex)
-  }, [defaultIndex, steps])
+    setActiveStep(defaultStep)
+  }, [defaultStep])
 
   useEffect(() => {
-    if (index >= steps.length) {
+    if (activeStep > numberOfSteps) {
       handleClose()
-    } else {
-      setActiveStep(steps[index])
     }
-  }, [steps, index, handleClose])
+  }, [activeStep, numberOfSteps, handleClose])
 
   useEffect(() => {
     let timeout: NodeJS.Timeout
@@ -58,12 +54,11 @@ export default function ModalBase({
 
   const contextValue: ModalFlowContextValue = useMemo<ModalFlowContextValue>(
     () => ({
-      steps,
       activeStep,
       onClose: handleClose,
       goNext: handleGoNext,
     }),
-    [activeStep, steps, handleGoNext, handleClose],
+    [activeStep, handleGoNext, handleClose],
   )
 
   return (

dapp/src/contexts/ModalFlowContext.tsx

@@ -5,15 +5,13 @@ export type ModalStep = {
 }
 
 export type ModalFlowContextValue = {
-  activeStep?: string
-  steps: string[]
+  activeStep?: number
   onClose: () => void
   goNext: () => void
 }
 
 export const ModalFlowContext = createContext<ModalFlowContextValue>({
   activeStep: undefined,
-  steps: [],
   goNext: () => {},
   onClose: () => {},
 })