fix: stake component

consolelabs · Mar 25, 2024 · 990a1a3 · 990a1a3
1 parent 0e15399
commit 990a1a3
Show file tree

Hide file tree

Showing 6 changed files with 317 additions and 378 deletions.
diff --git a/app/dwarves/earn/fixed-yield/page.tsx b/app/dwarves/earn/fixed-yield/page.tsx
diff --git a/app/dwarves/earn/flexible-yield/page.tsx b/app/dwarves/earn/flexible-yield/page.tsx
diff --git a/components/stake/fixed-stake-modal.tsx b/components/stake/fixed-stake-modal.tsx
@@ -1,15 +1,95 @@
 import {
+  Button,
   Modal,
   ModalClose,
   ModalContent,
-  ModalDescription,
   ModalOverlay,
   ModalPortal,
   ModalTitle,
+  ToggleButton,
+  ToggleButtonGroup,
   Typography,
 } from "@mochi-ui/core";
-import { Stake } from "./stake";
 import { CloseLgLine } from "@mochi-ui/icons";
+import { useState } from "react";
+import clsx from "clsx";
+import { TokenAmount } from "@/utils/number";
+import { StakeInput } from "./stake-input";
+
+const fixedDurationAPR = [
+  {
+    duration: "14D",
+    apr: 2.79,
+  },
+  {
+    duration: "30D",
+    apr: 3.59,
+  },
+  {
+    duration: "60D",
+    apr: 5.6,
+  },
+  {
+    duration: "120D",
+    apr: 7.7,
+  },
+];
+
+const FixedStakeContent = () => {
+  const [amount, setAmount] = useState<TokenAmount>({
+    value: 0,
+    display: "",
+  });
+  const [duration, setDuration] = useState("");
+  const balance = 23667;
+
+  return (
+    <div className="flex flex-col">
+      <div className="py-3 space-y-3">
+        <ToggleButtonGroup
+          type="single"
+          className="grid grid-cols-4 gap-x-3"
+          value={duration}
+          onValueChange={setDuration}
+        >
+          {fixedDurationAPR.map((each) => (
+            <ToggleButton
+              key={each.duration}
+              value={each.duration}
+              className={clsx(
+                "flex flex-col w-full h-fit py-3 space-y-0.5 rounded-lg !bg-background-surface !border-neutral-outline-border",
+                {
+                  "ring-[3px] ring-primary-solid": each.duration === duration,
+                }
+              )}
+            >
+              <Typography level="p5">{each.duration}</Typography>
+              <Typography level="p5" color="success" fontWeight="xl">
+                {each.apr}%
+              </Typography>
+            </ToggleButton>
+          ))}
+        </ToggleButtonGroup>
+        <StakeInput {...{ amount, setAmount }} />
+      </div>
+      <div className="px-12 py-2 flex items-center justify-between space-x-6">
+        <Typography level="h8" color="textSecondary">
+          Total Est. Rewards
+        </Typography>
+        <Typography level="h7" fontWeight="lg" color="success">
+          0
+        </Typography>
+      </div>
+      <Button
+        size="lg"
+        disabled={amount.value <= 0 || amount.value > balance}
+        className="mt-3"
+      >
+        {amount.value > balance ? "Insufficient balance" : "Stake"}
+      </Button>
+    </div>
+  );
+};
 
 interface Props {
   open: boolean;
@@ -26,15 +106,13 @@ export const FixedStakeModal = (props: Props) => {
         <ModalContent className="w-full max-w-xl">
           <ModalTitle className="relative pb-3">
             <Typography level="h6" fontWeight="lg" className="text-center">
-              Stake ICY
+              Stake DFG
             </Typography>
             <ModalClose className="absolute inset-y-0 right-0 h-fit">
               <CloseLgLine className="w-7 h-7" />
             </ModalClose>
           </ModalTitle>
-          <ModalDescription>
-            <Stake type="fixed" />
-          </ModalDescription>
+          <FixedStakeContent />
         </ModalContent>
       </ModalPortal>
     </Modal>

diff --git a/components/stake/flexible-stake-modal.tsx b/components/stake/flexible-stake-modal.tsx
@@ -1,15 +1,55 @@
 import {
+  Button,
   Modal,
   ModalClose,
   ModalContent,
-  ModalDescription,
   ModalOverlay,
   ModalPortal,
   ModalTitle,
   Typography,
 } from "@mochi-ui/core";
-import { Stake } from "./stake";
 import { CloseLgLine } from "@mochi-ui/icons";
+import { useState } from "react";
+import { TokenAmount } from "@/utils/number";
+import { StakeInput } from "./stake-input";
+
+const flexibleAPR = 28.7;
+
+const FlexibleStakeContent = () => {
+  const [amount, setAmount] = useState<TokenAmount>({
+    value: 0,
+    display: "",
+  });
+  const balance = 23667;
+
+  return (
+    <div className="flex flex-col">
+      <div className="py-3 space-y-3">
+        <div className="rounded-lg bg-primary-soft px-6 py-3 space-y-0.5">
+          <div className="flex items-center justify-center text-center space-x-1">
+            <Typography level="h6" fontWeight="xl" color="success">
+              {flexibleAPR}%
+            </Typography>
+            <Typography level="h6" color="primary">
+              Fixed ICY
+            </Typography>
+          </div>
+          <Typography level="p5" color="primary" className="text-center">
+            Withdraw anytime at market prices
+          </Typography>
+        </div>
+        <StakeInput {...{ amount, setAmount }} />
+      </div>
+      <Button
+        size="lg"
+        disabled={amount.value <= 0 || amount.value > balance}
+        className="mt-3"
+      >
+        {amount.value > balance ? "Insufficient balance" : "Stake"}
+      </Button>
+    </div>
+  );
+};
 
 interface Props {
   open: boolean;
@@ -32,9 +72,7 @@ export const FlexibleStakeModal = (props: Props) => {
               <CloseLgLine className="w-7 h-7" />
             </ModalClose>
           </ModalTitle>
-          <ModalDescription>
-            <Stake type="flexible" />
-          </ModalDescription>
+          <FlexibleStakeContent />
         </ModalContent>
       </ModalPortal>
     </Modal>