diff --git a/app/dwarves/earn/fixed-yield/page.tsx b/app/dwarves/earn/fixed-yield/page.tsx
deleted file mode 100644
index 4f51405..0000000
--- a/app/dwarves/earn/fixed-yield/page.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import { LoginPopover } from "@/components/login-popover";
-import { Logo } from "@/components/logo";
-import ProfileDropdown from "@/components/profile-dropdown";
-import { Stake } from "@/components/stake";
-import { TopBar } from "@mochi-ui/core";
-import { LoginWidget, useLoginWidget } from "@mochi-web3/login-widget";
-import { Suspense } from "react";
-
-export default function Page() {
- const { isLoggedIn, isLoggingIn } = useLoginWidget();
-
- return (
-
- }
- rightSlot={!isLoggedIn ? : }
- />
- {isLoggedIn ? (
-
-
-
- ) : (
-
- {!isLoggingIn && (
-
-
-
- )}
-
- {!isLoggingIn && (
-
-
-
- )}
-
@@ -134,11 +147,13 @@ const Overview = () => {
},
},
action: (
-
-
-
+
),
},
{
@@ -163,11 +178,13 @@ const Overview = () => {
},
},
action: (
-
-
-
+
),
},
{
@@ -371,9 +388,7 @@ const Overview = () => {
),
action: (
-
-
-
+
),
},
{
@@ -434,6 +449,14 @@ const Overview = () => {
))}
+
+
);
};
diff --git a/components/stake.tsx b/components/stake.tsx
deleted file mode 100644
index 13526b5..0000000
--- a/components/stake.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import {
- Avatar,
- Button,
- Switch,
- ToggleButton,
- ToggleButtonGroup,
- Tooltip,
- Typography,
-} from "@mochi-ui/core";
-import { ArrowLeftLine } from "@mochi-ui/icons";
-import { useState } from "react";
-import * as Slider from "@radix-ui/react-slider";
-import clsx from "clsx";
-import { utils } from "@consolelabs/mochi-formatter";
-import { TokenAmount, formatTokenAmount } from "@/utils/number";
-import Link from "next/link";
-import { ROUTES } from "@/constants/routes";
-
-const flexibleAPR = 28.7;
-const fixedDurationAPR = [
- {
- duration: "14D",
- apr: 2.79,
- },
- {
- duration: "30D",
- apr: 3.59,
- },
- {
- duration: "60D",
- apr: 5.6,
- },
- {
- duration: "120D",
- apr: 7.7,
- },
-];
-
-interface Props {
- type: "fixed" | "flexible";
-}
-
-export const Stake = (props: Props) => {
- const { type } = props;
-
- const [percent, setPercent] = useState(0);
- const [amount, setAmount] = useState({
- value: 0,
- display: "",
- });
- const [duration, setDuration] = useState("");
- const balance = 23667;
-
- const onMaxAmount = () => {
- setPercent(100);
- setAmount(formatTokenAmount(balance));
- };
-
- const onKeyDown = (e: React.KeyboardEvent) => {
- // Accept only a positive integer / float input
- if (
- e.key === "Backspace" ||
- e.key === "Delete" ||
- e.key === "Tab" ||
- e.key === "Escape" ||
- e.key === "Enter" ||
- e.key === "." ||
- e.key === "," ||
- e.key === "ArrowLeft" ||
- e.key === "ArrowRight" ||
- Number.isFinite(Number(e.key)) ||
- // allow for select all
- (e.metaKey && e.key.toLowerCase() === "a")
- ) {
- // Accept only one dot(".")
- if (amount.display.indexOf(".") !== -1 && e.key === ".") {
- e.preventDefault();
- } else {
- // Accept the first dot(".")
- return;
- }
- } else {
- e.preventDefault();
- }
- if (e.key === "-" || !Number.isFinite(Number(e.key))) {
- e.preventDefault();
- }
- };
-
- const onChange = (e: React.ChangeEvent) => {
- const formattedAmount = formatTokenAmount(e.target.value);
- formattedAmount.display = e.target.value;
- setAmount(formattedAmount);
- const percent = Math.max(
- 0,
- Math.min(100, (formattedAmount.value / balance) * 100)
- );
- setPercent(percent);
- };
-
- const onBlur = (e: React.FocusEvent) => {
- const formattedAmount = formatTokenAmount(e.target.value);
- setAmount(formattedAmount);
- const percent = Math.max(
- 0,
- Math.min(100, (formattedAmount.value / balance) * 100)
- );
- setPercent(percent);
- };
-
- return (
-
-
-
-
-
- Back
-
-
-
-
- Stake ICY
-
-
- Stake ICY to receive DFG and revenue share rewards.
-
-
-
- {type === "fixed" ? (
-
- {fixedDurationAPR.map((each) => (
-
- {each.duration}
-
- {each.apr}%
-
-
- ))}
-
- ) : (
- <>
-
-
- {flexibleAPR}%
-
-
- Fixed APR
-
-
-
- Withdraw anytime at market prices
-
-
- )}
-
-
-
-
- You’re staking
-
-
-
-
- {
- if (checked) {
- onMaxAmount();
- }
- }}
- />
-
-
-
-
-
-
-
{
- const percent = value[0];
- setPercent(percent);
- setAmount(formatTokenAmount((balance * percent) / 100));
- }}
- max={100}
- step={1}
- >
-
-
-
-
-
-
-
- {percent.toFixed(2)}%
-
-
-
-
-
-
- ≈ $0.00 USD
-
-
- Balance:{" "}
-
-
-
-
-
-
-
-
-
+
+
+ {fixedDurationAPR.map((each) => (
+
+ {each.duration}
+
+ {each.apr}%
+
+
+ ))}
+
+
+
+
+
+ Total Est. Rewards
+
+
+ 0
+
+
+
+
+
+
+
+
+ Stake Successful
+
+
+
+ You’re staking
+
+
+
+
+ 2,000 ICY
+
+
+
+
+
+
+
+
+
+
+ 3
+
+
Interest end date
+
+
08/03/2025 07:00
+
+
+
+
+
+ 4
+
+
Next staking date
+
+
08/03/2025 07:00
+
+
+
+
+
+
+ Auto-Staking
+
+ Potential for profit maximization
+
+
+
+
+
+
+
+ );
+};
diff --git a/components/stake/flexible/flexible-stake-content.tsx b/components/stake/flexible/flexible-stake-content.tsx
new file mode 100644
index 0000000..9aac080
--- /dev/null
+++ b/components/stake/flexible/flexible-stake-content.tsx
@@ -0,0 +1,48 @@
+import { Button, Typography } from "@mochi-ui/core";
+import { useState } from "react";
+import { TokenAmount } from "@/utils/number";
+import { StakeInput } from "../stake-input";
+
+const flexibleAPR = 28.7;
+
+interface Props {
+ onStake: () => void;
+}
+
+export const FlexibleStakeContent = (props: Props) => {
+ const { onStake } = props;
+ const [amount, setAmount] = useState({
+ value: 0,
+ display: "",
+ });
+ const balance = 23667;
+
+ return (
+
+
+
+
+
+ {flexibleAPR}%
+
+
+ Fixed ICY
+
+
+
+ Withdraw anytime at market prices
+
+
+
+
+
+
+
+
+
+
+ Stake Successful
+
+
+
+ You’re staking
+
+
+
+
+ 2,000 ICY
+
+
+
+
+
+
+
+
+
+
+ 3
+
+
Interest distribution date
+
+
09/03/2025 07:00
+
+
+
+
+
+
+ Auto-Staking
+
+ Potential for profit maximization
+
+
+
+
+
+
+
+ );
+};
diff --git a/components/stake/stake-input.tsx b/components/stake/stake-input.tsx
new file mode 100644
index 0000000..9516e0a
--- /dev/null
+++ b/components/stake/stake-input.tsx
@@ -0,0 +1,196 @@
+import { Avatar, Button, Switch, Tooltip, Typography } from "@mochi-ui/core";
+import { Dispatch, SetStateAction, useState } from "react";
+import * as Slider from "@radix-ui/react-slider";
+import clsx from "clsx";
+import { utils } from "@consolelabs/mochi-formatter";
+import { TokenAmount, formatTokenAmount } from "@/utils/number";
+
+interface Props {
+ amount: TokenAmount;
+ setAmount: Dispatch>;
+}
+
+export const StakeInput = (props: Props) => {
+ const { amount, setAmount } = props;
+ const [percent, setPercent] = useState(0);
+ const balance = 23667;
+
+ const onMaxAmount = () => {
+ setPercent(100);
+ setAmount(formatTokenAmount(balance));
+ };
+
+ const onKeyDown = (e: React.KeyboardEvent) => {
+ // Accept only a positive integer / float input
+ if (
+ e.key === "Backspace" ||
+ e.key === "Delete" ||
+ e.key === "Tab" ||
+ e.key === "Escape" ||
+ e.key === "Enter" ||
+ e.key === "." ||
+ e.key === "," ||
+ e.key === "ArrowLeft" ||
+ e.key === "ArrowRight" ||
+ Number.isFinite(Number(e.key)) ||
+ // allow for select all
+ (e.metaKey && e.key.toLowerCase() === "a")
+ ) {
+ // Accept only one dot(".")
+ if (amount.display.indexOf(".") !== -1 && e.key === ".") {
+ e.preventDefault();
+ } else {
+ // Accept the first dot(".")
+ return;
+ }
+ } else {
+ e.preventDefault();
+ }
+ if (e.key === "-" || !Number.isFinite(Number(e.key))) {
+ e.preventDefault();
+ }
+ };
+
+ const onChange = (e: React.ChangeEvent) => {
+ const formattedAmount = formatTokenAmount(e.target.value);
+ formattedAmount.display = e.target.value;
+ setAmount(formattedAmount);
+ const percent = Math.max(
+ 0,
+ Math.min(100, (formattedAmount.value / balance) * 100)
+ );
+ setPercent(percent);
+ };
+
+ const onBlur = (e: React.FocusEvent) => {
+ const formattedAmount = formatTokenAmount(e.target.value);
+ setAmount(formattedAmount);
+ const percent = Math.max(
+ 0,
+ Math.min(100, (formattedAmount.value / balance) * 100)
+ );
+ setPercent(percent);
+ };
+
+ return (
+
+
+
+ You’re staking
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ console.log("Slider change");
+ const percent = value[0];
+ setPercent(percent);
+ setAmount(formatTokenAmount((balance * percent) / 100));
+ }}
+ onValueCommit={() => {
+ console.log("Slider commit");
+ }}
+ onClick={() => {
+ console.log("Slider click");
+ }}
+ max={100}
+ step={1}
+ >
+
+
+
+
+
+ {[0, 25, 50, 75, 100].map((milestone) => (
+
+ milestone
+ ? "bg-primary-solid"
+ : "bg-background-level2"
+ )}
+ onClick={() => {
+ console.log("click");
+ setPercent(milestone);
+ setAmount(formatTokenAmount((balance * milestone) / 100));
+ }}
+ />
+
+ ))}
+
+
+
+ {percent.toFixed(2)}%
+
+
+
+
+
+
+ ≈ $0.00 USD
+
+
+ Balance:{" "}
+
+
+
+
+