nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 03:03:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

polish

Browse Source
This commit is contained in:
Ren Amamiya 2023-06-26 21:08:36 +07:00
parent b2dd231f00
commit 2f553d8039
13 changed files with 192 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -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",

71
pnpm-lock.yaml
View File

@ -11,8 +11,11 @@ dependencies:
specifier: ^0.5.13
version: 0.5.13(typescript@4.9.5)
'@tanstack/react-query':
specifier: ^4.29.15
version: 4.29.15(react-dom@18.2.0)(react@18.2.0)
specifier: ^4.29.17
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:
resolution: {integrity: sha512-Recc1d5rjHesKhzlH3Aw66v+vQxtB9OHEXP/vxgEcEJ0DwEpfe3EQ4id20vuBJHY2XRjfgWGmUs6ZgK6PSsTXA==}
/@tanstack/match-sorter-utils@8.8.4:
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):
resolution: {integrity: sha512-1zDkv95ljuJ623hhbYU8YIprPW2x6774kh3IQNEuZav62+S+Zr26uUOrE2zGRp9I1uO5Liw/0uYB3dWXQP5+3Q==}
/@tanstack/query-core@4.29.17:
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:
resolution: {integrity: sha512-SFpUDoSLCaE5XYL2jfqe9ova/pbQHEmbheDf5r4diNwbAgR3qxM9NQtfsiSscjqoya5K7kFcHPUQ+VsUkIJR4A==}
/caniuse-lite@1.0.30001508:
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'}

30
src/app/auth/onboarding.tsx
View File

@ -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 ? (

31
src/app/chat/components/messages/form.tsx
View File

@ -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 addMessage = useChatMessages((state: any) => state.add);
const publish = usePublish();
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);
ndk.signer = signer;
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);
// publish message
publish({ content: message, kind: 4, tags });
// reset state
setValue("");

55
src/app/chat/index.tsx
View File

@ -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 { useQuery } from "@tanstack/react-query";
import { createChat, getChatMessages } from "@libs/storage";
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">

33
src/libs/ndk.tsx
View File

@ -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;
}

2
src/main.tsx
View File

@ -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>,
);

35
src/shared/composer/types/post.tsx
View File

@ -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, useContext, useMemo, useState } from "react";
import { useCallback, 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
const serializedContent = serialize(content);
const signer = new NDKPrivateKeySigner(privkey);
ndk.signer = signer;
const event = new NDKEvent(ndk);
event.content = serializedContent;
event.created_at = dateToUnix();
event.pubkey = pubkey;
let tags: string[][] = [];
let kind: number;
if (repost.id && repost.pubkey) {
event.kind = 6;
event.tags = [
kind = 6;
tags = [
["e", repost.id],
["p", repost.pubkey],
];
} else {
event.kind = 1;
event.tags = [];
kind = 1;
tags = [];
}
// publish event
event.publish();
// serialize content
const serializedContent = serialize(content);
// publish message
publish({ content: serializedContent, kind, tags });
// close modal
toggle(false);

5
src/shared/notes/preview/link.tsx
View File

@ -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"

21
src/shared/notes/replies/form.tsx
View File

@ -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);
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]];
const tags = [["e", id]];
// publish event
event.publish();
publish({ content: value, kind: 1, tags });
// reset form
setValue("");

2
src/shared/user.tsx
View File

@ -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]"
}`}
>

63
src/stores/chats.tsx
View File

@ -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: [] }));
},
}));

2
src/stores/constants.tsx
View File

@ -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",
];