feat: Add navbar (#5)

* feat: Add navbar

* chore: Open server when start app

* style: Css file styles and delete empty file

src/components/Navbar/Navbar.container.ts

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import { isConnected } from 'decentraland-dapps/dist/modules/wallet/selectors'
+import { RootState } from '../../modules/reducer'
+import Navbar from './Navbar'
+import { MapStateProps } from './Navbar.types'
+
+const mapState = (state: RootState): MapStateProps => ({
+  isConnected: isConnected(state)
+})
+
+export default connect(mapState)(Navbar)

src/components/Navbar/Navbar.css

@@ -0,0 +1,33 @@
+.dcl.navbar .ui.menu .item .bell {
+  color: var(--text);
+}
+
+.dcl.navbar .ui.menu .item.active .bell {
+  color: var(--primary);
+}
+
+.dcl.account-wrapper .dcl.mana {
+  flex: none;
+}
+
+@media (max-width: 991px) {
+  .dcl.navbar .dcl.account-wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .dcl.account-wrapper .dcl.mana+.dcl.mana {
+    padding: 0;
+  }
+}
+
+.dcl.navbar .ui.menu .item .bell.pending:after {
+  content: '';
+  width: 5px;
+  height: 5px;
+  background-color: var(--primary);
+  position: absolute;
+  border-radius: 100%;
+  top: -5px;
+  right: -5px;
+}

src/components/Navbar/Navbar.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Navbar as BaseNavbar } from 'decentraland-dapps/dist/containers'
+import { locations } from '../../modules/routing/locations'
+import UserMenu from '../UserMenu'
+import { Props } from './Navbar.types'
+import './Navbar.css'
+
+const Navbar = (props: Props) => {
+  const { isConnected } = props
+  const { pathname, search } = location
+  const navigate = useNavigate()
+
+  if (isConnected) {
+    props = { ...props, rightMenu: <UserMenu /> }
+  }
+
+  const handleOnSignIn = useCallback(() => {
+    const searchParams = new URLSearchParams(search)
+    const currentRedirectTo = searchParams.get('redirectTo')
+    const redirectTo = !currentRedirectTo ? `${pathname}${search}` : currentRedirectTo
+    navigate(locations.signIn(redirectTo))
+  }, [navigate, pathname, search])
+
+  return <BaseNavbar {...props} isFullscreen={props.isFullscreen} isSignIn={pathname === locations.signIn()} onSignIn={handleOnSignIn} />
+}
+
+export default Navbar

src/components/Navbar/Navbar.types.ts

@@ -0,0 +1,7 @@
+import { NavbarProps } from 'decentraland-ui/dist/components/Navbar/Navbar'
+
+export type Props = Partial<NavbarProps> & {
+  isConnected: boolean
+}
+
+export type MapStateProps = Pick<Props, 'isConnected'>

src/components/Navbar/index.ts

@@ -0,0 +1 @@
+export { default } from './Navbar.container'

src/components/PageLayout/PageLayout.module.css

@@ -15,6 +15,7 @@
 
 .navbar {
   flex-shrink: 0;
+  background-color: var(--background);
 }
 
 @media (max-width: 767px) {

src/components/PageLayout/PageLayout.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import classNames from 'classnames'
+import Navbar from '../Navbar'
 import { Props } from './PageLayout.types'
 import styles from './PageLayout.module.css'
 
 const PageLayout = ({ children, className }: Props) => {
   return (
     <div className={classNames(styles.page, className)}>
+      <Navbar className={styles.navbar} isFullscreen />
       <div className={styles.content}>{children}</div>
     </div>
   )

src/components/UserMenu/UserMenu.container.ts

@@ -0,0 +1,48 @@
+import { connect } from 'react-redux'
+import { Network } from '@dcl/schemas/dist/dapps/network'
+import { getData as getProfiles } from 'decentraland-dapps/dist/modules/profile/selectors'
+import { isEnabled } from 'decentraland-dapps/dist/modules/translation/selectors'
+import { disconnectWallet } from 'decentraland-dapps/dist/modules/wallet/actions'
+import { getAddress, getNetworks, isConnected, isConnecting } from 'decentraland-dapps/dist/modules/wallet/selectors'
+import { UserMenu } from 'decentraland-ui/dist/components/UserMenu/UserMenu'
+import { RootState } from '../../modules/reducer'
+import { MapStateProps, MapDispatch, MapDispatchProps, Props } from './UserMenu.types'
+
+const mapState = (state: RootState): MapStateProps => {
+  const isSignedIn = isConnected(state)
+  const address = getAddress(state)
+  const profile = address ? getProfiles(state)[address] : undefined
+  const networks = getNetworks(state)
+
+  const manaBalances: Props['manaBalances'] = {}
+  if (isSignedIn) {
+    const networkList = Object.values(Network) as Network[]
+    for (const network of networkList) {
+      const networkData = networks?.[network]
+      if (networkData) {
+        manaBalances[network] = networks?.[network].mana
+      }
+    }
+  }
+
+  return {
+    address,
+    manaBalances,
+    avatar: profile ? profile.avatars[0] : undefined,
+    isSignedIn,
+    isSigningIn: isConnecting(state),
+    hasActivity: false,
+    hasTranslations: isEnabled(state)
+  }
+}
+
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onSignOut: () => dispatch(disconnectWallet())
+})
+
+const mergeProps = (mapStateProps: MapStateProps, mapDispatchProps: MapDispatchProps) => ({
+  ...mapStateProps,
+  ...mapDispatchProps
+})
+
+export default connect(mapState, mapDispatch, mergeProps)(UserMenu)

src/components/UserMenu/UserMenu.types.ts

@@ -0,0 +1,12 @@
+import { Dispatch } from '@reduxjs/toolkit'
+import { ConnectWalletRequestAction, DisconnectWalletAction } from 'decentraland-dapps/dist/modules/wallet/actions'
+import { UserMenuProps } from 'decentraland-ui/dist/components/UserMenu/UserMenu'
+
+export type Props = UserMenuProps & { hasTranslations: boolean }
+
+export type MapStateProps = Pick<
+  Props,
+  'isSignedIn' | 'isSigningIn' | 'address' | 'avatar' | 'manaBalances' | 'hasActivity' | 'hasTranslations'
+>
+export type MapDispatchProps = Pick<Props, 'onSignOut'>
+export type MapDispatch = Dispatch<ConnectWalletRequestAction | DisconnectWalletAction>

src/components/UserMenu/index.ts

@@ -0,0 +1 @@
+export { default } from './UserMenu.container'

vite.config.ts

@@ -45,6 +45,6 @@ export default defineConfig(({ command, mode }) => {
             }
           }
         }
-      : undefined)
+      : { server: { open: true } })
   }
 })