Aggregate maintenance events for banners and warning message

packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx

@@ -22,17 +22,52 @@ const MAINTENANCE_START_DATE = new Date(Date.UTC(2024, 2, 20, 20, 20, 0))
 /** Ends Banner, Countdown Progress Bar, Bridge Warning Message, Bridge Pause */
 const MAINTENANCE_END_DATE = new Date(Date.UTC(2024, 2, 20, 22, 0, 0))
 
-export const MaintenanceBanner = () => {
+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)),
+  },
+]
+
+export const MaintenanceBanners = () => {
+  return (
+    <>
+      {PAUSED_CHAINS.map((event) => {
+        ;<MaintenanceBanner
+          id={event.id}
+          startDate={event.startTime}
+          endDate={event.endTime}
+        />
+      })}
+    </>
+  )
+}
+
+export const MaintenanceBanner = ({
+  id,
+  startDate,
+  endDate,
+}: {
+  id: string
+  startDate: Date
+  endDate: Date
+}) => {
   const { isComplete } = getCountdownTimeStatus(
-    MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time
-    MAINTENANCE_END_DATE // Banner will automatically disappear when end time is reached
+    // MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time
+    // MAINTENANCE_END_DATE // Banner will automatically disappear when end time is reached
+    startDate,
+    endDate
   )
 
   useIntervalTimer(60000, isComplete)
 
   return (
     <AnnouncementBanner
-      bannerId="03202024-maintenance-banner"
+      bannerId={id}
       bannerContents={
         <>
           <p className="m-auto">
@@ -46,17 +81,42 @@ export const MaintenanceBanner = () => {
   )
 }
 
-export const MaintenanceWarningMessage = () => {
+const MaintenanceWarningMessages = () => {
+  return (
+    <>
+      {PAUSED_CHAINS.map((event) => {
+        ;<MaintenanceWarningMessage
+          startDate={event.startTime}
+          endDate={event.endTime}
+          pausedChains={event.pausedChains}
+        />
+      })}
+    </>
+  )
+}
+
+export const MaintenanceWarningMessage = ({
+  startDate,
+  endDate,
+  pausedChains,
+}: {
+  startDate: Date
+  endDate: Date
+  pausedChains: number[]
+}) => {
   const { fromChainId, toChainId } = useBridgeState()
 
   const isWarningChain = isChainIncluded(
     [fromChainId, toChainId],
-    [OPTIMISM.id, BASE.id] // Update for Chains to show warning on
+    // [OPTIMISM.id, BASE.id] // Update for Chains to show warning on
+    pausedChains
   )
 
   const { isComplete } = getCountdownTimeStatus(
-    MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time
-    MAINTENANCE_END_DATE // Banner will automatically disappear when end time is reached
+    // MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time
+    // MAINTENANCE_END_DATE // Banner will automatically disappear when end time is reached
+    startDate,
+    endDate
   )
 
   if (isComplete) return null
@@ -76,21 +136,32 @@ export const MaintenanceWarningMessage = () => {
   return null
 }
 
-export const useMaintenanceCountdownProgress = () => {
+export const useMaintenanceCountdownProgress = ({
+  startDate,
+  endDate,
+  pausedChains,
+}: {
+  startDate: Date
+  endDate: Date
+  pausedChains: number[]
+}) => {
   const { fromChainId, toChainId } = useBridgeState()
 
   const isCurrentChain = isChainIncluded(
     [fromChainId, toChainId],
-    [OPTIMISM.id, BASE.id] // Update for Chains to show maintenance on
+    // [OPTIMISM.id, BASE.id] // Update for Chains to show maintenance on
+    pausedChains
   )
 
   const {
     isPending: isMaintenancePending,
     EventCountdownProgressBar: MaintenanceCountdownProgressBar,
   } = useEventCountdownProgressBar(
     'Maintenance in progress',
-    MAINTENANCE_START_DATE, // Countdown Bar will automatically appear after start time
-    MAINTENANCE_END_DATE // Countdown Bar will automatically disappear when end time is reached
+    // MAINTENANCE_START_DATE, // Countdown Bar will automatically appear after start time
+    // MAINTENANCE_END_DATE // Countdown Bar will automatically disappear when end time is reached
+    startDate,
+    endDate
   )
 
   return {

packages/synapse-interface/pages/index.tsx

@@ -3,7 +3,10 @@ import { Portfolio } from '@/components/Portfolio/Portfolio'
 import { LandingPageWrapper } from '@/components/layouts/LandingPageWrapper'
 import ReactGA from 'react-ga'
 import useSyncQueryParamsWithBridgeState from '@/utils/hooks/useSyncQueryParamsWithBridgeState'
-import { MaintenanceBanner } from '@/components/Maintenance/Events/template/MaintenanceEvent'
+import {
+  MaintenanceBanner,
+  MaintenanceBanners,
+} from '@/components/Maintenance/Events/template/MaintenanceEvent'
 
 // TODO: someone should add this to the .env, disable if blank, etc.
 // this is being added as a hotfix to assess user load on the synapse explorer api
@@ -16,7 +19,7 @@ const Home = () => {
 
   return (
     <>
-      <MaintenanceBanner />
+      <MaintenanceBanners />
       <LandingPageWrapper>
         <main
           data-test-id="bridge-page"

packages/synapse-interface/pages/state-managed-bridge/index.tsx

@@ -87,6 +87,7 @@ import { isTransactionReceiptError } from '@/utils/isTransactionReceiptError'
 import { SwitchButton } from '@/components/buttons/SwitchButton'
 import {
   MaintenanceWarningMessage,
+  MaintenanceWarningMessages,
   useMaintenanceCountdownProgress,
 } from '@/components/Maintenance/Events/template/MaintenanceEvent'
 
@@ -602,7 +603,7 @@ const StateManagedBridge = () => {
             />
             <OutputContainer />
             <Warning />
-            {isMaintenancePending && <MaintenanceWarningMessage />}
+            {isMaintenancePending && <MaintenanceWarningMessages />}
             <Transition
               appear={true}
               unmount={false}