Skip to content

Commit

Permalink
Feat/add new navbar dropdown (#250)
Browse files Browse the repository at this point in the history
* fix: changed background for smaller screen sizes

* fix: changed table size

* feat: added nee user menu
flobarreto authored Sep 14, 2023
1 parent cf349d5 commit f0dd9a5
Showing 10 changed files with 591 additions and 4,212 deletions.
4,670 changes: 479 additions & 4,191 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -25,8 +25,8 @@
"@sentry/react": "^7.67.0",
"ajv": "^8.12.0",
"classnames": "^2.3.2",
"decentraland-dapps": "^16.0.3",
"decentraland-ui": "^4.6.0",
"decentraland-dapps": "^16.8.1",
"decentraland-ui": "^4.12.0",
"ethers": "^6.6.5",
"p-queue": "^6.6.2",
"react": "^17.0.2",
42 changes: 25 additions & 17 deletions src/components/Navbar/Navbar.css
Original file line number Diff line number Diff line change
@@ -6,6 +6,14 @@
color: var(--primary);
}

.dcl.navbar-account .ui.button.primary {
height: 34px;
display: flex;
align-items: center;
width: 122px;
justify-content: center;
min-width: unset;
}


.dcl.account-wrapper .dcl.mana {
@@ -14,23 +22,23 @@


@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 .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;
}
content: '';
width: 5px;
height: 5px;
background-color: var(--primary);
position: absolute;
border-radius: 100%;
top: -5px;
right: -5px;
}
15 changes: 13 additions & 2 deletions src/components/Navbar/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React, { useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { Navbar as BaseNavbar } from 'decentraland-dapps/dist/containers'
import { t } from 'decentraland-dapps/dist/modules/translation/utils'
import { Button } from 'decentraland-ui'
import { locations } from '../../modules/routing/locations'
import UserMenu from '../UserMenu'
import UserInformation from '../UserInformation'
import { Props } from './Navbar.types'
import './Navbar.css'

@@ -12,7 +14,16 @@ const Navbar = (props: Props) => {
const navigate = useNavigate()

if (isConnected) {
props = { ...props, rightMenu: <UserMenu /> }
props = { ...props, rightMenu: <UserInformation /> }
} else {
props = {
...props,
rightMenu: (
<Button primary onClick={() => navigate(locations.signIn(locations.root()))}>
{t('navbar.sign_in')}
</Button>
)
}
}

const handleOnSignIn = useCallback(() => {
48 changes: 48 additions & 0 deletions src/components/UserInformation/UserInformation.container.ts
Original file line number Diff line number Diff line change
@@ -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 { UserInformationContainer } from 'decentraland-ui/dist/components/UserInformationContainer/UserInformationContainer'
import { RootState } from '../../modules/reducer'
import { MapStateProps, MapDispatch, MapDispatchProps, Props } from './UserInformation.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)(UserInformationContainer)
12 changes: 12 additions & 0 deletions src/components/UserInformation/UserInformation.types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { Dispatch } from '@reduxjs/toolkit'
import { ConnectWalletRequestAction, DisconnectWalletAction } from 'decentraland-dapps/dist/modules/wallet/actions'
import { UserInformationComponentProps } from 'decentraland-ui/dist/components/UserInformationContainer/UserInformationContainer'

export type Props = UserInformationComponentProps & { 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>
3 changes: 3 additions & 0 deletions src/components/UserInformation/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import UserInformation from './UserInformation.container'

export default UserInformation
3 changes: 3 additions & 0 deletions src/modules/translation/locales/en.json
Original file line number Diff line number Diff line change
@@ -88,6 +88,9 @@
"friend_cancel": "cancel",
"friend_title_mobile": "Unfriend {avatarName}"
},
"navbar": {
"sign_in": "sign in"
},
"not_found_page": {
"title": "Looks like even explorers can get lost!<br></br>Can't find this address or name in Decentraland.",
"message": "Please double-check and try again"
3 changes: 3 additions & 0 deletions src/modules/translation/locales/es.json
Original file line number Diff line number Diff line change
@@ -88,6 +88,9 @@
"friend_cancel": "cancelar",
"friend_title_mobile": "Eliminar amigo {avatarName}"
},
"navbar": {
"sign_in": "iniciar sesión"
},
"not_found_page": {
"title": "¡Parece que hasta los exploradores pueden perderse!<br></br>No pudimos encontrar ésta dirección o nombre en Decentraland.",
"message": "Por favor revísalo e intenta nuevamente"
3 changes: 3 additions & 0 deletions src/modules/translation/locales/zh.json
Original file line number Diff line number Diff line change
@@ -88,6 +88,9 @@
"friend_cancel": "取消",
"friend_title_mobile": "解除好友关系 {avatarName}"
},
"navbar": {
"sign_in": "登入"
},
"not_found_page": {
"title": "看来即使是探险家也会迷路!<br></br>在 Decentraland 中找不到此地址或名称。",
"message": "请仔细检查并重试"

0 comments on commit f0dd9a5

Please sign in to comment.