From fcb685f12f70f3623e16bb0260503156568b3f83 Mon Sep 17 00:00:00 2001
From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com>
Date: Tue, 12 Mar 2024 10:45:35 -0700
Subject: [PATCH] feat(synapse-interface): complete countdown (#2254)

* Countdown stops at 0

* Stop countdown after reaching 0

* Clean
---
 .../synapse-interface/pages/4844/index.tsx    | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/synapse-interface/pages/4844/index.tsx b/packages/synapse-interface/pages/4844/index.tsx
index 33b5dfc93a..b848c0f4f6 100644
--- a/packages/synapse-interface/pages/4844/index.tsx
+++ b/packages/synapse-interface/pages/4844/index.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router'
 import { LandingPageWrapper } from '@/components/layouts/LandingPageWrapper'
 import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer'
 import ExternalLinkIcon from '@/components/icons/ExternalLinkIcon'
@@ -6,8 +5,13 @@ import ExternalLinkIcon from '@/components/icons/ExternalLinkIcon'
 const Countdown = () => {
   useIntervalTimer(1000)
 
-  const { daysRemaining, hoursRemaining, minutesRemaining, secondsRemaining } =
-    calculateTimeUntilTarget()
+  const {
+    daysRemaining,
+    hoursRemaining,
+    minutesRemaining,
+    secondsRemaining,
+    isComplete,
+  } = calculateTimeUntilTarget()
 
   return (
     <LandingPageWrapper>
@@ -16,22 +20,30 @@ const Countdown = () => {
 
         <div className="flex space-x-3 text-center text-synapsePurple">
           <div className="inline-block m-auto">
-            <div className="w-19 text-7xl">{daysRemaining}</div>
+            <div className="w-19 text-7xl">
+              {isComplete ? '0' : daysRemaining}
+            </div>
             <div className="text-xl">Days</div>
           </div>
 
           <div className="inline-block m-auto">
-            <div className="w-24 text-7xl">{hoursRemaining}</div>
+            <div className="w-24 text-7xl">
+              {isComplete ? '00' : hoursRemaining}
+            </div>
             <div className="text-xl">Hours</div>
           </div>
 
           <div className="inline-block m-auto">
-            <div className="w-[5.5rem] text-7xl">{minutesRemaining}</div>
+            <div className="w-[5.5rem] text-7xl">
+              {isComplete ? '00' : minutesRemaining}
+            </div>
             <div className="text-xl">Minutes</div>
           </div>
 
           <div className="inline-block mt-auto">
-            <div className="w-[5.5rem] text-6xl">{secondsRemaining}</div>
+            <div className="w-[5.5rem] text-6xl">
+              {isComplete ? '00' : secondsRemaining}
+            </div>
             <div className="text-xl">Seconds</div>
           </div>
         </div>
@@ -88,6 +100,8 @@ const calculateTimeUntilTarget = () => {
 
   const timeDifference = targetDate.getTime() - currentDate.getTime()
 
+  const isComplete = timeDifference <= 0
+
   const daysRemaining = Math.floor(timeDifference / (1000 * 60 * 60 * 24))
   const hoursRemaining = Math.floor(
     (timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
@@ -108,5 +122,6 @@ const calculateTimeUntilTarget = () => {
     hoursRemaining,
     minutesRemaining,
     secondsRemaining,
+    isComplete,
   }
 }