From 0675eac5fd32e81b80d66cb02137ad4945ddff66 Mon Sep 17 00:00:00 2001
From: "tai.truong" <tai.truong@sotatek.com>
Date: Mon, 19 Feb 2024 11:03:59 +0700
Subject: [PATCH] fix: MET-1955 fix show epoch incorrect

---
 .../DelegationPool/DelegationOverview/index.tsx   | 15 ++++++++++++---
 src/components/Home/Statistic/index.tsx           |  5 ++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/DelegationPool/DelegationOverview/index.tsx b/src/components/DelegationPool/DelegationOverview/index.tsx
index 7d44ef04af..d9c76c9e9b 100644
--- a/src/components/DelegationPool/DelegationOverview/index.tsx
+++ b/src/components/DelegationPool/DelegationOverview/index.tsx
@@ -59,7 +59,10 @@ const OverViews: React.FC = () => {
       </Grid>
     );
   }
-  const slot = (currentEpoch?.slot || 0) % MAX_SLOT_EPOCH;
+
+  const slot = moment(`${currentEpoch?.endTime} GMT+0000`).isAfter(moment().utc())
+    ? (currentEpoch?.slot || 0) % MAX_SLOT_EPOCH
+    : MAX_SLOT_EPOCH;
   const countdown = MAX_SLOT_EPOCH - slot;
   const duration = moment.duration(countdown ? countdown : 0, "second");
   const days = duration.days();
@@ -102,7 +105,9 @@ const OverViews: React.FC = () => {
                 <StyledCard.Content>
                   <StyledCard.Title>{t("glossary.slot")}</StyledCard.Title>
                   <StyledCard.Value>
-                    {(currentEpoch?.slot || 0) % MAX_SLOT_EPOCH}
+                    {moment(`${currentEpoch?.endTime} GMT+0000`).isAfter(moment().utc())
+                      ? (currentEpoch?.slot || 0) % MAX_SLOT_EPOCH
+                      : MAX_SLOT_EPOCH}
                     <Box component="span" sx={{ color: (theme) => theme.palette.secondary.light, fontWeight: "400" }}>
                       / {MAX_SLOT_EPOCH}
                     </Box>
@@ -113,7 +118,11 @@ const OverViews: React.FC = () => {
               <Box position={"relative"} top={-60} px={4}>
                 <StyledLinearProgress
                   variant="determinate"
-                  value={(((currentEpoch?.slot || 0) % MAX_SLOT_EPOCH) / MAX_SLOT_EPOCH) * 100}
+                  value={
+                    moment(`${currentEpoch?.endTime} GMT+0000`).isAfter(moment().utc())
+                      ? (((currentEpoch?.slot || 0) % MAX_SLOT_EPOCH) / MAX_SLOT_EPOCH) * 100
+                      : 100
+                  }
                 />
               </Box>
             </Box>
diff --git a/src/components/Home/Statistic/index.tsx b/src/components/Home/Statistic/index.tsx
index 5b5789028b..f46709178e 100644
--- a/src/components/Home/Statistic/index.tsx
+++ b/src/components/Home/Statistic/index.tsx
@@ -78,14 +78,13 @@ const API_GECKO = "https://api.coingecko.com/api/v3/coins/markets";
 const HomeStatistic = () => {
   const { t } = useTranslation();
   const { currentEpoch, blockNo } = useSelector(({ system }: RootState) => system);
-
   const { data } = useFetch<StakeAnalytics>(API.STAKE.ANALYTICS, undefined, false, blockNo);
   const { theme: themeMode } = useSelector(({ theme }: RootState) => theme);
   const { liveStake = 0, activeStake = 1 } = data || {};
   const supply = BigNumber(currentEpoch?.circulatingSupply || 0).div(10 ** 6);
   const liveRate = new BigNumber(liveStake).div(MILION).div(supply).multipliedBy(100);
   const circulatingSupply = new BigNumber(supply).multipliedBy(MILION);
-  const progress = moment(currentEpoch?.endTime).isAfter(moment())
+  const progress = moment(`${currentEpoch?.endTime} GMT+0000`).isAfter(moment().utc())
     ? (((currentEpoch?.slot || 0) / MAX_SLOT_EPOCH) * 100).toFixed(0)
     : 100;
   const isShowProgressPendingText = +progress < MAX_PERCENT_SHOW_LAST_BAR;
@@ -228,7 +227,7 @@ const HomeStatistic = () => {
                     <Title data-testid="current-epoch-number">{numberWithCommas(currentEpoch?.no)}</Title>
                     <Box color={({ palette }) => palette.secondary.light}>
                       {t("common.slot")}:{" "}
-                      {moment(currentEpoch?.endTime).isAfter(moment())
+                      {moment(`${currentEpoch?.endTime} GMT+0000`).isAfter(moment().utc())
                         ? numberWithCommas(currentEpoch?.slot)
                         : numberWithCommas(MAX_SLOT_EPOCH)}
                       / {numberWithCommas(MAX_SLOT_EPOCH)}