feat(synapse-interface): maintenance notification components + eth de…

…ncun pause (#2260) * Dencun pause * Initialize UpgradeProgress to track countdown with Animated Progress * Style Time loader in Bridge card * Add comments * useUpgradeProgressBar to create component and status props * useUpgradeProgressBar * Construct progress bar with hook * Upgrade countdown animation works with inputted start and end date * AnnoucementBanner * Add start and end time for Annoucement Banner * AnnoucementBanner customizable with start and end time * Update progress bar * LinearAnimatedProgressBar moves * Clean and add comments * Start events file to export annoucements * Create Eth Dencun upgrade banner and progress bar * Add ability to pause bridge button * Paused Bridge display * Upgrade Banner and Progress Bar ready * Construct test values * . * Style AnnnoucementBanner * Prevent progress bar blinks * Ready for Eth Dencun Upgrade * Update id * Remove Banner component * Rm paused global var * Rename * . * Clean * Update end date * change copy * add 5mins end time --------- Co-authored-by: abtestingalpha <[email protected]> Co-authored-by: aureliusbtc <[email protected]>
synapsecns · Mar 13, 2024 · 9ffae5b · 9ffae5b
1 parent 62001bf
commit 9ffae5b
Show file tree

Hide file tree

Showing 8 changed files with 432 additions and 341 deletions.
diff --git a/packages/synapse-interface/components/Banner.tsx b/packages/synapse-interface/components/Banner.tsx
diff --git a/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx b/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx
@@ -0,0 +1,105 @@
+import { useState, useEffect } from 'react'
+
+/**
+ * Reusable Annoucement Banner with custom Start/End Time
+ * @param bannerId: store in $MMDDYYYY-$BANNER_NAME format (e.g 03132024-ETH-DENCUN)
+ * @param bannerContents: contents to display in banner
+ * @param startDate: start date to show banner
+ * @param endDate: end date to remove banner
+ */
+export const AnnouncementBanner = ({
+  bannerId,
+  bannerContents,
+  startDate,
+  endDate,
+}: {
+  bannerId: string
+  bannerContents: any
+  startDate: Date
+  endDate: Date
+}) => {
+  const [hasMounted, setHasMounted] = useState(false)
+  const [showBanner, setShowBanner] = useState(false)
+
+  const currentDate = new Date()
+
+  const isStarted =
+    Math.floor(currentDate.getTime()) - Math.floor(startDate.getTime()) >= 0
+  const isComplete =
+    Math.floor(currentDate.getTime()) - Math.floor(endDate.getTime()) >= 0
+
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (hasMounted && isStarted && !isComplete) {
+      const storedShowBanner = localStorage.getItem('showAnnoucementBanner')
+      const storedBannerId = localStorage.getItem('bannerId')
+
+      setShowBanner(
+        Boolean(
+          storedBannerId !== bannerId ||
+            storedShowBanner === null ||
+            storedShowBanner === 'true'
+        )
+      )
+    }
+  }, [hasMounted])
+
+  useEffect(() => {
+    if (hasMounted && isStarted && !isComplete) {
+      localStorage.setItem('showAnnoucementBanner', showBanner.toString())
+      localStorage.setItem('bannerId', bannerId)
+    }
+  }, [showBanner, hasMounted])
+
+  if (!showBanner || !hasMounted || isComplete) return null
+
+  return (
+    <div
+      className="flex items-center justify-center mx-auto 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%)',
+      }}
+    >
+      <div
+        id="banner-default"
+        className="flex items-center px-8 pt-1 pb-1 rounded-md text-primaryTextColor"
+        role="alert"
+      >
+        <div className="container p-1 mx-auto">
+          <p className="text-md">{bannerContents}</p>
+        </div>
+        <button
+          type="button"
+          className={`
+            inline-flex items-center justify-center
+            h-7 w-7 p-1.5 ml-3
+            text-primaryTextColor
+          `}
+          data-dismiss-target="#banner-default"
+          aria-label="Close"
+          onClick={() => setShowBanner(false)}
+        >
+          <svg
+            className="w-[9px] h-[9px]"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 14"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}