refactor: improve counter (#116)

forbole · Nov 22, 2023 · 5314348 · 5314348
1 parent 6ed9d40
commit 5314348
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/screens/staking/components/hero/components/stats/components/stats_card/index.tsx b/src/screens/staking/components/hero/components/stats/components/stats_card/index.tsx
@@ -29,7 +29,9 @@ const StatsCard = ({ title, stats }: any) => {
         <Typography variant="h3">{convertToMoney(counterValue)}</Typography>
       )}
       {title === t("supporting networks") && (
-        <Typography variant="h3">{convertToMoney(counterValue)}</Typography>
+        <Typography variant="h3">
+          {Math.floor(counterValue as number)}
+        </Typography>
       )}
     </Box>
   );

diff --git a/src/screens/staking/components/hooks.ts b/src/screens/staking/components/hooks.ts
@@ -21,12 +21,16 @@ export const useCounter = (targetValue: unknown) => {
       if (typeof targetValue === "number") {
         setCounterValue(0);
 
-        divisor.current = Math.ceil(targetValue / 200);
+        divisor.current = targetValue * (targetValue > 100 ? 0.01 : 0.006);
 
         clearInterval();
 
+        let pending = false;
         intervalId.current = window.setInterval(() => {
+          if (pending) return;
+          pending = true;
           window.requestAnimationFrame(() => {
+            pending = false;
             setCounterValue((prev: unknown) => {
               if (
                 typeof prev !== "number" ||
@@ -44,7 +48,7 @@ export const useCounter = (targetValue: unknown) => {
               return newValue;
             });
           });
-        }, 16);
+        });
       } else {
         setCounterValue(targetValue);
       }