fix: adjustments

src/constants/canvas-badge.ts

@@ -19,6 +19,8 @@ import { ReactComponent as StarDiamond1Svg } from "@/assets/svgs/canvas-badge/st
 import { ReactComponent as StarDiamond2Svg } from "@/assets/svgs/canvas-badge/star-diamond-2.svg"
 import { ReactComponent as TreasureSvg } from "@/assets/svgs/canvas-badge/treasure.svg"
 
+export const CANVAS_AND_BADGES_PAGE_SYMBOL = "canvas-badges"
+
 export const CANVAS_BADGE_INTRODUCTIONS = [
   {
     label: "For Users",

src/pages/canvas-badge/Badges/BadgeList/index.tsx

@@ -9,7 +9,7 @@ import { fetchBadgesURL } from "@/apis/canvas-badge"
 import { ReactComponent as ArrowDownSvg } from "@/assets/svgs/canvas-badge/arrow-down.svg"
 import LoadingButton from "@/components/LoadingButton"
 import LoadingPage from "@/components/LoadingPage"
-import { CATEGORY_LIST, SORT_LIST } from "@/constants"
+import { CANVAS_AND_BADGES_PAGE_SYMBOL, CATEGORY_LIST, SORT_LIST } from "@/constants"
 import { isAboveScreen } from "@/utils/dom"
 
 import BadgeCard from "./BadgeCard"
@@ -61,7 +61,7 @@ const BadgeList = props => {
         if (prePage && page - prePage === 1) {
           setBadgeList(pre => pre.concat(data))
         } else {
-          const anchorEl = document.querySelector(".canvas-badge-title")
+          const anchorEl = document.getElementById(`${CANVAS_AND_BADGES_PAGE_SYMBOL}-discover`)
           if (isAboveScreen(anchorEl)) {
             anchorEl?.scrollIntoView({ behavior: "smooth" })
           }

src/pages/canvas-badge/Badges/index.tsx

@@ -6,7 +6,7 @@ import { Box, Typography } from "@mui/material"
 import useScrollTrigger from "@mui/material/useScrollTrigger"
 
 import SectionWrapper from "@/components/SectionWrapper"
-import { CATEGORY_LIST, NORMAL_HEADER_HEIGHT, SORT_LIST } from "@/constants"
+import { CANVAS_AND_BADGES_PAGE_SYMBOL, CATEGORY_LIST, NORMAL_HEADER_HEIGHT, SORT_LIST } from "@/constants"
 import SearchInput from "@/pages/ecosystem/Protocols/SeachInput"
 
 import Select from "../components/Select"
@@ -67,13 +67,6 @@ const useStyles = makeStyles<any>()((theme, { stickyTop }) => ({
     },
     [theme.breakpoints.down("sm")]: {},
   },
-  badgeList: {
-    // gridColumn: "1 / 5",
-    // justifySelf: "stretch",
-    // [theme.breakpoints.down("md")]: {
-    //   gridColumn: "1 / 3",
-    // },
-  },
 }))
 
 const Badges = () => {
@@ -124,9 +117,9 @@ const Badges = () => {
 
   return (
     <SectionWrapper dark sx={{ pt: ["2.2rem", "10.2rem"], pb: ["2.2rem", "12rem"] }}>
+      <div id={`${CANVAS_AND_BADGES_PAGE_SYMBOL}-discover`}></div>
       <Box className={classes.grid}>
         <Typography
-          className="canvas-badge-title"
           sx={{
             fontSize: ["2.4rem", "4.8rem"],
             lineHeight: ["3.6rem", "6.4rem"],
@@ -151,7 +144,7 @@ const Badges = () => {
           items={CATEGORY_LIST}
         ></Select>
       </Box>
-      <BadgeList className={classes.badgeList} searchParams={searchParams} onAddPage={handleChangePage}></BadgeList>
+      <BadgeList searchParams={searchParams} onAddPage={handleChangePage}></BadgeList>
     </SectionWrapper>
   )
 }

src/pages/canvas-badge/Header/index.tsx

@@ -2,13 +2,14 @@ import { useQuery } from "@tanstack/react-query"
 import { motion } from "framer-motion"
 import { useEffect, useRef, useState } from "react"
 import Img from "react-cool-img"
+import { useLocation } from "react-router-dom"
 
 import { Box, Container, Stack, SvgIcon, Typography } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
 import { retrieveCanvasBadgeURL } from "@/apis/canvas-badge"
 import Button from "@/components/Button"
-import { CANVAS_URL, HEADER_BADGES, HEADER_STARS, ISSUE_BADGES_URL } from "@/constants"
+import { CANVAS_AND_BADGES_PAGE_SYMBOL, CANVAS_URL, HEADER_BADGES, HEADER_STARS, ISSUE_BADGES_URL } from "@/constants"
 import useCheckViewport from "@/hooks/useCheckViewport"
 
 import Counter from "./Counter"
@@ -24,6 +25,7 @@ const BadgesButton = styled(Button)(({ theme }) => ({
 }))
 
 const Header = () => {
+  const { hash } = useLocation()
   const { isMobile } = useCheckViewport()
   const [badgesScale, setBadgesScale] = useState(1)
   const [starsScale, setStarsScale] = useState(1)
@@ -46,15 +48,26 @@ const Header = () => {
     placeholderData: { canvasCount: 100000, badgesCount: 100000 },
   })
 
+  useEffect(() => {
+    if (hash) {
+      const targetEl = document.getElementById(`${CANVAS_AND_BADGES_PAGE_SYMBOL}-${hash.slice(1)}`)
+      if (targetEl) {
+        targetEl.scrollIntoView({
+          behavior: "instant",
+        })
+      }
+    }
+  }, [hash])
+
   useEffect(() => {
     const handleWindowResize = () => {
       if (badgesContainerRef.current?.clientWidth && badgesContainerRef.current.clientWidth < 1328) {
         setBadgesScale(badgesContainerRef.current.clientWidth / 1328)
       } else {
         setBadgesScale(1)
       }
-      if (window.innerWidth < 1512) {
-        setStarsScale((window.innerWidth - 120) / 1512)
+      if (window.screen.width < 1512) {
+        setStarsScale((window.screen.width - 120) / 1512)
       } else {
         setStarsScale(1)
       }
@@ -163,12 +176,14 @@ const Header = () => {
         >
           {HEADER_BADGES.map(({ image, top, left, width }, index) => (
             <ImageWrapper
+              key={index}
               style={{ willChange: "opacity", zIndex: 1 }}
               animate={{ opacity: [0.2, 1, 0.2] }}
               transition={{
                 duration: 3,
                 repeat: Infinity,
-                delay: Math.random() * 3,
+                delay: Math.random() * 12,
+                repeatDelay: 6 + Math.random() * 6,
                 times: [0, 0.5, 1],
               }}
               sx={{ position: "absolute", top, left }}

src/pages/canvas/Dashboard/ActionBox/index.tsx

@@ -241,7 +241,7 @@ const ActionBox = () => {
               key: "explore",
               label: "Explore badges",
               onClick: () => {
-                navigate("/canvas-and-badges")
+                navigate("/canvas-and-badges#discover")
               },
             },
             {

src/pages/canvas/badge/BadgeDetail.tsx

@@ -18,7 +18,6 @@ import Statistic from "../components/Statistic"
 const InfoBox = styled<any>(Box)(({ theme, count }) => ({
   display: "grid",
   gridTemplateColumns: count === 1 ? "1fr" : "repeat(3, 1fr)",
-  // gridAutoColumns: "min-content",
   rowGap: "3.2rem",
   columnGap: "4.8rem",
   [theme.breakpoints.down("sm")]: {
@@ -27,7 +26,6 @@ const InfoBox = styled<any>(Box)(({ theme, count }) => ({
     columnGap: "2.4rem",
     rowGap: "1.6rem",
   },
-  // justifyItems: "center",
 }))
 
 const DisclaimerBox = styled(Box)(({ theme }) => ({
@@ -52,15 +50,23 @@ const BadgeDetail = props => {
   const actionsRef = useRef()
 
   useEffect(() => {
-    if (actionsRef?.current) {
-      setActionHeight((actionsRef.current as HTMLElement).getBoundingClientRect().height + "px")
+    const actionBoxObserver = new ResizeObserver(entries => {
+      // this will get called whenever div dimension changes
+      entries.forEach(entry => {
+        setActionHeight(entry.target.getBoundingClientRect().height + "px")
+      })
+    })
+    if (actionsRef.current) {
+      actionBoxObserver.observe(actionsRef.current as HTMLElement)
+    }
+    return () => {
+      actionBoxObserver.disconnect()
     }
   }, [])
 
   useEffect(() => {
     if (actionHeight !== "auto") {
       const detailContainerEl = document.querySelector(".detail-container") as HTMLElement
-      // console.log(detailContainerEl.clientHeight, detailContainerEl.scrollHeight)
       setIsOverflow(detailContainerEl.clientHeight < detailContainerEl.scrollHeight)
     }
   }, [loading, actionHeight])