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

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

@@ -0,0 +1,57 @@
+import { AnnouncementBanner } from './AnnouncementBanner'
+import { WarningMessage } from '../Warning'
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { OPTIMISM, BASE } from '@/constants/chains/master'
+
+/**
+ * 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, 13, 24, 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).
+          </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
+}

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/components/Maintenance/MetisUpgrade.tsx

@@ -0,0 +1,57 @@
+import { AnnouncementBanner } from './AnnouncementBanner'
+import { WarningMessage } from '../Warning'
+import { useBridgeState } from '@/slices/bridge/hooks'
+import { METIS } from '@/constants/chains/master'
+
+/**
+ * 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>
+            Due to a Metis upgrade, bridging to and from Metis will pause 30
+            minutes ahead of March 14, 02:00 UTC,
+          </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
+}

packages/synapse-interface/pages/index.tsx

@@ -4,6 +4,8 @@ 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/EcotoneForkUpgrade'
+import { MetisDowntimeBanner } from '@/components/Maintenance/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 +22,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 />

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

@@ -87,10 +87,19 @@ import {
 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,
+} from '@/components/Maintenance/MetisUpgrade'
 import {
-  ETH_DENCUN_START_DATE,
-  ETH_DENCUN_END_DATE,
-} from '@/components/Maintenance/EthDencunUpgrade'
+  ECOTONE_FORK_START_DATE,
+  ECOTONE_FORK_END_DATE,
+  EcotoneForkWarningMessage,
+} from '@/components/Maintenance/EcotoneForkUpgrade'
+
+import { OPTIMISM, BASE, METIS } from '@/constants/chains/master'
 
 const StateManagedBridge = () => {
   const { address } = useAccount()
@@ -523,15 +532,37 @@ const StateManagedBridge = () => {
   const springClass =
     '-mt-4 fixed z-50 w-full h-full bg-opacity-50 bg-[#343036]'
 
+  /* Remove after upgrades */
   const {
-    isPending: isUpgradePending,
-    EventCountdownProgressBar: EthDencunEventCountdownProgressBar,
+    isPending: isEcotoneForkUpgradePending,
+    EventCountdownProgressBar: EcotoneForkCountdownProgressBar,
   } = useEventCountdownProgressBar(
-    'Dencun upgrade in progress',
-    ETH_DENCUN_START_DATE,
-    ETH_DENCUN_END_DATE
+    'Ecotone Fork upgrade in progress',
+    ECOTONE_FORK_START_DATE,
+    ECOTONE_FORK_END_DATE
   )
 
