From 8a8258999913dac6ff9842725f3605e98e1eb04c Mon Sep 17 00:00:00 2001
From: abtestingalpha <104046418+abtestingalpha@users.noreply.github.com>
Date: Tue, 26 Mar 2024 15:29:24 -0400
Subject: [PATCH] Banner for pausing USDB/WETH on Blast (#2361)

---
 .../components/Maintenance/AnnouncementBanner.tsx          | 4 ++--
 .../components/StateManagedSwap/SwapExchangeRateInfo.tsx   | 2 +-
 packages/synapse-interface/pages/index.tsx                 | 7 +++++++
 packages/synapse-interface/pages/swap/index.tsx            | 7 +++++++
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx b/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx
index 046cc0426c..b9dcb30677 100644
--- 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
index 8acae7b82c..a31f64e133 100644
--- 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
index 818fb52ca6..66525daed4 100644
--- 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
index f080d367ee..fde2aea2b1 100644
--- 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">