Change the approach to opening modals

We should have one modal and change the content in it.

dapp/src/DApp.tsx

@@ -5,15 +5,13 @@ import theme from "./theme"
 import {
   DocsDrawerContextProvider,
   LedgerWalletAPIProvider,
-  ModalContextProvider,
   SidebarContextProvider,
   WalletContextProvider,
 } from "./contexts"
 import Header from "./components/Header"
 import Overview from "./components/Overview"
 import Sidebar from "./components/Sidebar"
 import DocsDrawer from "./components/DocsDrawer"
-import ModalOverlay from "./components/ModalOverlay"
 
 function DApp() {
   useDetectThemeMode()
@@ -26,9 +24,6 @@ function DApp() {
       </Box>
       <Sidebar />
       <DocsDrawer />
-      {/* The user has several modals in a flow.
-      Let's use our own modal overlay to prevent the background flickering effect. */}
-      <ModalOverlay />
     </>
   )
 }
@@ -39,11 +34,9 @@ function DAppProviders() {
       <WalletContextProvider>
         <DocsDrawerContextProvider>
           <SidebarContextProvider>
-            <ModalContextProvider>
-              <ChakraProvider theme={theme}>
-                <DApp />
-              </ChakraProvider>
-            </ModalContextProvider>
+            <ChakraProvider theme={theme}>
+              <DApp />
+            </ChakraProvider>
           </SidebarContextProvider>
         </DocsDrawerContextProvider>
       </WalletContextProvider>

dapp/src/components/Modals/StakeModal.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { Button, ModalBody, ModalCloseButton } from "@chakra-ui/react"
+import { TextMd } from "../Typography"
+import { ModalStep } from "../../contexts"
+
+export default function StakeModal({ goNext }: ModalStep) {
+  return (
+    <>
+      <ModalCloseButton />
+      <ModalBody>
+        <TextMd>Stake modal</TextMd>
+        <Button width="100%" onClick={goNext}>
+          Stake
+        </Button>
+      </ModalBody>
+    </>
+  )
+}

dapp/src/components/Modals/StakingOverviewModal.tsx

@@ -1,11 +1,25 @@
 import React from "react"
-import { ModalHeader } from "@chakra-ui/react"
-import BaseModal from "./BaseModal"
+import {
+  Button,
+  ModalBody,
+  ModalCloseButton,
+  ModalFooter,
+} from "@chakra-ui/react"
+import { TextMd } from "../Typography"
+import { ModalStep } from "../../contexts"
 
-export default function StakingOverviewModal() {
+export default function StakingOverviewModal({ goNext }: ModalStep) {
   return (
-    <BaseModal>
-      <ModalHeader textAlign="center">Staking overview</ModalHeader>
-    </BaseModal>
+    <>
+      <ModalCloseButton />
+      <ModalBody>
+        <TextMd>Staking overview</TextMd>
+      </ModalBody>
+      <ModalFooter>
+        <Button width="100%" onClick={goNext}>
+          Get started
+        </Button>
+      </ModalFooter>
+    </>
   )
 }

dapp/src/components/Overview/PositionDetails.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import {
   Text,
   Button,
@@ -12,12 +12,10 @@ import {
 } from "@chakra-ui/react"
 import { BITCOIN, USD } from "../../constants"
 import { Info } from "../../static/icons"
-import { useModal, useSidebar } from "../../hooks"
-import Staking from "../Staking"
+import StakingModal from "../StakingModal"
 
 export default function PositionDetails(props: CardProps) {
-  const { openModal } = useModal()
-  const { onOpen: openSidebar } = useSidebar()
+  const [isOpenStakingModal, setIsOpenStakingModal] = useState(false)
 
   return (
     <Card {...props}>
@@ -38,17 +36,13 @@ export default function PositionDetails(props: CardProps) {
       </CardBody>
       <CardFooter flexDirection="column" gap={2}>
         {/* TODO: Handle click actions */}
-        <Button
-          onClick={() => {
-            openSidebar()
-            openModal("overview")
-          }}
-        >
-          Stake
-        </Button>
+        <Button onClick={() => setIsOpenStakingModal(true)}>Stake</Button>
         <Button variant="outline">Withdraw</Button>
       </CardFooter>
-      <Staking />
+      <StakingModal
+        isOpen={isOpenStakingModal}
+        onClose={() => setIsOpenStakingModal(false)}
+      />
     </Card>
   )
 }

dapp/src/components/StakingModal/index.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import { useModalFlowContext } from "../../hooks"
+import StakeModal from "../Modals/StakeModal"
+import StakingOverviewModal from "../Modals/StakingOverviewModal"
+import ModalBase from "../shared/ModalBase"
+
+function StakingModalSteps() {
+  const { activeStep, goNext } = useModalFlowContext()
+
+  console.log("activeStep ", activeStep)
+
+  switch (activeStep) {
+    case "overview":
+      return <StakingOverviewModal goNext={goNext} />
+    case "stake":
+      return <StakeModal goNext={goNext} />
+    default:
+      return null
+  }
+}
+
+export default function StakingModal({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean
+  onClose: () => void
+}) {
+  return (
+    <ModalBase isOpen={isOpen} onClose={onClose} steps={["overview", "stake"]}>
+      <StakingModalSteps />
+    </ModalBase>
+  )
+}

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

@@ -0,0 +1,73 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react"
+import { Modal, ModalContent, ModalOverlay } from "@chakra-ui/react"
+import { HEADER_HEIGHT } from "../../Header"
+import { ModalFlowContext, ModalFlowContextValue } from "../../../contexts"
+import { useSidebar } from "../../../hooks"
+
+export default function ModalBase({
+  isOpen,
+  onClose,
+  steps,
+  defaultIndex = 0,
+  children,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  steps: string[]
+  defaultIndex?: number
+  children: React.ReactNode
+}) {
+  const { onOpen: openSideBar, onClose: closeSidebar } = useSidebar()
+
+  const [activeStep, setActiveStep] = useState(steps[defaultIndex])
+  const [index, setIndex] = useState(defaultIndex)
+
+  const handleGoNext = useCallback(() => {
+    setIndex((prevIndex) => prevIndex + 1)
+  }, [])
+
+  const handleClose = useCallback(() => {
+    onClose()
+  }, [onClose])
+
+  useEffect(() => {
+    if (index >= steps.length) {
+      handleClose()
+    } else {
+      setActiveStep(steps[index])
+    }
+  }, [steps, index, handleClose])
+
+  useEffect(() => {
+    if (!isOpen) {
+      closeSidebar()
+
+      const timeout = setTimeout(() => {
+        setActiveStep(steps[defaultIndex])
+        setIndex(defaultIndex)
+      }, 100)
+      return () => clearTimeout(timeout)
+    } else {
+      openSideBar()
+    }
+  }, [isOpen, steps, defaultIndex, closeSidebar, openSideBar])
+
+  const contextValue: ModalFlowContextValue = useMemo<ModalFlowContextValue>(
+    () => ({
+      steps,
+      activeStep,
+      onClose: handleClose,
+      goNext: handleGoNext,
+    }),
+    [activeStep, steps, handleGoNext, handleClose],
+  )
+
+  return (
+    <ModalFlowContext.Provider value={contextValue}>
+      <Modal size="md" isOpen={isOpen} onClose={handleClose}>
+        <ModalOverlay mt={HEADER_HEIGHT} />
+        <ModalContent mt={2 * HEADER_HEIGHT}>{children}</ModalContent>
+      </Modal>
+    </ModalFlowContext.Provider>
+  )
+}

dapp/src/contexts/ModalFlowContext.tsx

@@ -0,0 +1,19 @@
+import { createContext } from "react"
+
+export type ModalStep = {
+  goNext: () => void
+}
+
+export type ModalFlowContextValue = {
+  activeStep?: string
+  steps: string[]
+  onClose: () => void
+  goNext: () => void
+}
+
+export const ModalFlowContext = createContext<ModalFlowContextValue>({
+  activeStep: undefined,
+  steps: [],
+  goNext: () => {},
+  onClose: () => {},
+})

dapp/src/contexts/index.tsx

@@ -2,4 +2,4 @@ export * from "./WalletContext"
 export * from "./LedgerWalletAPIProvider"
 export * from "./DocsDrawerContext"
 export * from "./SidebarContext"
-export * from "./ModalContext"
+export * from "./ModalFlowContext"