Keep all staking-related modals in one dir

dapp/src/components/Modals/StakingOverviewModal.tsx → dapp/src/components/Modals/Staking/Overview.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { Button, ModalBody, ModalFooter } from "@chakra-ui/react"
-import { ModalStep } from "../../contexts"
-import { TextMd } from "../shared/Typography"
+import { ModalStep } from "../../../contexts"
+import { TextMd } from "../../shared/Typography"
 
-export default function StakingOverviewModal({ goNext }: ModalStep) {
+export default function Overview({ goNext }: ModalStep) {
   return (
     <>
       <ModalBody>

dapp/src/components/Modals/StakeModal.tsx → dapp/src/components/Modals/Staking/StakeForm.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Button, ModalBody } from "@chakra-ui/react"
-import { ModalStep } from "../../contexts"
-import { TextMd } from "../shared/Typography"
+import { ModalStep } from "../../../contexts"
+import { TextMd } from "../../shared/Typography"
 
 export default function StakeModal({ goNext }: ModalStep) {
   return (

dapp/src/components/Modals/Staking/index.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { useModalFlowContext } from "../../../hooks"
+import StakeForm from "./StakeForm"
+import Overview from "./Overview"
+import ModalBase from "../../shared/ModalBase"
+
+function StakingSteps() {
+  const { activeStep, goNext } = useModalFlowContext()
+
+  switch (activeStep) {
+    case 1:
+      return <Overview goNext={goNext} />
+    case 2:
+      return <StakeForm goNext={goNext} />
+    default:
+      return null
+  }
+}
+
+export default function Staking({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean
+  onClose: () => void
+}) {
+  return (
+    <ModalBase isOpen={isOpen} onClose={onClose} numberOfSteps={2}>
+      <StakingSteps />
+    </ModalBase>
+  )
+}

dapp/src/components/Overview/PositionDetails.tsx

@@ -13,7 +13,7 @@ import {
 } from "@chakra-ui/react"
 import { BITCOIN, USD } from "../../constants"
 import { Info } from "../../static/icons"
-import StakingModal from "../StakingModal"
+import Staking from "../Modals/Staking"
 
 export default function PositionDetails(props: CardProps) {
   const [isOpenStakingModal, stakingModal] = useBoolean()
@@ -44,7 +44,7 @@ export default function PositionDetails(props: CardProps) {
           Unstake
         </Button>
       </CardFooter>
-      <StakingModal isOpen={isOpenStakingModal} onClose={stakingModal.off} />
+      <Staking isOpen={isOpenStakingModal} onClose={stakingModal.off} />
     </Card>
   )
 }