From f6b22b01cc192b655cfbabd2861f67e0d20785ff Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Wed, 6 Dec 2023 12:16:44 +0100
Subject: [PATCH] Init a `StakeModal` component

---
 dapp/src/components/Modals/StakeModal.tsx     | 93 +++++++++++++++++++
 .../Modals/StakingOverviewModal.tsx           |  4 +-
 dapp/src/components/Staking/index.tsx         |  3 +
 3 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 dapp/src/components/Modals/StakeModal.tsx

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 (
+    <Flex justifyContent="space-between">
+      <Text>{text}</Text>
+      <TokenBalance
+        tokenBalance={tokenBalance}
+        currency={BITCOIN}
+        usdBalance={usdBalance}
+      />
+    </Flex>
+  )
+}
+
+export default function StakeModal() {
+  const { closeModal } = useStakingFlowContext()
+
+  return (
+    <BaseModal>
+      <ModalBody>
+        <Tabs variant="underline">
+          <TabList justifyContent="center" gap={32} mb={6}>
+            <Tab>Stake</Tab>
+            {/* TODO: Add a content for unstake tab */}
+            <Tab>Unstake</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <Flex gap={12} direction="column">
+                {/* TODO: Create a custom number input component */}
+                <NumberInput>
+                  <NumberInputField />
+                  <NumberInputStepper />
+                </NumberInput>
+                <Flex gap={4} direction="column" w="100%">
+                  {/* TODO: Use the real data */}
+                  <StakeDetails
+                    text="Amount to be staked"
+                    tokenBalance="179776555"
+                    usdBalance="45.725,91"
+                  />
+                  <StakeDetails
+                    text="Protocol fee (0.01%)"
+                    tokenBalance="20"
+                    usdBalance="0.024,91"
+                  />
+                  <StakeDetails
+                    text="Approximately staked tokens"
+                    tokenBalance="13456775"
+                    usdBalance="44.762,21"
+                  />
+                </Flex>
+              </Flex>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </ModalBody>
+      <ModalFooter>
+        <Button width="100%" onClick={closeModal}>
+          Stake
+        </Button>
+      </ModalFooter>
+    </BaseModal>
+  )
+}
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 (
     <BaseModal>
@@ -58,7 +58,7 @@ export default function StakingOverviewModal() {
         </Stepper>
       </ModalBody>
       <ModalFooter>
-        <Button width="100%" onClick={closeModal}>
+        <Button width="100%" onClick={() => setModalType("stake")}>
           Get started
         </Button>
       </ModalFooter>
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 <ConnectWalletModal />
 
   if (modalType === "overview") return <StakingOverviewModal />
+
+  if (modalType === "stake") return <StakeModal />
 }
 
 export default function Staking() {