feat(synapse-interface): improve maintenance event template, remove Metis pause

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

@@ -1,6 +1,6 @@
 import { useBridgeState } from '@/slices/bridge/hooks'
 import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer'
-import { METIS } from '@/constants/chains/master'
+import { OPTIMISM, BASE } from '@/constants/chains/master'
 import {
   useEventCountdownProgressBar,
   getCountdownTimeStatus,
@@ -19,10 +19,12 @@ import { WarningMessage } from '../../../Warning'
  * End: 50 min after start of Ecotone Fork Upgrade Time
  */
 export const ECOTONE_FORK_BANNERS_START = new Date(
-  Date.UTC(2024, 2, 20, 16, 0, 0)
+  Date.UTC(2024, 2, 13, 23, 20, 0)
 )
-export const ECOTONE_FORK_START_DATE = new Date(Date.UTC(2024, 2, 20, 18, 0, 0))
-export const ECOTONE_FORK_END_DATE = new Date(Date.UTC(2024, 2, 20, 21, 0, 0))
+export const ECOTONE_FORK_START_DATE = new Date(
+  Date.UTC(2024, 2, 13, 23, 35, 0)
+)
+export const ECOTONE_FORK_END_DATE = new Date(Date.UTC(2024, 2, 14, 0, 25, 0))
 
 /** Previous implementation can be seen here: https://github.com/synapsecns/sanguine/pull/2294/files#diff-bbe6298d3dfbc80e46e2ff8b399a3e1822cede80f392b1af91875145ad4eeb19R19 */
 export const EcotoneForkUpgradeBanner = () => {
@@ -35,9 +37,13 @@ export const EcotoneForkUpgradeBanner = () => {
 
   return (
     <AnnouncementBanner
-      bannerId="03202024-metis-pause"
+      bannerId="03142024-ecotone-fork"
       bannerContents={
-        <>Metis Bridging is paused. Will be back online shortly.</>
+        <>
+          Optimism + Base Bridging will be paused 10 minutes ahead of Ecotone
+          (March 14, 00:00 UTC, 20:00 EST). Will be back online shortly
+          following the network upgrade.
+        </>
       }
       startDate={ECOTONE_FORK_BANNERS_START}
       endDate={ECOTONE_FORK_END_DATE}
@@ -54,14 +60,18 @@ export const EcotoneForkUpgradeBanner = () => {
 export const EcotoneForkWarningMessage = () => {
   const { fromChainId, toChainId } = useBridgeState()
 
-  const isToChainMetis = toChainId === METIS.id
+  const isChainOptimism = [fromChainId, toChainId].includes(OPTIMISM.id)
+  const isChainBase = [fromChainId, toChainId].includes(BASE.id)
 
-  if (isToChainMetis) {
+  if (isChainOptimism || isChainBase) {
     return (
       <WarningMessage
         message={
           <>
-            <p>Metis Chain bridging are paused.</p>
+            <p>
+              Optimism Chain and Base Chain bridging are paused until the
+              Ecotone Fork upgrade completes.
+            </p>
           </>
         }
       />
@@ -95,22 +105,23 @@ export const EcotoneForkWarningMessage = () => {
 export const useEcotoneForkCountdownProgress = () => {
   const { fromChainId, toChainId } = useBridgeState()
 
-  const isToChainMetis = toChainId === METIS.id
+  const isChainOptimism = [fromChainId, toChainId].includes(OPTIMISM.id)
+  const isChainBase = [fromChainId, toChainId].includes(BASE.id)
 
   const {
     isPending: isEcotoneForkUpgradePending,
     EventCountdownProgressBar: EcotoneForkCountdownProgressBar,
   } = useEventCountdownProgressBar(
-    'Metis Bridging is paused',
+    'Ecotone Fork upgrade in progress',
     ECOTONE_FORK_START_DATE, // Countdown Bar will automatically appear after start time
     ECOTONE_FORK_END_DATE // Countdown Bar will automatically disappear when end time is reached
   )
 
   return {
     isEcotoneForkUpgradePending,
-    isCurrentChainDisabled: isToChainMetis, // Used to pause Bridge
-    EcotoneForkCountdownProgressBar: isToChainMetis
-      ? EcotoneForkCountdownProgressBar
-      : null,
+    isCurrentChainDisabled:
+      (isChainOptimism || isChainBase) && isEcotoneForkUpgradePending, // Used to pause Bridge
+    EcotoneForkCountdownProgressBar:
+      isChainOptimism || isChainBase ? EcotoneForkCountdownProgressBar : null,
   }
 }

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

@@ -0,0 +1,114 @@
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer'
+import { OPTIMISM, BASE } from '@/constants/chains/master'
+import {
+  useEventCountdownProgressBar,
+  getCountdownTimeStatus,
+} from '../../EventCountdownProgressBar'
+import { AnnouncementBanner } from '../../AnnouncementBanner'
+import { WarningMessage } from '../../../Warning'
+
+/**
+ * Edit this file for Website Maintenance, components already placed on Bridge page
+ *
+ * If require multiple maintenance events, create another file using this file as a template
+ * and add another instance of components on relevant pages
+ */
+
+/** Banner start time */
+const MAINTENANCE_BANNERS_START = new Date(Date.UTC(2024, 2, 20, 20, 20, 0))
+/** Countdown Progress Bar, Bridge Warning Message + Bridge Pause start time */
+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 { isComplete } = getCountdownTimeStatus(
+    MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time
+    MAINTENANCE_END_DATE // Banner will automatically disappear when end time is reached
+  )
+
+  useIntervalTimer(60000, isComplete)
+
+  return (
+    <AnnouncementBanner
+      bannerId="03202024-maintenance-banner"
+      bannerContents={
+        <>
+          <p className="m-auto">
+            Bridging is paused until maintenance is complete.
+          </p>
+        </>
+      }
+      startDate={MAINTENANCE_BANNERS_START}
+      endDate={MAINTENANCE_END_DATE}
+    />
+  )
+}
+
+export const MaintenanceWarningMessage = () => {
+  const { fromChainId, toChainId } = useBridgeState()
+
+  const isWarningChain = isChainIncluded(
+    [fromChainId, toChainId],
+    [OPTIMISM.id, BASE.id] // Update for Chains to show warning on
+  )
+
+  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
+  )
+
+  if (isComplete) return null
+
+  if (isWarningChain) {
+    return (
+      <WarningMessage
+        message={
+          <>
+            <p>Bridging is paused until maintenance is complete.</p>
+          </>
+        }
+      />
+    )
+  }
+
+  return null
+}
+
+export const useMaintenanceCountdownProgress = () => {
+  const { fromChainId, toChainId } = useBridgeState()
+
+  const isCurrentChain = isChainIncluded(
+    [fromChainId, toChainId],
+    [OPTIMISM.id, BASE.id] // Update for Chains to show maintenance on
+  )
+
+  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
+  )
+
+  return {
+    isMaintenancePending,
+    isCurrentChainDisabled: isCurrentChain && isMaintenancePending, // Used to pause Bridge
+    MaintenanceCountdownProgressBar: isCurrentChain
+      ? MaintenanceCountdownProgressBar
+      : null,
+  }
+}
+
+/**
+ * Checks if any of the chain IDs in `hasChains` are found within the `chainList` array.
+ *
+ * @param {number[]} chainList - The array of chain IDs to check against.
+ * @param {number[]} hasChains - The array of chain IDs to find within `checkChains`.
+ * @returns {boolean} - True if any chain ID from `hasChains` is found in `checkChains`, otherwise false.
+ */
+const isChainIncluded = (chainList: number[], hasChains: number[]) => {
+  return hasChains.some((chainId) => chainList.includes(chainId))
+}

packages/synapse-interface/pages/index.tsx

@@ -3,7 +3,7 @@ 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/example/EcotoneForkUpgrade'
+import { MaintenanceBanner } 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 +16,7 @@ const Home = () => {
 
   return (
     <>
-      <EcotoneForkUpgradeBanner />
+      <MaintenanceBanner />
       <LandingPageWrapper>
         <main
           data-test-id="bridge-page"

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

@@ -86,9 +86,9 @@ import {
 import { isTransactionReceiptError } from '@/utils/isTransactionReceiptError'
 import { SwitchButton } from '@/components/buttons/SwitchButton'
 import {
-  EcotoneForkWarningMessage,
-  useEcotoneForkCountdownProgress,
-} from '@/components/Maintenance/Events/example/EcotoneForkUpgrade'
+  MaintenanceWarningMessage,
+  useMaintenanceCountdownProgress,
+} from '@/components/Maintenance/Events/template/MaintenanceEvent'
 
 const StateManagedBridge = () => {
   const { address } = useAccount()
@@ -522,10 +522,10 @@ const StateManagedBridge = () => {
     '-mt-4 fixed z-50 w-full h-full bg-opacity-50 bg-[#343036]'
 
   const {
-    isEcotoneForkUpgradePending,
+    isMaintenancePending,
     isCurrentChainDisabled,
-    EcotoneForkCountdownProgressBar,
-  } = useEcotoneForkCountdownProgress()
+    MaintenanceCountdownProgressBar,
+  } = useMaintenanceCountdownProgress()
 
   return (
     <div className="flex flex-col w-full max-w-lg mx-auto lg:mx-0">
@@ -564,7 +564,7 @@ const StateManagedBridge = () => {
             transition-all duration-100 transform rounded-md
           `}
         >
-          {EcotoneForkCountdownProgressBar}
+          {MaintenanceCountdownProgressBar}
           <div ref={bridgeDisplayRef}>
             <Transition show={showSettingsSlideOver} {...TRANSITION_PROPS}>
               <animated.div>
@@ -602,6 +602,7 @@ const StateManagedBridge = () => {
             />
             <OutputContainer />
             <Warning />
+            {isMaintenancePending && <MaintenanceWarningMessage />}
             <Transition
               appear={true}
               unmount={false}