diff --git a/solidity/dashboard/src/components/Timer.jsx b/solidity/dashboard/src/components/Timer.jsx
index 4b5edf2b10..a12705ec08 100644
--- a/solidity/dashboard/src/components/Timer.jsx
+++ b/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
diff --git a/solidity/dashboard/src/pages/rewards/TBTCRewardsPage.jsx b/solidity/dashboard/src/pages/rewards/TBTCRewardsPage.jsx
index 47301942f9..ca2f0097a0 100644
--- a/solidity/dashboard/src/pages/rewards/TBTCRewardsPage.jsx
+++ b/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 (
<>
Next rewards release:
-
+