feat: add extra button to navbar

src/components/Navbar/MainMenu/MainMenu.tsx

@@ -1,11 +1,29 @@
+import { useEffect, useRef, useState } from "react"
 import { config } from "../../../config"
 import { MenuItem } from "../MenuItem/MenuItem"
 import { NavbarPages } from "../Navbar.types"
+import { NavbarExtraButton, getExtraButton } from "../utils"
 import { MainMenuProps } from "./MainMenu.types"
 import { MainMenuContainer } from "./MainMenu.styled"
 
 export const MainMenu = (props: MainMenuProps) => {
   const { i18n, isOpenOnMobile, ...menuItemProps } = props
+
+  const isMounted = useRef(false)
+  const [extraButton, setExtraButton] = useState<NavbarExtraButton | null>(null)
+  useEffect(() => {
+    isMounted.current = true
+    if (!extraButton) {
+      getExtraButton().then((button) => {
+        if (!isMounted.current) return
+        setExtraButton(button)
+      })
+    }
+    return () => {
+      isMounted.current = false
+    }
+  }, [extraButton, isMounted, setExtraButton])
+
   return (
     <MainMenuContainer isOpenOnMobile={isOpenOnMobile}>
       <MenuItem
@@ -38,6 +56,16 @@ export const MainMenu = (props: MainMenuProps) => {
         title={i18n.explore}
         mainUrl={config.get("EVENTS_URL")}
       />
+      {extraButton && extraButton.visible ? (
+        <MenuItem
+          {...menuItemProps}
+          section={NavbarPages.EXTRA}
+          title={extraButton.text}
+          mainUrl={extraButton.link}
+          textColor={extraButton.textColor}
+          backgroundColor={extraButton.backgroundColor}
+        />
+      ) : null}
     </MainMenuContainer>
   )
 }

src/components/Navbar/MenuItem/MenuItem.styled.ts

@@ -1,8 +1,11 @@
 import styled from "@emotion/styled"
 import { Box, Typography, useTheme } from "@mui/material"
 
-const MenuItemContainer = styled(Box)((props: { active: boolean }) => {
-  const { active } = props
+const MenuItemContainer = styled(Box)((props: {
+  active: boolean
+  backgroundColor?: string
+}) => {
+  const { active, backgroundColor } = props
 
   const theme = useTheme()
 
@@ -15,7 +18,7 @@ const MenuItemContainer = styled(Box)((props: { active: boolean }) => {
   }
 
   return {
-    backgroundColor: "transparent",
+    backgroundColor: backgroundColor ? backgroundColor : "transparent",
     display: "flex",
     cursor: "pointer",
     alignItems: "center",
@@ -45,13 +48,16 @@ const MenuItemContainer = styled(Box)((props: { active: boolean }) => {
   }
 })
 
-const MenuItemTitle = styled(Typography)(() => {
+const MenuItemTitle = styled(Typography)((props: { textColor?: string }) => {
+  const { textColor } = props
   const theme = useTheme()
+
   return {
     textTransform: "capitalize" as const,
     fontWeight: "inherit",
+    color: textColor ? textColor : theme.palette.text.secondary,
     [theme.breakpoints.down("sm")]: {
-      color: theme.palette.text.primary,
+      color: textColor ? textColor : theme.palette.text.primary,
     },
   }
 })

src/components/Navbar/MenuItem/MenuItem.tsx

@@ -4,8 +4,16 @@ import { MenuItemProps } from "./MenuItem.types"
 import { MenuItemContainer, MenuItemTitle } from "./MenuItem.styled"
 
 const MenuItem = (props: MenuItemProps) => {
-  const { activePage, section, title, onToggleShowSubMenu, mainUrl, isMobile } =
-    props
+  const {
+    activePage,
+    section,
+    title,
+    onToggleShowSubMenu,
+    mainUrl,
+    isMobile,
+    textColor,
+    backgroundColor,
+  } = props
 
   const mainRedirect = useCallback(() => {
     mainUrl && window.open(mainUrl, "_self")
@@ -19,8 +27,13 @@ const MenuItem = (props: MenuItemProps) => {
       }}
       onMouseEnter={(e) => !isMobile && onToggleShowSubMenu(e, true, section)}
       onMouseLeave={(e) => !isMobile && onToggleShowSubMenu(e, false, section)}
+      backgroundColor={backgroundColor}
     >
-      <MenuItemTitle variant="subtitle1" onClick={mainRedirect}>
+      <MenuItemTitle
+        variant="subtitle1"
+        onClick={mainRedirect}
+        textColor={textColor}
+      >
         {title}
       </MenuItemTitle>
       {isMobile && <ArrowForwardRoundedIcon />}

src/components/Navbar/MenuItem/MenuItem.types.ts

@@ -11,4 +11,6 @@ export type MenuItemProps = {
   ) => void
   mainUrl?: string
   isMobile?: boolean
+  textColor?: string
+  backgroundColor?: string
 }

src/components/Navbar/Navbar.types.ts

@@ -10,6 +10,7 @@ enum NavbarPages {
   EXPLORE = "explore",
   LEARN = "learn",
   GOVERNANCE = "governance",
+  EXTRA = "extra",
 }
 
 type NavbarMenuI18nProps = Record<NavbarPages, string>

src/components/Navbar/utils.ts

@@ -0,0 +1,54 @@
+import { config } from "../../config"
+
+type NavbarExtraButton = {
+  text: string
+  link: string
+  visible: boolean
+  textColor?: `#${string}`
+  backgroundColor?: `#${string}`
+  id?: string
+  ttl: number
+}
+
+type LocalStorageNavbarExtraButton = {
+  button: NavbarExtraButton
+  expiresAt: number
+}
+
+const getExtraButton = async () => {
+  const cachedExtraButton = localStorage.getItem("navbarExtraButton")
+  if (cachedExtraButton) {
+    try {
+      const parsed = JSON.parse(
+        cachedExtraButton
+      ) as LocalStorageNavbarExtraButton
+      if (parsed.expiresAt > Date.now()) {
+        return parsed.button
+      }
+    } catch (error) {
+      // error parsing cached data, ignore and fetch from Contentful
+    }
+  }
+  try {
+    const SPACE_ID = config.get("CONTENTFUL_SPACE_ID")
+    const ENV = config.get("CONTENTFUL_ENV")
+    const ACCESS_TOKEN = config.get("CONTENTFUL_NAVBAR_ACCESS_TOKEN")
+    const ENTRY_ID = config.get("CONTENTFUL_NAVBAR_ENTRY_ID")
+    const CONTENTFUL_CDN_URL = config.get("CONTENTFUL_CONTENTFUL_CDN_URL")
+    const CONTENTFUL_URL = `${CONTENTFUL_CDN_URL}/spaces/${SPACE_ID}/environments/${ENV}/entries/${ENTRY_ID}?access_token=${ACCESS_TOKEN}`
+    const response = await fetch(CONTENTFUL_URL)
+    const entry = await response.json()
+    const button = entry.fields as NavbarExtraButton
+    localStorage.setItem(
+      "navbarExtraButton",
+      JSON.stringify({ button, expiresAt: Date.now() + button.ttl * 1000 })
+    )
+    return button
+  } catch (error) {
+    console.error(error)
+    return null
+  }
+}
+
+export { getExtraButton }
+export type { NavbarExtraButton, LocalStorageNavbarExtraButton }

src/config/env/dev.json

@@ -11,5 +11,10 @@
   "CREATE_URL": "https://decentraland.org/create/",
   "LEARN_URL": "https://docs.decentraland.org/player/",
   "CREATOR_HUB_URL": "https://decentraland.zone/download/creator-hub/",
-  "DOWNLOAD_URL": "https://decentraland.zone/download/"
+  "DOWNLOAD_URL": "https://decentraland.zone/download/",
+  "CONTENTFUL_SPACE_ID": "ea2ybdmmn1kv",
+  "CONTENTFUL_ENV": "master",
+  "CONTENTFUL_NAVBAR_ACCESS_TOKEN": "9dieh3AHS6uwb_YNMjxlO6FCibAFFJVdg2YzA5t6U-Y",
+  "CONTENTFUL_NAVBAR_ENTRY_ID": "18g1DzIyBxvu0steSwKyQr",
+  "CONTENTFUL_CONTENTFUL_CDN_URL": "https://cdn.contentful.com"
 }

src/config/env/prod.json

@@ -11,5 +11,10 @@
   "CREATE_URL": "https://decentraland.org/create/",
   "LEARN_URL": "https://docs.decentraland.org/player/",
   "CREATOR_HUB_URL": "https://decentraland.org/download/creator-hub/",
-  "DOWNLOAD_URL": "https://decentraland.org/download/"
+  "DOWNLOAD_URL": "https://decentraland.org/download/",
+  "CONTENTFUL_SPACE_ID": "ea2ybdmmn1kv",
+  "CONTENTFUL_ENV": "master",
+  "CONTENTFUL_NAVBAR_ACCESS_TOKEN": "9dieh3AHS6uwb_YNMjxlO6FCibAFFJVdg2YzA5t6U-Y",
+  "CONTENTFUL_NAVBAR_ENTRY_ID": "18g1DzIyBxvu0steSwKyQr",
+  "CONTENTFUL_CONTENTFUL_CDN_URL": "https://cdn.contentful.com"
 }

src/config/env/stg.json

@@ -11,5 +11,10 @@
   "CREATE_URL": "https://decentraland.today/create/",
   "LEARN_URL": "https://docs.decentraland.org/player/",
   "CREATOR_HUB_URL": "https://decentraland.today/download/creator-hub/",
-  "DOWNLOAD_URL": "https://decentraland.todat/download/"
+  "DOWNLOAD_URL": "https://decentraland.today/download/",
+  "CONTENTFUL_SPACE_ID": "ea2ybdmmn1kv",
+  "CONTENTFUL_ENV": "master",
+  "CONTENTFUL_NAVBAR_ACCESS_TOKEN": "9dieh3AHS6uwb_YNMjxlO6FCibAFFJVdg2YzA5t6U-Y",
+  "CONTENTFUL_NAVBAR_ENTRY_ID": "18g1DzIyBxvu0steSwKyQr",
+  "CONTENTFUL_CONTENTFUL_CDN_URL": "https://cdn.contentful.com"
 }