Feat/add new user menu

package.json

@@ -59,14 +59,15 @@
     "@snapshot-labs/snapshot.js": "0.5.5",
     "@tanstack/react-query": "^4.29.7",
     "autoprefixer": "^10.4.4",
+    "chalk": "^4.1.2",
     "chart.js": "^3.8.2",
     "classnames": "^2.3.2",
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.21.1",
     "cssnano": "^6.0.1",
     "dayjs-precise-range": "^1.0.1",
     "dcl-catalyst-client": "^21.5.0",
-    "decentraland-gatsby": "^5.75.1",
+    "decentraland-gatsby": "^5.86.3",
     "decentraland-ui": "^4.1.0",
     "discord.js": "^14.7.1",
     "dompurify": "^2.3.3",
@@ -84,6 +85,7 @@
     "gatsby-plugin-typescript": "^4.10.0",
     "gatsby-source-filesystem": "^4.10.0",
     "gatsby-transformer-sharp": "^4.10.0",
+    "isomorphic-fetch": "^3.0.0",
     "keccak": "^3.0.1",
     "lodash": "^4.17.21",
     "nft.storage": "^7.1.1",

src/components/Layout/Layout.css

@@ -10,19 +10,18 @@
   }
 }
 
-.WiderNavbar.dcl.navbar .ui.container {
-  width: unset !important;
-  max-width: 1391px !important;
-}
-
 .ui.container.WiderFooter {
   width: unset !important;
   max-width: 1440px !important;
 }
 
 @media (min-width: 768px) {
-  .WiderNavbar.dcl.navbar .ui.container,
   .ui.container.WiderFooter {
     padding: 0 24px !important;
   }
 }
+
+.dcl.navbar .ui.container,
+.Navigation .dcl.tabs .ui.container {
+  width: calc(100% - 48px);
+}

src/components/Layout/Layout.tsx

@@ -9,7 +9,6 @@ import { Navbar, NavbarProps } from 'decentraland-ui/dist/components/Navbar/Navb
 import type { PageProps } from 'gatsby'
 
 import { isProjectPath } from '../../utils/locations'
-import SnapshotStatus from '../Debug/SnapshotStatus'
 import WalletSelectorModal from '../Modal/WalletSelectorModal'
 import WrongNetworkModal from '../Modal/WrongNetworkModal'
 
