Create Event example for annoucements + progress bar, add comments

packages/synapse-interface/components/Maintenance/EventCountdownProgressBar.tsx

@@ -1,6 +1,15 @@
 import { LinearAnimatedProgressBar } from './LinearAnimatedProgressBar'
 import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer'
 
+/**
+ * Automated Event Countdown Progress bar that displays
+ * time remaining for event target end date to be reached.
+ * Displays a visual progress bar with percentage completion.
+ *
+ * @param eventLabel text to display in progress bar
+ * @param startDate starting date for progress bar to activate
+ * @param endDate ending date for progress bar to disappear
+ */
 export const useEventCountdownProgressBar = (
   eventLabel: string,
   startDate: Date,
@@ -10,11 +19,11 @@ export const useEventCountdownProgressBar = (
   isComplete: boolean
   EventCountdownProgressBar: JSX.Element
 } => {
-  useIntervalTimer(60000)
-
   const { totalTimeRemainingInMinutes, hoursRemaining, isComplete, isPending } =
     getCountdownTimeStatus(startDate, endDate)
 
+  useIntervalTimer(60000, isComplete)
+
   const timeRemaining: string =
     totalTimeRemainingInMinutes > 90
       ? `${hoursRemaining}h`

packages/synapse-interface/components/Maintenance/Events/EcotoneForkUpgrade.tsx → packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx

@@ -1,13 +1,19 @@
-import { AnnouncementBanner } from '../AnnouncementBanner'
-import { WarningMessage } from '../../Warning'
+import { AnnouncementBanner } from '../../AnnouncementBanner'
+import { WarningMessage } from '../../../Warning'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import { OPTIMISM, BASE } from '@/constants/chains/master'
 import {
   useEventCountdownProgressBar,
   getCountdownTimeStatus,
-} from '../EventCountdownProgressBar'
+} from '../../EventCountdownProgressBar'
 import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer'
 
+/**
+ * Leaving this file to serve as an example for how to create
+ * automated annoucement banners and event countdown timer bars
+ * with the ability to pause Bridge by selected chain ids
+ */
+
 /**
  * Start: 25 min prior to Ecotone Fork Upgrade Time @ (March 14, 00:00 UTC)
  * End: 25 min after start of Ecotone Fork Upgrade Time