use ndk for profileimage

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

@@ -34,7 +34,7 @@ const Avatar = ({
   const [url, setUrl] = useState("");
 
   useEffect(() => {
-    setUrl(image ?? user?.picture ?? defaultAvatar(pubkey));
+    setUrl(image ?? user?.image ?? defaultAvatar(pubkey));
   }, [user, image, pubkey]);
 
   const s = size ?? 120;

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

@@ -1,8 +1,6 @@
 import "./ProfileImage.css";
 
 import React, { ReactNode, useCallback, useRef, useState } from "react";
-import { HexKey, UserMetadata } from "@snort/system";
-import { useUserProfile } from "@snort/system-react";
 import classNames from "classnames";
 
 import Avatar from "@/Element/User/Avatar";
@@ -12,9 +10,11 @@ import { ProfileCard } from "./ProfileCard";
 import FollowDistanceIndicator from "@/Element/User/FollowDistanceIndicator";
 import { useCommunityLeader } from "@/Hooks/useCommunityLeaders";
 import { LeaderBadge } from "@/Element/CommunityLeaders/LeaderBadge";
+import { NDKUserProfile } from "@nostr-dev-kit/ndk";
+import useProfile from "@/Hooks/useProfile";
 
 export interface ProfileImageProps {
-  pubkey: HexKey;
+  pubkey: string;
   subHeader?: JSX.Element;
   showUsername?: boolean;
   className?: string;
@@ -22,7 +22,7 @@ export interface ProfileImageProps {
   defaultNip?: string;
   verifyNip?: boolean;
   overrideUsername?: string;
-  profile?: UserMetadata;
+  profile?: NDKUserProfile;
   size?: number;
   onClick?: (e: React.MouseEvent) => void;
   imageOverlay?: ReactNode;
@@ -48,7 +48,7 @@ export default function ProfileImage({
   showProfileCard = false,
   showBadges = false,
 }: ProfileImageProps) {
-  const user = useUserProfile(profile ? "" : pubkey) ?? profile;
+  const user = useProfile(profile ? "" : pubkey) ?? profile;
   const [isHovering, setIsHovering] = useState(false);
   const leader = useCommunityLeader(pubkey);
 

packages/app/src/Hooks/useProfile.ts

@@ -0,0 +1,18 @@
+import { NDKUserProfile } from "@nostr-dev-kit/ndk";
+import { useEffect, useState } from "react";
+import ndk from "@/ndk";
+
+export default function useProfile(pubkey: string) {
+  const [profile, setProfile] = useState(null as NDKUserProfile | null);
+  useEffect(() => {
+    if (pubkey) {
+      const user = ndk.getUser({ pubkey });
+      user.fetchProfile().then(p => {
+        setProfile(p);
+      });
+    } else {
+      setProfile(null);
+    }
+  }, [pubkey]);
+  return profile;
+}

packages/app/src/ndk.ts

@@ -2,7 +2,9 @@ import NDKCacheAdapterDexie from "@nostr-dev-kit/ndk-cache-dexie";
 import NDK from "@nostr-dev-kit/ndk";
 
 const dexieAdapter = new NDKCacheAdapterDexie();
-const ndk = new NDK({ cacheAdapter: dexieAdapter });
+const ndk = new NDK({ cacheAdapter: dexieAdapter, explicitRelayUrls: ["wss://relay.nostr.band"] });
+
+ndk.connect();
 
 export { dexieAdapter };
 export default ndk;

packages/app/src/webrtc/WebRTCConnection.ts

@@ -73,7 +73,7 @@ export class WebRTCConnection extends EventEmitter {
       const data = JSON.parse(event.data);
       const requestType = data[0];
       switch (requestType) {
-        case "EVENT":
+        case "EVENT": {
           const event = data[2];
           // this.log("-> EVENT", event);
           if (this.seenEvents.has(event.id)) return;
@@ -82,7 +82,9 @@ export class WebRTCConnection extends EventEmitter {
           const ndkEvent = new NDKEvent(ndk, event);
           dexieAdapter.setEvent(ndkEvent, []);
           break;
-        case "REQ": // nostr subscription
+        }
+        case "REQ": {
+          // nostr subscription
           // this.log("-> REQ", JSON.stringify(data));
           const filters = data[2];
           const sub = ndk.subscribe(filters);
@@ -91,6 +93,7 @@ export class WebRTCConnection extends EventEmitter {
             this.send(JSON.stringify(["EVENT", "", event.rawEvent()]));
           });
           break;
+        }
       }
     } catch (e) {
       this.log("Error parsing data channel message", e);