Merge pull request #2212 from keep-network/new-rewards-mechanism-dapp…

…-timer

Implement timer for tBTC Rewards interval

This PR implements a timer on the tBTC Rewards page that shows when the next
rewards will be released.

solidity/dashboard/src/components/Timer.jsx

@@ -1,8 +1,82 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
+import moment from "moment";
 
-const Timer = ({ target }) => {
-  // TODO implement timer
-  return <>{target}</>
+const Timer = ({ targetInUnix }) => {
+  const [remainingDays, setRemainingDays] = useState(0)
+  const [remainingHours, setRemainingHours] = useState(0)
+  const [remainingMinutes, setRemainingMinutes] = useState(0)
+  const [remainingSeconds, setRemainingSeconds] = useState(0)
+
+  useEffect(() => {
+    const timerDuration = calculateTimerDuration()
+    setRemainingDays(timerDuration.days)
+    setRemainingHours(timerDuration.hours)
+    setRemainingMinutes(timerDuration.minutes)
+    setRemainingSeconds(timerDuration.seconds)
+  }, [targetInUnix])
+
+  useEffect(() => {
+    const myInterval = setInterval(() => {
+      if (remainingSeconds > 0) {
+        setRemainingSeconds(remainingSeconds - 1)
+      }
+      if (remainingSeconds === 0) {
+        if (
+          remainingDays === 0 &&
+          remainingHours === 0 &&
+          remainingMinutes === 0
+        ) {
+          clearInterval(myInterval)
+        } else {
+          setRemainingSeconds(59)
+          if (remainingMinutes > 0) {
+            setRemainingMinutes(remainingMinutes - 1)
+          } else if (remainingMinutes === 0) {
+            setRemainingMinutes(59)
+            if (remainingHours > 0) {
+              setRemainingHours(remainingHours - 1)
+            } else if (remainingHours === 0) {
+              setRemainingHours(23)
+              if (remainingDays > 0) {
+                setRemainingDays(remainingDays - 1)
+              }
+            }
+          }
+        }
+      }
+    }, 1000)
+    return () => {
+      clearInterval(myInterval)
+    }
+  })
+
+  const zeroPad = (num, places) => String(num).padStart(places, "0")
+
+  const calculateTimerDuration = () => {
+    const currentDate = moment()
+    const target = moment(targetInUnix * 1000)
+    const remainingTimeMs = target.diff(currentDate)
+    const duration = moment.duration(remainingTimeMs)
+
+    const days = Math.floor(duration.asDays())
+    const hours = Math.floor(duration.asHours() % 24)
+    const minutes = Math.floor(duration.asMinutes() % 60)
+    const seconds = Math.floor(duration.asSeconds() % 60)
+
+    return {
+      days: days > 0 ? days : 0,
+      hours: hours > 0 ? hours : 0,
+      minutes: minutes > 0 ? minutes : 0,
+      seconds: seconds > 0 ? seconds : 0,
+    }
+  }
+
+  return (
+    <>
+      {zeroPad(remainingDays, 2)}:{zeroPad(remainingHours, 2)}:
+      {zeroPad(remainingMinutes, 2)}:{zeroPad(remainingSeconds, 2)}
+    </>
+  )
 }
 
 export default Timer

solidity/dashboard/src/pages/rewards/TBTCRewardsPage.jsx

@@ -8,15 +8,20 @@ import ProgressBar from "../../components/ProgressBar"
 import Timer from "../../components/Timer"
 import TBTCRewardsDataTable from "../../components/TBTCRewardsDataTable"
 import { colors } from "../../constants/colors"
+import { ECDSARewardsHelper } from "../../utils/rewardsHelper";
 
 const TBTCRewardsPage = () => {
+  const currentIntervalEndOf = ECDSARewardsHelper.intervalEndOf(
+    ECDSARewardsHelper.currentInterval
+  ).unix()
+
   return (
     <>
       <RewardsOverview />
       <section className="tile rewards-countdown">
         <h2 className="h2--alt">
           Next rewards release:&nbsp;
-          <Timer target="06:23:59:59" />
+          <Timer targetInUnix={currentIntervalEndOf} />
         </h2>
       </section>
       <section className="rewards-calc">