From dcc1b0ff5339f1a826033883b8564af3edbe42d0 Mon Sep 17 00:00:00 2001
From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com>
Date: Thu, 16 May 2024 13:40:16 -0700
Subject: [PATCH] Resolve hooks render issue with localized component

---
 .../Maintenance/CountdownProgressBar.tsx      |  0
 .../components/Maintenance/Maintenance.tsx    | 44 +++++++++----------
 .../MaintenanceCountdownProgress.tsx          | 33 ++++++++++++++
 .../helpers/getCountdownTimeStatus.ts         | 22 +++++++++-
 .../hooks/useEventCountdownProgressBar.tsx    |  2 +-
 packages/widget/src/components/Widget.tsx     | 27 ++++++++++--
 6 files changed, 101 insertions(+), 27 deletions(-)
 create mode 100644 packages/widget/src/components/Maintenance/CountdownProgressBar.tsx
 create mode 100644 packages/widget/src/components/Maintenance/MaintenanceCountdownProgress.tsx

diff --git a/packages/widget/src/components/Maintenance/CountdownProgressBar.tsx b/packages/widget/src/components/Maintenance/CountdownProgressBar.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/widget/src/components/Maintenance/Maintenance.tsx b/packages/widget/src/components/Maintenance/Maintenance.tsx
index 6cf8c45fc1..d12f1c8a31 100644
--- a/packages/widget/src/components/Maintenance/Maintenance.tsx
+++ b/packages/widget/src/components/Maintenance/Maintenance.tsx
@@ -9,15 +9,15 @@ interface ChainPause {
   pausedToChains: number[]
   pauseBridge: boolean
   startTimePauseChain: Date
-  endTimePauseChain: Date | null // If null, pause chain indefinitely
-  inputWarningMessage: JSX.Element
-  progressBarMessage: JSX.Element
+  endTimePauseChain: Date | null
+  inputWarningMessage: string
+  progressBarMessage: string
   disableWarning: boolean
   disableCountdown: boolean
 }
 
 interface BridgeModulePause {
-  chainId?: number // If undefined, pause module for all chains
+  chainId: number | undefined
   bridgeModuleName: 'SynapseBridge' | 'SynapseRFQ' | 'SynapseCCTP' | 'ALL'
 }
 
@@ -33,8 +33,8 @@ export const useMaintenanceComponents = (
           endTimePauseChain: pause.endTimePauseChain
             ? new Date(pause.endTimePauseChain)
             : null,
-          inputWarningMessage: <div>{pause.inputWarningMessage}</div>,
-          progressBarMessage: <div>{pause.progressBarMessage}</div>,
+          inputWarningMessage: pause.inputWarningMessage,
+          progressBarMessage: pause.progressBarMessage,
         }
       })
     : []
@@ -80,27 +80,27 @@ export const useMaintenanceComponents = (
     )
   }
 
-  const useMaintenanceCountdownProgresses = () => {
-    const { originChainId, destinationChainId } = useBridgeState()
+  // const useMaintenanceCountdownProgresses = () => {
+  //   const { originChainId, destinationChainId } = useBridgeState()
 
-    return pausedChainsList?.map((event) => {
-      return useMaintenanceCountdownProgress({
-        originChainId,
-        destinationChainId,
-        startDate: event.startTimePauseChain,
-        endDate: event.endTimePauseChain,
-        pausedFromChains: event.pausedFromChains,
-        pausedToChains: event.pausedToChains,
-        progressBarMessage: event.progressBarMessage,
-        disabled: event.disableCountdown,
-      })
-    })
-  }
+  //   return pausedChainsList?.map((event) => {
+  //     return useMaintenanceCountdownProgress({
+  //       originChainId,
+  //       destinationChainId,
+  //       startDate: event.startTimePauseChain,
+  //       endDate: event.endTimePauseChain,
+  //       pausedFromChains: event.pausedFromChains,
+  //       pausedToChains: event.pausedToChains,
+  //       progressBarMessage: event.progressBarMessage,
+  //       disabled: event.disableCountdown,
+  //     })
+  //   })
+  // }
 
   return {
     pausedChains: pausedChainsList,
     pausedModules: pausedModulesList,
     MaintenanceWarningMessages,
-    useMaintenanceCountdownProgresses,
+    // useMaintenanceCountdownProgresses,
   }
 }
