ndk profilepage

packages/app/src/Element/User/DisplayName.tsx

@@ -1,17 +1,18 @@
 import "./DisplayName.css";
 import { useMemo } from "react";
-import { HexKey, UserMetadata } from "@snort/system";
+import { HexKey } from "@snort/system";
 import { getDisplayNameOrPlaceHolder } from "@/SnortUtils";
-import { useUserProfile } from "@snort/system-react";
 import classNames from "classnames";
+import useProfile from "@/Hooks/useProfile";
+import {NDKUserProfile} from "@nostr-dev-kit/ndk";
 
 interface DisplayNameProps {
   pubkey: HexKey;
-  user?: UserMetadata | undefined;
+  user?: NDKUserProfile | undefined;
 }
 
 const DisplayName = ({ pubkey }: DisplayNameProps) => {
-  const profile = useUserProfile(pubkey);
+  const profile = useProfile(pubkey);
   const [name, isPlaceHolder] = useMemo(() => getDisplayNameOrPlaceHolder(profile, pubkey), [profile, pubkey]);
 
   return <span className={classNames({ placeholder: isPlaceHolder })}>{name}</span>;

packages/app/src/Hooks/useProfile.ts

@@ -2,7 +2,7 @@ import { NDKUserProfile } from "@nostr-dev-kit/ndk";
 import { useEffect, useState } from "react";
 import ndk from "@/ndk";
 
-export default function useProfile(pubkey: string) {
+export default function useProfile(pubkey: string | undefined) {
   const [profile, setProfile] = useState(null as NDKUserProfile | null);
   useEffect(() => {
     if (pubkey) {

packages/app/src/Pages/Profile/ProfilePage.tsx

@@ -5,14 +5,12 @@ import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import {
   encodeTLVEntries,
   EventKind,
-  MetadataCache,
   NostrLink,
   NostrPrefix,
   TLVEntryType,
   tryParseNostrLink,
 } from "@snort/system";
 import { fetchNip05Pubkey, LNURL } from "@snort/shared";
-import { useUserProfile } from "@snort/system-react";
 
 import { findTag, getLinkReactions, hexToBech32, parseId, unwrap } from "@/SnortUtils";
 import Note from "@/Element/Event/Note";
@@ -56,20 +54,22 @@ import DisplayName from "@/Element/User/DisplayName";
 import { UserWebsiteLink } from "@/Element/User/UserWebsiteLink";
 import { useMuteList, usePinList } from "@/Hooks/useLists";
 import FollowedBy from "@/Element/User/FollowedBy";
+import useProfile from "@/Hooks/useProfile";
+import {NDKUserProfile} from "@nostr-dev-kit/ndk";
 
 interface ProfilePageProps {
   id?: string;
-  state?: MetadataCache;
+  state?: NDKUserProfile;
 }
 
 export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
   const params = useParams();
   const location = useLocation();
-  const profileState = (location.state as MetadataCache | undefined) || state;
+  const profileState = (location.state as NDKUserProfile | undefined) || state;
   const navigate = useNavigate();
   const [id, setId] = useState<string | undefined>(profileState?.pubkey);
   const [relays, setRelays] = useState<Array<string>>();
-  const user = useUserProfile(profileState ? undefined : id) || profileState;
+  const user = useProfile(id);
   const login = useLogin();
   const loginPubKey = login.publicKey;
   const isMe = loginPubKey === id;
@@ -163,10 +163,10 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
       <>
         <div className="flex flex-col g4">
           <h2 className="flex items-center g4">
-            <DisplayName user={user} pubkey={user?.pubkey ?? ""} />
-            <FollowsYou followsMe={user?.pubkey !== loginPubKey && follows.includes(loginPubKey ?? "")} />
+            <DisplayName user={user} pubkey={id ?? ""} />
+            <FollowsYou followsMe={id !== loginPubKey && follows.includes(loginPubKey ?? "")} />
           </h2>
-          {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
+          {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={id} />}
         </div>
         {showBadges && <BadgeList badges={badges} />}
         {showStatus && <>{musicStatus()}</>}
@@ -293,7 +293,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
   function avatar() {
     return (
       <div className="avatar-wrapper w-max">
-        <Avatar pubkey={id ?? ""} user={user} onClick={() => setModalImage(user?.picture || "")} className="pointer" />
+        <Avatar pubkey={id ?? ""} user={user} onClick={() => setModalImage(user?.image || "")} className="pointer" />
         <div className="profile-actions">
           {renderIcons()}
           {!isMe && id && <FollowButton pubkey={id} />}
@@ -363,7 +363,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
       <div className="details-wrapper w-max">
         {username()}
         {bio()}
-        {user?.pubkey && loginPubKey && <FollowedBy pubkey={user.pubkey} />}
+        {id && loginPubKey && <FollowedBy pubkey={id} />}
       </div>
     );
   }

packages/app/src/SnortUtils/index.ts

@@ -21,6 +21,7 @@ import {
 import { isHex, isOffline } from "@snort/shared";
 import { Birthday, Day } from "@/Const";
 import AnimalName from "@/Element/User/AnimalName";
+import {NDKUser, NDKUserProfile} from "@nostr-dev-kit/ndk";
 
 export const sha256 = (str: string | Uint8Array): u256 => {
   return utils.bytesToHex(hash(str));
@@ -498,11 +499,11 @@ export const isBirthday = () => {
   return CONFIG.appName === "Snort" && IsTheSeason(event, 1);
 };
 
-export function getDisplayName(user: UserMetadata | undefined, pubkey: HexKey): string {
+export function getDisplayName(user: NDKUserProfile | undefined, pubkey: HexKey): string {
   return getDisplayNameOrPlaceHolder(user, pubkey)[0];
 }
 
-export function getDisplayNameOrPlaceHolder(user: UserMetadata | undefined, pubkey: HexKey): [string, boolean] {
+export function getDisplayNameOrPlaceHolder(user: NDKUserProfile | undefined, pubkey: HexKey): [string, boolean] {
   let name = hexToBech32(NostrPrefix.PublicKey, pubkey).substring(0, 12);
   let isPlaceHolder = false;