fix: display profile box even if user does not have metadata

src/components/ProfileSection.tsx

@@ -1,3 +1,4 @@
+import { FALLBACK_PROFILE_IMAGE } from 'constants.ts'
 import { Event, Filter, kinds, nip19, UnsignedEvent } from 'nostr-tools'
 import { QRCodeSVG } from 'qrcode.react'
 import { useState } from 'react'
@@ -9,16 +10,21 @@ import {
   UserRelaysType
 } from '../controllers'
 import { useAppSelector, useDidMount } from '../hooks'
-import { getProfilePageRoute } from '../routes'
+import { appRoutes, getProfilePageRoute } from '../routes'
 import '../styles/author.css'
 import '../styles/innerPage.css'
 import '../styles/socialPosts.css'
 import { UserProfile } from '../types'
-import { copyTextToClipboard, log, LogType, now, npubToHex } from '../utils'
+import {
+  copyTextToClipboard,
+  hexToNpub,
+  log,
+  LogType,
+  now,
+  npubToHex
+} from '../utils'
 import { LoadingSpinner } from './LoadingSpinner'
 import { ZapPopUp } from './Zap'
-import { NDKUserProfile } from '@nostr-dev-kit/ndk'
-import _ from 'lodash'
 
 type Props = {
   pubkey: string
@@ -34,13 +40,22 @@ export const ProfileSection = ({ pubkey }: Props) => {
     })
   })
 
-  if (!profile) return null
+  const displayName =
+    profile?.displayName || profile?.name || '[name not set up]'
+  const about = profile?.bio || profile?.about || '[bio not set up]'
 
   return (
     <div className='IBMSMSplitMainSmallSide'>
       <div className='IBMSMSplitMainSmallSideSecWrapper'>
         <div className='IBMSMSplitMainSmallSideSec'>
-          <Profile profile={profile} />
+          <Profile
+            pubkey={pubkey}
+            displayName={displayName}
+            about={about}
+            image={profile?.image}
+            nip05={profile?.nip05}
+            lud16={profile?.lud16}
+          />
         </div>
         <div className='IBMSMSplitMainSmallSideSec'>
           <div className='IBMSMSMSSS_ShortPosts'>
@@ -91,12 +106,26 @@ export const ProfileSection = ({ pubkey }: Props) => {
 }
 
 type ProfileProps = {
-  profile: NDKUserProfile
+  pubkey: string
+  displayName: string
+  about: string
+  image?: string
+  nip05?: string
+  lud16?: string
 }
 
-export const Profile = ({ profile }: ProfileProps) => {
+export const Profile = ({
+  pubkey,
+  displayName,
+  about,
+  image,
+  nip05,
+  lud16
+}: ProfileProps) => {
+  const npub = hexToNpub(pubkey)
+
   const handleCopy = async () => {
-    copyTextToClipboard(profile.npub as string).then((isCopied) => {
+    copyTextToClipboard(npub).then((isCopied) => {
       if (isCopied) {
         toast.success('Npub copied to clipboard!')
       } else {
@@ -107,25 +136,15 @@ export const Profile = ({ profile }: ProfileProps) => {
     })
   }
 
-  const hexPubkey = npubToHex(profile.pubkey as string)
+  let profileRoute = appRoutes.home
-
+  const hexPubkey = npubToHex(pubkey)
-  if (!hexPubkey) return null
+  if (hexPubkey) {
-
+    profileRoute = getProfilePageRoute(
-  const profileRoute = getProfilePageRoute(
+      nip19.nprofileEncode({
-    nip19.nprofileEncode({
+        pubkey: hexPubkey
-      pubkey: hexPubkey
+      })
-    })
+    )
-  )
+  }
-
-  const npub = (profile.npub as string) || ''
-  const displayName =
-    profile.displayName ||
-    profile.name ||
-    _.truncate(npub, {
-      length: 16
-    })
-  const nip05 = profile.nip05 || ''
-  const about = profile.bio || profile.about || ''
 
   return (
     <div className='IBMSMSMSSS_Author'>
@@ -142,7 +161,7 @@ export const Profile = ({ profile }: ProfileProps) => {
                     className='IBMSMSMSSS_Author_Top_PP'
                     style={{
                       background: `url('${
-                        profile.image || ''
+                        image || FALLBACK_PROFILE_IMAGE
                       }') center / cover no-repeat`
                     }}
                   ></div>
@@ -151,7 +170,9 @@ export const Profile = ({ profile }: ProfileProps) => {
               <div className='IBMSMSMSSS_Author_Top_Left_InsideDetails'>
                 <div className='IBMSMSMSSS_Author_TopWrapper'>
                   <p className='IBMSMSMSSS_Author_Top_Name'>{displayName}</p>
-                  <p className='IBMSMSMSSS_Author_Top_Handle'>{nip05}</p>
+                  {nip05 && (
+                    <p className='IBMSMSMSSS_Author_Top_Handle'>{nip05}</p>
+                  )}
                 </div>
               </div>
             </div>
@@ -182,8 +203,8 @@ export const Profile = ({ profile }: ProfileProps) => {
                   <path d='M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z'></path>
                 </svg>
               </div>
-              <ProfileQRButtonWithPopUp pubkey={hexPubkey} />
+              <ProfileQRButtonWithPopUp pubkey={pubkey} />
-              <ZapButtonWithPopUp pubkey={hexPubkey} />
+              {lud16 && <ZapButtonWithPopUp pubkey={pubkey} />}
             </div>
           </div>
         </div>
@@ -196,7 +217,7 @@ export const Profile = ({ profile }: ProfileProps) => {
           ></div>
         </div>
       </div>
-      <FollowButton pubkey={hexPubkey} />
+      <FollowButton pubkey={pubkey} />
     </div>
   )
 }

src/constants.ts

@@ -15,7 +15,7 @@ export const LANDING_PAGE_DATA = {
   ],
   featuredGames: [
     'Persona 3 Reload',
-    'Baldur\'s Gate 3',
+    "Baldur's Gate 3",
     'Cyberpunk 2077',
     'ELDEN RING',
     'FINAL FANTASY VII REMAKE INTERGRADE'
@@ -119,3 +119,7 @@ export const GAME_FILES = [
 
 export const MAX_MODS_PER_PAGE = 10
 export const MAX_GAMES_PER_PAGE = 10
+
+// todo:  add game and  mod fallback image here
+export const FALLBACK_PROFILE_IMAGE =
+  'https://image.nostr.build/a305f4b43f74af3c6dcda42e6a798105a56ac1e3e7b74d7bef171896b3ba7520.png'

src/pages/search.tsx

@@ -552,9 +552,20 @@ const UsersResult = ({
         <div className='IBMSMList'>
           {filteredProfiles.map((profile) => {
             if (profile.pubkey) {
+              const displayName =
+                profile?.displayName || profile?.name || '[name not set up]'
+              const about = profile?.bio || profile?.about || '[bio not set up]'
+
               return (
                 <ErrorBoundary key={profile.pubkey}>
-                  <Profile profile={profile} />
+                  <Profile
+                    pubkey={profile.pubkey as string}
+                    displayName={displayName}
+                    about={about}
+                    image={profile?.image}
+                    nip05={profile?.nip05}
+                    lud16={profile?.lud16}
+                  />
                 </ErrorBoundary>
               )
             }