@ -28,9 +28,9 @@ import {
|
|||||||
} from '../../routes'
|
} from '../../routes'
|
||||||
import {
|
import {
|
||||||
clearAuthToken,
|
clearAuthToken,
|
||||||
|
getProfileUsername,
|
||||||
hexToNpub,
|
hexToNpub,
|
||||||
saveNsecBunkerDelegatedKey,
|
saveNsecBunkerDelegatedKey
|
||||||
shorten
|
|
||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { setUserRobotImage } from '../../store/userRobotImage/action'
|
import { setUserRobotImage } from '../../store/userRobotImage/action'
|
||||||
@ -58,9 +58,8 @@ export const AppBar = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (metadataState) {
|
if (metadataState) {
|
||||||
if (metadataState.content) {
|
if (metadataState.content) {
|
||||||
const { picture, display_name, name } = JSON.parse(
|
const profileMetadata = JSON.parse(metadataState.content)
|
||||||
metadataState.content
|
const { picture } = profileMetadata
|
||||||
)
|
|
||||||
|
|
||||||
if (picture || userRobotImage) {
|
if (picture || userRobotImage) {
|
||||||
setUserAvatar(picture || userRobotImage)
|
setUserAvatar(picture || userRobotImage)
|
||||||
@ -70,7 +69,7 @@ export const AppBar = () => {
|
|||||||
? hexToNpub(authState.usersPubkey)
|
? hexToNpub(authState.usersPubkey)
|
||||||
: ''
|
: ''
|
||||||
|
|
||||||
setUsername(shorten(display_name || name || npub, 7))
|
setUsername(getProfileUsername(npub, profileMetadata))
|
||||||
} else {
|
} else {
|
||||||
setUserAvatar(userRobotImage || '')
|
setUserAvatar(userRobotImage || '')
|
||||||
setUsername('')
|
setUsername('')
|
||||||
|
@ -5,7 +5,7 @@ import { AvatarIconButton } from '../UserAvatarIconButton'
|
|||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import { useProfileMetadata } from '../../hooks/useProfileMetadata'
|
import { useProfileMetadata } from '../../hooks/useProfileMetadata'
|
||||||
import { Tooltip } from '@mui/material'
|
import { Tooltip } from '@mui/material'
|
||||||
import { shorten } from '../../utils'
|
import { getProfileUsername } from '../../utils'
|
||||||
import { TooltipChild } from '../TooltipChild'
|
import { TooltipChild } from '../TooltipChild'
|
||||||
|
|
||||||
interface UserAvatarProps {
|
interface UserAvatarProps {
|
||||||
@ -22,7 +22,7 @@ export const UserAvatar = ({
|
|||||||
isNameVisible = false
|
isNameVisible = false
|
||||||
}: UserAvatarProps) => {
|
}: UserAvatarProps) => {
|
||||||
const profile = useProfileMetadata(pubkey)
|
const profile = useProfileMetadata(pubkey)
|
||||||
const name = profile?.display_name || profile?.name || shorten(pubkey)
|
const name = getProfileUsername(pubkey, profile)
|
||||||
const image = profile?.picture
|
const image = profile?.picture
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||||
import EditIcon from '@mui/icons-material/Edit'
|
import EditIcon from '@mui/icons-material/Edit'
|
||||||
import { Box, IconButton, SxProps, Theme, Typography } from '@mui/material'
|
import { Box, IconButton, SxProps, Theme, Typography } from '@mui/material'
|
||||||
import { truncate } from 'lodash'
|
|
||||||
import { Event, VerifiedEvent, kinds, nip19 } from 'nostr-tools'
|
import { Event, VerifiedEvent, kinds, nip19 } from 'nostr-tools'
|
||||||
import { useEffect, useMemo, useState } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
import { useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
@ -14,6 +13,7 @@ import { State } from '../../store/rootReducer'
|
|||||||
import { NostrJoiningBlock, ProfileMetadata } from '../../types'
|
import { NostrJoiningBlock, ProfileMetadata } from '../../types'
|
||||||
import {
|
import {
|
||||||
getNostrJoiningBlockNumber,
|
getNostrJoiningBlockNumber,
|
||||||
|
getProfileUsername,
|
||||||
getRoboHashPicture,
|
getRoboHashPicture,
|
||||||
hexToNpub,
|
hexToNpub,
|
||||||
shorten
|
shorten
|
||||||
@ -42,15 +42,7 @@ export const ProfilePage = () => {
|
|||||||
const [isLoading, setIsLoading] = useState(true)
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
||||||
|
|
||||||
const profileName =
|
const profileName = pubkey && getProfileUsername(pubkey, profileMetadata)
|
||||||
pubkey &&
|
|
||||||
profileMetadata &&
|
|
||||||
truncate(
|
|
||||||
profileMetadata.display_name || profileMetadata.name || hexToNpub(pubkey),
|
|
||||||
{
|
|
||||||
length: 16
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (npub) {
|
if (npub) {
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
export interface ProfileMetadata {
|
export interface ProfileMetadata {
|
||||||
name?: string
|
name?: string
|
||||||
display_name?: string
|
display_name?: string
|
||||||
|
/** @deprecated use name instead */
|
||||||
username?: string
|
username?: string
|
||||||
picture?: string
|
picture?: string
|
||||||
banner?: string
|
banner?: string
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { bytesToHex, hexToBytes } from '@noble/hashes/utils'
|
import { bytesToHex, hexToBytes } from '@noble/hashes/utils'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import _ from 'lodash'
|
import _, { truncate } from 'lodash'
|
||||||
import {
|
import {
|
||||||
Event,
|
Event,
|
||||||
EventTemplate,
|
EventTemplate,
|
||||||
@ -30,7 +30,7 @@ import {
|
|||||||
import { AuthState, Keys } from '../store/auth/types'
|
import { AuthState, Keys } from '../store/auth/types'
|
||||||
import { RelaysState } from '../store/relays/types'
|
import { RelaysState } from '../store/relays/types'
|
||||||
import store from '../store/store'
|
import store from '../store/store'
|
||||||
import { Meta, SignedEvent, UserAppData } from '../types'
|
import { Meta, ProfileMetadata, SignedEvent, UserAppData } from '../types'
|
||||||
import { getDefaultRelayMap } from './relays'
|
import { getDefaultRelayMap } from './relays'
|
||||||
import { parseJson, removeLeadingSlash } from './string'
|
import { parseJson, removeLeadingSlash } from './string'
|
||||||
import { timeout } from './utils'
|
import { timeout } from './utils'
|
||||||
@ -974,3 +974,16 @@ export const sendNotification = async (receiver: string, meta: Meta) => {
|
|||||||
throw err
|
throw err
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show user's name, first available in order: display_name, name, or npub as fallback
|
||||||
|
* @param userId User identifier, it can be either pubkey or npub1 (we only show npub)
|
||||||
|
* @param profile User profile
|
||||||
|
*/
|
||||||
|
export const getProfileUsername = (
|
||||||
|
userId: `npub1${string}` | string,
|
||||||
|
profile?: ProfileMetadata
|
||||||
|
) =>
|
||||||
|
truncate(profile?.display_name || profile?.name || hexToNpub(userId), {
|
||||||
|
length: 16
|
||||||
|
})
|
||||||
|
Loading…
Reference in New Issue
Block a user