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"