From 0c7dd2ab9ff9086ae70c38ebe26646f9ec97f923 Mon Sep 17 00:00:00 2001
From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com>
Date: Fri, 12 Apr 2024 11:29:35 -0700
Subject: [PATCH 1/2] Create maintenance events reading from pausedChains.json

---
 .../components/Maintenance/Maintenance.tsx    | 130 ++++++++++--------
 .../synapse-interface/public/chainPauses.json |  17 +++
 2 files changed, 89 insertions(+), 58 deletions(-)
 create mode 100644 packages/synapse-interface/public/chainPauses.json

diff --git a/packages/synapse-interface/components/Maintenance/Maintenance.tsx b/packages/synapse-interface/components/Maintenance/Maintenance.tsx
index 0be5259179..b3bed32955 100644
--- a/packages/synapse-interface/components/Maintenance/Maintenance.tsx
+++ b/packages/synapse-interface/components/Maintenance/Maintenance.tsx
@@ -3,6 +3,9 @@ import { MaintenanceBanner } from './components/MaintenanceBanner'
 import { MaintenanceWarningMessage } from './components/MaintenanceWarningMessage'
 import { useMaintenanceCountdownProgress } from './components/useMaintenanceCountdownProgress'
 
+/** Import chain pause public constant */
+import chainPausesData from '@/public/chainPauses.json'
+
 interface ChainPause {
   id: string
   pausedFromChains: number[]
@@ -11,69 +14,80 @@ interface ChainPause {
   endTime: Date | null // Indefinite if null
   bannerStartTime: Date
   bannerEndTime: Date | null // Indefinite if null
-  warningMessage: any
-  bannerMessage: any
-  progressBarMessage: any
+  warningMessage: JSX.Element
+  bannerMessage: JSX.Element
+  progressBarMessage: JSX.Element
   disableBanner?: boolean
   disableWarning?: boolean
   disableCountdown?: boolean
 }
 
-const PAUSED_CHAINS: ChainPause[] = [
-  {
-    id: 'optimism-chain-pause',
-    pausedFromChains: [OPTIMISM.id],
-    pausedToChains: [],
-    startTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)),
-    endTime: new Date(Date.UTC(2024, 2, 21, 19, 40, 0)),
-    bannerStartTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)),
-    bannerEndTime: new Date(Date.UTC(2024, 2, 21, 19, 40, 0)),
-    warningMessage: (
-      <p> Optimism bridging is paused until maintenance is complete. </p>
-    ),
-    bannerMessage: (
-      <p> Optimism bridging is paused until maintenance is complete. </p>
-    ),
-    progressBarMessage: <p> Optimism maintenance in progress </p>,
-  },
-  {
-    id: 'base-chain-pause',
-    pausedFromChains: [BASE.id],
-    pausedToChains: [BASE.id],
-    startTime: new Date(Date.UTC(2024, 2, 21, 17, 41, 0)),
-    endTime: new Date(Date.UTC(2024, 2, 21, 17, 42, 0)),
-    bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 40, 0)),
-    bannerEndTime: new Date(Date.UTC(2024, 2, 21, 17, 43, 0)),
-    warningMessage: (
-      <p> Base bridging is paused until maintenance is complete. </p>
-    ),
-    bannerMessage: (
-      <p> Base bridging is paused until maintenance is complete. </p>
-    ),
-    progressBarMessage: <p> Base maintenance in progress </p>,
-  },
-  {
-    id: 'base-chain-pause',
-    pausedFromChains: [BASE.id],
-    pausedToChains: [BASE.id],
-    startTime: new Date(Date.UTC(2024, 2, 21, 17, 41, 0)),
-    endTime: null,
-    bannerStartTime: new Date(Date.UTC(2024, 2, 27, 4, 40, 0)),
-    bannerEndTime: null,
-    warningMessage: (
-      <p> Base bridging is paused until maintenance is complete. </p>
-    ),
-    bannerMessage: (
-      <p className="m-auto">
-        Base bridging is paused until maintenance is complete.
-      </p>
-    ),
-    progressBarMessage: <p> Base maintenance in progress </p>,
-    disableBanner: false,
-    disableWarning: false,
-    disableCountdown: false,
-  },
-]
+const PAUSED_CHAINS: ChainPause[] = chainPausesData.map((pause) => ({
+  ...pause,
+  startTime: new Date(pause.startTime),
+  endTime: pause.endTime ? new Date(pause.endTime) : null,
+  bannerStartTime: new Date(pause.bannerStartTime),
+  bannerEndTime: pause.bannerEndTime ? new Date(pause.bannerEndTime) : null,
+  warningMessage: <p>{pause.warningMessage}</p>,
+  bannerMessage: <p>{pause.bannerMessage}</p>,
+  progressBarMessage: <p>{pause.progressBarMessage}</p>,
+}))
+
+// const PAUSED_CHAINS: ChainPause[] = [
+//   {
+//     id: 'optimism-chain-pause',
+//     pausedFromChains: [OPTIMISM.id],
+//     pausedToChains: [],
+//     startTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)),
+//     endTime: new Date(Date.UTC(2024, 2, 21, 19, 40, 0)),
+//     bannerStartTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)),
+//     bannerEndTime: new Date(Date.UTC(2024, 2, 21, 19, 40, 0)),
+//     warningMessage: (
+//       <p> Optimism bridging is paused until maintenance is complete. </p>
+//     ),
+//     bannerMessage: (
+//       <p> Optimism bridging is paused until maintenance is complete. </p>
+//     ),
+//     progressBarMessage: <p> Optimism maintenance in progress </p>,
+//   },
+//   {
+//     id: 'base-chain-pause',
+//     pausedFromChains: [BASE.id],
+//     pausedToChains: [BASE.id],
+//     startTime: new Date(Date.UTC(2024, 2, 21, 17, 41, 0)),
+//     endTime: new Date(Date.UTC(2024, 2, 21, 17, 42, 0)),
+//     bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 40, 0)),
+//     bannerEndTime: new Date(Date.UTC(2024, 2, 21, 17, 43, 0)),
+//     warningMessage: (
+//       <p> Base bridging is paused until maintenance is complete. </p>
+//     ),
+//     bannerMessage: (
+//       <p> Base bridging is paused until maintenance is complete. </p>
+//     ),
+//     progressBarMessage: <p> Base maintenance in progress </p>,
+//   },
+//   {
+//     id: 'base-chain-pause',
+//     pausedFromChains: [BASE.id],
+//     pausedToChains: [BASE.id],
+//     startTime: new Date(Date.UTC(2024, 2, 21, 17, 41, 0)),
+//     endTime: null,
+//     bannerStartTime: new Date(Date.UTC(2024, 2, 27, 4, 40, 0)),
+//     bannerEndTime: null,
+//     warningMessage: (
+//       <p> Base bridging is paused until maintenance is complete. </p>
+//     ),
+//     bannerMessage: (
+//       <p className="m-auto">
+//         Base bridging is paused until maintenance is complete.
+//       </p>
+//     ),
+//     progressBarMessage: <p> Base maintenance in progress </p>,
+//     disableBanner: false,
+//     disableWarning: false,
+//     disableCountdown: false,
+//   },
+// ]
 
 export const MaintenanceBanners = () => {
   return (
diff --git a/packages/synapse-interface/public/chainPauses.json b/packages/synapse-interface/public/chainPauses.json
new file mode 100644
index 0000000000..0c82e73310
--- /dev/null
+++ b/packages/synapse-interface/public/chainPauses.json
@@ -0,0 +1,17 @@
+[
+  {
+  "id": "base-chain-pause",
+  "pausedFromChains": [8453],
+  "pausedToChains": [8453],
+  "startTime": "2024-04-12T17:41:00Z",
+  "endTime": null,
+  "bannerStartTime": "2024-04-12T04:40:00Z",
+  "bannerEndTime": null,
+  "warningMessage": "Base bridging is paused until maintenance is complete.",
+  "bannerMessage": "Base bridging is paused until maintenance is complete.",
+  "progressBarMessage": "Base maintenance in progress",
+  "disableBanner": false,
+  "disableWarning": false,
+  "disableCountdown": false
+}
+]

From 3bde6ec66e4026cc0327ae3cb4e9d0a7e6771ca0 Mon Sep 17 00:00:00 2001
From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com>
Date: Fri, 12 Apr 2024 11:35:44 -0700
Subject: [PATCH 2/2] Remove custom margins to allow Bridge parent gap styling
 to handle spacing

---
 .../components/Maintenance/Maintenance.tsx      |  4 ++--
 .../components/EventCountdownProgressBar.tsx    |  2 +-
 .../synapse-interface/components/Warning.tsx    |  2 +-
 .../synapse-interface/public/chainPauses.json   | 17 -----------------
 .../synapse-interface/public/pausedChains.json  | 17 +++++++++++++++++
 5 files changed, 21 insertions(+), 21 deletions(-)
 delete mode 100644 packages/synapse-interface/public/chainPauses.json
 create mode 100644 packages/synapse-interface/public/pausedChains.json

diff --git a/packages/synapse-interface/components/Maintenance/Maintenance.tsx b/packages/synapse-interface/components/Maintenance/Maintenance.tsx
index b3bed32955..fe61041c5f 100644
--- a/packages/synapse-interface/components/Maintenance/Maintenance.tsx
+++ b/packages/synapse-interface/components/Maintenance/Maintenance.tsx
@@ -4,7 +4,7 @@ import { MaintenanceWarningMessage } from './components/MaintenanceWarningMessag
 import { useMaintenanceCountdownProgress } from './components/useMaintenanceCountdownProgress'
 
 /** Import chain pause public constant */
-import chainPausesData from '@/public/chainPauses.json'
+import pausedChains from '@/public/pausedChains.json'
 
 interface ChainPause {
   id: string
@@ -22,7 +22,7 @@ interface ChainPause {
   disableCountdown?: boolean
 }
 
-const PAUSED_CHAINS: ChainPause[] = chainPausesData.map((pause) => ({
+const PAUSED_CHAINS: ChainPause[] = pausedChains.map((pause) => ({
   ...pause,
   startTime: new Date(pause.startTime),
   endTime: pause.endTime ? new Date(pause.endTime) : null,
diff --git a/packages/synapse-interface/components/Maintenance/components/EventCountdownProgressBar.tsx b/packages/synapse-interface/components/Maintenance/components/EventCountdownProgressBar.tsx
index d462a7766e..d5ca181026 100644
--- a/packages/synapse-interface/components/Maintenance/components/EventCountdownProgressBar.tsx
+++ b/packages/synapse-interface/components/Maintenance/components/EventCountdownProgressBar.tsx
@@ -74,7 +74,7 @@ export const EventCountdownProgressBar = ({
     return (
       <div
         className={`
-          flex flex-col bg-bgLighter mb-3
+          flex flex-col bg-bgLighter
           border border-surface rounded-md
            text-primary text-xs md:text-base
         `}
diff --git a/packages/synapse-interface/components/Warning.tsx b/packages/synapse-interface/components/Warning.tsx
index 359eb27e77..1feaa40ca4 100644
--- a/packages/synapse-interface/components/Warning.tsx
+++ b/packages/synapse-interface/components/Warning.tsx
@@ -63,7 +63,7 @@ export const WarningMessage = ({
 }) => {
   return (
     <div
-      className={`flex flex-col bg-[#353038] text-white text-sm p-3 rounded-md mt-4 ${twClassName}`}
+      className={`flex flex-col bg-[#353038] text-white text-sm p-3 rounded-md ${twClassName}`}
     >
       {header && <div className="mb-2 font-bold">{header}</div>}
       {message && <div>{message}</div>}
diff --git a/packages/synapse-interface/public/chainPauses.json b/packages/synapse-interface/public/chainPauses.json
deleted file mode 100644
index 0c82e73310..0000000000
--- a/packages/synapse-interface/public/chainPauses.json
+++ /dev/null
@@ -1,17 +0,0 @@
-[
-  {
-  "id": "base-chain-pause",
-  "pausedFromChains": [8453],
-  "pausedToChains": [8453],
-  "startTime": "2024-04-12T17:41:00Z",
-  "endTime": null,
-  "bannerStartTime": "2024-04-12T04:40:00Z",
-  "bannerEndTime": null,
-  "warningMessage": "Base bridging is paused until maintenance is complete.",
-  "bannerMessage": "Base bridging is paused until maintenance is complete.",
-  "progressBarMessage": "Base maintenance in progress",
-  "disableBanner": false,
-  "disableWarning": false,
-  "disableCountdown": false
-}
-]
diff --git a/packages/synapse-interface/public/pausedChains.json b/packages/synapse-interface/public/pausedChains.json
new file mode 100644
index 0000000000..02faa6f36a
--- /dev/null
+++ b/packages/synapse-interface/public/pausedChains.json
@@ -0,0 +1,17 @@
+[
+  {
+    "id": "base-chain-pause",
+    "pausedFromChains": [8453],
+    "pausedToChains": [8453],
+    "startTime": "2024-04-12T17:41:00Z",
+    "endTime": null,
+    "bannerStartTime": "2024-04-12T04:40:00Z",
+    "bannerEndTime": null,
+    "warningMessage": "Base bridging is paused until maintenance is complete.",
+    "bannerMessage": "Base bridging is paused until maintenance is complete.",
+    "progressBarMessage": "Base maintenance in progress",
+    "disableBanner": false,
+    "disableWarning": false,
+    "disableCountdown": false
+  }
+]