feat(synapse-interface): create template event maintenance components, remove ecotone + metis event maintenance components

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
@@ -68,6 +74,15 @@ export const EcotoneForkWarningMessage = () => {
   } else return null
 }
 
+/**
+ * Example of how to use hook:
+ *
+ * const {
+    isEcotoneForkUpgradePending,
+    isCurrentChainDisabled: isEcotoneUpgradeChainsDisabled,
+    EcotoneForkCountdownProgressBar,
+  } = useEcotoneForkCountdownProgress()
+ */
 export const useEcotoneForkCountdownProgress = () => {
   const { fromChainId, toChainId } = useBridgeState()
 

packages/synapse-interface/pages/index.tsx

@@ -3,8 +3,6 @@ import { Portfolio } from '@/components/Portfolio/Portfolio'
 import { LandingPageWrapper } from '@/components/layouts/LandingPageWrapper'
 import ReactGA from 'react-ga'
 import useSyncQueryParamsWithBridgeState from '@/utils/hooks/useSyncQueryParamsWithBridgeState'
-import { EcotoneForkUpgradeBanner } from '@/components/Maintenance/Events/EcotoneForkUpgrade'
-import { MetisDowntimeBanner } from '@/components/Maintenance/Events/MetisUpgrade'
 
 // 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
@@ -21,8 +19,6 @@ const Home = () => {
         data-test-id="bridge-page"
         className="relative z-0 flex-1 h-full overflow-y-auto focus:outline-none"
       >
-        <EcotoneForkUpgradeBanner />
-        <MetisDowntimeBanner />
         <div className="flex flex-col-reverse justify-center gap-16 px-4 py-20 mx-auto lg:flex-row 2xl:w-3/4 sm:mt-6 sm:px-8 md:px-12">
           <Portfolio />
           <StateManagedBridge />

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

@@ -85,22 +85,6 @@ import {
 } from '@/slices/priceDataSlice'
 import { isTransactionReceiptError } from '@/utils/isTransactionReceiptError'
 import { SwitchButton } from '@/components/buttons/SwitchButton'
-import { useEventCountdownProgressBar } from '@/components/Maintenance/EventCountdownProgressBar'
-
-import {
-  METIS_DOWNTIME_START_DATE,
-  METIS_DOWNTIME_END_DATE,
-  MetisDowntimeWarningMessage,
-  useMetisDowntimeCountdownProgress,
-} from '@/components/Maintenance/Events/MetisUpgrade'
-import {
-  ECOTONE_FORK_START_DATE,
-  ECOTONE_FORK_END_DATE,
-  EcotoneForkWarningMessage,
-  useEcotoneForkCountdownProgress,
-} from '@/components/Maintenance/Events/EcotoneForkUpgrade'
-
-import { OPTIMISM, BASE, METIS } from '@/constants/chains/master'
 
 const StateManagedBridge = () => {
   const { address } = useAccount()
@@ -533,20 +517,6 @@ const StateManagedBridge = () => {
   const springClass =
     '-mt-4 fixed z-50 w-full h-full bg-opacity-50 bg-[#343036]'
 
-  /* Remove after upgrades */
-  const {
-    isEcotoneForkUpgradePending,
-    isCurrentChainDisabled: isEcotoneUpgradeChainsDisabled,
-    EcotoneForkCountdownProgressBar,
-  } = useEcotoneForkCountdownProgress()
-
-  const {
-    isMetisUpgradePending,
-    isCurrentChainDisabled: isMetisUpgradeChainDisabled,
-    MetisUpgradeCountdownProgressBar,
-  } = useMetisDowntimeCountdownProgress()
-  /* Remove after upgrades */
-
   return (
     <div className="flex flex-col w-full max-w-lg mx-auto lg:mx-0">
       <div className="flex flex-col">
@@ -584,8 +554,6 @@ const StateManagedBridge = () => {
             transition-all duration-100 transform rounded-md
           `}
         >
-          {EcotoneForkCountdownProgressBar}
-          {MetisUpgradeCountdownProgressBar}
           <div ref={bridgeDisplayRef}>
             <Transition show={showSettingsSlideOver} {...TRANSITION_PROPS}>
               <animated.div>
@@ -623,12 +591,6 @@ const StateManagedBridge = () => {
             />
             <OutputContainer />
             <Warning />
-
-            {/* Remove after upgrades */}
-            {isEcotoneForkUpgradePending && <EcotoneForkWarningMessage />}
-            {isMetisUpgradePending && <MetisDowntimeWarningMessage />}
-            {/* Remove after upgrades */}
-
             <Transition
               appear={true}
               unmount={false}
@@ -648,9 +610,7 @@ const StateManagedBridge = () => {
                 isApproved={isApproved}
                 approveTxn={approveTxn}
                 executeBridge={executeBridge}
-                isBridgePaused={
-                  isEcotoneUpgradeChainsDisabled || isMetisUpgradeChainDisabled
-                }
+                isBridgePaused={false}
               />
             </div>
           </div>