polish

package.json

@@ -16,7 +16,8 @@
     "@floating-ui/react": "^0.23.1",
     "@headlessui/react": "^1.7.15",
     "@nostr-dev-kit/ndk": "^0.5.13",
-    "@tanstack/react-query": "^4.29.15",
+    "@tanstack/react-query": "^4.29.17",
+    "@tanstack/react-query-devtools": "^4.29.17",
     "@tanstack/react-virtual": "3.0.0-beta.54",
     "@tauri-apps/api": "^1.4.0",
     "cheerio": "1.0.0-rc.12",

pnpm-lock.yaml

@@ -11,8 +11,11 @@ dependencies:
     specifier: ^0.5.13
     version: 0.5.13(typescript@4.9.5)
   '@tanstack/react-query':
-    specifier: ^4.29.15
+    specifier: ^4.29.17
-    version: 4.29.15(react-dom@18.2.0)(react@18.2.0)
+    version: 4.29.17(react-dom@18.2.0)(react@18.2.0)
+  '@tanstack/react-query-devtools':
+    specifier: ^4.29.17
+    version: 4.29.17(@tanstack/react-query@4.29.17)(react-dom@18.2.0)(react@18.2.0)
   '@tanstack/react-virtual':
     specifier: 3.0.0-beta.54
     version: 3.0.0-beta.54(react@18.2.0)
@@ -828,12 +831,34 @@ packages:
       tailwindcss: 3.3.2
     dev: true
 
-  /@tanstack/query-core@4.29.15:
+  /@tanstack/match-sorter-utils@8.8.4:
-    resolution: {integrity: sha512-Recc1d5rjHesKhzlH3Aw66v+vQxtB9OHEXP/vxgEcEJ0DwEpfe3EQ4id20vuBJHY2XRjfgWGmUs6ZgK6PSsTXA==}
+    resolution: {integrity: sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==}
+    engines: {node: '>=12'}
+    dependencies:
+      remove-accents: 0.4.2
     dev: false
 
