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() {