feat: added new user menu (#1256)

* feat: added new user menu * replaced colors with chalk * use chalk for colors * feat: updated gatsby * feat: install chalk and isomorphic fetch
decentraland · Sep 15, 2023 · c874784 · c874784
1 parent 1c654e4
commit c874784
Show file tree

Hide file tree

Showing 7 changed files with 5,636 additions and 16,950 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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.2",
     "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",

diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx
@@ -1,17 +1,22 @@
 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 UserMenu from 'decentraland-gatsby/dist/components/User/UserMenu'
+import useFeatureFlagContext from 'decentraland-gatsby/dist/context/FeatureFlag/useFeatureFlagContext'
 import { Mobile, NotMobile } from 'decentraland-ui/dist/components/Media/Media'
 
+import { FeatureFlags } from '../../utils/features'
+
 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)
 
+  const [ff] = useFeatureFlagContext()
   return (
     <>
       {showBurgerMenu && (
@@ -20,7 +25,7 @@ function Navbar(props: UserMenuProps) {
         </Mobile>
       )}
       <NotMobile>
-        <UserMenu {...props} />
+        {ff.flags[FeatureFlags.NewNavbarDropdown] ? <UserInformation {...props} /> : <UserMenu {...props} />}
       </NotMobile>
     </>
   )

diff --git a/src/components/Layout/Navigation.css b/src/components/Layout/Navigation.css
@@ -8,6 +8,12 @@
   vertical-align: middle;
 }
 
+.dcl.navbar-account .ui.button.inverted {
+  color: white;
+  background-color: var(--primary);
+  border: none;
+}
+
 @media (min-width: 768px) {
   .Navigation .dcl.tabs {
     display: flex;

diff --git a/src/entities/Committee/isDAOCommittee.ts b/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) {

diff --git a/src/entities/Debug/isDebugAddress.ts b/src/entities/Debug/isDebugAddress.ts
@@ -1,4 +1,4 @@
-import { magenta } 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 DEBUG_ADDRESSES = (env('DEBUG_ADDRESSES', '') || '')
 
 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())

diff --git a/src/utils/features.ts b/src/utils/features.ts
@@ -3,4 +3,5 @@ export enum FeatureFlags {
   // Polygon = 'dao-enabled-polygon',
   Ens = 'dao-enabled-ens',
   Delegation = 'dao-enabled-delegation',
+  NewNavbarDropdown = 'dapps-new-navbar-dropdown',
 }