fix: looping trough robo sets, image not shown when visiting profile while not logged in

.env.example

@@ -1 +1 @@
-VITE_MOST_POPULAR_RELAYS=wss://relay.damus.io wss://eden.nostr.land wss://nos.lol wss://relay.snort.social wss://relay.current.fyi wss://brb.io wss://nostr.orangepill.dev wss://nostr-pub.wellorder.net wss://nostr.wine wss://nostr.oxtr.dev wss://relay.nostr.bg wss://nostr.mom wss://nostr.fmt.wiz.biz wss://relay.nostr.band wss://nostr-pub.semisol.dev wss://nostr.milou.lol wss://puravida.nostr.land wss://nostr.onsats.org wss://relay.nostr.info wss://offchain.pub wss://relay.orangepill.dev wss://no.str.cr wss://atlas.nostr.land wss://nostr.zebedee.cloud wss://nostr-relay.wlvs.space wss://relay.nostrati.com wss://relay.nostr.com.au wss://nostr.inosta.cc wss://nostr.rocks
+VITE_MOST_POPULAR_RELAYS=wss://relay.damus.io wss://eden.nostr.land wss://nos.lol wss://relay.snort.social wss://relay.current.fyi wss://brb.io wss://nostr.orangepill.dev wss://nostr-pub.wellorder.net wss://nostr.bitcoiner.social wss://nostr.wine wss://nostr.oxtr.dev wss://relay.nostr.bg wss://nostr.mom wss://nostr.fmt.wiz.biz wss://relay.nostr.band wss://nostr-pub.semisol.dev wss://nostr.milou.lol wss://puravida.nostr.land wss://nostr.onsats.org wss://relay.nostr.info wss://offchain.pub wss://relay.orangepill.dev wss://no.str.cr wss://atlas.nostr.land wss://nostr.zebedee.cloud wss://nostr-relay.wlvs.space wss://relay.nostrati.com wss://relay.nostr.com.au wss://nostr.inosta.cc wss://nostr.rocks

src/pages/profile/index.tsx

@@ -12,7 +12,7 @@ import {
   useTheme
 } from '@mui/material'
 import { UnsignedEvent, nip19, kinds, VerifiedEvent } from 'nostr-tools'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { MetadataController, NostrController } from '../../controllers'
@@ -26,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()
@@ -52,6 +53,8 @@ export const ProfilePage = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc] = useState('Fetching metadata')
 
+  const robotSet = useRef(1)
+
   useEffect(() => {
     if (npub) {
       try {
@@ -213,7 +216,10 @@ export const ProfilePage = () => {
   const generateRobotAvatar = () => {
     setAvatarLoading(true)
 
-    const robotAvatarLink = `https://robohash.org/${npub}.png?set=set3`
+    robotSet.current++
+    if (robotSet.current > 5) robotSet.current = 1
+
+    const robotAvatarLink = getRoboHashPicture(npub!, robotSet.current)
 
     setProfileMetadata((prev) => ({
       ...prev,
@@ -233,8 +239,6 @@ export const ProfilePage = () => {
    * @returns robohash generate button, loading spinner or no button
    */
   const robohashButton = () => {
-    if (profileMetadata?.picture?.includes('robohash')) return null
-
     return (
       <Tooltip title="Generate a robohash avatar">
         {avatarLoading ? (
@@ -280,6 +284,9 @@ export const ProfilePage = () => {
                 }}
               >
                 <img
+                  onError={(event: any) => {
+                    event.target.src = npub ? getRoboHashPicture(npub) : ''
+                  }}                
                   onLoad={() => {
                     setAvatarLoading(false)
                   }}
@@ -305,7 +312,7 @@ export const ProfilePage = () => {
               </ListItem>
 
               {editItem('picture', 'Picture URL', undefined, undefined, {
-                endAdornment: robohashButton()
+                endAdornment: isUsersOwnProfile ? robohashButton() : undefined
               })}
 
               {editItem('name', 'Username')}

src/utils/nostr.ts

@@ -145,7 +145,7 @@ export const base64DecodeAuthToken = (authToken: string): SignedEvent => {
  * @param pubkey in hex or npub format 
  * @returns robohash.org url for the avatar
  */
-export const getRoboHashPicture = (pubkey: string): string => {
+export const getRoboHashPicture = (pubkey: string, set: number = 1): string => {
   const npub = hexToNpub(pubkey)
-  return `https://robohash.org/${npub}.png?set=set3`
+  return `https://robohash.org/${npub}.png?set=set${set}`
 }