feat: added new user menu (#2863)

* feat: added new user menu

* fix: updated deps

* feat: added new navbar

* merge with master

* fix: comments

* fix: removed unused library

* fix: package.json

* fix: comments

---------

Co-authored-by: Kevin Szuchet <31735779+kevinszuchet@users.noreply.github.com>

package.json

@@ -33,11 +33,11 @@
     "dcl-scene-writer": "^1.1.2",
     "decentraland": "^3.3.0",
     "decentraland-builder-scripts": "^0.24.0",
-    "decentraland-dapps": "^16.0.4",
+    "decentraland-dapps": "^16.8.1",
     "decentraland-ecs": "^6.6.1-20201020183014.commit-bdc29ef-hotfix",
     "decentraland-experiments": "^1.0.2",
     "decentraland-transactions": "^1.47.0",
-    "decentraland-ui": "^4.9.1",
+    "decentraland-ui": "^4.11.4",
     "ethers": "^5.6.8",
     "file-saver": "^2.0.1",
     "graphql": "^15.8.0",

src/components/Navbar/Navbar.container.ts

@@ -2,12 +2,14 @@ import { connect } from 'react-redux'
 import { push } from 'connected-react-router'
 import { isLoggedIn } from 'modules/identity/selectors'
 import { RootState } from 'modules/common/types'
+import { getIsNewNavbarDropdownEnabled } from 'modules/features/selectors'
 import { locations } from 'routing/locations'
 import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './Navbar.types'
 import Navbar from './Navbar'
 
 const mapState = (state: RootState): MapStateProps => ({
-  isConnected: isLoggedIn(state)
+  isConnected: isLoggedIn(state),
+  isNewNavbarEnabled: getIsNewNavbarDropdownEnabled(state)
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({

src/components/Navbar/Navbar.tsx

@@ -1,14 +1,19 @@
 import * as React from 'react'
 import { Navbar as BaseNavbar } from 'decentraland-dapps/dist/containers'
+import UserInformation from 'components/UserInformation'
 import UserMenu from 'components/UserMenu'
 import { Props } from './Navbar.types'
 
 export default class Navbar extends React.PureComponent<Props> {
   render() {
     let props = this.props
+
     if (props.isConnected) {
       props = { ...props, rightMenu: <UserMenu /> }
     }
+    if (props.isNewNavbarEnabled) {
+      props = { ...props, rightMenu: <UserInformation /> }
+    }
     return <BaseNavbar activePage="builder" {...props} />
   }
 }

src/components/Navbar/Navbar.types.ts

@@ -1,9 +1,9 @@
 import { NavbarProps } from 'decentraland-ui'
 import { Dispatch } from 'redux'
 
-export type Props = NavbarProps
+export type Props = Partial<NavbarProps> & { isNewNavbarEnabled: boolean }
 
-export type MapStateProps = Pick<Props, 'isConnected'>
+export type MapStateProps = Pick<Props, 'isConnected' | 'isNewNavbarEnabled'>
 export type MapDispatchProps = Pick<Props, 'onSignIn'>
 export type MapDispatch = Dispatch
 export type OwnProps = Partial<Props>

src/components/UserInformation/UserInformation.container.ts

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux'
+import { push } from 'connected-react-router'
+import { isPending } from 'decentraland-dapps/dist/modules/transaction/utils'
+import { isConnected, isConnecting } from 'decentraland-dapps/dist/modules/wallet/selectors'
+import { RootState } from '../../modules/common/types'
+import { openLogin } from 'modules/login/actions'
+import { getTransactions } from '../../modules/transaction/selectors'
+import { locations } from '../../routing/locations'
+import { MapStateProps, MapDispatch, MapDispatchProps } from './UserInformation.types'
+import UserMenu from './UserInformation'
+
+const mapState = (state: RootState): MapStateProps => {
+  return {
+    isSignedIn: isConnected(state),
+    isSigningIn: isConnecting(state),
+    hasActivity: getTransactions(state).some(tx => isPending(tx.status))
+  }
+}
+
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onClickActivity: () => dispatch(push(locations.activity())),
+  onClickSettings: () => dispatch(push(locations.settings())),
+  onSignIn: () => dispatch(openLogin())
+})
+
+export default connect(mapState, mapDispatch)(UserMenu)

src/components/UserInformation/UserInformation.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { UserInformation as BaseUserMenu } from 'decentraland-dapps/dist/containers'
+import { Props } from './UserInformation.types'
+
+const UserInformation = (props: Props) => {
+  const { onClickMyAssets, onClickSettings, onSignIn, ...baseProps } = props
+
+  return <BaseUserMenu {...baseProps} onClickMyAssets={onClickMyAssets} onClickSettings={onClickSettings} onSignIn={onSignIn} />
+}
+
+export default React.memo(UserInformation)

src/components/UserInformation/UserInformation.types.ts

@@ -0,0 +1,13 @@
+import { Dispatch } from 'redux'
+import { CallHistoryMethodAction } from 'connected-react-router'
+import { UserInformationComponentProps } from 'decentraland-ui'
+import { OpenLoginModalAction } from 'modules/login/actions'
+
+export type Props = Partial<UserInformationComponentProps> & {
+  onClickSettings: () => void
+  onClickActivity: () => void
+}
+
+export type MapStateProps = Pick<Props, 'isSignedIn' | 'isSigningIn' | 'hasActivity'>
+export type MapDispatchProps = Pick<Props, 'onClickActivity' | 'onClickSettings' | 'onSignOut' | 'onSignIn'>
+export type MapDispatch = Dispatch<CallHistoryMethodAction | OpenLoginModalAction>

src/components/UserInformation/index.ts

@@ -0,0 +1,3 @@
+import UserInformation from './UserInformation.container'
+
+export default UserInformation

src/config/env/dev.json

@@ -36,5 +36,5 @@
   "PROFILE_URL": "https://profile.decentraland.zone",
   "SSO_URL": "https://id.decentraland.zone",
   "SENTRY_DSN": "https://428e8d298fb3f0fbcea645314a4a388c@o4504361728212992.ingest.sentry.io/4505748381564928",
-  "DCL_LISTS_SERVER":"https://dcl-lists.decentraland.zone"
+  "DCL_LISTS_SERVER": "https://dcl-lists.decentraland.zone"
 }

src/config/env/prod.json

@@ -36,5 +36,5 @@
   "PROFILE_URL": "https://profile.decentraland.org",
   "SSO_URL": "https://id.decentraland.org",
   "SENTRY_DSN": "https://428e8d298fb3f0fbcea645314a4a388c@o4504361728212992.ingest.sentry.io/4505748381564928",
-  "DCL_LISTS_SERVER":"https://dcl-lists.decentraland.org"
+  "DCL_LISTS_SERVER": "https://dcl-lists.decentraland.org"
 }

src/config/env/stg.json

@@ -36,5 +36,5 @@
   "PROFILE_URL": "https://profile.decentraland.today",
   "SSO_URL": "https://id.decentraland.today",
   "SENTRY_DSN": "https://428e8d298fb3f0fbcea645314a4a388c@o4504361728212992.ingest.sentry.io/4505748381564928",
-  "DCL_LISTS_SERVER":"https://dcl-lists.decentraland.today"
+  "DCL_LISTS_SERVER": "https://dcl-lists.decentraland.today"
 }