@@ -49,12 +48,7 @@ export default function Layout({ children, ...props }: LayoutProps) {
 
   return (
     <>
-      <Navbar
-        activePage="dao"
-        onClickMenuOption={handleClickMenuOption}
-        rightMenu={props.rightMenu}
-        className={isWiderLayout ? 'WiderNavbar' : undefined}
-      />
+      <Navbar activePage="dao" onClickMenuOption={handleClickMenuOption} rightMenu={props.rightMenu} />
       <main>{children}</main>
       <WrongNetworkModal
         currentNetwork={state.chainId}

src/components/Layout/Navbar.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 
 import { useLocation } from '@reach/router'
-import UserMenu, { UserMenuProps } from 'decentraland-gatsby/dist/components/User/UserMenu'
+import UserInformation, { UserInformationProps } from 'decentraland-gatsby/dist/components/User/UserInformation'
 import { Mobile, NotMobile } from 'decentraland-ui/dist/components/Media/Media'
 
 import BurgerMenu from './BurgerMenu/BurgerMenu'
 
 const BURGER_MENU_LOCATIONS = ['/', '/proposals/', '/transparency/', '/projects/', '/profile/']
 
-function Navbar(props: UserMenuProps) {
+function Navbar(props: UserInformationProps) {
   const location = useLocation()
   const showBurgerMenu = BURGER_MENU_LOCATIONS.some((burgerLocation) => burgerLocation === location.pathname)
 
@@ -20,7 +20,7 @@ function Navbar(props: UserMenuProps) {
         </Mobile>
       )}
       <NotMobile>
-        <UserMenu {...props} />
+        <UserInformation {...props} />
       </NotMobile>
     </>
   )

src/components/Layout/Navigation.css

@@ -8,6 +8,12 @@
   vertical-align: middle;
 }
 
+.dcl.navbar-account .ui.button.inverted {
+  color: black;
+  border: 1px solid black;
+  border-radius: 6px;
+}
+
 @media (min-width: 768px) {
   .Navigation .dcl.tabs {
     display: flex;
@@ -41,14 +47,3 @@
   margin-bottom: 0;
   padding-left: 0;
 }
-
-.WiderNavigation .dcl.tabs .ui.container {
-  width: 100%;
-  max-width: 1440px !important;
-}
-
-@media (min-width: 768px) {
-  .WiderNavigation .dcl.tabs .ui.container {
-    padding: 0 24px;
-  }
-}

src/components/Layout/Navigation.tsx

@@ -1,7 +1,5 @@
 import React, { useEffect, useState } from 'react'
 
-import { useLocation } from '@reach/router'
-import classNames from 'classnames'
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media/Media'
@@ -11,7 +9,7 @@ import { Tabs } from 'decentraland-ui/dist/components/Tabs/Tabs'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import useIsDebugAddress from '../../hooks/useIsDebugAddress'
 import useIsProfileValidated from '../../hooks/useIsProfileValidated'
-import locations, { isProjectPath } from '../../utils/locations'
+import locations from '../../utils/locations'
 import Link from '../Common/Typography/Link'
 import Dot from '../Icon/Dot'
 import SearchInput from '../Search/SearchInput'
@@ -42,8 +40,6 @@ type DismissState = {
 const Navigation = ({ activeTab }: NavigationProps) => {
   const t = useFormatMessage()
   const [user] = useAuthContext()
-  const location = useLocation()
-
   const { isDebugAddress } = useIsDebugAddress(user)
   const { isProfileValidated, validationChecked } = useIsProfileValidated(user)
   const [dismissState, setDismissState] = useState<DismissState>({
@@ -68,7 +64,7 @@ const Navigation = ({ activeTab }: NavigationProps) => {
   const showDot = validationChecked && !isProfileValidated
 
   return (
-    <div className={classNames('Navigation', isProjectPath(location.pathname) && 'WiderNavigation')}>
+    <div className="Navigation">
       <Tabs>
         <Tabs.Left>
           <Link href={locations.home()}>

src/entities/Committee/isDAOCommittee.ts

@@ -1,4 +1,4 @@
-import { yellow } from 'colors/safe'
+import chalk from 'chalk'
 import env from 'decentraland-gatsby/dist/utils/env'
 import isEthereumAddress from 'validator/lib/isEthereumAddress'
 
@@ -9,7 +9,7 @@ export const COMMITTEE_ADDRESSES = (env('COMMITTEE_ADDRESSES', '') || '')
 
 const committeeAddresses = new Set(COMMITTEE_ADDRESSES)
 
-committeeAddresses.forEach((address) => console.log('committee address:', yellow(address)))
+committeeAddresses.forEach((address) => console.log('committee address:', chalk.yellow(address)))
 
 export default function isDAOCommittee(user?: string | null | undefined) {
   if (!user) {

src/entities/Debug/isDebugAddress.ts

@@ -1,10 +1,10 @@
-import { magenta } from 'colors/safe'
+import chalk from 'chalk'
 
 import { DEBUG_ADDRESSES } from '../../constants'
 
 const debugAddresses = new Set(DEBUG_ADDRESSES)
 
-debugAddresses.forEach((address) => console.log('debug address:', magenta(address)))
+debugAddresses.forEach((address) => console.log('debug address:', chalk.magenta(address)))
 
 export default function isDebugAddress(address: string | undefined) {
   return address && address.length > 0 && debugAddresses.has(address.toLowerCase())