Add scroll open announcement (#1405)

Author: zzq0826

package.json

@@ -45,6 +45,7 @@
     "react-countdown": "^2.3.2",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.5",
     "react-ga4": "^2.1.0",
     "react-mailchimp-subscribe": "^2.1.3",
     "react-markdown": "^8.0.3",

src/components/Header/announcement.tsx

@@ -1,36 +1,24 @@
 import { usePathname } from "next/navigation"
 import { useMemo } from "react"
+import Marquee from "react-fast-marquee"
 
-import { Stack } from "@mui/material"
-import { styled } from "@mui/system"
+import { Box } from "@mui/material"
 
 import { isMainnet } from "@/utils"
 
-const AnnouncementStack = styled<any>(Stack, { shouldForwardProp: prop => prop !== "production" })(({ theme, production }) => ({
-  lineHeight: "2.6rem",
-  background: production ? "rgb(181, 245, 236)" : theme.palette.primary.main,
-  textAlign: "center",
-  color: production ? theme.palette.text.primary : theme.palette.primary.contrastText,
-  fontSize: "1.6rem",
-  padding: "1.2rem",
-  display: "inline-block",
-  width: "100%",
-  [theme.breakpoints.down("sm")]: {
-    lineHeight: "2rem",
-  },
-}))
-
 const Announcement = () => {
-  const displayAnnouncement = false
+  const displayAnnouncement = true
   const pathname = usePathname()
-
   const isHome = pathname === "/"
 
   const announcementContent = useMemo(() => {
     if (isMainnet && isHome) {
       return (
         <>
-          🔥 Applications for the Level Up Grants Program are open until August 25. <strong className="underline"> Apply now!</strong>
+          Join Scroll Open: Build the Future of the Open Economy{" "}
+          <div className="inline-block w-[5px] h-[5px] rounded-full bg-current mx-[20px] align-middle"></div>
+          Jan 27 - March 17
+          <div className="inline-block w-[5px] h-[5px] rounded-full bg-current mx-[20px] align-middle"></div>
         </>
       )
     }
@@ -39,14 +27,32 @@ const Announcement = () => {
 
   const rightHref = useMemo(() => {
     if (isMainnet && isHome) {
-      return "https://tally.so/r/mYdQP5"
+      return "https://open.scroll.io"
     }
     return ""
   }, [isMainnet, isHome])
 
   return displayAnnouncement && announcementContent ? (
-    <a href={rightHref} rel="noopener noreferrer">
-      <AnnouncementStack production={isMainnet}>{announcementContent}</AnnouncementStack>
+    <a href={rightHref} rel="noopener noreferrer" className="mb-[1.6rem]">
+      <Box
+        sx={{
+          backgroundColor: theme => (isMainnet ? theme.palette.common.white : theme.palette.primary.main),
+          color: theme => (isMainnet ? theme.palette.text.primary : theme.palette.primary.contrastText),
+          fontSize: "1.6rem",
+          lineHeight: {
+            xs: "2rem",
+            sm: "2.6rem",
+          },
+          padding: "1.6rem",
+          width: "100%",
+          borderBottom: "1px solid #101010",
+          fontWeight: "500",
+        }}
+      >
+        <Marquee autoFill pauseOnHover gradient={false}>
+          {announcementContent}
+        </Marquee>
+      </Box>
     </a>
   ) : null
 }

yarn.lock

@@ -3039,17 +3039,17 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
-"@tanstack/query-core@5.55.3":
-  version "5.55.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.55.3.tgz#fee3c2ffd65cd6cf195820eccab662508ff84ad1"
-  integrity sha512-JpRWbOiTBaddMg/oYNBeBle3m0wFTZnfLc2dtZgjdr3NZaqSGzIkPDFf6gjTWKq5zxWJTZNtsKSihVKQ7wL3VQ==
+"@tanstack/query-core@5.62.16":
+  version "5.62.16"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.62.16.tgz#f7efc92b1562a054748bc00c7f8d9d833407503b"
+  integrity sha512-9Sgft7Qavcd+sN0V25xVyo0nfmcZXBuODy3FVG7BMWTg1HMLm8wwG5tNlLlmSic1u7l1v786oavn+STiFaPH2g==
 
-"@tanstack/[email protected]":
-  version "5.55.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.55.3.tgz#8acaba9fd3cdf250bd3c6ee8d4ae00c951da3642"
-  integrity sha512-DzVFYNKMZPaEj+RNmG1lUjmR3CVFf1GoPvE03/0IN+5C8/VYiIMUhi4YgLQPnksrUarIzPPw1N2MPRvuRysLwQ==
+"@tanstack/react-query@^5.55.3":
+  version "5.63.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.63.0.tgz#18e00e24a485f707cfd41f4b30679f70e6ca6016"
+  integrity sha512-QWizLzSiog8xqIRYmuJRok9VELlXVBAwtINgVCgW1SNvamQwWDO5R0XFSkjoBEj53x9Of1KAthLRBUC5xmtVLQ==
   dependencies:
-    "@tanstack/query-core" "5.55.3"
+    "@tanstack/query-core" "5.62.16"
 
 "@trivago/prettier-plugin-sort-imports@^4.0.0":
   version "4.3.0"
@@ -8694,6 +8694,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-fast-marquee@^1.6.5:
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.6.5.tgz#98929ae93eef087a607a71e9d45ab76bba97dc16"
+  integrity sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==
+
 react-ga4@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"