Merge pull request 'Placeholder avatar is incosistent across components' (#39) from issue-27 into main

Reviewed-on: https://git.sigit.io/sig/it/pulls/39

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 | 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))
     }

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) => {
+  const imageLoadError = (event: any, pubkey: string) => {
-    event.target.src = placeholderAvatar
+    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"

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 = () => {
               >
                 <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"
                 />
 

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) => {
+  const imageLoadError = (event: any, pubkey: string) => {
-    event.target.src = placeholderAvatar
+    const npub = hexToNpub(pubkey)
+    event.target.src = npub
   }
 
   const getRoboImageUrl = (pubkey: string) => {
-    const npub = hexToNpub(pubkey)
+    return getRoboHashPicture(pubkey)
-    return `https://robohash.org/${npub}.png?set=set3`
   }
 
   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"

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`
+}