Placeholder avatar is incosistent across components #39
@ -16,11 +16,12 @@ import { Dispatch } from '../../store/store'
|
||||
import Username from '../username'
|
||||
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import nostrichAvatar from '../../assets/images/avatar.png'
|
||||
import { NostrController } from '../../controllers'
|
||||
import { appPublicRoutes, getProfileRoute } from '../../routes'
|
||||
import {
|
||||
clearAuthToken,
|
||||
getRoboHashPicture,
|
||||
hexToNpub,
|
||||
saveNsecBunkerDelegatedKey,
|
||||
shorten
|
||||
} from '../../utils'
|
||||
@ -32,7 +33,7 @@ export const AppBar = () => {
|
||||
const dispatch: Dispatch = useDispatch()
|
||||
|
||||
const [username, setUsername] = useState('')
|
||||
const [userAvatar, setUserAvatar] = useState(nostrichAvatar)
|
||||
const [userAvatar, setUserAvatar] = useState('')
|
||||
const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
|
||||
|
||||
const authState = useSelector((state: State) => state.auth)
|
||||
@ -41,8 +42,13 @@ export const AppBar = () => {
|
||||
useEffect(() => {
|
||||
if (metadataState && metadataState.content) {
|
||||
const { picture, display_name, name } = JSON.parse(metadataState.content)
|
||||
const pubkey = authState?.usersPubkey || ''
|
||||
|
||||
if (picture) setUserAvatar(picture)
|
||||
if (picture) {
|
||||
setUserAvatar(picture)
|
||||
} else {
|
||||
setUserAvatar(getRoboHashPicture(pubkey))
|
||||
}
|
||||
|
||||
setUsername(shorten(display_name || name || '', 7))
|
||||
}
|
||||
|
@ -21,7 +21,6 @@ import {
|
||||
import { MuiFileInput } from 'mui-file-input'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
|
||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||
import { MetadataController, NostrController } from '../../controllers'
|
||||
import { appPrivateRoutes, getProfileRoute } from '../../routes'
|
||||
@ -30,6 +29,7 @@ import {
|
||||
encryptArrayBuffer,
|
||||
generateEncryptionKey,
|
||||
getHash,
|
||||
getRoboHashPicture,
|
||||
hexToNpub,
|
||||
pubToHex,
|
||||
queryNip05,
|
||||
@ -489,8 +489,8 @@ const DisplayUser = ({
|
||||
})
|
||||
}, [users])
|
||||
|
||||
const imageLoadError = (event: any) => {
|
||||
event.target.src = placeholderAvatar
|
||||
const imageLoadError = (event: any, pubkey: string) => {
|
||||
event.target.src = getRoboHashPicture(pubkey)
|
||||
}
|
||||
|
||||
return (
|
||||
@ -513,7 +513,7 @@ const DisplayUser = ({
|
||||
<TableCell className={styles.tableCell}>
|
||||
<Box className={styles.user}>
|
||||
<img
|
||||
onError={imageLoadError}
|
||||
onError={(event) => {imageLoadError(event, user.pubkey)}}
|
||||
src={userMeta?.picture || roboUrl}
|
||||
alt="Profile Image"
|
||||
className="profile-image"
|
||||
|
@ -15,7 +15,6 @@ import { UnsignedEvent, nip19, kinds, VerifiedEvent } from 'nostr-tools'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { Link, useParams } from 'react-router-dom'
|
||||
import { toast } from 'react-toastify'
|
||||
import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
|
||||
import { MetadataController, NostrController } from '../../controllers'
|
||||
import { NostrJoiningBlock, ProfileMetadata } from '../../types'
|
||||
import styles from './style.module.scss'
|
||||
@ -27,6 +26,7 @@ import { setMetadataEvent } from '../../store/actions'
|
||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||
import { LoginMethods } from '../../store/auth/types'
|
||||
import { SmartToy } from '@mui/icons-material'
|
||||
import { getRoboHashPicture } from '../../utils'
|
||||
|
||||
export const ProfilePage = () => {
|
||||
const theme = useTheme()
|
||||
@ -282,13 +282,13 @@ export const ProfilePage = () => {
|
||||
>
|
||||
<img
|
||||
onError={(event: any) => {
|
||||
event.target.src = placeholderAvatar
|
||||
event.target.src = npub ? getRoboHashPicture(npub) : ''
|
||||
}}
|
||||
onLoad={() => {
|
||||
setAvatarLoading(false)
|
||||
}}
|
||||
className={styles.img}
|
||||
src={profileMetadata.picture || placeholderAvatar}
|
||||
src={profileMetadata.picture || npub ? getRoboHashPicture(npub!) : ''}
|
||||
alt="Profile Image"
|
||||
/>
|
||||
|
||||
|
@ -12,12 +12,12 @@ import { MuiFileInput } from 'mui-file-input'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { toast } from 'react-toastify'
|
||||
import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
|
||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||
import { MetadataController } from '../../controllers'
|
||||
import { getProfileRoute } from '../../routes'
|
||||
import { Meta, ProfileMetadata } from '../../types'
|
||||
import {
|
||||
getRoboHashPicture,
|
||||
hexToNpub,
|
||||
parseJson,
|
||||
readContentOfZipEntry,
|
||||
@ -113,13 +113,13 @@ export const VerifyPage = () => {
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
const imageLoadError = (event: any) => {
|
||||
event.target.src = placeholderAvatar
|
||||
const imageLoadError = (event: any, pubkey: string) => {
|
||||
const npub = hexToNpub(pubkey)
|
||||
event.target.src = npub
|
||||
}
|
||||
|
||||
const getRoboImageUrl = (pubkey: string) => {
|
||||
const npub = hexToNpub(pubkey)
|
||||
return `https://robohash.org/${npub}.png?set=set3`
|
||||
return getRoboHashPicture(pubkey)
|
||||
}
|
||||
|
||||
const displayUser = (pubkey: string, verifySignature = false) => {
|
||||
@ -145,7 +145,7 @@ export const VerifyPage = () => {
|
||||
return (
|
||||
<Box className={styles.user}>
|
||||
<img
|
||||
onError={imageLoadError}
|
||||
onError={(event) => {imageLoadError(event, pubkey)}}
|
||||
src={profile?.picture || getRoboImageUrl(pubkey)}
|
||||
alt="Profile Image"
|
||||
className="profile-image"
|
||||
|
@ -58,6 +58,7 @@ export const nsecToHex = (nsec: string): string | null => {
|
||||
|
||||
export const hexToNpub = (hexPubkey: string | undefined): string => {
|
||||
if (!hexPubkey) return 'n/a'
|
||||
if (hexPubkey.includes('npub')) return hexPubkey
|
||||
|
||||
return nip19.npubEncode(hexPubkey)
|
||||
}
|
||||
@ -138,3 +139,13 @@ export const base64DecodeAuthToken = (authToken: string): SignedEvent => {
|
||||
throw new Error('An error occurred in JSON.parse of the auth token')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
m marked this conversation as resolved
Outdated
|
||||
*
|
||||
* @param pubkey in hex or npub format
|
||||
* @returns robohash.org url for the avatar
|
||||
*/
|
||||
export const getRoboHashPicture = (pubkey: string): string => {
|
||||
const npub = hexToNpub(pubkey)
|
||||
return `https://robohash.org/${npub}.png?set=set3`
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user
Allow this to accept both npub and hex, If provided value is not npub then convert it to npub