src/modules/common/sagas.ts

@@ -39,6 +39,7 @@ import { walletSaga } from 'modules/wallet/sagas'
 import { PEER_URL } from 'lib/api/peer'
 import { BuilderAPI } from 'lib/api/builder'
 import { entitySaga } from 'modules/entity/sagas'
+import { loginSaga } from 'modules/login/sagas'
 import { newsletterSagas } from 'modules/newsletter/sagas'
 import { collectionCurationSaga } from 'modules/curations/collectionCuration/sagas'
 import { getPeerWithNoGBCollectorURL } from './utils'
@@ -86,6 +87,7 @@ export function* rootSaga(builderAPI: BuilderAPI, newBuilderClient: BuilderClien
     itemCurationSaga(builderAPI),
     featuresSaga({ polling: { apps: [ApplicationName.BUILDER], delay: 60000 /** 60 seconds */ } }),
     inspectorSaga(builderAPI, store),
+    loginSaga(),
     newsletterSagas(builderAPI)
   ])
 }

src/modules/features/selectors.ts

@@ -54,6 +54,14 @@ export const getIsPublishSmartWearablesEnabled = (state: RootState) => {
   }
 }
 
+export const getIsNewNavbarDropdownEnabled = (state: RootState) => {
+  try {
+    return getIsFeatureEnabled(state, ApplicationName.BUILDER, FeatureName.NEW_NAVBAR_DROPDOWN)
+  } catch (e) {
+    return false
+  }
+}
+
 export const getEmotesV2Enabled = (state: RootState) => {
   try {
     return getIsFeatureEnabled(state, ApplicationName.BUILDER, FeatureName.EMOTES_V2)
@@ -69,3 +77,11 @@ export const getIsSmartItemsEnabled = (state: RootState) => {
     return false
   }
 }
+
+export const getIsNewNavbarEnabled = (state: RootState) => {
+  try {
+    return getIsFeatureEnabled(state, ApplicationName.BUILDER, FeatureName.NEW_NAVBAR_DROPDOWN)
+  } catch (e) {
+    return false
+  }
+}

src/modules/features/types.ts

@@ -7,6 +7,7 @@ export enum FeatureName {
   SCENE_TEMPLATES = 'scene-templates',
   HANDS_CATEGORY = 'hands-category',
   PUBLISH_SMART_WEARABLES = 'publish-smart-wearables',
+  NEW_NAVBAR_DROPDOWN = 'new-navbar-dropdown',
   EMOTES_V2 = 'emotes-2.0',
   SMART_ITEMS = 'smart-items'
 }

src/modules/login/actions.ts

@@ -0,0 +1,6 @@
+import { action } from 'typesafe-actions'
+
+// Open Login
+export const OPEN_LOGIN_MODAL = 'Open Login Modal'
+export const openLogin = () => action(OPEN_LOGIN_MODAL, {})
+export type OpenLoginModalAction = ReturnType<typeof openLogin>

src/modules/login/sagas.ts

@@ -0,0 +1,38 @@
+import { ConnectWalletSuccessAction, CONNECT_WALLET_SUCCESS, CONNECT_WALLET_FAILURE } from 'decentraland-dapps/dist/modules/wallet/actions'
+import { put, race, select, take, takeEvery } from 'redux-saga/effects'
+import { isLoggedIn } from 'modules/identity/selectors'
+import { openModal, CloseModalAction, CLOSE_MODAL, closeModal } from '../modal/actions'
+import { OpenLoginModalAction, OPEN_LOGIN_MODAL } from './actions'
+
+function* handleOpenLoginModal(_action: OpenLoginModalAction) {
+  const address: string = yield select(isLoggedIn)
+
+  if (!address) {
+    yield put(openModal('LoginModal'))
+
+    const {
+      success,
+      close
+    }: {
+      success: ConnectWalletSuccessAction
+      failure: ConnectWalletSuccessAction
+      close: CloseModalAction
+    } = yield race({
+      success: take(CONNECT_WALLET_SUCCESS),
+      failure: take(CONNECT_WALLET_FAILURE),
+      close: take(CLOSE_MODAL)
+    })
+
+    if (close) {
+      return
+    }
+
+    if (success) {
+      yield put(closeModal('LoginModal'))
+    }
+  }
+}
+
+export function* loginSaga() {
+  yield takeEvery(OPEN_LOGIN_MODAL, handleOpenLoginModal)
+}