diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx index 40ca9de..d20bc8c 100644 --- a/src/components/AppBar/AppBar.tsx +++ b/src/components/AppBar/AppBar.tsx @@ -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) 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)) } diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx index 98492ce..909461e 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/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 = ({ {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 5a38b2f..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/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 = () => { > { - 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 6ce6af8..08dd2df 100644 --- a/src/pages/verify/index.tsx +++ b/src/pages/verify/index.tsx @@ -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 ( {imageLoadError(event, pubkey)}} src={profile?.picture || getRoboImageUrl(pubkey)} alt="Profile Image" className="profile-image" diff --git a/src/utils/nostr.ts b/src/utils/nostr.ts index 8f074c0..a39502f 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,13 @@ export const base64DecodeAuthToken = (authToken: string): SignedEvent => { throw new Error('An error occurred in JSON.parse of the auth token') } } + +/** + * + * @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` +}