Merge pull request #17 from nostr-dev-kit/nip-05

Nip 05

src/lib/user/Nip05.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import type { NDKUser } from "@nostr-dev-kit/ndk";
+    import type NDK from "@nostr-dev-kit/ndk";
+    import { truncatedNip05 } from "$lib/utils/user";
+
+    /**
+     * The NDK instance you want to use
+     */
+    export let ndk: NDK;
+
+    /**
+     * The npub of the user you want to display an avatar for
+     */
+    export let npub: string | undefined = undefined;
+
+    /**
+     * The hexpubkey of the user you want to display an avatar for
+     */
+    export let pubkey: string | undefined = undefined;
+
+    /**
+     * The user object of the user you want to display an avatar for
+     */
+    export let user: NDKUser | undefined = undefined;
+
+    if (!user) {
+        let opts = npub ? { npub } : { hexpubkey: pubkey };
+        user = ndk.getUser(opts);
+        npub = user.npub;
+    }
+
+    const _npub = npub || user?.npub;
+</script>
+
+<span class="name">
+    {#if user}
+        {#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)}
+            </span>
+        {:catch error}
+            <span class="nip05--error {$$props.class}" style={$$props.style}>
+                Error loading user profile
+            </span>
+        {/await}
+    {/if}
+</span>

src/stories/user/Nip05.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/svelte";
+import NDK from "@nostr-dev-kit/ndk";
+
+import Nip05 from "../../lib/user/Nip05.svelte";
+
+/**
+ * Renders a user's NIP-05 string.
+ *
+ * If a user's NIP-05 starts with an `_` (underscore), only the domain will be rendered.
+ *
+ * As with all components, you can pass `class` or `style` props to the component.
+ * If no `class` or `style` prop is passed, default styles will render the name as normal text.
+ */
+
+const meta = {
+    title: "User/NIP-05",
+    component: Nip05,
+    tags: ["autodocs"],
+    argTypes: {
+        ndk: {
+            control: { type: "object" },
+            type: { name: "other", value: "NDK", required: true },
+            table: { type: { summary: "NDK" } },
+            description:
+                "The NDK instance you want to use. This should be already connected to relays.",
+        },
+        npub: {
+            control: "text",
+            type: "string",
+            table: { type: { summary: "string" } },
+            description: "The user's npub. Only one of `npub`, `pubkey`, or `user` is required.",
+        },
+        pubkey: {
+            control: "text",
+            type: "string",
+            table: { type: { summary: "string" } },
+            description:
+                "The user's hex pubkey. Only one of `npub`, `pubkey`, or `user` is required.",
+        },
+        user: {
+            control: { type: null },
+            type: { name: "other", value: "NDKUser", required: false },
+            table: { type: { summary: "NDKUser" } },
+            description: "An NDKUser object. Only one of `npub`, `pubkey`, or `user` is required.",
+        },
+    },
+} satisfies Meta<Nip05>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ndk = new NDK({ explicitRelayUrls: ["wss://purplepag.es"] });
+ndk.connect();
+
+export const Default: Story = {
+    args: {
+        ndk: ndk,
+        npub: "npub1qny3tkh0acurzla8x3zy4nhrjz5zd8l9sy9jys09umwng00manysew95gx",
+    },
+};
+
+export const WithUnderscore: Story = {
+    args: {
+        ndk: ndk,
+        npub: "npub1zuuajd7u3sx8xu92yav9jwxpr839cs0kc3q6t56vd5u9q033xmhsk6c2uc",
+    },
+};