feat: Navbar from UI2 (#3235)

* feat: Navbar from UI2 * feat: use DclThemeProvider * feat: decentraland-ui2 v0.8.7
decentraland · Jan 8, 2025 · c6bd5a7 · c6bd5a7
1 parent e25ca3e
commit c6bd5a7
Show file tree

Hide file tree

Showing 8 changed files with 631 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,11 +38,12 @@
     "decentraland-builder-scripts": "^0.24.0",
     "decentraland-connect": "^7.3.2",
     "decentraland-crypto-fetch": "^2.0.1",
-    "decentraland-dapps": "^23.17.0",
+    "decentraland-dapps": "^23.22.0",
     "decentraland-ecs": "6.12.4-7784644013.commit-f770b3e",
     "decentraland-experiments": "^1.0.2",
     "decentraland-transactions": "^2.16.0",
     "decentraland-ui": "^6.12.1",
+    "decentraland-ui2": "^0.8.7",
     "ethers": "^5.6.8",
     "file-saver": "^2.0.1",
     "graphql": "^15.8.0",

diff --git a/src/components/Navbar/Navbar.container.ts b/src/components/Navbar/Navbar.container.ts
@@ -6,11 +6,13 @@ import { RootState } from 'modules/common/types'
 import { getTransactions } from 'modules/transaction/selectors'
 import { MapStateProps, MapDispatchProps, OwnProps } from './Navbar.types'
 import Navbar from './Navbar'
+import { getIsNavbar2Enabled } from 'modules/features/selectors'
 
 const mapState = (state: RootState): MapStateProps => ({
   hasPendingTransactions: getTransactions(state).some(tx => isPending(tx.status)),
   address: getAddress(state),
-  isSignedIn: isLoggedIn(state)
+  isSignedIn: isLoggedIn(state),
+  isNavbar2Enabled: getIsNavbar2Enabled(state)
 })
 
 const mergeProps = (mapStateProps: MapStateProps, mapDispatchProps: MapDispatchProps, ownProps: OwnProps) => ({

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -2,13 +2,14 @@ import React, { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 import { locations } from 'routing/locations'
 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 { localStorageGetIdentity } from '@dcl/single-sign-on-client'
 import { Props } from './Navbar.types'
 
 import './Navbar.css'
 
-const Navbar: React.FC<Props> = ({ hasPendingTransactions, address, ...props }: Props) => {
+const Navbar: React.FC<Props> = ({ hasPendingTransactions, address, isNavbar2Enabled, ...props }: Props) => {
   const history = useHistory()
   const identity = useMemo(() => {
     if (address) {
@@ -21,6 +22,19 @@ const Navbar: React.FC<Props> = ({ hasPendingTransactions, address, ...props }:
     history.push(locations.signIn())
   }
 
+  if (isNavbar2Enabled) {
+    return (
+      <BaseNavbar2
+        {...props}
+        withNotifications
+        activePage={NavbarPages.CREATE}
+        hasActivity={hasPendingTransactions}
+        identity={identity}
+        onSignIn={onSignIn}
+      />
+    )
+  }
+
   return (
     <BaseNavbar
       activePage={NavbarPages.CREATE}

diff --git a/src/components/Navbar/Navbar.types.ts b/src/components/Navbar/Navbar.types.ts
@@ -1,9 +1,9 @@
 import { NavbarProps } from 'decentraland-dapps/dist/containers/Navbar/Navbar.types'
 import { Dispatch } from 'redux'
 
-export type Props = Partial<NavbarProps> & { hasPendingTransactions: boolean; address?: string }
+export type Props = Partial<NavbarProps> & { hasPendingTransactions: boolean; address?: string; isNavbar2Enabled: boolean }
 
-export type MapStateProps = Pick<Props, 'hasPendingTransactions' | 'isSignedIn' | 'address'>
+export type MapStateProps = Pick<Props, 'hasPendingTransactions' | 'isSignedIn' | 'address' | 'isNavbar2Enabled'>
 export type MapDispatchProps = Pick<Props, 'onSignIn'>
 export type MapDispatch = Dispatch
 export type OwnProps = Partial<Props>
diff --git a/src/index.tsx b/src/index.tsx
@@ -8,6 +8,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 { store, history } from 'modules/common/store'
 import * as modals from 'components/Modals'
@@ -25,11 +26,13 @@ ReactDOM.render(
       <TranslationProvider locales={Object.keys(languages)}>
         <WalletProvider>
           <ConnectedRouter history={history}>
-            <ModalProvider components={modals}>
+            <DclThemeProvider theme={darkTheme}>
               <ToastProvider>
-                <Routes />
+                <ModalProvider components={modals}>
+                  <Routes />
+                </ModalProvider>
               </ToastProvider>
-            </ModalProvider>
+            </DclThemeProvider>
           </ConnectedRouter>
         </WalletProvider>
       </TranslationProvider>

diff --git a/src/modules/features/selectors.ts b/src/modules/features/selectors.ts
@@ -85,3 +85,11 @@ export const getIsOffchainPublicItemOrdersEnabled = (state: RootState) => {
     return false
   }
 }
+
+export const getIsNavbar2Enabled = (state: RootState) => {
+  try {
+    return getIsFeatureEnabled(state, ApplicationName.DAPPS, FeatureName.NAVBAR_UI2)
+  } catch (e) {
+    return false
+  }
+}
diff --git a/src/modules/features/types.ts b/src/modules/features/types.ts
@@ -10,5 +10,6 @@ export enum FeatureName {
   WORLD_CONTRIBUTOR = 'world-contributor',
   LINKED_WEARABLES_V2 = 'linked-wearables-v2',
   LINKED_WEARABLES_PAYMENTS = 'linked-wearables-payments',
-  OFFCHAIN_PUBLIC_ITEM_ORDERS = 'offchain-public-item-orders'
+  OFFCHAIN_PUBLIC_ITEM_ORDERS = 'offchain-public-item-orders',
+  NAVBAR_UI2 = 'navbar-ui2'
 }