From 3468b9d7dbf117253ce6a96050798f2fa50f4559 Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Thu, 9 Nov 2023 13:09:52 +0900
Subject: [PATCH] feat: update threshold of halving countdown

This commit updates the countdown of halving, and shows
"Coming soon" info when countdown less than or equal to 3 seconds
---
 src/components/Banner/HalvingBanner.tsx | 4 ++--
 src/pages/Halving/index.tsx             | 4 ++--
 src/utils/hook.ts                       | 4 +++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Banner/HalvingBanner.tsx b/src/components/Banner/HalvingBanner.tsx
index bc58cc75a..54d62d4d6 100644
--- a/src/components/Banner/HalvingBanner.tsx
+++ b/src/components/Banner/HalvingBanner.tsx
@@ -34,7 +34,7 @@ function numberToOrdinal(number: number) {
 
 export const HalvingBanner = () => {
   const { estimatedDate, halvingCount, inCelebration, isLoading } = useHalving()
-  const [days, hours, minutes, seconds, expired] = useCountdown(estimatedDate)
+  const [days, hours, minutes, seconds, isComingSoon] = useCountdown(estimatedDate)
   const isMobile = useIsMobile()
   const [t, { language }] = useTranslation()
 
@@ -60,7 +60,7 @@ export const HalvingBanner = () => {
       return t('halving.learn_more')
     }
 
-    if (expired) {
+    if (isComingSoon) {
       return t('halving.comming_soon')
     }
 
diff --git a/src/pages/Halving/index.tsx b/src/pages/Halving/index.tsx
index 7cad229a4..3893d2cc0 100644
--- a/src/pages/Halving/index.tsx
+++ b/src/pages/Halving/index.tsx
@@ -54,7 +54,7 @@ export const HalvingCountdownPage = () => {
     (((currentEpoch % EPOCHS_PER_HALVING) * THEORETICAL_EPOCH_TIME - currentEpochUsedTime) /
       (EPOCHS_PER_HALVING * THEORETICAL_EPOCH_TIME)) *
     100
-  const [days, hours, minutes, seconds, expired] = useCountdown(estimatedDate)
+  const [days, hours, minutes, seconds, isComingSoon] = useCountdown(estimatedDate)
 
   const shortCountdown = () => {
     if (days > 0) {
@@ -132,7 +132,7 @@ export const HalvingCountdownPage = () => {
       )
     }
 
-    if (expired) {
+    if (isComingSoon) {
       return (
         <div className={styles.halvingPanelWrapper}>
           <div className={classnames(styles.halvingPanel, styles.loadingPanel)}>
diff --git a/src/utils/hook.ts b/src/utils/hook.ts
index 7f19c7b89..1a5bf61fd 100644
--- a/src/utils/hook.ts
+++ b/src/utils/hook.ts
@@ -604,7 +604,9 @@ export const useCountdown = (targetDate: Date): [number, number, number, number,
   const minutes = expired ? 0 : Math.floor((countdown % (1000 * 60 * 60)) / (1000 * 60))
   const seconds = expired ? 0 : Math.floor((countdown % (1000 * 60)) / 1000)
 
-  return [days, hours, minutes, seconds, expired]
+  const isComingSoon = countdown <= 3_000 // show coming soon when countdown is less than 3s
+
+  return [days, hours, minutes, seconds, isComingSoon]
 }
 
 export const useSingleHalving = (_halvingCount = 1) => {