diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx index 207dd01..7312621 100644 --- a/src/components/AppBar/AppBar.tsx +++ b/src/components/AppBar/AppBar.tsx @@ -16,7 +16,6 @@ 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 { appPrivateRoutes, @@ -25,6 +24,8 @@ import { } from '../../routes' import { clearAuthToken, + getRoboHashPicture, + hexToNpub, saveNsecBunkerDelegatedKey, shorten } from '../../utils' @@ -36,7 +37,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) const authState = useSelector((state: State) => state.auth) @@ -45,8 +46,13 @@ export const AppBar = () => { useEffect(() => { if (metadataState && metadataState.content) { const { picture, display_name, name } = JSON.parse(metadataState.content) + const npub = authState?.usersPubkey ? hexToNpub(authState.usersPubkey) : '' - if (picture) setUserAvatar(picture) + if (picture) { + setUserAvatar(picture) + } else { + setUserAvatar(getRoboHashPicture(npub)) + } setUsername(shorten(display_name || name || '', 7)) } diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx index 7d072ab..c154385 100644 --- a/src/pages/create/index.tsx +++ b/src/pages/create/index.tsx @@ -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/avatar.png' 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,9 @@ const DisplayUser = ({ }) }, [users]) - const imageLoadError = (event: any) => { - event.target.src = placeholderAvatar + const imageLoadError = (event: any, pubkey: string) => { + const npub = hexToNpub(pubkey) + event.target.src = getRoboHashPicture(npub) } return ( @@ -513,7 +514,7 @@ const DisplayUser = ({ {imageLoadError(event, user.pubkey)}} src={userMeta?.picture || roboUrl} alt="Profile Image" className="profile-image" diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx index 6a2ade5..e57e9f7 100644 --- a/src/pages/profile/index.tsx +++ b/src/pages/profile/index.tsx @@ -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/avatar.png' 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 = () => { > { - 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" /> diff --git a/src/pages/verify/index.tsx b/src/pages/verify/index.tsx index 7b2a2bd..af7da88 100644 --- a/src/pages/verify/index.tsx +++ b/src/pages/verify/index.tsx @@ -23,7 +23,6 @@ import { useEffect, useState } from 'react' import { useSelector } from 'react-redux' import { Link, useSearchParams } from 'react-router-dom' import { toast } from 'react-toastify' -import placeholderAvatar from '../../assets/images/avatar.png' import { LoadingSpinner } from '../../components/LoadingSpinner' import { MetadataController, NostrController } from '../../controllers' import { getProfileRoute } from '../../routes' @@ -34,6 +33,7 @@ import { encryptArrayBuffer, generateEncryptionKey, getHash, + getRoboHashPicture, hexToNpub, parseJson, readContentOfZipEntry, @@ -626,13 +626,14 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => { }) }, [users, meta.submittedBy]) - 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(npub) } return ( @@ -666,7 +667,7 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => { {imageLoadError(event, meta.submittedBy)}} src={ metadata[meta.submittedBy]?.picture || getRoboImageUrl(meta.submittedBy) @@ -719,7 +720,7 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => { {users.map((user, index) => { const userMeta = metadata[user.pubkey] const npub = hexToNpub(user.pubkey) - const roboUrl = `https://robohash.org/${npub}.png?set=set3` + const roboUrl = getRoboHashPicture(npub) let signedStatus = '-' @@ -739,7 +740,7 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => { {imageLoadError(event, meta.submittedBy)}} src={userMeta?.picture || roboUrl} alt="Profile Image" className="profile-image" diff --git a/src/utils/nostr.ts b/src/utils/nostr.ts index 8f074c0..d3eba8b 100644 --- a/src/utils/nostr.ts +++ b/src/utils/nostr.ts @@ -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,7 @@ export const base64DecodeAuthToken = (authToken: string): SignedEvent => { throw new Error('An error occurred in JSON.parse of the auth token') } } + +export const getRoboHashPicture = (npub: string): string => { + return `https://robohash.org/${npub}.png?set=set3` +}