From 048a721b65468252ceedcbc32d14d4ea498b4d9b Mon Sep 17 00:00:00 2001 From: highperfocused Date: Sun, 4 May 2025 23:25:24 +0200 Subject: [PATCH] replace all nostr-react useProfile with NDK useProfileValue --- app/profile/[pubkey]/page.tsx | 4 ++-- components/CommentCard.tsx | 5 ++--- components/CreateProfileForm.tsx | 8 ++++---- components/GalleryCard.tsx | 5 ++--- components/KIND20Card.tsx | 6 +++--- components/NoteCard.tsx | 5 ++--- components/Notification.tsx | 5 ++--- components/Notifications.tsx | 5 ++--- components/ProfileInfoCard.tsx | 5 +++-- components/QuickViewKind20NoteCard.tsx | 3 --- components/QuickViewNoteCard.tsx | 6 +++--- components/ReactionButtonReactionListItem.tsx | 7 +++---- components/TrendingAccount.tsx | 5 ++--- components/TrendingImage.tsx | 5 ++--- components/TrendingImageNew.tsx | 2 +- components/UpdateProfileForm.tsx | 14 +++++++++----- components/ZapButton.tsx | 5 ++--- components/ZapButtonListItem.tsx | 7 +++---- components/dashboard/RecentFollower.tsx | 5 ++--- components/dashboard/RecentZap.tsx | 5 ++--- components/dashboard/Statistics.tsx | 5 ++--- components/headerComponents/AvatarDropdown.tsx | 6 +++--- 22 files changed, 56 insertions(+), 67 deletions(-) diff --git a/app/profile/[pubkey]/page.tsx b/app/profile/[pubkey]/page.tsx index 0b406df..07582bd 100644 --- a/app/profile/[pubkey]/page.tsx +++ b/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(() => { diff --git a/components/CommentCard.tsx b/components/CommentCard.tsx index 6a35025..02da47f 100644 --- a/components/CommentCard.tsx +++ b/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 = ({ 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); diff --git a/components/CreateProfileForm.tsx b/components/CreateProfileForm.tsx index d6ae023..4ffda69 100644 --- a/components/CreateProfileForm.tsx +++ b/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 || ""); diff --git a/components/GalleryCard.tsx b/components/GalleryCard.tsx index 1fdffe8..a3e6741 100644 --- a/components/GalleryCard.tsx +++ b/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 = ({ pubkey, eventId, imageUrl, linkToNote }) => { - const { data: userData } = useProfile({ - pubkey, - }); + const userData = useProfileValue(pubkey); const encodedNoteId = nip19.noteEncode(eventId); diff --git a/components/KIND20Card.tsx b/components/KIND20Card.tsx index 6a68d89..d967210 100644 --- a/components/KIND20Card.tsx +++ b/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 = ({ event, showViewNoteCardButton, }) => { - const { data: userData } = useProfile({ - pubkey, - }) + const userData = useProfileValue(pubkey); + const [imageError, setImageError] = useState(false); if (!image || !image.startsWith("http") || imageError) return null; diff --git a/components/NoteCard.tsx b/components/NoteCard.tsx index b58f43a..af9fa78 100644 --- a/components/NoteCard.tsx +++ b/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 = ({ 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', '
'); diff --git a/components/Notification.tsx b/components/Notification.tsx index 3351f41..f712c3e 100644 --- a/components/Notification.tsx +++ b/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 = ({ event }) => { let sats = 0; let reactedToId = ''; - const { data: userData, isLoading: userDataLoading } = useProfile({ - pubkey: sender, - }); + const userData = useProfileValue(sender); if (!event) { return null; diff --git a/components/Notifications.tsx b/components/Notifications.tsx index 7bf6201..0eff91a 100644 --- a/components/Notifications.tsx +++ b/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 = ({ pubkey }) => { - const { data: userData, isLoading: userDataLoading } = useProfile({ - pubkey, - }); + const userData = useProfileValue(pubkey); // const { events: followers, isLoading: followersLoading } = useNostrEvents({ // filter: { diff --git a/components/ProfileInfoCard.tsx b/components/ProfileInfoCard.tsx index 32e6a84..0aa5686 100644 --- a/components/ProfileInfoCard.tsx +++ b/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 = 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 = React.memo(({ pubkey })
- +
diff --git a/components/QuickViewKind20NoteCard.tsx b/components/QuickViewKind20NoteCard.tsx index 292e409..cdc1663 100644 --- a/components/QuickViewKind20NoteCard.tsx +++ b/components/QuickViewKind20NoteCard.tsx @@ -22,9 +22,6 @@ interface QuickViewKind20NoteCardProps { } const QuickViewKind20NoteCard: React.FC = ({ 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; diff --git a/components/QuickViewNoteCard.tsx b/components/QuickViewNoteCard.tsx index 362d008..0991afa 100644 --- a/components/QuickViewNoteCard.tsx +++ b/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 = ({ 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', ' '); diff --git a/components/ReactionButtonReactionListItem.tsx b/components/ReactionButtonReactionListItem.tsx index 6dff4cc..c169d60 100644 --- a/components/ReactionButtonReactionListItem.tsx +++ b/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
{/* */} - + {title} {content} diff --git a/components/TrendingAccount.tsx b/components/TrendingAccount.tsx index 9d844a8..3ea52c5 100644 --- a/components/TrendingAccount.tsx +++ b/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 = ({ 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)}`; diff --git a/components/TrendingImage.tsx b/components/TrendingImage.tsx index 3efc8e8..4fe245f 100644 --- a/components/TrendingImage.tsx +++ b/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 = ({ eventId, pubkey }) => { - const { data: userData } = useProfile({ - pubkey, - }); + const userData = useProfileValue(pubkey); const { events } = useNostrEvents({ filter: { diff --git a/components/TrendingImageNew.tsx b/components/TrendingImageNew.tsx index e91f545..f532e9f 100644 --- a/components/TrendingImageNew.tsx +++ b/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: { diff --git a/components/UpdateProfileForm.tsx b/components/UpdateProfileForm.tsx index ccecdc1..db99045 100644 --- a/components/UpdateProfileForm.tsx +++ b/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(''); const [displayName, setDisplayName] = useState(''); @@ -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 (
diff --git a/components/ZapButton.tsx b/components/ZapButton.tsx index 5cf58d2..32fbb65 100644 --- a/components/ZapButton.tsx +++ b/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'); diff --git a/components/ZapButtonListItem.tsx b/components/ZapButtonListItem.tsx index 46ad4bd..4417d2e 100644 --- a/components/ZapButtonListItem.tsx +++ b/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 }) {
{/* */} - + {title} {sats} sats ⚡️ diff --git a/components/dashboard/RecentFollower.tsx b/components/dashboard/RecentFollower.tsx index c421e7a..639d280 100644 --- a/components/dashboard/RecentFollower.tsx +++ b/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'); diff --git a/components/dashboard/RecentZap.tsx b/components/dashboard/RecentZap.tsx index c4d38ce..2095b04 100644 --- a/components/dashboard/RecentZap.tsx +++ b/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) diff --git a/components/dashboard/Statistics.tsx b/components/dashboard/Statistics.tsx index 132986f..1fe0093 100644 --- a/components/dashboard/Statistics.tsx +++ b/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 = ({ pubkey }) => { - const { data: userData, isLoading: userDataLoading } = useProfile({ - pubkey, - }); + const userData = useProfileValue(pubkey); const { events: followers, isLoading: followersLoading } = useNostrEvents({ filter: { diff --git a/components/headerComponents/AvatarDropdown.tsx b/components/headerComponents/AvatarDropdown.tsx index c3edb9f..3c56f3c 100644 --- a/components/headerComponents/AvatarDropdown.tsx +++ b/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; }