Merge pull request #1456 from scroll-tech/new-navbar

New navbar

Author: Holybasil

package.json

@@ -30,10 +30,12 @@
     "@next/third-parties": "^15.1.5",
     "@rainbow-me/rainbowkit": "^2.1.2",
     "@sentry/nextjs": "^7.95.0",
+    "@tailwindcss/postcss": "^4.0.6",
     "@tanstack/react-query": "^5.55.3",
     "@tanstack/react-virtual": "^3.11.2",
     "@types/mdx": "^2.0.13",
     "@typescript-eslint/parser": "^8.4.0",
+    "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.2",
     "dayjs": "^1.11.5",
     "ethers": "6.12.0",
@@ -90,11 +92,11 @@
     "eslint-plugin-prettier": "^5.1.3",
     "husky": "^8.0.2",
     "pino-pretty": "^10.3.1",
-    "postcss": "^8.4.17",
+    "postcss": "^8.5.2",
     "prettier": "^3.2.4",
     "raw-loader": "^4.0.2",
     "sitemap": "^7.1.1",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^4.0.6",
     "turbo": "^2.4.2",
     "typescript": "^5.1.6"
   },

postcss.config.js

@@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}
+export default config

postcss.config.mjs

@@ -1,6 +1,7 @@
 import { promises as fs } from "fs"
+import { notFound } from "next/navigation"
 
-import { BNToAmount, genMeta } from "@/utils"
+import { BNToAmount, genMeta, isSepolia } from "@/utils"
 
 import Explaination from "./Explaination"
 import Header from "./Header"
@@ -21,6 +22,10 @@ const ScrAndsSCRPage = async () => {
     next: { revalidate: 3600 },
   }).then(res => res.json())
 
