diff --git a/dapp/src/components/Modals/StakeModal.tsx b/dapp/src/components/Modals/StakeModal.tsx
new file mode 100644
index 000000000..ba9365d29
--- /dev/null
+++ b/dapp/src/components/Modals/StakeModal.tsx
@@ -0,0 +1,93 @@
+import React from "react"
+import {
+ Button,
+ ModalBody,
+ ModalFooter,
+ Text,
+ Flex,
+ Tabs,
+ TabList,
+ Tab,
+ TabPanels,
+ TabPanel,
+ NumberInput,
+ NumberInputField,
+ NumberInputStepper,
+} from "@chakra-ui/react"
+import { useStakingFlowContext } from "../../hooks"
+import BaseModal from "./BaseModal"
+import { TokenBalance } from "../TokenBalance"
+import { BITCOIN } from "../../constants"
+
+function StakeDetails({
+ text,
+ tokenBalance,
+ usdBalance,
+}: {
+ text: string
+ tokenBalance: string
+ usdBalance: string
+}) {
+ return (
+
+ {text}
+
+
+ )
+}
+
+export default function StakeModal() {
+ const { closeModal } = useStakingFlowContext()
+
+ return (
+
+
+
+
+ Stake
+ {/* TODO: Add a content for unstake tab */}
+ Unstake
+
+
+
+
+ {/* TODO: Create a custom number input component */}
+
+
+
+
+
+ {/* TODO: Use the real data */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/dapp/src/components/Modals/StakingOverviewModal.tsx b/dapp/src/components/Modals/StakingOverviewModal.tsx
index e7cbcddb2..44ddc9d33 100644
--- a/dapp/src/components/Modals/StakingOverviewModal.tsx
+++ b/dapp/src/components/Modals/StakingOverviewModal.tsx
@@ -30,7 +30,7 @@ const STEPS = [
]
export default function StakingOverviewModal() {
- const { closeModal } = useStakingFlowContext()
+ const { setModalType } = useStakingFlowContext()
return (
@@ -58,7 +58,7 @@ export default function StakingOverviewModal() {
-
diff --git a/dapp/src/components/Staking/index.tsx b/dapp/src/components/Staking/index.tsx
index 25e3cac04..ba6ed6356 100644
--- a/dapp/src/components/Staking/index.tsx
+++ b/dapp/src/components/Staking/index.tsx
@@ -5,6 +5,7 @@ import { useStakingFlowContext, useWalletContext } from "../../hooks"
import ModalOverlay from "../ModalOverlay"
import { HEADER_HEIGHT } from "../Header"
import Sidebar from "../Sidebar"
+import StakeModal from "../Modals/StakeModal"
function Modal() {
const { modalType } = useStakingFlowContext()
@@ -15,6 +16,8 @@ function Modal() {
if (!btcAccount) return
if (modalType === "overview") return
+
+ if (modalType === "stake") return
}
export default function Staking() {