Skip to content

Commit

Permalink
Merge branch 'develop' into preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@leduyhien152
leduyhien152 committed Apr 3, 2024
2 parents 479b428 + 83346a4 commit aa392cc
Show file tree
Hide file tree
Showing 18 changed files with 1,068 additions and 169 deletions.
7 changes: 5 additions & 2 deletions app/[server]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,13 @@ import { Suspense, useState } from "react";
import { FlexibleStakingCard } from "@/components/overview/FlexibleStakingCard";
import { FixedStakingCard } from "@/components/overview/FixedStakingCard";
import { NFTCard } from "@/components/overview/NFTCard";
import { useFlexibleStaking } from "@/store/flexibleStaking";
import { utils } from "@consolelabs/mochi-formatter";

const Overview = () => {
const { isLoggedIn } = useLoginWidget();
const [showInfo, setShowInfo] = useState(false);
const [showInfo, setShowInfo] = useState(true);
const { balance } = useFlexibleStaking();

return (
<div className="overflow-y-auto h-[calc(100vh-56px)]">
Expand All @@ -25,7 +28,7 @@ const Overview = () => {
<Typography level="h3" fontWeight="lg" className="flex-1">
You have{" "}
<span className="text-primary-solid">
{showInfo ? 513.24 : "*****"}
{showInfo ? utils.formatTokenDigit(balance) : "*****"}
</span>{" "}
ICY and{" "}
<span className="text-danger-solid">
Expand Down
4 changes: 4 additions & 0 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import "./globals.css";
import { LoginWidgetProvider } from "@mochi-web3/login-widget";
import { Platform } from "@consolelabs/mochi-formatter";
import { AUTH_TELEGRAM_ID, MOCHI_PROFILE_API } from "@/envs";
import { Toaster } from "@mochi-ui/core";

const inter = Inter({ subsets: ["latin"] });

Expand All @@ -28,6 +29,9 @@ export default function RootLayout({
>
{children as any}
</LoginWidgetProvider>
<div className="fixed top-16 right-6 z-50 max-w-[500px] pointer-events-none mx-auto">
<Toaster />
</div>
</body>
</html>
);
Expand Down
11 changes: 10 additions & 1 deletion components/overview/FixedStakingCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { utils } from "@consolelabs/mochi-formatter";
import { useDisclosure } from "@dwarvesf/react-hooks";
import { MinusLine, PlusCircleSolid, PlusLine } from "@mochi-ui/icons";
import { FixedStakeModal } from "../stake/fixed/fixed-stake-modal";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useCountdown } from "@/hooks/useCountdown";
import { useLoginWidget } from "@mochi-web3/login-widget";

Expand Down Expand Up @@ -56,6 +56,15 @@ export const FixedStakingCard = (props: Props) => {
claimableRewards: 0,
};

const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);

if (!isClient) {
return null;
}

return (
<>
<Card
Expand Down
92 changes: 44 additions & 48 deletions components/overview/FlexibleStakingCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ import { utils } from "@consolelabs/mochi-formatter";
import { useDisclosure } from "@dwarvesf/react-hooks";
import { MinusLine, PlusCircleSolid, PlusLine } from "@mochi-ui/icons";
import { FlexibleStakeModal } from "../stake/flexible/flexible-stake-modal";
import { useState } from "react";
import { useCountdown } from "@/hooks/useCountdown";
import { useLoginWidget } from "@mochi-web3/login-widget";
import { useFlexibleStaking } from "@/store/flexibleStaking";
import { useEffect, useState } from "react";

interface Props {
hidden: boolean;
Expand All @@ -24,39 +25,37 @@ interface Props {
export const FlexibleStakingCard = (props: Props) => {
const { hidden } = props;
const { isLoggedIn } = useLoginWidget();
const {
apr,
balance,
stakedAmount,
poolStakedAmount,
earnedRewards,
tokenPrice,
autoStaking,
setValues,
} = useFlexibleStaking();
const { isOpen: isBoosting, onOpen: onBoost } = useDisclosure();
const { isOpen: isAutoStaking, onOpenChange: onAutoStakingChange } =
useDisclosure({
defaultIsOpen: true,
});
const {
isOpen: isOpenFlexibleStakeModal,
onOpenChange: onOpenChangeFlexibleStakeModal,
onOpen: onOpenFlexibleStakeModal,
} = useDisclosure();

// FIXME: mock data
const nftBoost = 0;
const { countDown, hours, minutes, seconds } = useCountdown(
isLoggedIn ? 10 : 0
);
const [claimableRewards, setClaimableRewards] = useState(356.7891);
const data = isLoggedIn
? {
walletBalance: 0,
walletBalanceInUsd: 0,
totalStaked: 514.24,
totalStakedInUsd: 769.86,
nftBoost: isBoosting ? 35 : 0,
claimableRewards,
}
: {
walletBalance: 0,
walletBalanceInUsd: 0,
totalStaked: 0,
totalStakedInUsd: 0,
nftBoost: 0,
claimableRewards: 0,
};

const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);

if (!isClient) {
return null;
}

return (
<>
Expand All @@ -75,70 +74,69 @@ export const FlexibleStakingCard = (props: Props) => {
arrow="bottom-center"
>
<Switch
checked={isAutoStaking}
onCheckedChange={onAutoStakingChange}
checked={autoStaking}
onCheckedChange={(autoStaking) => setValues({ autoStaking })}
/>
</Tooltip>,
]}
icon={<Image src="/ICY.png" alt="" width={24} height={24} />}
title="ICY"
description="Earn competitive returns by staking ICY tokens and NFTs. Fixed yield is achieved at maturity, but you can exit anytime at its current market price."
highlightItems={[
{ label: "Fixed APY", value: "28.7%" },
{ label: "TVL", value: "$2.02M" },
{ label: "Fixed APY", value: utils.formatPercentDigit(apr) },
{
label: "TVL",
value: utils.formatUsdDigit(poolStakedAmount * tokenPrice),
},
]}
items={[
{
label: "Wallet Balance",
value: (
<div className="flex items-center space-x-0.5">
<Typography level="h9">
{utils.formatDigit({ value: data.walletBalance.toFixed(2) })}
{utils.formatTokenDigit(balance)}
</Typography>
<Typography level="h9" color="textDisabled">
ICY
</Typography>
</div>
),
convertedValue: utils.formatDigit({
value: `$${data.walletBalanceInUsd.toFixed(2)}`,
}),
convertedValue: utils.formatUsdDigit(balance * tokenPrice),
hidden,
},
{
label: "Total Staked",
value: (
<div className="flex items-center space-x-0.5">
<Typography level="h9">
{utils.formatDigit({ value: data.totalStaked.toFixed(2) })}
{utils.formatTokenDigit(stakedAmount)}
</Typography>
<Typography level="h9" color="textDisabled">
ICY
</Typography>
</div>
),
convertedValue: data.totalStakedInUsd
? utils.formatDigit({
value: `$${data.totalStakedInUsd.toFixed(2)}`,
})
convertedValue: stakedAmount
? utils.formatUsdDigit(stakedAmount * tokenPrice)
: undefined,
hidden,
},
{
label: "My NFTs Boost",
value: data.nftBoost ? (
value: nftBoost ? (
<ValueChange
trend={data.nftBoost < 0 ? "down" : "up"}
trend={nftBoost < 0 ? "down" : "up"}
className="!gap-0.5 font-semibold"
>
<ValueChangeIndicator>
{data.nftBoost < 0 ? (
{nftBoost < 0 ? (
<MinusLine className="h-2 w-2" />
) : (
<PlusLine className="h-3 w-3" />
)}
</ValueChangeIndicator>
{Math.abs(data.nftBoost).toFixed(1)}%
{Math.abs(nftBoost).toFixed(1)}%
</ValueChange>
) : (
"0"
Expand All @@ -163,7 +161,7 @@ export const FlexibleStakingCard = (props: Props) => {
),
},
]
: data.totalStaked
: stakedAmount
? [
{
value: (
Expand All @@ -176,7 +174,7 @@ export const FlexibleStakingCard = (props: Props) => {
: []),
]}
actions={
data.totalStaked ? (
stakedAmount ? (
[
<Button
key="unstake"
Expand All @@ -203,10 +201,10 @@ export const FlexibleStakingCard = (props: Props) => {
<Image src="/ICY.png" alt="" width={20} height={20} />
<Typography
level="h9"
color={data.claimableRewards ? "primary" : ""}
color={earnedRewards ? "primary" : ""}
className="pl-1 pr-0.5"
>
{utils.formatDigit({ value: data.claimableRewards.toFixed(2) })}
{utils.formatDigit({ value: earnedRewards.toFixed(2) })}
</Typography>
<Typography level="h9" color="textDisabled">
ICY
Expand All @@ -216,7 +214,7 @@ export const FlexibleStakingCard = (props: Props) => {
hidden,
}}
footerExtra={
data.totalStaked && data.claimableRewards ? (
stakedAmount && earnedRewards ? (
countDown ? (
<Badge
appearance="warning"
Expand All @@ -225,9 +223,7 @@ export const FlexibleStakingCard = (props: Props) => {
{`${hours}h ${minutes}m ${seconds}s`}
</Badge>
) : (
<Button variant="outline" onClick={() => setClaimableRewards(0)}>
Claim
</Button>
<Button variant="outline">Claim</Button>
)
) : null
}
Expand Down
10 changes: 10 additions & 0 deletions components/overview/NFTCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Image from "next/image";
import { PlusCircleSolid } from "@mochi-ui/icons";
import { useLoginWidget } from "@mochi-web3/login-widget";
import { utils } from "@consolelabs/mochi-formatter";
import { useEffect, useState } from "react";

interface Props {
hidden: boolean;
Expand Down Expand Up @@ -32,6 +33,15 @@ export const NFTCard = (props: Props) => {
claimableRewards: 0,
};

const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);

if (!isClient) {
return null;
}

return (
<Card
tags={[
Expand Down
Loading

0 comments on commit aa392cc

Please sign in to comment.