Merge branch 'master' into fix/incorrectly-formated-jsx

src/components/Footer/Footer.stories.tsx

@@ -13,3 +13,4 @@ storiesOf('Footer', module)
       <Footer isFullWidth />
     </div>
   ))
+  .add('Without the social links', () => <Footer hideSocialLinks />)

src/components/Footer/Footer.tsx

@@ -30,6 +30,7 @@ export type FooterProps = {
   isFullscreen?: boolean
   className?: string
   isFullWidth?: boolean
+  hideSocialLinks?: boolean
 }
 
 export class Footer extends React.PureComponent<FooterProps> {
@@ -62,7 +63,8 @@ export class Footer extends React.PureComponent<FooterProps> {
       i18n,
       isFullscreen,
       className,
-      isFullWidth
+      isFullWidth,
+      hideSocialLinks
     } = this.props
 
     let classes = 'dcl footer'
@@ -97,20 +99,22 @@ export class Footer extends React.PureComponent<FooterProps> {
           </div>
         </div>
         <div className="secondary-footer">
-          <div className="social-links">
-            <a href="https://dcl.gg/discord">
-              <i className="social-icon discord" />
-            </a>
-            <a href="https://reddit.com/r/decentraland">
-              <i className="social-icon reddit" />
-            </a>
-            <a href="https://github.com/decentraland">
-              <i className="social-icon github" />
-            </a>
-            <a href="https://twitter.com/decentraland">
-              <i className="social-icon twitter" />
-            </a>
-          </div>
+          {!hideSocialLinks ? (
+            <div className="social-links">
+              <a href="https://dcl.gg/discord">
+                <i className="social-icon discord" />
+              </a>
+              <a href="https://reddit.com/r/decentraland">
+                <i className="social-icon reddit" />
+              </a>
+              <a href="https://github.com/decentraland">
+                <i className="social-icon github" />
+              </a>
+              <a href="https://twitter.com/decentraland">
+                <i className="social-icon twitter" />
+              </a>
+            </div>
+          ) : null}
           <div className="copyright">
             © {new Date().getFullYear()} Decentraland
           </div>

src/components/Icons/DownloadIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import './styles.css'
+
+const DownloadIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_6_9647)">
+      <path d="M19 9H15V3H9V9H5L12 16L19 9ZM5 18V20H19V18H5Z" fill="#323232" />
+    </g>
+    <defs>
+      <clipPath id="clip0_6_9647">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default DownloadIcon

src/components/Navbar/MainMenu/MainMenu.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
 
 import { MenuItem } from '../MenuItem/MenuItem'
 import { NavbarPages } from '../Navbar.types'
 import { MainMenuProps } from './MainMenu.types'
-import { getNavbarPagesUrls } from '../utils'
+import { getExtraButton, getNavbarPagesUrls, NavbarExtraButton } from '../utils'
 
 import './MainMenu.css'
 
@@ -13,6 +13,22 @@ export const MainMenu = (props: MainMenuProps) => {
 
   const urls = getNavbarPagesUrls()
 
+  // load extra button
+  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 (
     <div
       className={classNames(
@@ -33,12 +49,6 @@ export const MainMenu = (props: MainMenuProps) => {
         title={i18n.create}
         mainUrl={urls[NavbarPages.CREATE]}
       />
-      <MenuItem
-        {...menuItemProps}
-        section={NavbarPages.EXPLORE}
-        title={i18n.explore}
-        mainUrl={urls[NavbarPages.EXPLORE]}
-      />
       <MenuItem
         {...menuItemProps}
         section={NavbarPages.LEARN}
@@ -51,6 +61,23 @@ export const MainMenu = (props: MainMenuProps) => {
         title={i18n.governance}
         mainUrl={urls[NavbarPages.GOVERNANCE]}
       />
+      <MenuItem
+        {...menuItemProps}
+        section={NavbarPages.EXPLORE}
+        title={i18n.explore}
+        mainUrl={urls[NavbarPages.EXPLORE]}
+      />
+      {extraButton && extraButton.visible ? (
+        <MenuItem
+          {...menuItemProps}
+          section={NavbarPages.EXTRA}
+          title={extraButton.text}
+          mainUrl={extraButton.link}
+          textColor={extraButton.textColor}
+          backgroundColor={extraButton.backgroundColor}
+          isExtraButton
+        />
+      ) : null}
     </div>
   )
 }

src/components/Navbar/MenuItem/MenuItem.css

@@ -12,6 +12,27 @@
   fill: var(--text);
 }
 
+.dui-navbar
+  .dui-navbar-wrapper
+  .item:not(.mobile).dui-menu-item.extra.has-background {
+  height: calc(100% - 24px);
+  padding: 12px;
+  margin-top: 12px;
+}
+
+.item.mobile.dui-menu-item.extra.has-background {
+  margin-top: 40px;
+  padding: 20px;
+  width: calc(100% - 50px - 40px);
+  border-radius: 8px;
+  justify-content: center;
+  border-bottom: none;
+}
+
+.item.mobile.dui-menu-item.extra.has-background .dui-icon-container.centered {
+  display: none;
+}
+
 @media (max-width: 991px) {
   .item.dui-menu-item.mobile {
     cursor: pointer;

src/components/Navbar/MenuItem/MenuItem.tsx

@@ -8,8 +8,17 @@ import { MenuItemProps } from './MenuItem.types'
 import './MenuItem.css'
 
 export const MenuItem = (props: MenuItemProps) => {
-  const { activePage, section, title, onToggleShowSubMenu, isMobile, mainUrl } =
-    props
+  const {
+    activePage,
+    section,
+    title,
+    onToggleShowSubMenu,
+    isMobile,
+    mainUrl,
+    textColor,
+    backgroundColor,
+    isExtraButton
+  } = props
 
   const mainRedirect = useCallback(() => {
     mainUrl && window.open(mainUrl, '_self')
@@ -19,15 +28,23 @@ export const MenuItem = (props: MenuItemProps) => {
     <Menu.Item
       active={activePage === section}
       onClick={(e: React.MouseEvent) => {
-        isMobile ? onToggleShowSubMenu(e, true, section) : mainRedirect()
+        isMobile && !isExtraButton
+          ? onToggleShowSubMenu(e, true, section)
+          : mainRedirect()
       }}
       onMouseEnter={(e: React.MouseEvent) =>
         !isMobile && onToggleShowSubMenu(e, true, section)
       }
       onMouseLeave={(e: React.MouseEvent) =>
         !isMobile && onToggleShowSubMenu(e, false, section)
       }
-      className={classNames('dui-menu-item', section, isMobile && 'mobile')}
+      className={classNames(
+        'dui-menu-item',
+        section,
+        isMobile && 'mobile',
+        backgroundColor && 'has-background'
+      )}
+      style={{ color: textColor, backgroundColor }}
     >
       {title}
       {isMobile && <ArrowIcon />}

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

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

src/components/Navbar/Navbar.defaults.ts

@@ -3,11 +3,11 @@ import { ChainSelectori18n } from '../ChainSelector/ChainSelector.props'
 import { NavbarMenuI18nProps, NavbarSubmenuProps } from './Navbar.types'
 
 export const navbarMainTitlesI18N = {
-  marketplace: 'marketplace',
+  marketplace: 'shop',
   create: 'create',
-  explore: 'explore',
   learn: 'learn',
-  governance: 'governance'
+  governance: 'vote',
+  explore: 'events'
 } as NavbarMenuI18nProps
 
 export const i18nChainSelectorDefault = {
@@ -89,8 +89,8 @@ export const navbarSubmenu = {
       {
         title: 'Scenes',
         description: 'Create & publish scenes to LAND or Worlds',
-        url: config.get('BUILDER_SCENES_URL'),
-        eventTrackingName: 'builder_scenes'
+        url: config.get('CREATOR_HUB_URL'),
+        eventTrackingName: 'creator_hub_scenes'
       }
     ],
     column3Title: 'MANAGE',

src/components/Navbar/Navbar.types.ts

@@ -9,10 +9,11 @@ export enum NavbarPages {
   CREATE = 'create',
   EXPLORE = 'explore',
   LEARN = 'learn',
-  GOVERNANCE = 'governance'
+  GOVERNANCE = 'governance',
+  EXTRA = 'extra'
 }
 
-export type NavbarMenuI18nProps = Record<NavbarPages, NavbarPages>
+export type NavbarMenuI18nProps = Record<NavbarPages, string>
 
 export type NavbarSubMenuItemsProps = {
   column1Title?: string

src/components/Navbar/utils.ts

@@ -10,3 +10,52 @@ export const getNavbarPagesUrls = () => {
     [NavbarPages.GOVERNANCE]: config.get('GOVERNANCE_URL')
   }
 }
+
+export type NavbarExtraButton = {
+  text: string
+  link: string
+  visible: boolean
+  textColor?: `#${string}`
+  backgroundColor?: `#${string}`
+  id?: string
+  ttl: number
+}
+
+export type LocalStorageNavbarExtraButton = {
+  button: NavbarExtraButton
+  expiresAt: number
+}
+
+export 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_URL = `https://cdn.contentful.com/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
+  }
+}

src/components/UserMenu/UserMenu.css

@@ -11,13 +11,21 @@
   height: 100%;
 }
 
-.dcl .user-menu__jump-in {
+.dcl .user-menu__download {
   padding: 14px 32px;
   margin-left: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 2px;
+}
+
+.dcl .user-menu__download svg g path {
+  fill: var(--text-on-primary);
 }
 
 @media (max-width: 991px) {
-  .dcl .user-menu__jump-in {
+  .dcl .user-menu__download {
     display: none;
   }
 }

src/components/UserMenu/UserMenu.i18n.ts

@@ -4,7 +4,7 @@ export const i18n = {
   account: 'Account Settings',
   activity: 'Activity',
   guest: 'Guest',
-  jumpIn: 'Jump In',
+  download: 'Download',
   marketplaceAuthorizations: 'Marketplace Authorizations',
   myAssets: 'My Assets',
   myLists: 'My Lists',