src/components/AppBar/AppBar.tsx

@@ -53,8 +53,8 @@ export const AppBar = () => {
           metadataState.content
         )
 
-        if (picture) {
+        if (picture || userRobotImage) {
-          setUserAvatar(picture)
+          setUserAvatar(picture || userRobotImage)
         }
 
         setUsername(shorten(display_name || name || '', 7))
@@ -91,8 +91,8 @@ export const AppBar = () => {
         nsecBunkerPubkey: undefined
       })
     )
-
     dispatch(setMetadataEvent(metadataController.getEmptyMetadataEvent()))
+    dispatch(setUserRobotImage(null))
 
     // clear authToken saved in local storage
     clearAuthToken()

src/layouts/Main.tsx

@@ -8,6 +8,7 @@ import { restoreState, setAuthState, setMetadataEvent } from '../store/actions'
 import {
   clearAuthToken,
   clearState,
+  getRoboHashPicture,
   loadState,
   saveNsecBunkerDelegatedKey
 } from '../utils'

src/pages/profile/index.tsx

@@ -246,14 +246,14 @@ export const ProfilePage = () => {
   /**
    * Handles the logic for Image URL.
    * If no picture in kind 0 found - use robohash avatar
-   * 
+   *
    * @returns robohash image url
    */
   const getProfileImage = (metadata: ProfileMetadata) => {
     if (!isUsersOwnProfile) {
       return metadata.picture || getRoboHashPicture(npub!)
     }
-    
+
     // userRobotImage is used only when visiting own profile
     // while kind 0 picture is not set
     return metadata.picture || userRobotImage || getRoboHashPicture(npub!)
@@ -293,7 +293,7 @@ export const ProfilePage = () => {
                 <img
                   onError={(event: any) => {
                     event.target.src = getRoboHashPicture(npub!)
-                  }}                
+                  }}
                   className={styles.img}
                   src={getProfileImage(profileMetadata)}
                   alt="Profile Image"

src/store/userRobotImage/action.ts

@@ -1,7 +1,9 @@
 import * as ActionTypes from '../actionTypes'
 import { SetUserRobotImage } from './types'
 
-export const setUserRobotImage = (payload: string | null): SetUserRobotImage => ({
+export const setUserRobotImage = (
+  payload: string | null
+): SetUserRobotImage => ({
   type: ActionTypes.SET_USER_ROBOT_IMAGE,
   payload
 })

src/utils/nostr.ts

@@ -143,7 +143,10 @@ 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, set: number = 1): string => {
+export const getRoboHashPicture = (
+  pubkey?: string,
+  set: number = 1
+): string => {
   if (!pubkey) return ''
   const npub = hexToNpub(pubkey)
   return `https://robohash.org/${npub}.png?set=set${set}`