Dynamically render countdown progress bars based on PAUSED_CHAIN

synapsecns · Mar 21, 2024 · 5029481 · 5029481
1 parent 1fe163f
commit 5029481
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 23 deletions.
diff --git a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx
@@ -26,22 +26,24 @@ const PAUSED_CHAINS = [
   {
     id: 'optimism-chain-pause',
     pausedChains: [OPTIMISM.id],
-    startTime: new Date(Date.UTC(2024, 2, 20, 20, 20, 0)),
-    endTime: new Date(Date.UTC(2024, 2, 20, 22, 0, 0)),
-    bannerStartTime: new Date(Date.UTC(2024, 2, 20, 20, 20, 0)),
-    bannerEndTime: new Date(Date.UTC(2024, 2, 20, 22, 0, 0)),
+    startTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)),
+    endTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)),
+    bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)),
+    bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)),
   },
 ]
 
 export const MaintenanceBanners = () => {
   return (
     <>
       {PAUSED_CHAINS.map((event) => {
-        ;<MaintenanceBanner
-          id={event.id}
-          startDate={event.startTime}
-          endDate={event.endTime}
-        />
+        return (
+          <MaintenanceBanner
+            id={event.id}
+            startDate={event.bannerStartTime}
+            endDate={event.bannerEndTime}
+          />
+        )
       })}
     </>
   )
@@ -81,15 +83,17 @@ export const MaintenanceBanner = ({
   )
 }
 
-const MaintenanceWarningMessages = () => {
+export const MaintenanceWarningMessages = () => {
   return (
     <>
       {PAUSED_CHAINS.map((event) => {
-        ;<MaintenanceWarningMessage
-          startDate={event.startTime}
-          endDate={event.endTime}
-          pausedChains={event.pausedChains}
-        />
+        return (
+          <MaintenanceWarningMessage
+            startDate={event.startTime}
+            endDate={event.endTime}
+            pausedChains={event.pausedChains}
+          />
+        )
       })}
     </>
   )
@@ -136,6 +140,20 @@ export const MaintenanceWarningMessage = ({
   return null
 }
 
+/**
+ * Hook that maps through PAUSED_CHAINS to apply the single chain countdown progress logic to each.
+ * @returns Array of objects containing maintenance status and components for each paused chain.
+ */
+export const useMaintenanceCountdownProgresses = () => {
+  return PAUSED_CHAINS.map((event) => {
+    return useMaintenanceCountdownProgress({
+      startDate: event.startTime,
+      endDate: event.endTime,
+      pausedChains: event.pausedChains,
+    })
+  })
+}
+
 export const useMaintenanceCountdownProgress = ({
   startDate,
   endDate,

diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -89,6 +89,7 @@ import {
   MaintenanceWarningMessage,
   MaintenanceWarningMessages,
   useMaintenanceCountdownProgress,
+  useMaintenanceCountdownProgresses,
 } from '@/components/Maintenance/Events/template/MaintenanceEvent'
 
 const StateManagedBridge = () => {
@@ -522,11 +523,16 @@ const StateManagedBridge = () => {
   const springClass =
     '-mt-4 fixed z-50 w-full h-full bg-opacity-50 bg-[#343036]'
 
-  const {
-    isMaintenancePending,
-    isCurrentChainDisabled,
-    MaintenanceCountdownProgressBar,
-  } = useMaintenanceCountdownProgress()
+  // const {
+  //   isMaintenancePending,
+  //   isCurrentChainDisabled,
+  //   MaintenanceCountdownProgressBar,
+  // } = useMaintenanceCountdownProgress()
+
+  const instances = useMaintenanceCountdownProgresses()
+  const isBridgePaused = instances.some(
+    (instance) => instance.isCurrentChainDisabled
+  )
 
   return (
     <div className="flex flex-col w-full max-w-lg mx-auto lg:mx-0">
@@ -565,7 +571,10 @@ const StateManagedBridge = () => {
             transition-all duration-100 transform rounded-md
           `}
         >
-          {MaintenanceCountdownProgressBar}
+          {instances.map((instance) => (
+            <>{instance.MaintenanceCountdownProgressBar}</>
+          ))}
+
           <div ref={bridgeDisplayRef}>
             <Transition show={showSettingsSlideOver} {...TRANSITION_PROPS}>
               <animated.div>
@@ -603,7 +612,9 @@ const StateManagedBridge = () => {
             />
             <OutputContainer />
             <Warning />
-            {isMaintenancePending && <MaintenanceWarningMessages />}
+
+            <MaintenanceWarningMessages />
+
             <Transition
               appear={true}
               unmount={false}
@@ -623,7 +634,7 @@ const StateManagedBridge = () => {
                 isApproved={isApproved}
                 approveTxn={approveTxn}
                 executeBridge={executeBridge}
-                isBridgePaused={isCurrentChainDisabled}
+                isBridgePaused={isBridgePaused}
               />
             </div>
           </div>