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:  - +