Merge pull request #1343 from scroll-tech/governance

For Multichain SDK

src/components/Header/SubmenuLink.tsx

@@ -95,6 +95,7 @@ const SubmenuLink = ({
   icon,
   dark,
   reload,
+  onClick,
 }: {
   label: string
   text?: string
@@ -103,14 +104,15 @@ const SubmenuLink = ({
   icon?: any
   dark?: boolean
   reload?: boolean
+  onClick?: () => {}
 }) => (
   <>
     {isExternal ? (
-      <StyledLink dark={dark} href={href} target="_blank" rel="noopener noreferrer">
+      <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} to={href} reloadDocument={reload}>
+      <StyledNavLink dark={dark} to={href} onClick={onClick} reloadDocument={reload}>
         <SubmenuLinkContent icon={icon} label={label} text={text} isExternal={isExternal} />
       </StyledNavLink>
     )}

src/components/Header/constants.ts

@@ -8,6 +8,7 @@ import { ReactComponent as HomeSvg } from "@/assets/svgs/header/Home.svg"
 import { ReactComponent as IssuesSvg } from "@/assets/svgs/header/Issues.svg"
 import { ReactComponent as LevelUpSvg } from "@/assets/svgs/header/LevelUp.svg"
 import { ReactComponent as ProjectsSvg } from "@/assets/svgs/header/Projects.svg"
+import { ReactComponent as SDKSvg } from "@/assets/svgs/header/SDK.svg"
 import { ReactComponent as SessionsSvg } from "@/assets/svgs/header/Sessions.svg"
 import { ReactComponent as StatusSvg } from "@/assets/svgs/header/Status.svg"
 import { isSepolia, requireEnv } from "@/utils"
@@ -98,55 +99,79 @@ const mainnetNavigations = [
     children: [
       {
         label: "",
+        type: "grid",
         children: [
           {
-            text: "Mainnet Deployment",
-            label: "Let’s go live now!",
-            key: "mainnet-resources",
-            rootKey: "develop",
-            href: "/portal",
-            icon: EthereumSvg,
-          },
-          {
-            label: "Try and test it out",
-            text: "Sepolia Testnet",
-            key: "sepolia-resources",
-            rootKey: "develop",
-            href: "https://sepolia.scroll.io/portal",
-            isExternal: true,
-            icon: BuildSvg,
+            label: "DEPLOY AN APP",
+            items: [
+              {
+                text: "Mainnet Deployment",
+                label: "Let’s go live now!",
+                key: "mainnet-resources",
+                rootKey: "develop",
+                href: "/portal",
+                icon: EthereumSvg,
+              },
+              {
+                label: "Try and test it out",
+                text: "Sepolia Testnet",
+                key: "sepolia-resources",
+                rootKey: "develop",
+                href: "https://sepolia.scroll.io/portal",
+                isExternal: true,
+                icon: BuildSvg,
+              },
+              {
+                label: "Understand all the details to build",
+                text: "Docs",
+                key: "docs",
+                href: "https://docs.scroll.io/en/home/",
+                isExternal: true,
+                icon: DocsSvg,
+              },
+              {
+                label: "Scroll network health indicator",
+                text: "Status",
+                key: "status",
+                href: "https://status.scroll.io/",
+                isExternal: true,
+                icon: StatusSvg,
+              },
+            ],
           },
           {
-            label: "Understand all the details to build",
-            text: "Docs",
-            key: "docs",
-            href: "https://docs.scroll.io/en/home/",
-            isExternal: true,
-            icon: DocsSvg,
+            label: "DEPLOY A CHAIN",
+            items: [
+              {
+                label: "Own your blockspace",
+                text: "Scroll SDK",
+                key: "sdk",
+                href: "https://docs.scroll.io/en/sdk",
+                isExternal: true,
+                icon: SDKSvg,
+              },
+            ],
           },
           {
-            label: "Scroll network health indicator",
-            text: "Status",
-            key: "status",
-            href: "https://status.scroll.io/",
-            isExternal: true,
-            icon: StatusSvg,
-          },
-          {
-            label: "Learn, build and innovate",
-            text: "Level Up",
-            key: "lelvel-up",
-            href: "https://levelupweb3.xyz",
-            isExternal: true,
-            icon: LevelUpSvg,
-          },
-          {
-            label: "Help Scroll get better",
-            text: "Bug Bounty",
-            key: "bug-bounty",
-            href: "https://immunefi.com/bounty/scroll/",
-            isExternal: true,
-            icon: IssuesSvg,
+            label: "MORE",
+            items: [
+              {
+                label: "Learn, build and innovate",
+                text: "Level Up",
+                key: "lelvel-up",
+                href: "https://levelupweb3.xyz",
+                isExternal: true,
+                icon: LevelUpSvg,
+              },
+              {
+                label: "Help Scroll get better",
+                text: "Bug Bounty",
+                key: "bug-bounty",
+                href: "https://immunefi.com/bounty/scroll/",
+                isExternal: true,
+                icon: IssuesSvg,
+              },
+            ],
           },
         ],
       },

src/components/Header/desktop_header.tsx

@@ -116,7 +116,7 @@ const SubMenuList = styled(Box)(({ theme }) => ({
 const SectionList = styled<any>(Box, { shouldForwardProp: prop => prop !== "dark" })(({ theme, dark }) => ({
   display: "flex",
   flexDirection: "column",
-  width: "100%",
+  flex: 1,
   gap: "1.6rem",
   "&:nth-of-type(n+2)": {
     borderLeft: `1px solid ${theme.palette.text.primary}`,
@@ -149,19 +149,44 @@ const App = ({ currentMenu }) => {
     setAnchorEl(null)
   }
 
+  const handleResetIsHover = () => {
+    setIsHover(false)
+  }
+
   const renderSubMenuList = children => {
     return children.map((section, idx) => (
       <SectionList key={idx} dark={dark}>
         {section.label && (
           <Typography sx={{ fontSize: "1.4rem", fontWeight: "bold", lineHeight: "2rem", color: "text.primary" }}>{section.label}</Typography>
         )}
-
-        {section.children
-          // only show sub menu item when the href is set
-          ?.filter(subItem => subItem.href)
-          .map(subItem => (
-            <SubmenuLink key={subItem.label} {...subItem}></SubmenuLink>
-          ))}
+        {section.type === "grid" ? (
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: "repeat(2, min-content)",
+              gridTemplateRows: "1fr min-content",
+              columnGap: "2.4rem",
+            }}
+          >
+            {section.children.map((item, index) => (
+              <Stack 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>
+                ))}
+              </Stack>
+            ))}
+          </Box>
+        ) : (
+          <>
+            {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>
+              ))}
+          </>
+        )}
       </SectionList>
     ))
   }
@@ -172,7 +197,6 @@ const App = ({ currentMenu }) => {
         <SubMenuButton
           direction="row"
           alignItems="center"
-          // spacing="6px"
           dark={dark}
           className={currentMenu === item.key ? "active" : ""}
           onMouseEnter={e => handleMouseEnter(e, item.key)}
@@ -240,7 +264,16 @@ const App = ({ currentMenu }) => {
   }
 
   return (
-    <StyledBox bgColor={navbarBg} dark={dark} onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
+    <StyledBox
+      bgColor={navbarBg}
+      dark={dark}
+      onMouseEnter={() => {
+        setIsHover(true)
+      }}
+      onMouseLeave={e => {
+        setIsHover(false)
+      }}
+    >
       <Announcement />
       <Container>
         <HeaderContainer>

src/components/Header/mobile_header.tsx

@@ -195,12 +195,30 @@ const App = ({ currentMenu }) => {
                       {section.label}
                     </Typography>
                   )}
-                  {section.children
-                    // only show sub items with href
-                    ?.filter(subItem => subItem.href)
-                    .map(subItem => (
-                      <SubmenuLink key={subItem.label} dark={dark} {...subItem}></SubmenuLink>
-                    ))}
+                  {section.type === "grid" ? (
+                    <Stack direction="column" spacing="2rem">
+                      {section.children.map((item, index) => (
+                        <Stack direction="column" spacing="1.6rem">
+                          {/* <Divider textAlign="left" sx={{ color: "text.primary",  }}>
+                            {item.label}
+                          </Divider> */}
+                          <Typography sx={{ fontSize: "1.4rem", fontWeight: 700 }}>{item.label}</Typography>
+                          {item.items.map(item => (
+                            <SubmenuLink key={item.label} {...item}></SubmenuLink>
+                          ))}
+                        </Stack>
+                      ))}
+                    </Stack>
+                  ) : (
+                    <>
+                      {section.children
+                        // only show sub items with href
+                        ?.filter(subItem => subItem.href)
+                        .map(subItem => (
+                          <SubmenuLink key={subItem.label} dark={dark} {...subItem}></SubmenuLink>
+                        ))}
+                    </>
+                  )}
                 </SectionList>
               ))}
             </List>

src/components/Header/useCheckCustomNavBarBg.tsx

@@ -3,7 +3,7 @@ import { useLocation } from "react-router-dom"
 
 import useScrollTrigger from "@mui/material/useScrollTrigger"
 
-const TRANSPARENT_BG_PAGE_LIST = ["/story", "/sessions"]
+const TRANSPARENT_BG_PAGE_LIST = ["/", "/ecosystem", "/story", "/sessions"]
 // themeBackground
 const CUSTOM_BG_PAGE_MAP = {
   "/brand-kit": "brand",

src/components/Motion/OrientationToView.tsx

@@ -1,7 +1,11 @@
 import { motion } from "framer-motion"
 
+import { Box } from "@mui/material"
+
 import useCheckViewport from "@/hooks/useCheckViewport"
 
+const MotionBox = motion(Box)
+
 const OrientationToView = props => {
   const { children, direction = "up", once = true, delay, ...restProps } = props
 
@@ -49,16 +53,16 @@ const OrientationToView = props => {
     },
   }
   return (
-    <motion.div
+    <MotionBox
       initial="hidden"
       whileInView="show"
       variants={variants[direction]}
-      viewport={{ once, amount: isPortrait ? 0.3 : 1 }}
+      viewport={{ once, amount: isPortrait ? 0.2 : 0.8 }}
       transition={{ ease: [0.16, 1, 0.3, 1], duration: 1, delay }}
       {...restProps}
     >
       {children}
-    </motion.div>
+    </MotionBox>
   )
 }