fix: Link && TextButton compatibility

Author: Holybasil

.eslintrc.json

@@ -50,6 +50,7 @@
       "warn",
       {
         "args": "none",
+        "varsIgnorePattern": "^_error$",
         "ignoreRestSiblings": true
       }
     ],

src/app/_components/BuildWithScroll/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import Img from "react-cool-img"
+import Image from "next/image"
 
 import { Stack, SvgIcon, Typography } from "@mui/material"
 import { Button as MuiButton } from "@mui/material"
@@ -36,7 +36,7 @@ const Feature = () => {
       return (
         <OrientationToView key={feature.title}>
           <Stack key={featureIdx} direction="column" spacing="2.4rem" sx={{ maxWidth: "56rem" }}>
-            <Img src={feature.icon} width={isMobile ? 320 : 400}></Img>
+            <Image src={feature.icon} alt={feature.title} width={isMobile ? 320 : 400} height={isMobile ? 320 : 400}></Image>
             <Typography sx={{ fontSize: ["2rem", "2.4rem"], fontWeight: 600 }}>{feature.title}</Typography>
             <Typography sx={{ fontSize: ["1.6rem", "2rem"], mt: ["0.8rem !important", 0] }}>{feature.description}</Typography>
             <MuiButton

src/app/_components/ExploreEcosystem/Carousel.tsx

@@ -1,3 +1,5 @@
+import Image from "next/image"
+
 import { Box } from "@mui/material"
 import { keyframes, styled } from "@mui/system"
 
@@ -172,7 +174,7 @@ const TrackRight = styled("div")(({ theme }) => ({
   width: "max-content",
 }))
 
-const Logo = styled("img")(({ theme }) => ({
+const Logo = styled(Image)(({ theme }) => ({
   width: "8.8rem",
   height: "8.8rem",
   marginRight: "10rem",

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

@@ -81,7 +81,7 @@ const BlogDetail = () => {
             setLoading(false)
             setBlogContent(text)
           })
-      } catch (error) {
+      } catch (_error) {
         router.push("/404")
       }
     } else if (blogIdMatch && language === "en") {

src/app/bridge/Send/SendTransaction/TokenList.tsx

@@ -9,7 +9,7 @@ import Dialog from "@mui/material/Dialog"
 import DialogTitle from "@mui/material/DialogTitle"
 import ListItemText from "@mui/material/ListItemText"
 
-import { tokenList } from "@/app/sessions-one/SessionZeroMarks/tokenList"
+import { tokenList } from "@/app/sessions/SessionZeroMarks/tokenList"
 import CloseSvg from "@/assets/svgs/bridge/token-list-close.svg"
 import SearchSvg from "@/assets/svgs/bridge/token-list-search.svg"
 import { EXPLORER_URL } from "@/constants"

src/app/bridge/components/TxTable/ActiveButton.tsx

@@ -71,7 +71,7 @@ const ActiveButton = props => {
     try {
       // cancel switch network in MetaMask would not throw error and the result is null just like successfully switched
       await switchNetwork(chainId)
-    } catch (error) {
+    } catch (_error) {
       // when there is a switch-network popover in MetaMask and refreshing page would throw an error
     }
   }

src/app/canvas/badge/[id]/Badge.tsx

@@ -111,7 +111,7 @@ const Badge = () => {
         badgeDetail.rarity = NFT_RARITY_MAP[rarityNum]
       }
       setDetail(badgeDetail)
-    } catch (e) {
+    } catch (_error) {
       alertWarning("Failed to fetch badge detail")
     } finally {
       setLoading(false)

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

@@ -124,7 +124,7 @@ const ReferralCode = ({ isChecking, setIsChecking, code, codeStatus, setCodeStat
         changeReferralCode("")
         setCodeStatus(CodeStatus.INVALID)
       }
-    } catch (e) {
+    } catch (_error) {
       changeReferralCode("")
       setCodeStatus(CodeStatus.ERROR)
       inputRefs.current[INVITE_CODE_LENGTH - 1]?.focus()

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

@@ -45,7 +45,7 @@ const MintHome = () => {
       const totalSupply = await fetchTotalSupply(instance)
       const totalSupply2 = await fetchTotalSupply(instance2)
       setMintedAmount(totalSupply + totalSupply2)
-    } catch (e) {
+    } catch (_error) {
     } finally {
       setLoading(false)
     }

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

@@ -167,16 +167,7 @@ const ProtocolCard = props => {
         >
           {name}
         </Typography>
-        <Link
-          external
-          href={TWITTER_ORIGIN + twitterHandle}
-          sx={{
-            color: "inherit",
-            "&:hover": {
-              color: theme => (theme as any).vars.palette.primary.main,
-            },
-          }}
-        >
+        <Link external href={TWITTER_ORIGIN + twitterHandle} undefined="hover" className="text-inherit hover:text-[var(--mui-palette-link-main)]">
           <SvgIcon sx={{ fontSize: "1.4rem" }} component={TwitterSvg} inheritViewBox></SvgIcon>
         </Link>
         {isDesktop && (
@@ -223,7 +214,7 @@ const ProtocolCard = props => {
         </Box>
       )}
       <Button
-        href={website}
+        href={website ?? ""}
         target="_blank"
         classes={{ root: classes.action }}
         endIcon={<SvgIcon sx={{ fontSize: ["1.2rem !important", "1.4rem !important"] }} component={ArrowSvg} inheritViewBox></SvgIcon>}

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

@@ -9,9 +9,9 @@ import useScrollTrigger from "@mui/material/useScrollTrigger"
 import { keyframes } from "@mui/system"
 
 import { ecosystemListUrl } from "@/apis/ecosystem"
-import Link from "@/components/Link"
 import LoadingButton from "@/components/LoadingButton"
 import LoadingPage from "@/components/LoadingPage"
+import TextButton from "@/components/TextButton"
 import { ECOSYSTEM_NETWORK_LIST } from "@/constants"
 import { isAboveScreen } from "@/utils/dom"
 
@@ -168,7 +168,7 @@ const ProtocolList = props => {
 
         {hasMore && (
           <Box sx={{ gridColumn: ["1 / 3", "1 / 3", "2 / 4"], textAlign: "center", mt: "1.6rem" }}>
-            <Link
+            <TextButton
               underline="always"
               component="button"
               sx={{
@@ -182,7 +182,7 @@ const ProtocolList = props => {
               onClick={onAddPage}
             >
               Load more
-            </Link>
+            </TextButton>
           </Box>
         )}
       </>

src/app/layout.tsx

@@ -76,7 +76,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       </head>
       <body>
         <AppRouterCacheProvider options={{ key: "css" }}>
-          {/* <NextAppDirEmotionCacheProvider > */}
           <ScrollThemeProvider>
             <VersionChecker>
               <RainbowProvider>
@@ -88,7 +87,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             </VersionChecker>
             <ScrollToTop />
           </ScrollThemeProvider>
-          {/* </NextAppDirEmotionCacheProvider> */}
         </AppRouterCacheProvider>
         {process.env.NODE_ENV === "production" && (
           <>

src/app/portal/page.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Box, Container, Stack, Typography } from "@mui/material"
 
 import { L2_NAME } from "@/constants"

src/app/sessions-one/AnchorNavigation/index.tsx renamed to src/app/sessions/AnchorNavigation/index.tsx

@@ -1,10 +1,10 @@
-import { default as NavLink } from "next/link"
 import ReactGA from "react-ga4"
 
-import { Box, Link, Stack, SvgIcon, Typography } from "@mui/material"
+import { Box, Stack, SvgIcon, Typography } from "@mui/material"
 import { CSSObject, Theme, styled } from "@mui/material/styles"
 
 import ExternalSvg from "@/assets/svgs/header/External.svg"
+import Link from "@/components/Link"
 import useCheckViewport from "@/hooks/useCheckViewport"
 
 const linkStyles = (theme: Theme, dark: boolean): CSSObject => ({
@@ -40,19 +40,10 @@ interface StyledNavLinkProps {
   reloadDocument?: boolean
 }
 
-interface StyledLinkProps {
-  dark?: boolean
-  href?: string
-}
-
-const StyledNavLink = styled(NavLink, {
+const StyledNavLink = styled(Link, {
   shouldForwardProp: prop => prop !== "dark",
 })<StyledNavLinkProps>(({ theme, dark }) => linkStyles(theme, !!dark))
 
-const StyledLink = styled(Link, {
-  shouldForwardProp: prop => prop !== "dark",
-})<StyledLinkProps>(({ theme, dark }) => linkStyles(theme, !!dark))
-
 const SubmenuLinkContent = ({ icon, label, text, isExternal }: { icon: any; label: string; text?: string; isExternal?: boolean }) => {
   const { isDesktop } = useCheckViewport()
 
@@ -96,6 +87,7 @@ const SubmenuLink = ({
   icon,
   dark,
   reload,
+  className,
   onClick,
 }: {
   label: string
@@ -105,18 +97,13 @@ const SubmenuLink = ({
   icon?: any
   dark?: boolean
   reload?: boolean
+  className?: string
   onClick?: () => {}
 }) => (
   <>
-    {isExternal ? (
-      <StyledLink dark={dark} href={href} onClick={onClick} target="_blank" rel="noopener noreferrer">
-        <SubmenuLinkContent icon={icon} label={label} text={text} isExternal={isExternal} />
-      </StyledLink>
-    ) : (
-      <StyledNavLink dark={dark} href={href} onClick={onClick} reloadDocument={reload}>
-        <SubmenuLinkContent icon={icon} label={label} text={text} isExternal={isExternal} />
-      </StyledNavLink>
-    )}
+    <StyledNavLink className={className} dark={dark} href={href} external={isExternal} reloadDocument={reload} onClick={onClick}>
+      <SubmenuLinkContent icon={icon} label={label} text={text} isExternal={isExternal} />
+    </StyledNavLink>
   </>
 )
 

src/app/sessions-one/AnchorNavigation/mobile.tsx renamed to src/app/sessions/AnchorNavigation/mobile.tsx

@@ -250,7 +250,6 @@ const mainnetNavigations = [
             rootKey: "ecosystem",
             href: "/community",
             icon: CommunitySvg,
-            reload: true,
           },
         ],
       },

src/app/sessions-one/Guidance/GuidanceCard.tsx renamed to src/app/sessions/Guidance/GuidanceCard.tsx

@@ -1,4 +1,4 @@
-import { default as NavLink } from "next/link"
+// import { default as NavLink } from "next/link"
 import React, { useState } from "react"
 import ReactGA from "react-ga4"
 import { useStyles } from "tss-react/mui"
@@ -8,6 +8,7 @@ import { styled } from "@mui/material/styles"
 
 import TriangleDownSvg from "@/assets/svgs/common/header-triangle-down.svg"
 import LanguageSelect from "@/components/LanguageSelect"
+import NavLink from "@/components/Link"
 import Logo from "@/components/ScrollLogo"
 import WalletToolkit from "@/components/WalletToolkit"
 import useCheckViewport from "@/hooks/useCheckViewport"
@@ -129,7 +130,8 @@ const SectionList = styled<any>(Box)(({ theme }) => ({
   },
 }))
 
-const App = ({ currentMenu }) => {
+const DesktopHeader = ({ currentMenu }) => {
+  console.log(currentMenu, "currentMenu")
   const { cx } = useStyles()
   const [isHover, setIsHover] = useState(false)
   const navbarBg = useCheckCustomNavBarBg({ isHover })
@@ -173,10 +175,15 @@ const App = ({ currentMenu }) => {
             }}
           >
             {section.children.map((item, index) => (
-              <Stack key={item.label} direction="column" spacing="2.4rem" sx={{ gridRow: !index ? "1/3" : "unset", height: "min-content" }}>
+              <Stack key={item.key} direction="column" spacing="2.4rem" sx={{ gridRow: !index ? "1/3" : "unset", height: "min-content" }}>
                 <Typography sx={{ fontSize: "1.4rem", fontWeight: 700 }}>{item.label}</Typography>
                 {item.items.map(item => (
-                  <SubmenuLink key={item.label} {...item} onClick={handleResetIsHover}></SubmenuLink>
+                  <SubmenuLink
+                    key={item.key}
+                    className={cx(item.key === currentMenu[0] && "active")}
+                    {...item}
+                    onClick={handleResetIsHover}
+                  ></SubmenuLink>
                 ))}
               </Stack>
             ))}
@@ -186,7 +193,14 @@ const App = ({ currentMenu }) => {
             {section.children
               // only show sub menu item when the href is set
               ?.filter(subItem => subItem.href)
-              .map(subItem => <SubmenuLink key={subItem.label} {...subItem} onClick={handleResetIsHover}></SubmenuLink>)}
+              .map(subItem => (
+                <SubmenuLink
+                  key={subItem.key}
+                  className={cx(subItem.key === currentMenu[0] && "active")}
+                  {...subItem}
+                  onClick={handleResetIsHover}
+                ></SubmenuLink>
+              ))}
           </>
         )}
       </SectionList>
@@ -200,7 +214,7 @@ const App = ({ currentMenu }) => {
           direction="row"
           alignItems="center"
           dark={dark}
-          className={currentMenu === item.key ? "active" : ""}
+          className={currentMenu.includes(item.key) ? "active" : ""}
           onMouseEnter={e => handleMouseEnter(e, item.key)}
           onMouseLeave={handleMouseLeave}
         >
@@ -236,7 +250,7 @@ const App = ({ currentMenu }) => {
     } else {
       return (
         <LinkStyledButton
-          className={currentMenu === item.key ? "active" : ""}
+          className={currentMenu.includes(item.key) ? "active" : ""}
           dark={dark}
           href={item.href}
           end={item.end}
@@ -293,4 +307,4 @@ const App = ({ currentMenu }) => {
   )
 }
 
-export default App
+export default DesktopHeader

src/app/sessions-one/Guidance/index.tsx renamed to src/app/sessions/Guidance/index.tsx

@@ -39,25 +39,30 @@ export default function Header() {
   const { isLandscape } = useCheckViewport()
   const pathname = usePathname()
 
-  const [currentMenu, setCurrentMenu] = useState("")
+  const [currentMenu, setCurrentMenu] = useState<Array<string>>([])
 
   useEffect(() => {
-    const rootMenu = findRootMenu(pathname, navigations)
-    setCurrentMenu(rootMenu ?? "")
+    const rootMenu = findRootMenu(pathname, navigations, [])
+    setCurrentMenu(rootMenu)
   }, [pathname])
 
-  const findRootMenu = (pathname, menuList: Array<any>) => {
+  const findRootMenu = (pathname, menuList: Array<any>, result) => {
     for (const menuItem of menuList) {
       if (menuItem.href && pathname.includes(menuItem.href)) {
-        return menuItem.rootKey || menuItem.key
-      } else if (menuItem.children) {
-        const key = findRootMenu(pathname, menuItem.children)
-        if (key) {
-          return key
+        if (menuItem?.key) {
+          result.push(menuItem.key as string)
+        }
+        if (menuItem?.rootKey) {
+          result.push(menuItem.rootKey as string)
         }
+        // return menuKey
+      } else if (menuItem.children) {
+        findRootMenu(pathname, menuItem.children, result)
+      } else if (menuItem.items) {
+        findRootMenu(pathname, menuItem.items, result)
       }
     }
-    return null
+    return result
   }
 
   if (isLandscape) {