feat(fix): Render timeleft on end time update (#2320)

polkadot-cloud · Nov 7, 2024 · fd7c52b · fd7c52b
1 parent f55229f
commit fd7c52b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/hooks/useEraTimeLeft/index.tsx b/src/hooks/useEraTimeLeft/index.tsx
@@ -37,7 +37,7 @@ export const useEraTimeLeft = () => {
       ? new BigNumber(0)
       : new BigNumber(100).minus(percentRemaining);
 
-    return { timeleft, percentSurpassed, percentRemaining };
+    return { timeleft, end, percentSurpassed, percentRemaining };
   };
 
   return { get };

diff --git a/src/pages/Overview/Stats/ActiveEraTimeLeft.tsx b/src/pages/Overview/Stats/ActiveEraTimeLeft.tsx
@@ -17,16 +17,17 @@ export const ActiveEraStat = () => {
   const { get: getEraTimeleft } = useEraTimeLeft();
   const { timeleft, setFromNow } = useTimeLeft();
 
+  const timeleftResult = getEraTimeleft();
   const dateFrom = fromUnixTime(Date.now() / 1000);
-  const dateTo = fromNow(getEraTimeleft().timeleft.toNumber());
+  const dateTo = fromNow(timeleftResult.timeleft.toNumber());
 
   // re-set timer on era change (also covers network change).
   useEffect(() => {
     setFromNow(dateFrom, dateTo);
-  }, [activeEra]);
+  }, [activeEra, timeleftResult.end.toString()]);
 
   // NOTE: this maybe should be called in an interval. Needs more testing.
-  const { percentSurpassed, percentRemaining } = getEraTimeleft();
+  const { percentSurpassed, percentRemaining } = timeleftResult;
 
   const params = {
     label: t('overview.timeRemainingThisEra'),