Banner for pausing USDB/WETH on Blast (#2361)

synapsecns · Mar 26, 2024 · 8a82589 · 8a82589
1 parent 0e6d76c
commit 8a82589
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx b/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx
@@ -54,10 +54,10 @@ export const AnnouncementBanner = ({
   if (!showBanner || !hasMounted || !isStarted || isComplete) return null
 
   return (
-    <div className="flex items-center justify-center mx-auto lg:flex-row text-sm text-left bg-gradient-to-r from-fuchsia-600/25 to-purple-600/25">
+    <div className="flex items-center justify-center mx-auto text-sm text-left lg:flex-row bg-gradient-to-r from-fuchsia-600/25 to-purple-600/25">
       <div
         id="banner-default"
-        className="flex items-center gap-4 px-4 py-2 w-full max-w-[1111px] text-primaryTextColor justify-between leading-normal"
+        className="flex items-center gap-4 px-4 py-2 w-full max-w-[1111px] text-primaryTextColor justify-center leading-normal"
         role="alert"
       >
         {bannerContents}

diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapExchangeRateInfo.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapExchangeRateInfo.tsx
@@ -52,7 +52,7 @@ const SwapExchangeRateInfo = ({
           {safeFromAmount != 0n ? (
             <>
               {formattedExchangeRate}{' '}
-              <span className="text-white">{toToken.symbol}</span>
+              <span className="text-white">{toToken?.symbol}</span>
             </>
           ) : (
             '—'

diff --git a/packages/synapse-interface/pages/index.tsx b/packages/synapse-interface/pages/index.tsx
@@ -4,6 +4,7 @@ import { LandingPageWrapper } from '@/components/layouts/LandingPageWrapper'
 import ReactGA from 'react-ga'
 import useSyncQueryParamsWithBridgeState from '@/utils/hooks/useSyncQueryParamsWithBridgeState'
 import { MaintenanceBanner } from '@/components/Maintenance/Events/template/MaintenanceEvent'
+import { AnnouncementBanner } from '@/components/Maintenance/AnnouncementBanner'
 
 // 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
@@ -22,6 +23,12 @@ const Home = () => {
           data-test-id="bridge-page"
           className="relative z-0 flex-1 h-full overflow-y-auto focus:outline-none"
         >
+          <AnnouncementBanner
+            bannerId="2024-03-26-blast-bridge-pause"
+            bannerContents="Bridging USDB and WETH on Blast paused."
+            startDate={new Date(Date.UTC(2024, 2, 20, 20, 20, 0))}
+            endDate={new Date(Date.UTC(2026, 2, 20, 22, 0, 0))}
+          />
           <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 />

diff --git a/packages/synapse-interface/pages/swap/index.tsx b/packages/synapse-interface/pages/swap/index.tsx
@@ -47,6 +47,7 @@ import { SwapToTokenListOverlay } from '@/components/StateManagedSwap/SwapToToke
 import { LandingPageWrapper } from '@/components/layouts/LandingPageWrapper'
 import useSyncQueryParamsWithSwapState from '@/utils/hooks/useSyncQueryParamsWithSwapState'
 import { isTransactionReceiptError } from '@/utils/isTransactionReceiptError'
+import { AnnouncementBanner } from '@/components/Maintenance/AnnouncementBanner'
 
 const StateManagedSwap = () => {
   const { address } = useAccount()
@@ -359,6 +360,12 @@ const StateManagedSwap = () => {
 
   return (
     <LandingPageWrapper>
+      <AnnouncementBanner
+        bannerId="2024-03-26-blast-swap-pause"
+        bannerContents="Swapping on Blast paused."
+        startDate={new Date(Date.UTC(2024, 2, 20, 20, 20, 0))}
+        endDate={new Date(Date.UTC(2026, 2, 20, 22, 0, 0))}
+      />
       <div className="flex justify-center px-4 py-16 mx-auto lg:mx-0">
         <div className="flex flex-col">
           <div className="flex items-center justify-between">