Update to pass userProfile data where possible.

nostr-dev-kit · Aug 17, 2023 · da6ed9d · da6ed9d
1 parent e05e151
commit da6ed9d
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 90 deletions.
diff --git a/src/lib/user/Avatar.svelte b/src/lib/user/Avatar.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
+<<<<<<< HEAD
     import type { NDKUser, NDKUserProfile } from '@nostr-dev-kit/ndk';
     import type NDK from '@nostr-dev-kit/ndk';
+=======
+    import type { NDKUser, NDKUserProfile } from "@nostr-dev-kit/ndk";
+    import type NDK from "@nostr-dev-kit/ndk";
+>>>>>>> 1c96436 (Update to pass userProfile data where possible.)
 
     /**
      * The NDK instance you want to use
@@ -23,18 +28,25 @@
     export let user: NDKUser | undefined = undefined;
 
     /**
+<<<<<<< HEAD
      * The user profile to display an avatar for
      */
     export let userProfile: NDKUserProfile | undefined = undefined;
 
     if (!user) {
+=======
+     * An NDKUserProfile object for the user you want to display an avatar for
+     */
+    export let userProfile: NDKUserProfile | undefined = undefined;
+
+    if (!userProfile && !user) {
+>>>>>>> 1c96436 (Update to pass userProfile data where possible.)
         let opts = npub ? { npub } : { hexpubkey: pubkey };
         try {
             user = ndk.getUser(opts);
         } catch (e) {
             console.error(`error trying to get user`, { opts }, e);
         }
-        npub = user?.npub;
     }
 
     const fetchProfilePromise = new Promise<NDKUserProfile>((resolve, reject) => {
@@ -51,6 +63,7 @@
     });
 </script>
 
+<<<<<<< HEAD
 {#await fetchProfilePromise}
     <img
         alt=""
@@ -60,17 +73,29 @@
 {:then userProfile}
     <img
         src={userProfile?.image??"https://placehold.co/400/ccc/ccc/webp"}
-        alt=""
-        class="avatar avatar--image {$$props.class}"
-        style={$$props.style}
-    />
-{:catch error}
+=======
+{#if userProfile}
     <img
+        src={userProfile.image ?? "https://placehold.co/400/ccc/ccc/webp"}
+>>>>>>> 1c96436 (Update to pass userProfile data where possible.)
         alt=""
-        class="avatar avatar--error {$$props.class}"
+        class="avatar avatar--image {$$props.class}"
         style={$$props.style}
     />
-{/await}
+{:else}
+    {#await user?.fetchProfile()}
+        <img alt="" class="avatar avatar--loading {$$props.class}" style={$$props.style} />
+    {:then value}
+        <img
+            src={user?.profile?.image ?? "https://placehold.co/400/ccc/ccc/webp"}
+            alt=""
+            class="avatar avatar--image {$$props.class}"
+            style={$$props.style}
+        />
+    {:catch error}
+        <img alt="" class="avatar avatar--error {$$props.class}" style={$$props.style} />
+    {/await}
+{/if}
 
 <style lang="postcss">
     .avatar {
@@ -90,5 +115,4 @@
             opacity: 0.5;
         }
     }
-
-</style>
+</style>
diff --git a/src/lib/user/Name.svelte b/src/lib/user/Name.svelte
@@ -1,76 +1,98 @@
 <script lang="ts">
+<<<<<<< HEAD
     import type { NDKUser, NDKUserProfile } from '@nostr-dev-kit/ndk';
     import type NDK from '@nostr-dev-kit/ndk';
     import { truncatedNip05 } from '$lib/utils/user';
     import { truncatedBech32 } from '$lib/utils';
     import { createEventDispatcher } from 'svelte';
+=======
+    import type { NDKUser, NDKUserProfile } from "@nostr-dev-kit/ndk";
+    import type NDK from "@nostr-dev-kit/ndk";
+    import { truncatedNip05 } from "$lib/utils/user";
+    import { truncatedBech32 } from "$lib/utils";
+    import { createEventDispatcher } from "svelte";
+>>>>>>> 1c96436 (Update to pass userProfile data where possible.)
 
     /**
      * The NDK instance you want to use
      */
     export let ndk: NDK;
 
     /**
-     * The npub of the user you want to display an avatar for
+     * The npub of the user you want to display a name for
      */
     export let npub: string | undefined = undefined;
 
     /**
-     * The hexpubkey of the user you want to display an avatar for
+     * The hexpubkey of the user you want to display a name for
      */
     export let pubkey: string | undefined = undefined;
 
     /**
-     * The user object of the user you want to display an avatar for
+     * The user object of the user you want to display a name for
      */
     export let user: NDKUser | undefined = undefined;
 
     /**
+<<<<<<< HEAD
      * The user profile to display an avatar for
+=======
+     * An NDKUserProfile object for the user you want to display a name for
+>>>>>>> 1c96436 (Update to pass userProfile data where possible.)
      */
     export let userProfile: NDKUserProfile | undefined = undefined;
 
     if (!user) {
         let opts = npub ? { npub } : { hexpubkey: pubkey };
-        user = ndk.getUser(opts);
-        npub = user.npub;
+        try {
+            user = ndk.getUser(opts);
+        } catch (e) {
+            console.error(`error trying to get user`, { opts }, e);
+        }
     }
 
-    const _npub = npub || user?.npub;
-
     const dispatch = createEventDispatcher();
 </script>
 
 <span class="name">
+<<<<<<< HEAD
     {#if userProfile}
+=======
+    {#if userProfile && user}
+>>>>>>> 1c96436 (Update to pass userProfile data where possible.)
         <button
             class="name--button {$$props.class}"
             style={$$props.style}
             tabindex="0"
             on:click|preventDefault|stopPropagation={() => {
+<<<<<<< HEAD
                 dispatch('click', user);
+=======
+                dispatch("click", user);
+>>>>>>> 1c96436 (Update to pass userProfile data where possible.)
             }}
         >
             {userProfile.displayName ||
                 userProfile.name ||
                 truncatedNip05(userProfile) ||
+<<<<<<< HEAD
                 truncatedBech32(_npub)}
+=======
+                truncatedBech32(user.npub)}
+>>>>>>> 1c96436 (Update to pass userProfile data where possible.)
         </button>
     {:else if user}
         {#await user.fetchProfile()}
-            <span
-                class="name--loading {$$props.class}"
-                style={$$props.style}
-            >
-                [{truncatedBech32(_npub)}]
+            <span class="name--loading {$$props.class}" style={$$props.style}>
+                [{truncatedBech32(user.npub)}]
             </span>
         {:then value}
             <button
                 class="name--button {$$props.class}"
                 style={$$props.style}
                 tabindex="0"
                 on:click|preventDefault|stopPropagation={() => {
-                    dispatch('click', user);
+                    dispatch("click", user);
                 }}
             >
                 {user.profile?.displayName ||
@@ -79,11 +101,8 @@
                     truncatedBech32(user.npub)}
             </button>
         {:catch error}
-            <span
-                class="name--error {$$props.class}"
-                style={$$props.style}
-            >
-                [{truncatedBech32(_npub)}]
+            <span class="name--error {$$props.class}" style={$$props.style}>
+                [{truncatedBech32(user.npub)}]
             </span>
         {/await}
     {/if}
@@ -93,7 +112,7 @@
     .name--button {
         background: none;
         color: inherit;
-        border:none;
+        border: none;
         padding: 0;
         font: inherit;
         cursor: pointer;

diff --git a/src/lib/user/Nip05.svelte b/src/lib/user/Nip05.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { NDKUser } from "@nostr-dev-kit/ndk";
+    import type { NDKUser, NDKUserProfile } from "@nostr-dev-kit/ndk";
     import type NDK from "@nostr-dev-kit/ndk";
     import { truncatedNip05 } from "$lib/utils/user";
 
@@ -9,38 +9,48 @@
     export let ndk: NDK;
 
     /**
-     * The npub of the user you want to display an avatar for
+     * The npub of the user you want to display a NIP-05 for
      */
     export let npub: string | undefined = undefined;
 
     /**
-     * The hexpubkey of the user you want to display an avatar for
+     * The hexpubkey of the user you want to display a NIP-05 for
      */
     export let pubkey: string | undefined = undefined;
 
     /**
-     * The user object of the user you want to display an avatar for
+     * The user object of the user you want to display a NIP-05 for
      */
     export let user: NDKUser | undefined = undefined;
 
-    if (!user) {
+    /**
+     * An NDKUserProfile object for the user you want to display a NIP-05 for
+     */
+    export let userProfile: NDKUserProfile | undefined = undefined;
+
+    if (!userProfile && !user) {
         let opts = npub ? { npub } : { hexpubkey: pubkey };
-        user = ndk.getUser(opts);
-        npub = user.npub;
+        try {
+            user = ndk.getUser(opts);
+        } catch (e) {
+            console.error(`error trying to get user`, { opts }, e);
+        }
     }
-
-    const _npub = npub || user?.npub;
 </script>
 
 <span class="name">
-    {#if user}
-        {#await user.fetchProfile()}
+    {#if userProfile}
+        <span class="nip05 {$$props.class}" style={$$props.style}>
+            {truncatedNip05(userProfile)}
+        </span>
+    {:else}
+        {#await user?.fetchProfile()}
             <span class="nip05--loading {$$props.class}" style={$$props.style}>
                 Loading NIP-05
             </span>
         {:then value}
             <span class="nip05 {$$props.class}" style={$$props.style}>
-                {truncatedNip05(user.profile)}
+                {truncatedNip05(user?.profile)}
             </span>
         {:catch error}
             <span class="nip05--error {$$props.class}" style={$$props.style}>

diff --git a/src/lib/user/Npub.svelte b/src/lib/user/Npub.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
     import type { NDKUser } from "@nostr-dev-kit/ndk";
     import type NDK from "@nostr-dev-kit/ndk";
-    import { truncatedNpub, copyToClipboard } from "$lib/utils/user";
-    import { Copy, Check } from 'lucide-svelte'
+    import { truncatedNpub, copyToClipboard } from "$lib/utils";
+    import { Copy, Check } from "lucide-svelte";
     import { fade } from "svelte/transition";
 
-
     /**
      * The NDK instance you want to use
      */
@@ -52,18 +51,16 @@
         <span class="npub {$$props.class}" style={$$props.style}>
             {truncatedNpub(user)}
             <button on:click|preventDefault={copyNpub} class="npub--copyButton">
-                <Copy size=16 />
+                <Copy size="16" />
             </button>
             {#if checkVisible}
-                <span in:fade={{duration: 100}} out:fade>
-                    <Check size=16 />
+                <span in:fade={{ duration: 100 }} out:fade>
+                    <Check size="16" />
                 </span>
             {/if}
         </span>
     {:else}
-        <span class="npub--error {$$props.class}" style={$$props.style}>
-            Error loading user
-        </span>
+        <span class="npub--error {$$props.class}" style={$$props.style}> Error loading user </span>
     {/if}
 </span>
 
@@ -81,4 +78,4 @@
         background-color: var(--color-bg);
         cursor: pointer;
     }
-</style>
+</style>