Merge branch 'develop' into preview

consolelabs · May 10, 2024 · 64eb3f7 · 64eb3f7
2 parents e97efd6 + 336915c
commit 64eb3f7
Show file tree

Hide file tree

Showing 9 changed files with 189 additions and 223 deletions.
diff --git a/app/[server]/earn/page.tsx b/app/[server]/earn/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Footer } from "@/components/footer";
-import { Button, IconButton, Typography } from "@mochi-ui/core";
+import { IconButton, Typography } from "@mochi-ui/core";
 import { EyeHiddenSolid, EyeShowSolid } from "@mochi-ui/icons";
 import { useLoginWidget } from "@mochi-web3/login-widget";
 import { Suspense, useEffect, useRef, useState } from "react";
@@ -16,7 +16,7 @@ import { TokenImage } from "@/components/token-image";
 import { Header } from "@/components/header/header";
 
 const Overview = () => {
-  const { isLoggedIn } = useLoginWidget();
+  const { isLoggedIn, isLoggingIn } = useLoginWidget();
   const { stakingPools } = useTokenStaking();
   const {
     balance,
@@ -27,6 +27,32 @@ const Overview = () => {
   } = useFlexibleStaking();
   const [showInfo, setShowInfo] = useState(false);
 
+  const totalStakedAmount = stakingToken?.token_price
+    ? `$${utils.formatTokenDigit(
+        formatUnits(
+          stakedAmount
+            .mul(parseUnits(String(stakingToken.token_price)))
+            .div(parseUnits("1")),
+          stakingToken?.token_decimal
+        )
+      )}`
+    : `${utils.formatTokenDigit(
+        formatUnits(stakedAmount, stakingToken?.token_decimal)
+      )} ${stakingToken?.token_symbol}`;
+
+  const totalRewards = rewardToken?.token_price
+    ? `$${utils.formatTokenDigit(
+        formatUnits(
+          totalEarnedRewards
+            .mul(parseUnits(String(rewardToken.token_price)))
+            .div(parseUnits("1")),
+          rewardToken?.token_decimal
+        )
+      )}`
+    : `${utils.formatTokenDigit(
+        formatUnits(totalEarnedRewards, rewardToken?.token_decimal)
+      )} ${rewardToken?.token_symbol}`;
+
   const initShowInfo = useRef(false);
   useEffect(() => {
     if (!!balance && !balance.isZero() && !showInfo && !initShowInfo.current) {
@@ -35,6 +61,10 @@ const Overview = () => {
     }
   }, [balance, showInfo]);
 
+  if (isLoggingIn) {
+    return null;
+  }
+
   return (
     <div className="overflow-y-auto h-[calc(100vh-56px)] flex flex-col">
       <div className="flex-1 px-4 pt-12 pb-16 mx-auto space-y-14 max-w-6xl">
@@ -81,35 +111,22 @@ const Overview = () => {
                     )}
                   </IconButton>
                 </div>
-                <div className="flex items-center space-x-4">
+                {/* <div className="flex items-center space-x-4">
                   <Button variant="link" className="pr-0 pl-0 h-fit" disabled>
                     Claim all
                   </Button>
                   <Button variant="link" className="pr-0 pl-0 h-fit" disabled>
                     Restake
                   </Button>
-                </div>
+                </div> */}
               </div>
               <div className="flex justify-between items-center py-3 border-b border-divider">
                 <div className="space-y-0.5">
                   <Typography level="p6" className="text-text-tertiary">
                     Total amount staked
                   </Typography>
                   <Typography level="h6" fontWeight="lg">
-                    {showInfo
-                      ? utils.formatUsdDigit(
-                          formatUnits(
-                            stakedAmount
-                              .mul(
-                                parseUnits(
-                                  String(stakingToken?.token_price || 1)
-                                )
-                              )
-                              .div(parseUnits("1")),
-                            stakingToken?.token_decimal
-                          )
-                        )
-                      : "*********"}
+                    {showInfo ? totalStakedAmount : "*********"}
                   </Typography>
                 </div>
                 <div className="flex items-center ml-2 space-x-1">
@@ -124,23 +141,10 @@ const Overview = () => {
               <div className="grid grid-cols-2 gap-6 items-center py-3">
                 <div className="space-y-0.5">
                   <Typography level="p6" className="text-text-tertiary">
-                    Rewards earned
+                    Cumulative Total Reward
                   </Typography>
                   <Typography level="h6" fontWeight="lg" color="success">
-                    {showInfo
-                      ? utils.formatUsdDigit(
-                          formatUnits(
-                            totalEarnedRewards
-                              .mul(
-                                parseUnits(
-                                  String(rewardToken?.token_price || 1)
-                                )
-                              )
-                              .div(parseUnits("1")),
-                            rewardToken?.token_decimal
-                          )
-                        )
-                      : "********"}
+                    {showInfo ? totalRewards : "********"}
                   </Typography>
                 </div>
                 <div className="space-y-0.5">

diff --git a/components/common/DateTime.tsx b/components/common/DateTime.tsx
@@ -0,0 +1,22 @@
+import { formatDateToDateTime } from "@/utils/datetime";
+import React, { useState, useEffect } from "react";
+
+interface Props {
+  format?: (date: Date) => string;
+}
+
+export const DateTime = (props: Props) => {
+  const { format = formatDateToDateTime } = props;
+  const [date, setDate] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => setDate(new Date()), 1000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return <>{format(date)}</>;
+};
+
+export default DateTime;
diff --git a/components/stake/flexible/flexible-stake-preview.tsx b/components/stake/flexible/flexible-stake-preview.tsx
@@ -143,7 +143,9 @@ export const FlexibleStakePreview = (props: Props) => {
       <div className="py-3 grid grid-cols-2 gap-2 items-center">
         <Typography level="p4">You&apos;re staking</Typography>
         <Typography level="p5" className="text-text-tertiary text-right">
-          ~ {utils.formatUsdDigit(amount * (stakingToken?.token_price || 1))}
+          {stakingToken?.token_price
+            ? `~ ${utils.formatUsdDigit(amount * stakingToken.token_price)}`
+            : ""}
         </Typography>
         <div className="flex items-center space-x-2">
           <TokenImage symbol={stakingToken?.token_symbol} size={24} />
@@ -164,7 +166,7 @@ export const FlexibleStakePreview = (props: Props) => {
         >
           {[
             {
-              title: "Approve spending cap",
+              title: "Increase spending cap",
               description:
                 "Please approve spending cap in your wallet extension",
             },

diff --git a/components/stake/flexible/flexible-stake-response.tsx b/components/stake/flexible/flexible-stake-response.tsx
@@ -84,7 +84,7 @@ export const FlexibleStakeResponse = (props: Props) => {
             </Typography>
           </div>
         </div>
-        <div className="flex items-center space-x-2">
+        {/* <div className="flex items-center space-x-2">
           <Tooltip
             content="Auto-Staking automates the process of topping up your margin wallet, saving you from manually transferring funds before each trade. This is especially useful if you plan on making frequent trades."
             className="max-w-xs text-center z-50"
@@ -99,7 +99,7 @@ export const FlexibleStakeResponse = (props: Props) => {
           <Typography level="p5" className="text-text-tertiary">
             Potential for profit maximization
           </Typography>
-        </div>
+        </div> */}
       </div>
       <div className="mt-8 grid grid-cols-2 gap-3">
         <Button size="lg" variant="outline" color="neutral" onClick={onClose}>

diff --git a/components/stake/flexible/flexible-unstake-content.tsx b/components/stake/flexible/flexible-unstake-content.tsx
@@ -14,8 +14,8 @@ import { useFlexibleStaking } from "@/store/flexible-staking";
 import { LoginWidget } from "@mochi-web3/login-widget";
 import { formatUnits, parseUnits } from "ethers/lib/utils";
 import { useWalletNetwork } from "@/hooks/useWalletNetwork";
-import { formatDate } from "@/utils/datetime";
 import { utils } from "@consolelabs/mochi-formatter";
+import DateTime from "@/components/common/DateTime";
 
 interface Props {
   container: HTMLDivElement | null;
@@ -61,8 +61,10 @@ export const FlexibleUnstakeContent = (props: Props) => {
             Unstake now
           </Typography>
           <div className="flex items-center justify-between">
-            <Typography level="p5">Today</Typography>
-            <Typography level="p5">{formatDate(new Date())}</Typography>
+            <Typography level="p5">Date</Typography>
+            <Typography level="p5">
+              <DateTime />
+            </Typography>
           </div>
           <div className="flex items-center justify-between">
             <Typography level="p5">APY</Typography>

diff --git a/components/stake/flexible/flexible-unstake-preview.tsx b/components/stake/flexible/flexible-unstake-preview.tsx
@@ -29,7 +29,6 @@ export const FlexibleUnstakePreview = (props: Props) => {
     poolContract,
     stakedAmount,
     stakingToken,
-    unclaimedRewards,
     rewardToken,
     latestUnstaking,
     updateValues,
@@ -45,25 +44,19 @@ export const FlexibleUnstakePreview = (props: Props) => {
     if (!poolContract) return;
     try {
       setIsLoading(true);
-      const unclaimedRewards =
-        (await poolContract.getRewardAvailableForClaim()) || constants.Zero;
       const txHash = await poolContract.claimReward();
       if (!txHash) {
         throw new Error("Failed to stake");
       }
-      setValues((values) => ({
-        latestUnstaking: {
-          ...values.latestUnstaking!,
-          rewards: Number(
-            formatUnits(unclaimedRewards, rewardToken?.token_decimal)
-          ),
-        },
-      }));
+      let unclaimedRewards = constants.Zero;
       // FIXME: retry to get updated values
       await retry(
         async () => {
           const newUnclaimedRewards =
             await poolContract.getRewardAvailableForClaim();
+          if (newUnclaimedRewards?.gte(unclaimedRewards)) {
+            unclaimedRewards = newUnclaimedRewards;
+          }
           if (
             !newUnclaimedRewards ||
             newUnclaimedRewards.gte(unclaimedRewards)
@@ -75,6 +68,14 @@ export const FlexibleUnstakePreview = (props: Props) => {
         3000,
         100
       );
+      setValues((values) => ({
+        latestUnstaking: {
+          ...values.latestUnstaking!,
+          rewards: Number(
+            formatUnits(unclaimedRewards, rewardToken?.token_decimal)
+          ),
+        },
+      }));
       await updateValues();
       onSuccess();
       setIsLoading(false);
@@ -159,7 +160,9 @@ export const FlexibleUnstakePreview = (props: Props) => {
       <div className="py-3 grid grid-cols-2 gap-2 items-center">
         <Typography level="p4">You&apos;re unstaking</Typography>
         <Typography level="p5" className="text-text-tertiary text-right">
-          ~ {utils.formatUsdDigit(amount * (stakingToken?.token_price || 1))}
+          {stakingToken?.token_price
+            ? `~ ${utils.formatUsdDigit(amount * stakingToken.token_price)}`
+            : ""}
         </Typography>
         <div className="flex items-center space-x-2">
           <TokenImage symbol={stakingToken?.token_symbol} size={24} />

diff --git a/components/stake/flexible/flexible-unstake-response.tsx b/components/stake/flexible/flexible-unstake-response.tsx
@@ -1,6 +1,6 @@
 import { Button, Typography } from "@mochi-ui/core";
 import { ArrowTopRightLine, CheckCircleHalfColoredLine } from "@mochi-ui/icons";
-import { formatDate } from "@/utils/datetime";
+import { formatDateToDateTime } from "@/utils/datetime";
 import { useFlexibleStaking } from "@/store/flexible-staking";
 import Link from "next/link";
 import { formatTokenAmount } from "@/utils/number";
@@ -47,8 +47,8 @@ export const FlexibleUnstakeResponse = (props: Props) => {
         </div>
         <div className="rounded-lg border border-divider p-4 space-y-2">
           <div className="flex items-center justify-between">
-            <Typography level="p5">Today</Typography>
-            <Typography level="p5">{formatDate(date)}</Typography>
+            <Typography level="p5">Date</Typography>
+            <Typography level="p5">{formatDateToDateTime(date)}</Typography>
           </div>
           <div className="flex items-center justify-between">
             <Typography level="p5">APY</Typography>
@@ -62,15 +62,7 @@ export const FlexibleUnstakeResponse = (props: Props) => {
           <div className="flex items-center justify-between">
             <Typography level="p5">Current reward</Typography>
             <Typography level="p5">
-              {
-                formatTokenAmount(
-                  formatUnits(
-                    unclaimedRewardsRef.current,
-                    rewardToken?.token_decimal
-                  )
-                ).display
-              }{" "}
-              {rewardToken?.token_symbol}
+              {formatTokenAmount(rewards).display} {rewardToken?.token_symbol}
             </Typography>
           </div>
           <div className="flex items-center justify-between">