diff --git a/packages/widget/src/components/Maintenance/MaintenanceCountdownProgress.tsx b/packages/widget/src/components/Maintenance/MaintenanceCountdownProgress.tsx
new file mode 100644
index 0000000000..8b5784bd9c
--- /dev/null
+++ b/packages/widget/src/components/Maintenance/MaintenanceCountdownProgress.tsx
@@ -0,0 +1,33 @@
+import { useEventCountdownProgressBar } from './hooks/useEventCountdownProgressBar'
+import { isChainIncluded } from '@/utils/isChainIncluded'
+
+export const MaintenanceCountdownProgress = ({
+  originChainId,
+  destinationChainId,
+  startDate,
+  endDate,
+  pausedFromChains,
+  pausedToChains,
+  progressBarMessage,
+  disabled = false,
+}: {
+  originChainId: number
+  destinationChainId: number
+  startDate: Date
+  endDate: Date | null
+  pausedFromChains: number[]
+  pausedToChains: number[]
+  progressBarMessage: any
+  disabled?: boolean
+}) => {
+  const isCurrentChain =
+    isChainIncluded([originChainId], pausedFromChains) ||
+    isChainIncluded([destinationChainId], pausedToChains)
+
+  const {
+    isPending: isMaintenancePending,
+    EventCountdownProgressBar: MaintenanceCountdownProgressBar,
+  } = useEventCountdownProgressBar(progressBarMessage, startDate, endDate)
+
+  return MaintenanceCountdownProgressBar
+}
diff --git a/packages/widget/src/components/Maintenance/helpers/getCountdownTimeStatus.ts b/packages/widget/src/components/Maintenance/helpers/getCountdownTimeStatus.ts
index 7bd1855ae5..03f107c214 100644
--- a/packages/widget/src/components/Maintenance/helpers/getCountdownTimeStatus.ts
+++ b/packages/widget/src/components/Maintenance/helpers/getCountdownTimeStatus.ts
@@ -1,9 +1,29 @@
 import { isNull } from 'lodash'
 
 export const getCountdownTimeStatus = (
-  startDate: Date,
+  startDate: Date | null,
   endDate: Date | null
 ) => {
+  if (!startDate && !endDate) {
+    return {
+      currentDate: null,
+      currentTimeInSeconds: null,
+      startTimeInSeconds: null,
+      endTimeInSeconds: null,
+      totalTimeInSeconds: null,
+      totalTimeElapsedInSeconds: null,
+      totalTimeRemainingInSeconds: null,
+      totalTimeRemainingInMinutes: null,
+      daysRemaining: null,
+      hoursRemaining: null,
+      minutesRemaining: null,
+      secondsRemaining: null,
+      isStarted: false,
+      isComplete: false,
+      isPending: false,
+    }
+  }
+
   const currentDate = new Date()
 
   const currentTimeInSeconds = Math.floor(currentDate.getTime() / 1000)
diff --git a/packages/widget/src/components/Maintenance/hooks/useEventCountdownProgressBar.tsx b/packages/widget/src/components/Maintenance/hooks/useEventCountdownProgressBar.tsx
index 826d0bdd3d..c2405a9103 100644
--- a/packages/widget/src/components/Maintenance/hooks/useEventCountdownProgressBar.tsx
+++ b/packages/widget/src/components/Maintenance/hooks/useEventCountdownProgressBar.tsx
@@ -24,7 +24,7 @@ export const useEventCountdownProgressBar = (
   const { totalTimeRemainingInMinutes, hoursRemaining, isComplete, isPending } =
     getCountdownTimeStatus(startDate, endDate)
 
-  useIntervalTimer(60000, isComplete)
+  useIntervalTimer(60000, isComplete || !startDate)
 
   const timeRemaining: string =
     totalTimeRemainingInMinutes > 90
diff --git a/packages/widget/src/components/Widget.tsx b/packages/widget/src/components/Widget.tsx
index 0219137247..a7bfa7137c 100644
--- a/packages/widget/src/components/Widget.tsx
+++ b/packages/widget/src/components/Widget.tsx
@@ -63,6 +63,8 @@ import { findTokenByRouteSymbol } from '@/utils/findTokenByRouteSymbol'
 import { useMaintenanceComponents } from './Maintenance/Maintenance'
 import { getSynapsePauseData } from '@/utils/getSynapsePauseData'
 import { isChainIncluded } from '@/utils/isChainIncluded'
+import { MaintenanceCountdownProgress } from './Maintenance/MaintenanceCountdownProgress'
+import { useEventCountdownProgressBar } from '@/components/Maintenance/hooks/useEventCountdownProgressBar'
 
 interface WidgetProps {
   customTheme: CustomThemeVariables
@@ -103,7 +105,7 @@ export const Widget = ({
     pausedChains,
     pausedModules,
     MaintenanceWarningMessages,
-    useMaintenanceCountdownProgresses,
+    // useMaintenanceCountdownProgresses,
   } = useMaintenanceComponents(chainPause, modulePause)
 
   const currentChainPause = pausedChains.find((pauseData) => {
@@ -113,6 +115,15 @@ export const Widget = ({
     )
   })
 
+  const {
+    isPending: isBridgeDisabled,
+    EventCountdownProgressBar: MaintenanceCountdownProgressBar,
+  } = useEventCountdownProgressBar(
+    currentChainPause?.progressBarMessage,
+    currentChainPause?.startTimePauseChain,
+    currentChainPause?.endTimePauseChain
+  )
+
   console.log('currentChainPause: ', currentChainPause)
 
   // const maintenanceCountdownProgressInstances =
@@ -416,6 +427,16 @@ export const Widget = ({
         {/* {maintenanceCountdownProgressInstances?.map((instance) => (
           <>{instance.MaintenanceCountdownProgressBar}</>
         ))} */}
+        <MaintenanceCountdownProgress
+          originChainId={originChainId}
+          destinationChainId={destinationChainId}
+          startDate={currentChainPause?.startTimePauseChain}
+          endDate={currentChainPause?.endTimePauseChain}
+          pausedFromChains={currentChainPause?.pausedFromChains}
+          pausedToChains={currentChainPause?.pausedToChains}
+          progressBarMessage={currentChainPause?.progressBarMessage}
+          disabled={currentChainPause?.disableCountdown}
+        />
         <Transactions connectedAddress={connectedAddress} />
         <section
           className={cardStyle}
@@ -499,8 +520,8 @@ export const Widget = ({
             approveTxnStatus === ApproveTransactionStatus.PENDING
           }
           isBridgePending={bridgeTxnStatus === BridgeTransactionStatus.PENDING}
-          // isBridgePaused={isBridgePaused}
-          isBridgePaused={false}
+          isBridgePaused={isBridgeDisabled}
+          // isBridgePaused={false}
         />
       </div>
     </div>