feat: Navbar from UI2 with decentraland-dapps (#2346)

* feat: Navbar from UI2 with decentraland-dapps

* feat: update decentraland-ui2 v0.8.4

* feat: use DclThemProvider

webapp/package.json

@@ -22,9 +22,10 @@
     "dcl-catalyst-commons": "^9.0.1",
     "decentraland-connect": "^7.3.2",
     "decentraland-crypto-fetch": "^1.0.3",
-    "decentraland-dapps": "^23.17.1",
+    "decentraland-dapps": "^23.19.0",
     "decentraland-transactions": "^2.18.0",
     "decentraland-ui": "^6.12.1",
+    "decentraland-ui2": "^0.8.4",
     "ethers": "^5.6.8",
     "graphql": "^14.7.0",
     "history": "^4.10.1",

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

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
 import { TransactionStatus } from 'decentraland-dapps/dist/modules/transaction/types'
 import { isPending } from 'decentraland-dapps/dist/modules/transaction/utils'
-import { getIsChainSelectorEnabled } from '../../modules/features/selectors'
+import { getIsChainSelectorEnabled, getIsNavbar2Enabled } from '../../modules/features/selectors'
 import { getCurrentIdentity } from '../../modules/identity/selectors'
 import { RootState } from '../../modules/reducer'
 import { getTransactions } from '../../modules/transaction/selectors'
@@ -11,7 +11,8 @@ import { MapStateProps } from './Navbar.types'
 const mapState = (state: RootState): MapStateProps => ({
   hasPendingTransactions: getTransactions(state).some((tx: { status: TransactionStatus | null }) => isPending(tx.status)),
   identity: getCurrentIdentity(state) || undefined,
-  isChainSelectorEnabled: getIsChainSelectorEnabled(state)
+  isChainSelectorEnabled: getIsChainSelectorEnabled(state),
+  isNavbar2Enabled: getIsNavbar2Enabled(state)
 })
 
 export default connect(mapState)(Navbar)

webapp/src/components/Navbar/Navbar.tsx

@@ -1,14 +1,15 @@
 import React, { useCallback } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { Navbar as BaseNavbar } from 'decentraland-dapps/dist/containers'
+import { Navbar2 as BaseNavbar2 } from 'decentraland-dapps/dist/containers/Navbar'
 import { NavbarPages } from 'decentraland-ui/dist/components/Navbar/Navbar.types'
 import { config } from '../../config'
 import { locations } from '../../modules/routing/locations'
 import { Props } from './Navbar.types'
 import './Navbar.css'
 
 const Navbar = (props: Props) => {
-  const { isChainSelectorEnabled } = props
+  const { isChainSelectorEnabled, isNavbar2Enabled } = props
   const { pathname, search } = useLocation()
   const history = useHistory()
 
@@ -25,6 +26,21 @@ const Navbar = (props: Props) => {
     history.push(locations.settings())
   }, [history])
 
+  if (isNavbar2Enabled) {
+    return (
+      <BaseNavbar2
+        {...props}
+        withChainSelector={isChainSelectorEnabled}
+        withNotifications
+        activePage={NavbarPages.MARKETPLACE}
+        hasActivity={props.hasPendingTransactions}
+        identity={props.identity}
+        onSignIn={handleOnSignIn}
+        onClickMarketplaceAuthorization={handleOnClickAccount}
+      />
+    )
+  }
+
   return (
     <BaseNavbar
       {...props}

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

@@ -6,8 +6,9 @@ export type Props = Partial<NavbarProps> & {
   enablePartialSupportAlert?: boolean
   identity?: AuthIdentity
   isChainSelectorEnabled: boolean
+  isNavbar2Enabled: boolean
 }
 
 export type OwnProps = Pick<Props, 'enablePartialSupportAlert'>
 
-export type MapStateProps = Pick<Props, 'hasPendingTransactions' | 'identity' | 'isChainSelectorEnabled'>
+export type MapStateProps = Pick<Props, 'hasPendingTransactions' | 'identity' | 'isChainSelectorEnabled' | 'isNavbar2Enabled'>

webapp/src/index.tsx

@@ -5,6 +5,7 @@ import ModalProvider from 'decentraland-dapps/dist/providers/ModalProvider'
 import ToastProvider from 'decentraland-dapps/dist/providers/ToastProvider'
 import TranslationProvider from 'decentraland-dapps/dist/providers/TranslationProvider'
 import WalletProvider from 'decentraland-dapps/dist/providers/WalletProvider'
+import { darkTheme, DclThemeProvider } from 'decentraland-ui2'
 import * as modals from './components/Modals'
 import { Routes } from './components/Routes'
 import { ScrollToTop } from './components/ScrollToTop'
@@ -24,12 +25,14 @@ function main() {
       <TranslationProvider locales={Object.keys(locales)}>
         <WalletProvider>
           <ConnectedRouter history={history}>
-            <ToastProvider>
-              <ModalProvider components={modals}>
-                <ScrollToTop />
-                <Routes />
-              </ModalProvider>
-            </ToastProvider>
+            <DclThemeProvider theme={darkTheme}>
+              <ToastProvider>
+                <ModalProvider components={modals}>
+                  <ScrollToTop />
+                  <Routes />
+                </ModalProvider>
+              </ToastProvider>
+            </DclThemeProvider>
           </ConnectedRouter>
         </WalletProvider>
       </TranslationProvider>

webapp/src/modules/features/selectors.ts

@@ -97,3 +97,10 @@ export const getIsOffchainPublicItemOrdersEnabled = (state: RootState) => {
   }
   return false
 }
+
+export const getIsNavbar2Enabled = (state: RootState) => {
+  if (hasLoadedInitialFlags(state)) {
+    return getIsFeatureEnabled(state, ApplicationName.DAPPS, FeatureName.NAVBAR_UI2)
+  }
+  return false
+}

webapp/src/modules/features/types.ts

@@ -10,5 +10,6 @@ export enum FeatureName {
   CROSS_CHAIN_LANDS = 'cross-chain-lands',
   OFFCHAIN_BIDS = 'offchain-bids',
   OFFCHAIN_PUBLIC_NFT_ORDERS = 'offchain-public-nft-orders',
-  OFFCHAIN_PUBLIC_ITEM_ORDERS = 'offchain-public-item-orders'
+  OFFCHAIN_PUBLIC_ITEM_ORDERS = 'offchain-public-item-orders',
+  NAVBAR_UI2 = 'navbar-ui2'
 }