replace all nostr-react useProfile with NDK useProfileValue

app/profile/[pubkey]/page.tsx

@@ -9,8 +9,8 @@ import { SectionIcon, GridIcon } from '@radix-ui/react-icons'
 import ProfileQuickViewFeed from "@/components/ProfileQuickViewFeed";
 import ProfileTextFeed from "@/components/ProfileTextFeed";
 import ProfileGalleryViewFeed from "@/components/ProfileGalleryViewFeed";
-import { useProfile } from "nostr-react";
 import { useMemo, useEffect } from "react";
+import { useProfileValue } from "@nostr-dev-kit/ndk-hooks";
 
 export default function ProfilePage() {
 
@@ -29,7 +29,7 @@ export default function ProfilePage() {
     return 'npub' + parts[1].slice(0, 4) + ':' + parts[1].slice(-3);
   }, [pubkey]);
 
-  const { data: userData, isLoading } = useProfile({ pubkey });
+  const userData = useProfileValue(pubkey);
   const title = userData?.username || userData?.display_name || userData?.name || userData?.npub || npubShortened;
 
   useEffect(() => {

components/CommentCard.tsx

@@ -28,6 +28,7 @@ import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import ViewRawButton from '@/components/ViewRawButton';
 import ViewNoteButton from './ViewNoteButton';
 import Link from 'next/link';
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 interface CommentCardProps {
   pubkey: string;
@@ -38,9 +39,7 @@ interface CommentCardProps {
 }
 
 const NoteCard: React.FC<CommentCardProps> = ({ pubkey, text, eventId, tags, event }) => {
-  const { data: userData } = useProfile({
-    pubkey,
-  });
+  const userData = useProfileValue(pubkey);
 
   const title = userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey);
   const imageSrc = text.match(/https?:\/\/[^ ]*\.(png|jpg|gif|jpeg)/g);

components/CreateProfileForm.tsx

@@ -27,6 +27,7 @@ import {
     TooltipTrigger 
 } from "@/components/ui/tooltip";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 export function CreateProfileForm() {
     const { publish } = useNostr();
@@ -60,14 +61,13 @@ export function CreateProfileForm() {
     }, []);
 
     // Try to load existing profile data if available
-    const { data: userData, isLoading: profileLoading } = useProfile({
-        pubkey,
-    });
+    const userData = useProfileValue(pubkey);
+
 
     useEffect(() => {
         if (userData) {
             setUsername(userData.name || "");
-            setDisplayName(userData.display_name || "");
+            setDisplayName(userData.display_name ? String(userData.display_name) : "");
             setBio(userData.about || "");
             setPicture(userData.picture || "");
             setWebsite(userData.website || "");

components/GalleryCard.tsx

@@ -10,6 +10,7 @@ import {
 import Image from 'next/image';
 import Link from 'next/link';
 import { PlayIcon, StackIcon, VideoIcon } from '@radix-ui/react-icons';
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 interface GalleryCardProps {
   pubkey: string;
@@ -19,9 +20,7 @@ interface GalleryCardProps {
 }
 
 const GalleryCard: React.FC<GalleryCardProps> = ({ pubkey, eventId, imageUrl, linkToNote }) => {
-  const { data: userData } = useProfile({
-    pubkey,
-  });
+  const userData = useProfileValue(pubkey);
 
   const encodedNoteId = nip19.noteEncode(eventId);
 

components/KIND20Card.tsx

@@ -14,6 +14,7 @@ import ViewCopyButton from "./ViewCopyButton"
 import type { Event as NostrEvent } from "nostr-tools"
 import ZapButton from "./ZapButton"
 import Image from "next/image"
+import { useProfileValue } from "@nostr-dev-kit/ndk-hooks"
 
 interface KIND20CardProps {
   pubkey: string
@@ -34,9 +35,8 @@ const KIND20Card: React.FC<KIND20CardProps> = ({
   event,
   showViewNoteCardButton,
 }) => {
-  const { data: userData } = useProfile({
-    pubkey,
-  })
+  const userData = useProfileValue(pubkey);
+
   const [imageError, setImageError] = useState(false);
 
   if (!image || !image.startsWith("http") || imageError) return null;

components/NoteCard.tsx

@@ -31,6 +31,7 @@ import Link from 'next/link';
 import ViewCopyButton from './ViewCopyButton';
 import { Event as NostrEvent } from "nostr-tools";
 import ZapButton from './ZapButton';
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 interface NoteCardProps {
   pubkey: string;
@@ -42,9 +43,7 @@ interface NoteCardProps {
 }
 
 const NoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tags, event, showViewNoteCardButton }) => {
-  const { data: userData } = useProfile({
-    pubkey,
-  });
+  const userData = useProfileValue(pubkey);
 
   const title = userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey);
   // text = text.replaceAll('\n', '<br />');

components/Notification.tsx

@@ -8,6 +8,7 @@ import {
 } from "nostr-tools";
 import { Avatar, AvatarImage } from './ui/avatar';
 import Link from 'next/link';
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 interface NotificationProps {
     event: NostrEvent;
@@ -18,9 +19,7 @@ const Notification: React.FC<NotificationProps> = ({ event }) => {
     let sats = 0;
     let reactedToId = '';
 
-    const { data: userData, isLoading: userDataLoading } = useProfile({
-        pubkey: sender,
-    });
+    const userData = useProfileValue(sender);
 
     if (!event) {
         return null;

components/Notifications.tsx

@@ -9,15 +9,14 @@ import {
     nip19,
 } from "nostr-tools";
 import Notification from './Notification';
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 interface NotificationsProps {
     pubkey: string;
 }
 
 const Notifications: React.FC<NotificationsProps> = ({ pubkey }) => {
-    const { data: userData, isLoading: userDataLoading } = useProfile({
-        pubkey,
-    });
+    const userData = useProfileValue(pubkey);
 
     // const { events: followers, isLoading: followersLoading } = useNostrEvents({
     //     filter: {

components/ProfileInfoCard.tsx

@@ -23,6 +23,7 @@ import { Input } from './ui/input';
 import { Share1Icon, LightningBoltIcon, GlobeIcon } from '@radix-ui/react-icons';
 import { toast } from './ui/use-toast';
 import { Globe } from 'lucide-react';
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 interface ProfileInfoCardProps {
   pubkey: string;
@@ -37,7 +38,7 @@ const ProfileInfoCard: React.FC<ProfileInfoCardProps> = React.memo(({ pubkey })
     host = window.location.host;
   }
 
-  const { data: userData, isLoading } = useProfile({ pubkey });
+  const userData = useProfileValue(pubkey);
 
   const npubShortened = useMemo(() => {
     let encoded = nip19.npubEncode(pubkey);
@@ -119,7 +120,7 @@ const ProfileInfoCard: React.FC<ProfileInfoCardProps> = React.memo(({ pubkey })
         <CardHeader>
           <div className="flex items-center gap-6">
             <Avatar className="h-24 w-24">
-              <AvatarImage className="object-cover w-full h-full" src={userData?.picture} alt={title} />
+              <AvatarImage className="object-cover w-full h-full" src={userData?.picture} alt={typeof title === 'string' ? title : String(title)} />
             </Avatar>
             <div className="flex flex-col gap-1.5">
               <Link href={`/profile/${nip19.npubEncode(pubkey)}`}>

components/QuickViewKind20NoteCard.tsx

@@ -22,9 +22,6 @@ interface QuickViewKind20NoteCardProps {
 }
 
 const QuickViewKind20NoteCard: React.FC<QuickViewKind20NoteCardProps> = ({ pubkey, text, image, eventId, tags, event, linkToNote }) => {
-  const {data, isLoading} = useProfile({
-    pubkey,
-  });
   const [imageError, setImageError] = useState(false);
 
   if (!image || !image.startsWith("http") || imageError) return null;

components/QuickViewNoteCard.tsx

@@ -10,6 +10,7 @@ import {
 import Image from 'next/image';
 import Link from 'next/link';
 import { PlayIcon, StackIcon, VideoIcon } from '@radix-ui/react-icons';
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 interface NoteCardProps {
   pubkey: string;
@@ -21,9 +22,8 @@ interface NoteCardProps {
 }
 
 const QuickViewNoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tags, event, linkToNote }) => {
-  const { data: userData } = useProfile({
-    pubkey,
-  });
+  const userData = useProfileValue(pubkey);
+
 
   const title = userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey);
   text = text.replaceAll('\n', ' ');

components/ReactionButtonReactionListItem.tsx

@@ -9,14 +9,13 @@ import {
     nip19,
 } from "nostr-tools";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { useProfileValue } from "@nostr-dev-kit/ndk-hooks";
 
 export default function ReactionButtonReactionListItem({ event }: { event: NostrEvent }) {
 
     let pubkey = event.pubkey;
 
-    const { data: userData } = useProfile({
-        pubkey,
-    });
+    const userData = useProfileValue(pubkey);
 
     const title = userData?.username || userData?.display_name || userData?.name || nip19.npubEncode(pubkey).slice(0, 8) + ':' + nip19.npubEncode(pubkey).slice(-3);;
     const createdAt = new Date(event.created_at * 1000);
@@ -32,7 +31,7 @@ export default function ReactionButtonReactionListItem({ event }: { event: Nostr
                 <div className="flex items-center space-x-2 p-1">
                     {/* <img src={profileImageSrc} className="w-8 h-8 rounded-full" /> */}
                     <Avatar>
-                        <AvatarImage src={profileImageSrc} alt={title} />
+                        <AvatarImage src={profileImageSrc} alt={String(title)} />
                     </Avatar>
                     <span>{title}</span>
                     <span className="pl-2">{content}</span>

components/TrendingAccount.tsx

@@ -11,15 +11,14 @@ import {
 } from "@/components/ui/card"
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import Link from 'next/link';
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 interface TrendingAccountProps {
   pubkey: string;
 }
 
 const TrendingAccount: React.FC<TrendingAccountProps> = ({ pubkey }) => {
-  const { data: userData } = useProfile({
-    pubkey,
-  });
+  const userData = useProfileValue(pubkey);
 
   const title = userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey);
   const hrefProfile = `/profile/${nip19.npubEncode(pubkey)}`;

components/TrendingImage.tsx

@@ -13,6 +13,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Avatar } from './ui/avatar';
 import { AvatarImage } from '@radix-ui/react-avatar';
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 interface TrendingImageProps {
   eventId: string;
@@ -20,9 +21,7 @@ interface TrendingImageProps {
 }
 
 const TrendingImage: React.FC<TrendingImageProps> = ({ eventId, pubkey }) => {
-  const { data: userData } = useProfile({
-    pubkey,
-  });
+  const userData = useProfileValue(pubkey);
 
   const { events } = useNostrEvents({
     filter: {

components/TrendingImageNew.tsx

@@ -9,7 +9,7 @@ import {
 import Link from 'next/link';
 import { Avatar } from './ui/avatar';
 import { AvatarImage } from '@radix-ui/react-avatar';
-import { useProfile, useProfileValue } from '@nostr-dev-kit/ndk-hooks';
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 interface TrendingImageNewProps {
   event: {

components/UpdateProfileForm.tsx

@@ -14,6 +14,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Loader2, Globe, Image, ImageIcon, BadgeCheck, Zap } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 export function UpdateProfileForm() {
     const { publish } = useNostr();
@@ -39,10 +40,9 @@ export function UpdateProfileForm() {
             nsec = hexToBytes(nsecHex);
         }
     }
+    
+    const userData = useProfileValue(pubkey);
 
-    const { data: userData, isLoading: isUserDataLoading } = useProfile({
-        pubkey,
-    });
 
     const [username, setUsername] = useState<string | undefined>('');
     const [displayName, setDisplayName] = useState<string | undefined>('');
@@ -57,7 +57,11 @@ export function UpdateProfileForm() {
     useEffect(() => {
         if (userData && !isDataLoaded) {
             setUsername(userData.name);
-            setDisplayName(userData.display_name);
+            setDisplayName(
+                userData.display_name !== undefined && userData.display_name !== null
+                    ? String(userData.display_name)
+                    : undefined
+            );
             setBio(userData.about);
             setPicture(userData.picture);
             setBanner(userData.banner);
@@ -158,7 +162,7 @@ export function UpdateProfileForm() {
         }
     }
 
-    if (isUserDataLoading && !isDataLoaded) {
+    if (!isDataLoaded) {
         return (
             <div className="w-full space-y-6">
                 <div className="flex items-center gap-4">

components/ZapButton.tsx

@@ -23,6 +23,7 @@ import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
 import { signEvent } from "@/utils/utils";
 import { nwc } from "@getalby/sdk";
 import { Sparkles, Zap } from "lucide-react";
+import { useProfileValue } from "@nostr-dev-kit/ndk-hooks";
 
 // NWC connection storage key (same as used in NostrWalletConnect.tsx)
 const NWC_STORAGE_KEY = "lumina-nwc-connection";
@@ -117,9 +118,7 @@ export default function ZapButton({ event }: { event: any }) {
         }
     };
 
-    const { data: userData } = useProfile({
-        pubkey: event.pubkey,
-    });
+    const userData = useProfileValue(event.pubkey);
 
     let sats = 0;
     var lightningPayReq = require('bolt11');

components/ZapButtonListItem.tsx

@@ -9,6 +9,7 @@ import {
     nip19,
 } from "nostr-tools";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { useProfileValue } from "@nostr-dev-kit/ndk-hooks";
 
 export default function ZapButtonListItem({ event }: { event: NostrEvent }) {
 
@@ -37,9 +38,7 @@ export default function ZapButtonListItem({ event }: { event: NostrEvent }) {
         }
     }
 
-    const { data: userData } = useProfile({
-        pubkey,
-    });
+    const userData = useProfileValue(pubkey);
 
     const title = userData?.username || userData?.display_name || userData?.name || nip19.npubEncode(pubkey).slice(0, 8) + ':' + nip19.npubEncode(pubkey).slice(-3);;
     const createdAt = new Date(event.created_at * 1000);
@@ -61,7 +60,7 @@ export default function ZapButtonListItem({ event }: { event: NostrEvent }) {
                 <div className="flex items-center space-x-2 p-1">
                     {/* <img src={profileImageSrc} className="w-8 h-8 rounded-full" /> */}
                     <Avatar>
-                        <AvatarImage src={profileImageSrc} alt={title} />
+                        <AvatarImage src={profileImageSrc} alt={String(title)} />
                     </Avatar>
                     <span>{title}</span>
                     <span className="pl-2">{sats} sats ⚡️</span>

components/dashboard/RecentFollower.tsx

@@ -5,12 +5,11 @@ import {
     nip19,
 } from "nostr-tools";
 import Link from "next/link";
+import { useProfileValue } from "@nostr-dev-kit/ndk-hooks";
 
 export function RecentFollower({ follower }: { follower: any }) {
 
-    const { data: userData, isLoading: userDataLoading } = useProfile({
-        pubkey: follower.pubkey,
-    });
+    const userData = useProfileValue(follower.pubkey);
 
     let encoded = nip19.npubEncode(follower.pubkey);
     let parts = encoded.split('npub');

components/dashboard/RecentZap.tsx

@@ -5,6 +5,7 @@ import {
     nip19,
 } from "nostr-tools";
 import Link from "next/link";
+import { useProfileValue } from "@nostr-dev-kit/ndk-hooks";
 
 export function RecentZap({ zap }: { zap: any }) {
 
@@ -15,9 +16,7 @@ export function RecentZap({ zap }: { zap: any }) {
         }
     }
 
-    const { data: userData, isLoading: userDataLoading } = useProfile({
-        pubkey: zapperPubkey,
-    });
+    const userData = useProfileValue(zapperPubkey);
 
     console.log('zap', zap)
 

components/dashboard/Statistics.tsx

@@ -10,15 +10,14 @@ import {
     nip19,
 } from "nostr-tools";
 import { RecentZapsCard } from './RecentZapsCard';
+import { useProfileValue } from '@nostr-dev-kit/ndk-hooks';
 
 interface ProfileInfoCardProps {
     pubkey: string;
 }
 
 const ProfileInfoCard: React.FC<ProfileInfoCardProps> = ({ pubkey }) => {
-    const { data: userData, isLoading: userDataLoading } = useProfile({
-        pubkey,
-    });
+    const userData = useProfileValue(pubkey);
 
     const { events: followers, isLoading: followersLoading } = useNostrEvents({
         filter: {

components/headerComponents/AvatarDropdown.tsx

@@ -15,14 +15,14 @@ import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"
 import { useProfile } from "nostr-react"
 import Link from "next/link"
 import { nip19 } from "nostr-tools"
+import { useProfileValue } from "@nostr-dev-kit/ndk-hooks"
 
 export function AvatarDropdown() {
   let pubkey = window.localStorage.getItem('pubkey');
   let pubkeyEncoded = pubkey ? nip19.npubEncode(pubkey) : pubkey;
   let src = "https://robohash.org/" + (pubkey as string);
-  const { data: userData } = useProfile({
-    pubkey: pubkey as string,
-  });
+  const userData = useProfileValue(pubkey as string);
+
   if (pubkey !== null) {
     src = userData?.picture || "https://robohash.org/" + pubkey;
   }