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} />