+  if (isSepolia) {
+    notFound()
+  }
+
   return (
     <>
       <Header circulatingSupply={circulatingSupply} votableSupply={BNToAmount(BigInt(votable_supply))}></Header>

src/app/SCR-sSCR/page.tsx

@@ -13,6 +13,7 @@ import LoadingButton from "@/components/LoadingButton"
 import LoadingPage from "@/components/LoadingPage"
 import { CANVAS_AND_BADGES_PAGE_SYMBOL, CATEGORY_LIST, SORT_LIST } from "@/constants"
 import { isAboveScreen } from "@/utils/dom"
+import { scrollRequest } from "@/utils/request"
 
 import BadgeCard from "./BadgeCard"
 // import BadgeMasonry from "./BadgeMasonry"

src/app/_canvas-and-badges/Badges/BadgeList/index.tsx

@@ -13,6 +13,7 @@ import { retrieveCanvasBadgeURL } from "@/apis/canvas-badge"
 import Button from "@/components/Button"
 import { CANVAS_AND_BADGES_PAGE_SYMBOL, CANVAS_URL, HEADER_BADGES, HEADER_STARS, ISSUE_BADGES_URL } from "@/constants"
 import useCheckViewport from "@/hooks/useCheckViewport"
+import { scrollRequest } from "@/utils/request"
 
 // import Counter from "./Counter"
 import Statistic from "./Statistic"

src/app/_canvas-and-badges/Header/index.tsx

@@ -18,6 +18,7 @@ import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useSnackbar from "@/hooks/useSnackbar"
 import useCanvasStore from "@/stores/canvasStore"
 import { generateShareTwitterURL } from "@/utils"
+import { scrollRequest } from "@/utils/request"
 
 const CouponBox = styled(Box)(({ theme }) => ({
   background: `url(${couponBackground.src}) no-repeat center center`,

src/app/_canvas/Dashboard/ReferDialog/coupon.tsx

@@ -91,7 +91,7 @@ const BadgeDetail = props => {
           pb: [0, "6rem"],
           minHeight: ["unset", "calc(100vh - 6.5rem)"],
 
-          height: [`calc(var(--vh, 1vh) * 100 - 6.2rem - ${actionHeight})`, "auto"],
+          height: [`calc(var(--vh, 1vh) * 100 - 6.4rem - ${actionHeight})`, "auto"],
           display: "flex",
           alignItems: isOverflow ? "flex-start" : "center",
           overflowY: isOverflow ? "auto" : "unset",

src/app/_canvas/badge/[id]/BadgeDetail.tsx

@@ -44,7 +44,7 @@ const Container: any = styled<any>(Box, { shouldForwardProp: prop => prop !== "g
     },
   },
   [theme.breakpoints.down("md")]: {
-    marginTop: "-6.2rem",
+    marginTop: "-6.4rem",
     height: "calc(var(--vh, 1vh) * 100)",
   },
 }))

src/app/_canvas/components/GridBg/index.tsx

@@ -13,6 +13,7 @@ import useSnackbar from "@/hooks/useSnackbar"
 import { mintBadge } from "@/services/canvasService"
 import useCanvasStore from "@/stores/canvasStore"
 import { truncateAddress } from "@/utils"
+import { scrollRequest } from "@/utils/request"
 
 import StepWrapper from "./StepWrapper"
 

src/app/_canvas/mint/flow/FirstBadgeStep.tsx

@@ -15,6 +15,7 @@ import useCheckViewport from "@/hooks/useCheckViewport"
 import useSnackbar from "@/hooks/useSnackbar"
 import useCanvasStore from "@/stores/canvasStore"
 import { isUserRejected, recognizeError, sentryDebug, trimErrorMessage } from "@/utils"
+import { scrollRequest } from "@/utils/request"
 
 import InsufficientDialog from "./InsufficientDialog"
 import StepWrapper from "./StepWrapper"

src/app/_canvas/mint/flow/MintStep.tsx

@@ -10,7 +10,7 @@ const StepWrapper = props => {
         pb: ["9.6rem", "6rem"],
         display: "flex",
         flexDirection: "column",
-        height: ["calc(100vh - 6.2rem)", "calc(100vh - 6.5rem)"],
+        height: ["calc(100vh - 6.4rem)", "calc(100vh - 6.5rem)"],
         justifyContent: ["flex-start", "center"],
         overflowY: "auto",
         alignItems: "center",

src/app/_canvas/mint/flow/StepWrapper.tsx

@@ -8,6 +8,7 @@ import CheckSvg from "@/assets/svgs/canvas/check.svg"
 import ErrorSvg from "@/assets/svgs/canvas/error.svg"
 import LoadingSvg from "@/assets/svgs/canvas/loading.svg"
 import useCanvasStore from "@/stores/canvasStore"
+import { scrollRequest } from "@/utils/request"
 
 const INVITE_CODE_LENGTH = 5
 

src/app/_canvas/mint/home/ReferralCodeInput.tsx

@@ -25,7 +25,7 @@ const Container = styled(Box)(({ theme }) => ({
   paddingBottom: "6rem",
   backgroundColor: "#101010",
   [theme.breakpoints.down("sm")]: {
-    height: "calc(var(--vh, 1vh) * 100 - 6.2rem - 9.6rem)",
+    height: "calc(var(--vh, 1vh) * 100 - 6.4rem - 9.6rem)",
     minHeight: "unset",
     padding: "0 1rem",
     overflowY: "auto",

src/app/_canvas/mint/home/index.tsx

@@ -7,6 +7,8 @@ import Button from "@/components/Button"
 import OrientationToView from "@/components/Motion/OrientationToView"
 import useCheckViewport from "@/hooks/useCheckViewport"
 
+const ANNOUNCEMENT_HEIGHT = "0rem"
+
 const Title = styled(Typography)(({ theme }) => ({
   fontSize: "6.4rem",
   lineHeight: "8.8rem",
@@ -40,15 +42,15 @@ const Header = () => {
           theme => ({
             [theme.breakpoints.up("md")]: {
               background: "url(/imgs/homepage/landing-bg.webp) center / cover no-repeat",
-              aspectRatio: "16 / 9",
-              marginTop: "-6.5rem",
+              minHeight: "40rem",
+              marginTop: `calc(-6.5rem - ${ANNOUNCEMENT_HEIGHT})`,
             },
           }),
         ]}
       >
         {isLandscape && (
           <Box>
-            <video style={{ width: "100vw", objectFit: "cover" }} autoPlay muted loop playsInline preload="none">
+            <video style={{ width: "100vw", height: "100vh", objectFit: "cover" }} autoPlay muted loop playsInline preload="none">
               <source src="/videos/home-header-bg.mp4" type="video/mp4" />
               <source src="/videos/home-header-bg-264.mp4" type="video/mp4" />
               Not support video
@@ -60,13 +62,13 @@ const Header = () => {
             [theme.breakpoints.down("md")]: { paddingTop: "7.2rem" },
             [theme.breakpoints.up("md")]: {
               position: "absolute",
-              top: "10rem",
+              top: `calc(10rem + ${ANNOUNCEMENT_HEIGHT})`,
               left: "50%",
               transform: "translateX(-50%)",
               zIndex: 1,
             },
             "@media (min-width: 1680px)": {
-              top: "calc(100vw*0.06 + 6.5rem)",
+              top: `calc(100vw*0.06 + 6.5rem + ${ANNOUNCEMENT_HEIGHT})`,
             },
           })}
         >

src/app/_components/Header/index.tsx

@@ -21,7 +21,7 @@ const useStyles = makeStyles()(theme => ({
       background: " url(/imgs/story/story-hero-bg-mobile.svg) no-repeat center",
       backgroundSize: "cover",
       paddingTop: "13rem",
-      marginTop: "-6.2rem",
+      marginTop: "-6.4rem",
     },
 
     "@media (max-width: 375px)": {

src/app/_story/Header/index.tsx

@@ -29,6 +29,8 @@ const BlogContainer = styled(Box)(
     padding: 6rem 4rem 14rem;
     overflow: visible;
     display: flex;
+    width: 100%;
+    margin: auto;
   ${theme.breakpoints.down("md")} {
     padding: 4rem 2rem;
     display: block;
@@ -104,7 +106,7 @@ const BlogDetail = props => {
         <LoadingPage height="80vh"></LoadingPage>
       ) : (
         <Box>
-          <BlogContainer className="wrapper">
+          <BlogContainer>
             <Box sx={{ width: "32rem", flexShrink: 0, position: "relative" }}>
               <BlogNavbar>
                 <TOC />

src/app/blog/[blogId]/detail.tsx

@@ -1,4 +1,7 @@
+import { notFound } from "next/navigation"
+
 import blogSource from "@/assets/blog/main.data.json"
+import { isSepolia } from "@/utils"
 import { genMeta } from "@/utils/route"
 
 import Detail from "./detail"
@@ -21,6 +24,9 @@ export const generateMetadata = genMeta(async ({ params }) => {
 })
 
 const BlogDetail = async ({ params }) => {
+  if (isSepolia) {
+    notFound()
+  }
   const { blogId } = await params
   return (
     <>

src/app/blog/[blogId]/page.tsx

@@ -1,3 +1,6 @@
+import { notFound } from "next/navigation"
+
+import { isSepolia } from "@/utils"
 import { genMeta } from "@/utils/route"
 
 export const generateMetadata = genMeta(() => ({
@@ -6,5 +9,8 @@ export const generateMetadata = genMeta(() => ({
 }))
 
 export default function Layout({ children }) {
+  if (isSepolia) {
+    notFound()
+  }
   return <>{children}</>
 }

src/app/blog/layout.tsx

@@ -9,6 +9,7 @@ import LoadingButton from "@/components/LoadingButton"
 import LoadingPage from "@/components/LoadingPage"
 import SuccessionToView, { SuccessionItem } from "@/components/Motion/SuccessionToView"
 import { COMMUNITY_REGION_LIST, COMMUNITY_TIME_LIST } from "@/constants/community"
+import { scrollRequest } from "@/utils/request"
 
 import Error from "./Error"
 import Card from "./EventCard"

src/app/community/Events/List.tsx

@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation"
 
+import { isSepolia } from "@/utils"
 import { genMeta } from "@/utils/route"
 
 export const generateMetadata = genMeta(() => ({
@@ -10,7 +11,7 @@ export const generateMetadata = genMeta(() => ({
 }))
 
 export default function Layout({ children }) {
-  if (process.env.NEXT_PUBLIC_SCROLL_ENVIRONMENT === "Sepolia") {
+  if (isSepolia) {
     notFound()
   }
   return <>{children}</>

src/app/community/layout.tsx

@@ -9,6 +9,7 @@ import { MintableDate } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useCheckViewport from "@/hooks/useCheckViewport"
 import { formatDate } from "@/utils"
+import { scrollRequest } from "@/utils/request"
 
 const L2_SCAN_URI = process.env.NEXT_PUBLIC_L2_SCAN_URI
 const UNIFRA_API_KEY = process.env.NEXT_PUBLIC_UNIFRA_API_KEY

src/app/developer-nft/coming-soon/CheckElegbility/index.tsx

@@ -8,7 +8,7 @@ import Alert from "@/components/Alert/NFTAlert"
 import SectionWrapper from "@/components/SectionWrapper"
 import { MintableDate, SCROLL_ORIGINS_NFT } from "@/constants"
 import useNFTStore from "@/stores/nftStore"
-import { formatDate } from "@/utils"
+import { formatDate, isSepolia } from "@/utils"
 
 import CheckElegbility from "./CheckElegbility"
 import Header from "./Header"
@@ -19,7 +19,7 @@ import Stepper from "./Stepper"
 const ComingSoon = () => {
   const { phrase } = useNFTStore()
 
-  if (process.env.NEXT_PUBLIC_SCROLL_ENVIRONMENT === "Sepolia") {
+  if (isSepolia) {
     notFound()
   }
 

src/app/developer-nft/coming-soon/page.tsx

@@ -18,6 +18,7 @@ import { useNFTContext } from "@/contexts/NFTContextProvider"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useNFTStore from "@/stores/nftStore"
 import { sentryDebug, trimErrorMessage } from "@/utils"
+import { scrollRequest } from "@/utils/request"
 
 import StepWrapper from "./StepWrapper"
 

src/app/developer-nft/mint/flow/QuestionStep.tsx

@@ -15,6 +15,7 @@ import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useCheckViewport from "@/hooks/useCheckViewport"
 import useNFTStore from "@/stores/nftStore"
 import { formatDate, switchNetwork } from "@/utils"
+import { scrollRequest } from "@/utils/request"
 
 import NFTCard from "../../components/NFTCard"
 import Statistic from "../../components/Statistic"

src/app/developer-nft/mint/home/ReadyToMint.tsx

@@ -7,6 +7,7 @@ import SectionWrapper from "@/components/SectionWrapper"
 import { CHAIN_ID, L2_NAME } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import { switchNetwork } from "@/utils"
+import { scrollRequest } from "@/utils/request"
 
 const Mock = () => {
   const { walletCurrentAddress, chainId, connect } = useRainbowContext()

src/app/developer-nft/mint/mock/index.tsx

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation"
 
 import NFTContextProvider from "@/contexts/NFTContextProvider"
+import { isSepolia } from "@/utils"
 import { genMeta } from "@/utils/route"
 
 import MintHome from "./home"
@@ -13,7 +14,7 @@ export const generateMetadata = genMeta(() => ({
 }))
 
 const Mint = () => {
-  if (process.env.NEXT_PUBLIC_SCROLL_ENVIRONMENT === "Sepolia") {
+  if (isSepolia) {
     notFound()
   }
   return (

src/app/developer-nft/mint/page.tsx

@@ -10,6 +10,7 @@ import Button from "@/components/Button"
 import { GET_IN_TOUCH_LINK } from "@/constants"
 import useCheckViewport from "@/hooks/useCheckViewport"
 import { formatLargeNumber } from "@/utils"
+import { scrollRequest } from "@/utils/request"
 
 import Statistic from "./Statistic"
 
@@ -31,7 +32,7 @@ const Header = () => {
       sx={[
         {
           position: "relative",
-          height: ["calc(100vh - 6.2rem)", "72rem", "auto"],
+          height: ["calc(100vh - 6.4rem)", "72rem", "auto"],
         },
         theme => ({
           [theme.breakpoints.up("md")]: {

src/app/ecosystem/Header/index.tsx

@@ -38,8 +38,6 @@ const Carousel = () => {
     slidesPerView = 1
   }
 
-  console.log(slidesPerView)
-
   const filteredData = Data.filter(blog => blog.type === "Ecosystem highlights" && blog.language === "en")
 
   return (

src/app/ecosystem/Highlights/HighlightList/index.tsx

@@ -11,6 +11,7 @@ import LoadingPage from "@/components/LoadingPage"
 import TextButton from "@/components/TextButton"
 import { ECOSYSTEM_NETWORK_LIST } from "@/constants"
 import { isAboveScreen } from "@/utils/dom"
+import { scrollRequest } from "@/utils/request"
 
 import Error from "./Error"
 import NoData from "./NoData"
@@ -75,6 +76,7 @@ const ProtocolList = props => {
 
   const fetchEcosystemList = value => {
     setLoading(true)
+
     scrollRequest(`${ecosystemListUrl}${value}`)
       .then(({ data, hasMore }) => {
         setHasMore(hasMore)

src/app/ecosystem/Protocols/ProtocolList/index.tsx

@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation"
 
+import { isSepolia } from "@/utils"
 import { genMeta } from "@/utils/route"
 
 import Contribute from "./Contribute"
@@ -13,7 +14,7 @@ export const generateMetadata = genMeta(() => ({
 }))
 
 const Ecosystem = () => {
-  if (process.env.NEXT_PUBLIC_SCROLL_ENVIRONMENT === "Sepolia") {
+  if (isSepolia) {
     notFound()
   }
   return (