feat: Upgrade Navbarv2 (#2090)

* feat: Add FF navbar2_variant

* feat: Upgrade NavbarV2

* feat: Remove max-width

* feat: Upgrade decentraland-dapps package

* feat: Update decentraland-ui and decentraland-dapps packages

* feat: Update decentraland-dapps package

webapp/package.json

@@ -20,9 +20,9 @@
     "dcl-catalyst-commons": "^9.0.1",
     "decentraland-connect": "^5.2.4",
     "decentraland-crypto-fetch": "^1.0.3",
-    "decentraland-dapps": "^16.28.1",
+    "decentraland-dapps": "^16.31.1",
     "decentraland-transactions": "^1.50.0",
-    "decentraland-ui": "^4.34.0",
+    "decentraland-ui": "^4.35.1",
     "dotenv": "^10.0.0",
     "ethers": "^5.6.8",
     "graphql": "^14.7.0",

webapp/src/components/Navbar/Navbar.container.ts

@@ -4,7 +4,10 @@ import { isPending } from 'decentraland-dapps/dist/modules/transaction/utils'
 
 import { RootState } from '../../modules/reducer'
 import { getTransactions } from '../../modules/transaction/selectors'
-import { getIsAuthDappEnabled } from '../../modules/features/selectors'
+import {
+  getIsAuthDappEnabled,
+  getIsNavbarV2Enabled
+} from '../../modules/features/selectors'
 import { MapStateProps, MapDispatch, MapDispatchProps } from './Navbar.types'
 import Navbar from './Navbar'
 import { getCurrentIdentity } from '../../modules/identity/selectors'
@@ -15,7 +18,8 @@ const mapState = (state: RootState): MapStateProps => ({
     isPending(tx.status)
   ),
   identity: getCurrentIdentity(state) || undefined,
-  isAuthDappEnabled: getIsAuthDappEnabled(state)
+  isAuthDappEnabled: getIsAuthDappEnabled(state),
+  isNavbarV2Enabled: getIsNavbarV2Enabled(state)
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({

webapp/src/components/Navbar/Navbar.tsx

@@ -1,24 +1,17 @@
 import React, { useCallback } from 'react'
 import { Navbar as BaseNavbar } from 'decentraland-dapps/dist/containers'
+import { Navbar2 as BaseNavbar2 } from 'decentraland-dapps/dist/containers'
+import { Navbar2Pages } from 'decentraland-ui/dist/components/Navbar2/Navbar2.types'
 import { config } from '../../config'
 import { locations } from '../../modules/routing/locations'
 import UserInformation from '../UserInformation'
 import { Props } from './Navbar.types'
 import './Navbar.css'
 
 const Navbar = (props: Props) => {
-  const {
-    location,
-    onNavigate,
-    isAuthDappEnabled
-  } = props
+  const { location, onNavigate, isAuthDappEnabled, isNavbarV2Enabled } = props
   const { pathname, search } = location
 
-  props = {
-    ...props,
-    rightMenu: <UserInformation identity={props.identity} withNotifications />
-  }
-
   const handleOnSignIn = useCallback(() => {
     const searchParams = new URLSearchParams(search)
     const currentRedirectTo = searchParams.get('redirectTo')
@@ -38,7 +31,17 @@ const Navbar = (props: Props) => {
     onNavigate(locations.settings())
   }, [onNavigate])
 
-  return (
+  return isNavbarV2Enabled ? (
+    <BaseNavbar2
+      {...props}
+      withNotifications
+      activePage={Navbar2Pages.MARKETPLACE}
+      hasActivity={props.hasPendingTransactions}
+      identity={props.identity}
+      onSignIn={handleOnSignIn}
+      onClickAccountSettings={handleOnClickAccount}
+    />
+  ) : (
     <BaseNavbar
       {...props}
       withNotifications
@@ -47,6 +50,9 @@ const Navbar = (props: Props) => {
       isSignIn={pathname === locations.signIn()}
       onSignIn={handleOnSignIn}
       onClickAccount={handleOnClickAccount}
+      rightMenu={
+        <UserInformation identity={props.identity} withNotifications />
+      }
     />
   )
 }

webapp/src/components/Navbar/Navbar.types.ts

@@ -10,6 +10,7 @@ export type Props = Partial<NavbarProps> & {
   onNavigate: (path: string) => void
   identity?: AuthIdentity
   isAuthDappEnabled: boolean
+  isNavbarV2Enabled: boolean
 }
 
 export type OwnProps = Pick<Props, 'enablePartialSupportAlert'>
@@ -20,6 +21,7 @@ export type MapStateProps = Pick<
   | 'hasPendingTransactions'
   | 'identity'
   | 'isAuthDappEnabled'
+  | 'isNavbarV2Enabled'
 >
 export type MapDispatchProps = Pick<Props, 'onNavigate'>
 export type MapDispatch = Dispatch<CallHistoryMethodAction>

webapp/src/index.css

@@ -54,7 +54,6 @@ code {
 
 .ui.container {
   width: 100%;
-  max-width: 1360px !important;
 }
 
 .dcl.toast .toast-info .body .ui.basic.button.no-padding {