+  const {
+    isPending: isMetisUpgradePending,
+    EventCountdownProgressBar: MetisUpgradeCountdownProgressBar,
+  } = useEventCountdownProgressBar(
+    'Metis upgrade in progress',
+    METIS_DOWNTIME_START_DATE,
+    METIS_DOWNTIME_END_DATE
+  )
+
+  const isBridgePaused = (): boolean => {
+    if (isEcotoneForkUpgradePending) {
+      if ([fromChainId, toChainId].includes(OPTIMISM.id)) return true
+      if ([fromChainId, toChainId].includes(BASE.id)) return true
+    }
+    if (isMetisUpgradePending) {
+      if ([fromChainId, toChainId].includes(METIS.id)) return true
+    }
+    return false
+  }
+  /* Remove after upgrades */
+
   return (
     <div className="flex flex-col w-full max-w-lg mx-auto lg:mx-0">
       <div className="flex flex-col">
@@ -569,73 +600,72 @@ const StateManagedBridge = () => {
             transition-all duration-100 transform rounded-md
           `}
         >
-          {EthDencunEventCountdownProgressBar}
-          <div
-            className={
-              isUpgradePending
-                ? 'cursor-not-allowed pointer-events-none brightness-75 contrast-[90%] opacity-75 aria-disabled'
-                : 'cursor-pointer pointer-events-auto'
-            }
-          >
-            <div ref={bridgeDisplayRef}>
-              <Transition show={showSettingsSlideOver} {...TRANSITION_PROPS}>
-                <animated.div>
-                  <SettingsSlideOver key="settings" />
-                </animated.div>
-              </Transition>
-              <Transition show={showFromChainListOverlay} {...TRANSITION_PROPS}>
-                <animated.div className={springClass}>
-                  <FromChainListOverlay />
-                </animated.div>
-              </Transition>
-              <Transition show={showFromTokenListOverlay} {...TRANSITION_PROPS}>
-                <animated.div className={springClass}>
-                  <FromTokenListOverlay />
-                </animated.div>
-              </Transition>
-              <Transition show={showToChainListOverlay} {...TRANSITION_PROPS}>
-                <animated.div className={springClass}>
-                  <ToChainListOverlay />
-                </animated.div>
-              </Transition>
-              <Transition show={showToTokenListOverlay} {...TRANSITION_PROPS}>
-                <animated.div className={springClass}>
-                  <ToTokenListOverlay />
-                </animated.div>
-              </Transition>
-              <InputContainer />
-              <SwitchButton
-                onClick={() => {
-                  dispatch(setFromChainId(toChainId))
-                  dispatch(setFromToken(toToken))
-                  dispatch(setToChainId(fromChainId))
-                  dispatch(setToToken(fromToken))
-                }}
+          {EcotoneForkCountdownProgressBar}
+          {MetisUpgradeCountdownProgressBar}
+          <div ref={bridgeDisplayRef}>
+            <Transition show={showSettingsSlideOver} {...TRANSITION_PROPS}>
+              <animated.div>
+                <SettingsSlideOver key="settings" />
+              </animated.div>
+            </Transition>
+            <Transition show={showFromChainListOverlay} {...TRANSITION_PROPS}>
+              <animated.div className={springClass}>
+                <FromChainListOverlay />
+              </animated.div>
+            </Transition>
+            <Transition show={showFromTokenListOverlay} {...TRANSITION_PROPS}>
+              <animated.div className={springClass}>
+                <FromTokenListOverlay />
+              </animated.div>
+            </Transition>
+            <Transition show={showToChainListOverlay} {...TRANSITION_PROPS}>
+              <animated.div className={springClass}>
+                <ToChainListOverlay />
+              </animated.div>
+            </Transition>
+            <Transition show={showToTokenListOverlay} {...TRANSITION_PROPS}>
+              <animated.div className={springClass}>
+                <ToTokenListOverlay />
+              </animated.div>
+            </Transition>
+            <InputContainer />
+            <SwitchButton
+              onClick={() => {
+                dispatch(setFromChainId(toChainId))
+                dispatch(setFromToken(toToken))
+                dispatch(setToChainId(fromChainId))
+                dispatch(setToToken(fromToken))
+              }}
+            />
+            <OutputContainer />
+            <Warning />
+
+            {/* Remove after upgrades */}
+            {isEcotoneForkUpgradePending && <EcotoneForkWarningMessage />}
+            {isMetisUpgradePending && <MetisDowntimeWarningMessage />}
+            {/* Remove after upgrades */}
+
+            <Transition
+              appear={true}
+              unmount={false}
+              show={true}
+              {...SECTION_TRANSITION_PROPS}
+            >
+              <BridgeExchangeRateInfo />
+            </Transition>
+            {showDestinationAddress && (
+              <DestinationAddressInput
+                toChainId={toChainId}
+                destinationAddress={destinationAddress}
+              />
+            )}
+            <div className="md:my-3">
+              <BridgeTransactionButton
+                isApproved={isApproved}
+                approveTxn={approveTxn}
+                executeBridge={executeBridge}
+                isBridgePaused={isBridgePaused()}
               />
-              <OutputContainer />
-              <Warning />
-              <Transition
-                appear={true}
-                unmount={false}
-                show={true}
-                {...SECTION_TRANSITION_PROPS}
-              >
-                <BridgeExchangeRateInfo />
-              </Transition>
-              {showDestinationAddress && (
-                <DestinationAddressInput
-                  toChainId={toChainId}
-                  destinationAddress={destinationAddress}
-                />
-              )}
-              <div className="md:my-3">
-                <BridgeTransactionButton
-                  isApproved={isApproved}
-                  approveTxn={approveTxn}
-                  executeBridge={executeBridge}
-                  isBridgePaused={isUpgradePending}
-                />
-              </div>
             </div>
           </div>
         </Card>