-  /@tanstack/react-query@4.29.15(react-dom@18.2.0)(react@18.2.0):
+  /@tanstack/query-core@4.29.17:
-    resolution: {integrity: sha512-1zDkv95ljuJ623hhbYU8YIprPW2x6774kh3IQNEuZav62+S+Zr26uUOrE2zGRp9I1uO5Liw/0uYB3dWXQP5+3Q==}
+    resolution: {integrity: sha512-iDbO8yZOpm1lqgq6L8mpxGbKaoiyZSjthxEB3WGU7mNPYss9q4H3Q67+e2xXGwkemEVmtEX/WwvtFitrvVU8TA==}
+    dev: false
+
+  /@tanstack/react-query-devtools@4.29.17(@tanstack/react-query@4.29.17)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Dgd7c7ToCzJrpuyDZ0Rwx5bXSqWICOaB8sNSzo8YtwpWXuJcQ074qgb0kko5/CzIVDxhbG8WX5dnUwr5Xqa++g==}
+    peerDependencies:
+      '@tanstack/react-query': 4.29.17
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@tanstack/match-sorter-utils': 8.8.4
+      '@tanstack/react-query': 4.29.17(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      superjson: 1.12.4
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
+  /@tanstack/react-query@4.29.17(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-udOy/jgqiBHBAP93YPAU3QoVYO+Rtx9HT/10xGDQzC8iQU/wIxcIaT/usX+1NSzoUFYU5hUcPaNErPWZnR7XgA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -844,7 +869,8 @@ packages:
       react-native:
         optional: true
     dependencies:
-      '@tanstack/query-core': 4.29.15
+      '@tanstack/query-core': 4.29.17
+      client-only: 0.0.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       use-sync-external-store: 1.2.0(react@18.2.0)
@@ -1384,7 +1410,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.21.9
-      caniuse-lite: 1.0.30001507
+      caniuse-lite: 1.0.30001508
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -1432,7 +1458,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001507
+      caniuse-lite: 1.0.30001508
       electron-to-chromium: 1.4.440
       node-releases: 2.0.12
       update-browserslist-db: 1.0.11(browserslist@4.21.9)
@@ -1495,8 +1521,8 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
-  /caniuse-lite@1.0.30001507:
+  /caniuse-lite@1.0.30001508:
-    resolution: {integrity: sha512-SFpUDoSLCaE5XYL2jfqe9ova/pbQHEmbheDf5r4diNwbAgR3qxM9NQtfsiSscjqoya5K7kFcHPUQ+VsUkIJR4A==}
+    resolution: {integrity: sha512-sdQZOJdmt3GJs1UMNpCCCyeuS2IEGLXnHyAo9yIO5JJDjbjoVRij4M1qep6P6gFpptD1PqIYgzM+gwJbOi92mw==}
     dev: true
 
   /chalk@2.4.2:
@@ -1645,6 +1671,13 @@ packages:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
     dev: false
 
+  /copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
+    dependencies:
+      is-what: 4.1.15
+    dev: false
+
   /create-esm-loader@0.2.3:
     resolution: {integrity: sha512-cllzD6IU/mzXBs5OdQVWL3+ne5Elpu3Wdm7h5OldMbGXk76yr9XzHlQXWJ4zfs0ZAibe26rkbs4KvMAJm7fIZA==}
     engines: {node: '>=14.x'}
@@ -2937,6 +2970,11 @@ packages:
       call-bind: 1.0.2
     dev: false
 
+  /is-what@4.1.15:
+    resolution: {integrity: sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==}
+    engines: {node: '>=12.13'}
+    dev: false
+
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -4076,6 +4114,10 @@ packages:
       functions-have-names: 1.2.3
     dev: false
 
+  /remove-accents@0.4.2:
+    resolution: {integrity: sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==}
+    dev: false
+
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -4477,6 +4519,13 @@ packages:
       ts-interface-checker: 0.1.13
     dev: true
 
+  /superjson@1.12.4:
+    resolution: {integrity: sha512-vkpPQAxdCg9SLfPv5GPC5fnGrui/WryktoN9O5+Zif/14QIMjw+RITf/5LbBh+9QpBFb3KNvJth+puz2H8o6GQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      copy-anything: 3.0.5
+    dev: false
+
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}

src/app/auth/onboarding.tsx

@@ -1,37 +1,29 @@
-import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { usePublish } from "@libs/ndk";
 import { LoaderIcon } from "@shared/icons";
 import { ArrowRightCircleIcon } from "@shared/icons/arrowRightCircle";
-import { RelayContext } from "@shared/relayProvider";
 import { User } from "@shared/user";
-import { dateToUnix } from "@utils/date";
 import { useAccount } from "@utils/hooks/useAccount";
-import { useContext, useState } from "react";
+import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
 export function OnboardingScreen() {
-	const ndk = useContext(RelayContext);
+	const publish = usePublish();
 	const navigate = useNavigate();
 
 	const { status, account } = useAccount();
 	const [loading, setLoading] = useState(false);
 
-	const publish = async () => {
+	const submit = async () => {
 		try {
 			setLoading(true);
 
-			const event = new NDKEvent(ndk);
-			const signer = new NDKPrivateKeySigner(account.privkey);
-			ndk.signer = signer;
-
-			event.content =
-				"Running Lume, fighting for better future, join us here: https://lume.nu";
-			event.created_at = dateToUnix();
-			event.pubkey = account.pubkey;
-			event.kind = 1;
-			event.tags = [];
-
 			// publish event
-			event.publish();
+			publish({
+				content:
+					"Running Lume, fighting for better future, join us here: https://lume.nu",
+				kind: 1,
+				tags: [],
+			});
 
 			// redirect to home
 			setTimeout(() => navigate("/", { replace: true }), 1200);
@@ -81,7 +73,7 @@ export function OnboardingScreen() {
 				<div className="mt-4 w-full flex flex-col gap-2">
 					<button
 						type="button"
-						onClick={() => publish()}
+						onClick={() => submit()}
 						className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg px-6 font-medium text-zinc-100 bg-fuchsia-500 hover:bg-fuchsia-600"
 					>
 						{loading ? (

src/app/chat/components/messages/form.tsx

@@ -1,20 +1,14 @@
-import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { usePublish } from "@libs/ndk";
 import { EnterIcon } from "@shared/icons";
 import { MediaUploader } from "@shared/mediaUploader";
-import { RelayContext } from "@shared/relayProvider";
-import { useChatMessages } from "@stores/chats";
-import { dateToUnix } from "@utils/date";
 import { nip04 } from "nostr-tools";
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useState } from "react";
 
 export function ChatMessageForm({
 	receiverPubkey,
-	userPubkey,
 	userPrivkey,
 }: { receiverPubkey: string; userPubkey: string; userPrivkey: string }) {
-	const ndk = useContext(RelayContext);
+	const publish = usePublish();
-	const addMessage = useChatMessages((state: any) => state.add);
-
 	const [value, setValue] = useState("");
 
 	const encryptMessage = useCallback(async () => {
@@ -23,23 +17,10 @@ export function ChatMessageForm({
 
 	const submit = async () => {
 		const message = await encryptMessage();
+		const tags = [["p", receiverPubkey]];
 
-		const signer = new NDKPrivateKeySigner(userPrivkey);
+		// publish message
-		ndk.signer = signer;
+		publish({ content: message, kind: 4, tags });
-
-		const event = new NDKEvent(ndk);
-		// build event
-		event.content = message;
-		event.kind = 4;
-		event.created_at = dateToUnix();
-		event.pubkey = userPubkey;
-		event.tags = [["p", receiverPubkey]];
-
-		// publish event
-		event.publish();
-
-		// add message to store
-		addMessage(receiverPubkey, event);
 
 		// reset state
 		setValue("");

src/app/chat/index.tsx

@@ -1,14 +1,18 @@
 import { ChatMessageForm } from "@app/chat/components/messages/form";
 import { ChatMessageItem } from "@app/chat/components/messages/item";
 import { ChatSidebar } from "@app/chat/components/sidebar";
-import { getChatMessages } from "@libs/storage";
+import { createChat, getChatMessages } from "@libs/storage";
-import { useQuery } from "@tanstack/react-query";
+import { NDKSubscription } from "@nostr-dev-kit/ndk";
+import { RelayContext } from "@shared/relayProvider";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAccount } from "@utils/hooks/useAccount";
-import { useCallback, useRef } from "react";
+import { useCallback, useContext, useEffect, useRef } from "react";
 import { useParams } from "react-router-dom";
 import { Virtuoso } from "react-virtuoso";
 
 export function ChatScreen() {
+	const ndk = useContext(RelayContext);
+	const queryClient = useQueryClient();
 	const virtuosoRef = useRef(null);
 
 	const { pubkey } = useParams();
@@ -43,6 +47,51 @@ export function ChatScreen() {
 		[data],
 	);
 
+	const chat = useMutation({
+		mutationFn: (data: any) => {
+			return createChat(
+				data.id,
+				data.receiver_pubkey,
+				data.sender_pubkey,
+				data.content,
+				data.tags,
+				data.created_at,
+			);
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["chat", pubkey] });
+		},
+	});
+
+	useEffect(() => {
+		const sub: NDKSubscription = ndk.subscribe(
+			{
+				kinds: [4],
+				authors: [account.pubkey],
+				"#p": [pubkey],
+				since: Math.floor(Date.now() / 1000),
+			},
+			{
+				closeOnEose: false,
+			},
+		);
+
+		sub.addListener("event", (event) => {
+			chat.mutate({
+				id: event.id,
+				receiver_pubkey: pubkey,
+				sender_pubkey: event.pubkey,
+				content: event.content,
+				tags: event.tags,
+				created_at: event.created_at,
+			});
+		});
+
+		return () => {
+			sub.stop();
+		};
+	}, [pubkey]);
+
 	return (
 		<div className="h-full w-full grid grid-cols-3">
 			<div className="col-span-2 flex flex-col justify-between border-r border-zinc-900">

src/libs/ndk.tsx

@@ -2,8 +2,13 @@ import NDK, {
 	NDKConstructorParams,
 	NDKEvent,
 	NDKFilter,
+	NDKKind,
+	NDKPrivateKeySigner,
 } from "@nostr-dev-kit/ndk";
+import { RelayContext } from "@shared/relayProvider";
 import { FULL_RELAYS } from "@stores/constants";
+import { useAccount } from "@utils/hooks/useAccount";
+import { useContext } from "react";
 
 export async function initNDK(
 	relays?: string[],
@@ -39,3 +44,31 @@ export async function prefetchEvents(
 		});
 	});
 }
+
+export function usePublish() {
+	const { account } = useAccount();
+	const ndk = useContext(RelayContext);
+
+	if (!ndk.signer) {
+		const signer = new NDKPrivateKeySigner(account?.privkey);
+		ndk.signer = signer;
+	}
+
+	function publish({
+		content,
+		kind,
+		tags,
+	}: { content: string; kind: NDKKind; tags: string[][] }) {
+		const event = new NDKEvent(ndk);
+
+		event.content = content;
+		event.kind = kind;
+		event.created_at = Math.floor(Date.now() / 1000);
+		event.pubkey = account.pubkey;
+		event.tags = tags;
+
+		event.publish();
+	}
+
+	return publish;
+}

src/main.tsx

@@ -1,6 +1,7 @@
 import App from "./app";
 import { RelayProvider } from "@shared/relayProvider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { createRoot } from "react-dom/client";
 
 const queryClient = new QueryClient({
@@ -19,5 +20,6 @@ root.render(
 		<RelayProvider>
 			<App />
 		</RelayProvider>
+		<ReactQueryDevtools initialIsOpen={false} />
 	</QueryClientProvider>,
 );

src/shared/composer/types/post.tsx

@@ -1,12 +1,10 @@
-import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { usePublish } from "@libs/ndk";
 import { Button } from "@shared/button";
 import { ImageUploader } from "@shared/composer/imageUploader";
 import { TrashIcon } from "@shared/icons";
 import { MentionNote } from "@shared/notes/mentions/note";
-import { RelayContext } from "@shared/relayProvider";
 import { useComposer } from "@stores/composer";
-import { dateToUnix } from "@utils/date";
+import { useCallback, useMemo, useState } from "react";
-import { useCallback, useContext, useMemo, useState } from "react";
 import { Node, Transforms, createEditor } from "slate";
 import { withHistory } from "slate-history";
 import {
@@ -61,7 +59,7 @@ const ImagePreview = ({
 };
 
 export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
-	const ndk = useContext(RelayContext);
+	const publish = usePublish();
 	const [repost, toggle] = useComposer((state: any) => [
 		state.repost,
 		state.toggle,
@@ -86,29 +84,24 @@ export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
 	}, []);
 
 	const submit = () => {
-		// serialize content
+		let tags: string[][] = [];
-		const serializedContent = serialize(content);
+		let kind: number;
-
-		const signer = new NDKPrivateKeySigner(privkey);
-		ndk.signer = signer;
-
-		const event = new NDKEvent(ndk);
-		event.content = serializedContent;
-		event.created_at = dateToUnix();
-		event.pubkey = pubkey;
 		if (repost.id && repost.pubkey) {
-			event.kind = 6;
+			kind = 6;
-			event.tags = [
+			tags = [
 				["e", repost.id],
 				["p", repost.pubkey],
 			];
 		} else {
-			event.kind = 1;
+			kind = 1;
-			event.tags = [];
+			tags = [];
 		}
 
-		// publish event
+		// serialize content
-		event.publish();
+		const serializedContent = serialize(content);
+
+		// publish message
+		publish({ content: serializedContent, kind, tags });
 
 		// close modal
 		toggle(false);

src/shared/notes/preview/link.tsx

@@ -34,7 +34,10 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 					) : (
 						<>
 							<Image
-								src={data.images[0]}
+								src={
+									data.images?.[0] ||
+									"https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
+								}
 								fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
 								alt={urls[0]}
 								className="w-full h-44 object-cover rounded-t-lg"

src/shared/notes/replies/form.tsx

@@ -1,15 +1,13 @@
-import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { usePublish } from "@libs/ndk";
 import { Button } from "@shared/button";
 import { Image } from "@shared/image";
-import { RelayContext } from "@shared/relayProvider";
 import { DEFAULT_AVATAR } from "@stores/constants";
-import { dateToUnix } from "@utils/date";
 import { useAccount } from "@utils/hooks/useAccount";
 import { useProfile } from "@utils/hooks/useProfile";
-import { useContext, useState } from "react";
+import { useState } from "react";
 
 export function NoteReplyForm({ id }: { id: string }) {
-	const ndk = useContext(RelayContext);
+	const publish = usePublish();
 
 	const { account } = useAccount();
 	const { status, user } = useProfile(account.npub);
@@ -17,19 +15,10 @@ export function NoteReplyForm({ id }: { id: string }) {
 	const [value, setValue] = useState("");
 
 	const submitEvent = () => {
-		const signer = new NDKPrivateKeySigner(account.privkey);
+		const tags = [["e", id]];
-		ndk.signer = signer;
-
-		const event = new NDKEvent(ndk);
-		// build event
-		event.content = value;
-		event.kind = 1;
-		event.created_at = dateToUnix();
-		event.pubkey = account.pubkey;
-		event.tags = [["e", id]];
 
 		// publish event
-		event.publish();
+		publish({ content: value, kind: 1, tags });
 
 		// reset form
 		setValue("");

src/shared/user.tsx

@@ -46,7 +46,7 @@ export function User({
 			</Popover.Button>
 			<div className="flex flex-wrap items-baseline gap-1">
 				<h5
-					className={`text-zinc-200 font-medium leading-none truncate ${
+					className={`text-zinc-100 font-semibold leading-none truncate ${
 						size === "small" ? "max-w-[7rem]" : "max-w-[10rem]"
 					}`}
 				>

src/stores/chats.tsx

@@ -1,63 +0,0 @@
-import { createChat, getChatMessages, getChatsByPubkey } from "@libs/storage";
-import { create } from "zustand";
-import { immer } from "zustand/middleware/immer";
-
-export const useChats = create(
-	immer((set: any) => ({
-		chats: [],
-		fetch: async (pubkey: string) => {
-			const response: any = await getChatsByPubkey(pubkey);
-			set({ chats: response });
-		},
-		add: async (pubkey: string) => {
-			set((state) => {
-				const target = state.chats.findIndex(
-					(m: { sender_pubkey: string }) => m.sender_pubkey === pubkey,
-				);
-				if (target !== -1) {
-					state.chats[target]["new_messages"] =
-						state.chats[target]["new_messages"] + 1 || 1;
-				} else {
-					state.chats.push({ sender_pubkey: pubkey, new_messages: 1 });
-				}
-			});
-		},
-		clearBubble: (pubkey: string) => {
-			set((state) => {
-				const target = state.chats.findIndex(
-					(m: { sender_pubkey: string }) => m.sender_pubkey === pubkey,
-				);
-				state.chats[target]["new_messages"] = 0;
-			});
-		},
-	})),
-);
-
-export const useChatMessages = create((set) => ({
-	messages: [],
-	fetch: async (receiver_pubkey: string, sender_pubkey: string) => {
-		const response: any = await getChatMessages(receiver_pubkey, sender_pubkey);
-		set({ messages: response });
-	},
-	add: async (receiver: string, event: any) => {
-		const save = await createChat(
-			event.id,
-			receiver,
-			event.pubkey,
-			event.content,
-			event.tags,
-			event.created_at,
-		);
-		if (save) {
-			set((state: any) => ({
-				messages: [
-					...state.messages,
-					{ ...event, sender_pubkey: event.pubkey, receiver_pubkey: receiver },
-				],
-			}));
-		}
-	},
-	clear: () => {
-		set(() => ({ messages: [] }));
-	},
-}));

src/stores/constants.tsx

@@ -66,5 +66,7 @@ export const OPENGRAPH = {
 export const FULL_RELAYS = [
 	"wss://relay.damus.io",
 	"wss://relay.nostr.band/all",
+	"wss://relayable.org",
+	"wss://nostr.mutinywallet.com",
 	"wss://relay.nostrgraph.net",
 ];