feat(synapse-interface): ecotone and metis upgrade downtime, remove eth dencun

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

@@ -58,7 +58,7 @@ export const AnnouncementBanner = ({
 
   return (
     <div
-      className="flex items-center justify-center mx-auto lg:flex-row"
+      className="flex items-center justify-center mx-auto mb-3 lg:flex-row"
       style={{
         background:
           'linear-gradient(310.65deg, rgba(172, 143, 255, 0.2) -17.9%, rgba(255, 0, 255, 0.2) 86.48%)',

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

@@ -0,0 +1,82 @@
+import { AnnouncementBanner } from '../AnnouncementBanner'
+import { WarningMessage } from '../../Warning'
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { OPTIMISM, BASE } from '@/constants/chains/master'
+import { useEventCountdownProgressBar } from '../EventCountdownProgressBar'
+
+/**
+ * Start: 10 min prior to Ecotone Fork Upgrade Time @ (March 14, 00:00 UTC)
+ * End: 10 min after start of Ecotone Fork Upgrade Time
+ */
+export const ECOTONE_FORK_BANNERS_START = new Date(
+  Date.UTC(2024, 2, 13, 23, 20, 0)
+)
+export const ECOTONE_FORK_START_DATE = new Date(
+  Date.UTC(2024, 2, 13, 23, 50, 0)
+)
+export const ECOTONE_FORK_END_DATE = new Date(Date.UTC(2024, 2, 14, 0, 10, 0))
+
+export const EcotoneForkUpgradeBanner = () => {
+  return (
+    <AnnouncementBanner
+      bannerId="03142024-ecotone-fork"
+      bannerContents={
+        <div className="flex flex-col justify-center space-y-1 text-center">
+          <div>
+            Optimism + Base Bridging and RFQ will be paused 10 minutes ahead of
+            Ecotone (March 14, 00:00 UTC, 20:00 EST).
+          </div>
+          <div>Will be back online shortly following the network upgrade.</div>
+        </div>
+      }
+      startDate={ECOTONE_FORK_BANNERS_START}
+      endDate={ECOTONE_FORK_END_DATE}
+    />
+  )
+}
+
+export const EcotoneForkWarningMessage = () => {
+  const { fromChainId, toChainId } = useBridgeState()
+
+  const isChainOptimism = [fromChainId, toChainId].includes(OPTIMISM.id)
+  const isChainBase = [fromChainId, toChainId].includes(BASE.id)
+
+  if (isChainOptimism || isChainBase) {
+    return (
+      <WarningMessage
+        message={
+          <>
+            <p>
+              Optimism Chain and Base Chain bridging are paused until the
+              Ecotone Fork upgrade completes.
+            </p>
+          </>
+        }
+      />
+    )
+  } else return null
+}
+
+export const useEcotoneForkCountdownProgress = () => {
+  const { fromChainId, toChainId } = useBridgeState()
+
+  const isChainOptimism = [fromChainId, toChainId].includes(OPTIMISM.id)
+  const isChainBase = [fromChainId, toChainId].includes(BASE.id)
+
+  const {
+    isPending: isEcotoneForkUpgradePending,
+    EventCountdownProgressBar: EcotoneForkCountdownProgressBar,
+  } = useEventCountdownProgressBar(
+    'Ecotone Fork upgrade in progress',
+    ECOTONE_FORK_START_DATE,
+    ECOTONE_FORK_END_DATE
+  )
+
+  return {
+    isEcotoneForkUpgradePending,
+    isCurrentChainDisabled:
+      (isChainOptimism || isChainBase) && isEcotoneForkUpgradePending,
+    EcotoneForkCountdownProgressBar:
+      isChainOptimism || isChainBase ? EcotoneForkCountdownProgressBar : null,
+  }
+}

packages/synapse-interface/components/Maintenance/Events/MetisUpgrade.tsx

@@ -0,0 +1,81 @@
+import { AnnouncementBanner } from '../AnnouncementBanner'
+import { WarningMessage } from '../../Warning'
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { METIS } from '@/constants/chains/master'
+import { useEventCountdownProgressBar } from '../EventCountdownProgressBar'
+
+/**
+ * Start: 30 min prior to Metis Chain Downtime @ (March 14, 02:00 UTC)
+ * End: 12 hours after start of Metis Chain Downtime
+ */
+export const METIS_DOWNTIME_BANNERS_START = new Date(
+  Date.UTC(2024, 2, 14, 1, 0, 0)
+)
+export const METIS_DOWNTIME_START_DATE = new Date(
+  Date.UTC(2024, 2, 14, 1, 30, 0)
+)
+export const METIS_DOWNTIME_END_DATE = new Date(
+  Date.UTC(2024, 2, 14, 13, 30, 0)
+)
+
+export const MetisDowntimeBanner = () => {
+  return (
+    <AnnouncementBanner
+      bannerId="03142024-metis-downtime"
+      bannerContents={
+        <div className="flex flex-col justify-center space-y-1 text-center">
+          <div>
+            Metis Chain bridging will be paused 30 min ahead of the Metis
+            Upgrade (March 14, 02:00 UTC, 22:00 EST)
+          </div>
+          <div>and stay paused for ~12 hours.</div>
+        </div>
+      }
+      startDate={METIS_DOWNTIME_BANNERS_START}
+      endDate={METIS_DOWNTIME_END_DATE}
+    />
+  )
+}
+
+export const MetisDowntimeWarningMessage = () => {
+  const { fromChainId, toChainId } = useBridgeState()
+
+  const isChainMetis = [fromChainId, toChainId].includes(METIS.id)
+
+  if (isChainMetis) {
+    return (
+      <WarningMessage
+        message={
+          <>
+            <p>
+              Metis Chain bridging is paused until the Metis upgrade completes.
+            </p>
+          </>
+        }
+      />
+    )
+  } else return null
+}
+
+export const useMetisDowntimeCountdownProgress = () => {
+  const { fromChainId, toChainId } = useBridgeState()
+
+  const isChainMetis = [fromChainId, toChainId].includes(METIS.id)
+
+  const {
+    isPending: isMetisUpgradePending,
+    EventCountdownProgressBar: MetisUpgradeCountdownProgressBar,
+  } = useEventCountdownProgressBar(
+    'Metis upgrade in progress',
+    METIS_DOWNTIME_START_DATE,
+    METIS_DOWNTIME_END_DATE
+  )
+
+  return {
+    isMetisUpgradePending,
+    isCurrentChainDisabled: isChainMetis && isMetisUpgradePending,
+    MetisUpgradeCountdownProgressBar: isChainMetis
+      ? MetisUpgradeCountdownProgressBar
+      : null,
+  }
+}

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

@@ -40,7 +40,7 @@ export const LinearAnimatedProgressBar = memo(
 
     return (
       <svg
-        id="animated-progress-bar"
+        id="linear-animated-progress-bar"
         key={Date.now()}
         width="100%"
         height={height}

packages/synapse-interface/pages/index.tsx

@@ -3,7 +3,8 @@ import { Portfolio } from '@/components/Portfolio/Portfolio'
 import { LandingPageWrapper } from '@/components/layouts/LandingPageWrapper'
 import ReactGA from 'react-ga'
 import useSyncQueryParamsWithBridgeState from '@/utils/hooks/useSyncQueryParamsWithBridgeState'
-import { EthDencunUpgradeBanner } from '@/components/Maintenance/EthDencunUpgrade'
+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
@@ -20,7 +21,8 @@ const Home = () => {
         data-test-id="bridge-page"
         className="relative z-0 flex-1 h-full overflow-y-auto focus:outline-none"
       >
-        <EthDencunUpgradeBanner />
+        <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 />