diff --git a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx
index 596b3d3835..f06cea2625 100644
--- a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx
+++ b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx
@@ -26,10 +26,10 @@ 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)),
},
]
@@ -37,11 +37,13 @@ export const MaintenanceBanners = () => {
return (
<>
{PAUSED_CHAINS.map((event) => {
- ;
+ return (
+
+ )
})}
>
)
@@ -81,15 +83,17 @@ export const MaintenanceBanner = ({
)
}
-const MaintenanceWarningMessages = () => {
+export const MaintenanceWarningMessages = () => {
return (
<>
{PAUSED_CHAINS.map((event) => {
- ;
+ return (
+
+ )
})}
>
)
@@ -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
index 5b26dbf235..43d2126c1b 100644
--- 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 (
@@ -565,7 +571,10 @@ const StateManagedBridge = () => {
transition-all duration-100 transform rounded-md
`}
>
- {MaintenanceCountdownProgressBar}
+ {instances.map((instance) => (
+ <>{instance.MaintenanceCountdownProgressBar}>
+ ))}
+
@@ -603,7 +612,9 @@ const StateManagedBridge = () => {
/>
- {isMaintenancePending && }
+
+
+
{
isApproved={isApproved}
approveTxn={approveTxn}
executeBridge={executeBridge}
- isBridgePaused={isCurrentChainDisabled}
+ isBridgePaused={isBridgePaused}
/>