reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-24 18:31:40 +07:00
parent 21d22320b3
commit 85b30f770c
102 changed files with 1844 additions and 2014 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/shared/accounts/active.tsx
View File

@@ -1,26 +1,25 @@
import { getLastLogin } from "@libs/storage";
import { Image } from "@shared/image";
import { NetworkStatusIndicator } from "@shared/networkStatusIndicator";
import { RelayContext } from "@shared/relayProvider";
import { useActiveAccount } from "@stores/accounts";
import { useChannels } from "@stores/channels";
import { useChatMessages, useChats } from "@stores/chats";
import { useChats } from "@stores/chats";
import { DEFAULT_AVATAR } from "@stores/constants";
import { useProfile } from "@utils/hooks/useProfile";
import { sendNativeNotification } from "@utils/notification";
import { useContext } from "react";
import useSWRSubscription from "swr/subscription";
import { useContext, useEffect } from "react";
const lastLogin = await getLastLogin();
export function ActiveAccount({ data }: { data: any }) {
const ndk = useContext(RelayContext);
const lastLogin = useActiveAccount((state: any) => state.lastLogin);
const notifyChat = useChats((state: any) => state.add);
const saveChat = useChatMessages((state: any) => state.add);
const notifyChannel = useChannels((state: any) => state.add);
const { user } = useProfile(data.pubkey);
const { status, user } = useProfile(data.pubkey);
useSWRSubscription(user ? ["activeAccount", data.pubkey] : null, () => {
useEffect(() => {
const since = lastLogin > 0 ? lastLogin : Math.floor(Date.now() / 1000);
// subscribe to channel
const sub = ndk.subscribe(
@@ -41,8 +40,6 @@ export function ActiveAccount({ data }: { data: any }) {
sendNativeNotification("Someone mention you");
break;
case 4:
// save
saveChat(data.pubkey, event);
// update state
notifyChat(event.pubkey);
// send native notifiation
@@ -62,16 +59,20 @@ export function ActiveAccount({ data }: { data: any }) {
return () => {
sub.stop();
};
});
}, []);
return (
<button type="button" className="relative inline-block h-9 w-9">
<Image
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={data.npub}
className="h-9 w-9 rounded object-cover"
/>
{status === "loading" ? (
<div className="w-9 h-9 rounded bg-zinc-800 animate-pulse" />
) : (
<Image
src={user.image}
fallback={DEFAULT_AVATAR}
alt={data.npub}
className="h-9 w-9 rounded object-cover"
/>
)}
<NetworkStatusIndicator />
</button>
);

27
src/shared/activeLink.tsx
View File

@@ -1,27 +0,0 @@
import { Link } from "@shared/link";
import { usePageContext } from "@utils/hooks/usePageContext";
import { twMerge } from "tailwind-merge";
export function ActiveLink({
href,
className,
activeClassName,
children,
}: {
href: string;
className: string;
activeClassName: string;
children: React.ReactNode;
}) {
const pageContext = usePageContext();
const pathName = pageContext.urlPathname;
return (
<Link
href={href}
className={twMerge(className, href === pathName ? activeClassName : "")}
>
{children}
</Link>
);
}

7
src/shared/appHeader.tsx
View File

@@ -1,12 +1,15 @@
import { ArrowLeftIcon, ArrowRightIcon } from "@shared/icons";
import { useNavigate } from "react-router-dom";
export function AppHeader({ reverse }: { reverse?: boolean }) {
const navigate = useNavigate();
const goBack = () => {
window.history.back();
navigate(-1);
};
const goForward = () => {
window.history.forward();
navigate(1);
};
return (

16
src/shared/appLayout.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { Navigation } from "@shared/navigation";
import { Outlet, ScrollRestoration } from "react-router-dom";
export function AppLayout() {
return (
<div className="flex w-screen h-screen">
<div className="relative flex flex-row shrink-0">
<Navigation />
</div>
<div className="w-full h-full">
<Outlet />
<ScrollRestoration />
</div>
</div>
);
}

65
src/shared/authLayout.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { ArrowLeftIcon, ArrowRightIcon } from "@shared/icons";
import { platform } from "@tauri-apps/api/os";
import { Outlet, useNavigate } from "react-router-dom";
const platformName = await platform();
export function AuthLayout() {
const navigate = useNavigate();
const goBack = () => {
navigate(-1);
};
const goForward = () => {
navigate(1);
};
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-11 shrink-0 border border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<div
data-tauri-drag-region
className="flex h-full w-full flex-1 items-center px-2"
>
<div
className={`flex h-full items-center gap-2 ${
platformName === "darwin" ? "pl-[68px]" : ""
}`}
>
<button
type="button"
onClick={() => goBack()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowLeftIcon
width={16}
height={16}
className="text-zinc-500 group-hover:text-zinc-300"
/>
</button>
<button
type="button"
onClick={() => goForward()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowRightIcon
width={16}
height={16}
className="text-zinc-500 group-hover:text-zinc-300"
/>
</button>
</div>
</div>
</div>
<div className="relative flex min-h-0 w-full flex-1">
<Outlet />
</div>
</div>
</div>
);
}

3
src/shared/composer/modal.tsx
View File

@@ -15,7 +15,8 @@ import { Fragment } from "react";
import { useHotkeys } from "react-hotkeys-hook";
export function Composer() {
const account = useActiveAccount((state: any) => state.account);
const account = useActiveAccount((state) => state.account);
const [toggle, open] = useComposer((state: any) => [
state.toggleModal,
state.open,

23
src/shared/layout.tsx
View File

@@ -1,23 +0,0 @@
import { Navigation } from "@shared/navigation";
import useSWR from "swr";
const fetcher = async () => {
const { platform } = await import("@tauri-apps/api/os");
return platform();
};
export function DefaultLayout({ children }: { children: React.ReactNode }) {
const { data: platform } = useSWR(
typeof window !== "undefined" ? "platform" : null,
fetcher,
);
return (
<div className="flex w-screen h-screen">
<div className="relative flex flex-row shrink-0">
<Navigation reverse={platform !== "darwin"} />
</div>
<div className="w-full h-full">{children}</div>
</div>
);
}

18
src/shared/link.tsx
View File

@@ -1,18 +0,0 @@
import { ReactNode } from "react";
import { navigate } from "vite-plugin-ssr/client/router";
export function Link({
href,
className,
children,
}: { href: string; className?: string; children: ReactNode }) {
const goto = () => {
navigate(href, { keepScrollPosition: true });
};
return (
<button type="button" onClick={() => goto()} className={className}>
{children}
</button>
);
}

44
src/shared/multiAccounts.tsx
View File

@@ -1,18 +1,19 @@
import { Transition } from "@headlessui/react";
import { getAccounts, getActiveAccount } from "@libs/storage";
import { getActiveAccount } from "@libs/storage";
import { ActiveAccount } from "@shared/accounts/active";
import { InactiveAccount } from "@shared/accounts/inactive";
import { PlusIcon, VerticalDotsIcon } from "@shared/icons";
import { Link } from "@shared/link";
import { VerticalDotsIcon } from "@shared/icons";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import useSWR from "swr";
const allFetcher = () => getAccounts();
const fetcher = () => getActiveAccount();
import { Link } from "react-router-dom";
export function MultiAccounts() {
const { data: accounts }: any = useSWR("allAccounts", allFetcher);
const { data: activeAccount }: any = useSWR("activeAccount", fetcher);
const {
status,
data: activeAccount,
isFetching,
} = useQuery(["activeAccount"], async () => {
return await getActiveAccount();
});
const [open, setOpen] = useState(false);
@@ -24,28 +25,11 @@ export function MultiAccounts() {
<div className="flex flex-col gap-2 rounded-xl p-2 border-t border-zinc-800/50 bg-zinc-900/80 backdrop-blur-md">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{!activeAccount ? (
{status === "loading" || isFetching ? (
<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900" />
) : (
<ActiveAccount data={activeAccount} />
)}
{!accounts ? (
<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900" />
) : (
accounts.map((account: { is_active: number; pubkey: string }) => (
<InactiveAccount key={account.pubkey} data={account} />
))
)}
<button
type="button"
className="group relative flex h-9 w-9 shrink items-center justify-center rounded border border-dashed border-zinc-600 hover:border-zinc-400"
>
<PlusIcon
width={16}
height={16}
className="text-zinc-400 group-hover:text-zinc-100"
/>
</button>
</div>
<button
type="button"
@@ -66,13 +50,13 @@ export function MultiAccounts() {
className="flex flex-col items-start justify-start gap-1 pt-1.5 border-t border-zinc-800 transform"
>
<Link
href="/app/settings"
to="/app/settings"
className="w-full py-2 px-2 rounded hover:bg-zinc-800 text-zinc-100 text-start text-sm"
>
Settings
</Link>
<Link
href="/app/logout"
to="/app/logout"
className="w-full py-2 px-2 rounded hover:bg-zinc-800 text-zinc-100 text-start text-sm"
>
Logout

33
src/shared/navigation.tsx
View File

@@ -1,13 +1,14 @@
import { ChannelsList } from "@app/channel/components/list";
import { ChatsList } from "@app/chat/components/list";
import { Disclosure } from "@headlessui/react";
import { ActiveLink } from "@shared/activeLink";
import { AppHeader } from "@shared/appHeader";
import { Composer } from "@shared/composer/modal";
import { NavArrowDownIcon, SpaceIcon, TrendingIcon } from "@shared/icons";
import { MultiAccounts } from "@shared/multiAccounts";
import { NavLink } from "react-router-dom";
import { twMerge } from "tailwind-merge";
export function Navigation({ reverse }: { reverse?: boolean }) {
export function Navigation({ reverse = false }: { reverse?: boolean }) {
return (
<div
className={`relative flex w-[232px] flex-col gap-3 ${
@@ -27,20 +28,28 @@ export function Navigation({ reverse }: { reverse?: boolean }) {
</h3>
</div>
<div className="flex flex-col">
<ActiveLink
href="/app/space"
className="flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200"
activeClassName="bg-zinc-900/50"
<NavLink
to="/app/space"
className={({ isActive }) =>
twMerge(
"flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200",
isActive ? "bg-zinc-900/50" : "",
)
}
>
<span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<SpaceIcon width={12} height={12} className="text-zinc-100" />
</span>
<span className="font-medium">Spaces</span>
</ActiveLink>
<ActiveLink
href="/app/trending"
className="flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200"
activeClassName="bg-zinc-900/50"
</NavLink>
<NavLink
to="/app/trending"
className={({ isActive }) =>
twMerge(
"flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200",
isActive ? "bg-zinc-900/50" : "",
)
}
>
<span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<TrendingIcon
@@ -50,7 +59,7 @@ export function Navigation({ reverse }: { reverse?: boolean }) {
/>
</span>
<span className="font-medium">Trending</span>
</ActiveLink>
</NavLink>
</div>
</div>
{/* Channels */}

11
src/shared/notes/mentions/note.tsx
View File

@@ -3,18 +3,19 @@ import { Kind1063 } from "@shared/notes/contents/kind1063";
import { NoteSkeleton } from "@shared/notes/skeleton";
import { User } from "@shared/user";
import { useEvent } from "@utils/hooks/useEvent";
import { parser } from "@utils/parser";
import { memo } from "react";
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
const data = useEvent(id);
const { status, data, isFetching } = useEvent(id);
const kind1 = data?.kind === 1 ? parser(data) : null;
const kind1 = data?.kind === 1 ? data.content : null;
const kind1063 = data?.kind === 1063 ? data.tags : null;
return (
<div className="mt-3 rounded-lg border border-zinc-800 px-3 py-3">
{data ? (
{isFetching || status === "loading" ? (
<NoteSkeleton />
) : (
<>
<User pubkey={data.pubkey} time={data.created_at} size="small" />
<div className="mt-2">
@@ -37,8 +38,6 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
)}
</div>
</>
) : (
<NoteSkeleton />
)}
</div>
);

4
src/shared/notes/mentions/user.tsx
View File

@@ -1,13 +1,13 @@
import { Link } from "@shared/link";
import { useProfile } from "@utils/hooks/useProfile";
import { shortenKey } from "@utils/shortenKey";
import { Link } from "react-router-dom";
export function MentionUser({ pubkey }: { pubkey: string }) {
const { user } = useProfile(pubkey);
return (
<Link
href={`/app/user?pubkey=${pubkey}`}
to={`/app/user/${pubkey}`}
className="text-fuchsia-500 hover:text-fuchsia-600 no-underline font-normal"
>
@{user?.name || user?.displayName || shortenKey(pubkey)}

103
src/shared/notes/metadata.tsx
View File

@@ -5,57 +5,9 @@ import { NoteReply } from "@shared/notes/metadata/reply";
import { NoteRepost } from "@shared/notes/metadata/repost";
import { NoteZap } from "@shared/notes/metadata/zap";
import { RelayContext } from "@shared/relayProvider";
import { useQuery } from "@tanstack/react-query";
import { decode } from "light-bolt11-decoder";
import { useContext } from "react";
import useSWR from "swr";
const fetcher = async ([, ndk, id]) => {
let replies = 0;
let reposts = 0;
let zap = 0;
const filter: NDKFilter = {
"#e": [id],
kinds: [1, 6, 9735],
};
const events = await ndk.fetchEvents(filter);
events.forEach((event: NDKEvent) => {
switch (event.kind) {
case 1:
replies += 1;
createReplyNote(
id,
event.id,
event.pubkey,
event.kind,
event.tags,
event.content,
event.created_at,
);
break;
case 6:
reposts += 1;
break;
case 9735: {
const bolt11 = event.tags.find((tag) => tag[0] === "bolt11")[1];
if (bolt11) {
const decoded = decode(bolt11);
const amount = decoded.sections.find(
(item) => item.name === "amount",
);
const sats = amount.value / 1000;
zap += sats;
}
break;
}
default:
break;
}
});
return { replies, reposts, zap };
};
export function NoteMetadata({
id,
@@ -67,11 +19,60 @@ export function NoteMetadata({
currentBlock?: number;
}) {
const ndk = useContext(RelayContext);
const { data, isLoading } = useSWR(["note-metadata", ndk, id], fetcher);
const { status, data, isFetching } = useQuery(
["note-metadata", id],
async () => {
let replies = 0;
let reposts = 0;
let zap = 0;
const filter: NDKFilter = {
"#e": [id],
kinds: [1, 6, 9735],
};
const events = await ndk.fetchEvents(filter);
events.forEach((event: NDKEvent) => {
switch (event.kind) {
case 1:
replies += 1;
createReplyNote(
id,
event.id,
event.pubkey,
event.kind,
event.tags,
event.content,
event.created_at,
);
break;
case 6:
reposts += 1;
break;
case 9735: {
const bolt11 = event.tags.find((tag) => tag[0] === "bolt11")[1];
if (bolt11) {
const decoded = decode(bolt11);
const amount = decoded.sections.find(
(item) => item.name === "amount",
);
const sats = amount.value / 1000;
zap += sats;
}
break;
}
default:
break;
}
});
return { replies, reposts, zap };
},
);
return (
<div className="inline-flex items-center w-full h-12 mt-2">
{!data || isLoading ? (
{status === "loading" || isFetching ? (
<>
<div className="w-20 group inline-flex items-center gap-1.5">
<ReplyIcon

11
src/shared/notes/parent.tsx
View File

@@ -4,21 +4,22 @@ import { NoteMetadata } from "@shared/notes/metadata";
import { NoteSkeleton } from "@shared/notes/skeleton";
import { User } from "@shared/user";
import { useEvent } from "@utils/hooks/useEvent";
import { parser } from "@utils/parser";
export function NoteParent({
id,
currentBlock,
}: { id: string; currentBlock: number }) {
const data = useEvent(id);
const { status, data, isFetching } = useEvent(id);
const kind1 = data?.kind === 1 ? parser(data) : null;
const kind1 = data?.kind === 1 ? data.content : null;
const kind1063 = data?.kind === 1063 ? data.tags : null;
return (
<div className="relative overflow-hidden flex flex-col pb-6">
<div className="absolute left-[18px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
{data ? (
{isFetching || status === "loading" ? (
<NoteSkeleton />
) : (
<>
<User pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-5 pl-[49px]">
@@ -46,8 +47,6 @@ export function NoteParent({
/>
</div>
</>
) : (
<NoteSkeleton />
)}
</div>
);

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

@@ -1,16 +1,26 @@
import { Image } from "@shared/image";
import { useOpenGraph } from "@utils/hooks/useOpenGraph";
function isValidURL(string: string) {
let url: URL;
try {
url = new URL(string);
} catch (_) {
return false;
}
return true;
}
export function LinkPreview({ urls }: { urls: string[] }) {
const domain = new URL(urls[0]);
const { data, error, isLoading } = useOpenGraph(urls[0]);
const { status, data, error, isFetching } = useOpenGraph(urls[0]);
return (
<div className="mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
{error && <p>failed to load</p>}
{isLoading || !data ? (
{isFetching || status === "loading" ? (
<div className="flex flex-col">
<div className="w-full h-16 bg-zinc-700 animate-pulse" />
<div className="w-full h-44 bg-zinc-700 animate-pulse" />
<div className="flex flex-col gap-2 px-3 py-3">
<div className="w-2/3 h-3 rounded bg-zinc-700 animate-pulse" />
<div className="w-3/4 h-3 rounded bg-zinc-700 animate-pulse" />
@@ -19,6 +29,20 @@ export function LinkPreview({ urls }: { urls: string[] }) {
</span>
</div>
</div>
) : !data ? (
<a
className="flex flex-col px-3 py-3 rounded-lg border border-transparent hover:border-fuchsia-900"
href={urls[0]}
target="_blank"
rel="noreferrer"
>
<p className="leading-none text-sm text-zinc-400 line-clamp-3">
Can't fetch open graph, click to open website directly
</p>
<span className="mt-2.5 leading-none text-sm text-zinc-500">
{domain.hostname}
</span>
</a>
) : (
<a
className="flex flex-col rounded-lg border border-transparent hover:border-fuchsia-900"
@@ -26,13 +50,20 @@ export function LinkPreview({ urls }: { urls: string[] }) {
target="_blank"
rel="noreferrer"
>
{data["og:image"] && (
{isValidURL(data["og:image"]) ? (
<Image
src={data["og:image"]}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="w-full h-44 object-cover rounded-t-lg bg-white"
/>
) : (
<Image
src="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="w-full h-44 object-cover rounded-t-lg bg-white"
/>
)}
<div className="flex flex-col gap-2 px-3 py-3">
<h5 className="leading-none font-medium text-zinc-200">

10
src/shared/notes/preview/video.tsx
View File

@@ -1,17 +1,9 @@
import { MediaOutlet, MediaPlayer } from "@vidstack/react";
export function VideoPreview({ urls }: { urls: string[] }) {
return (
<div
onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => e.stopPropagation()}
className="relative mt-3 max-w-[420px] flex w-full flex-col overflow-hidden rounded-lg bg-zinc-950"
>
{urls.map((url: string) => (
<MediaPlayer key={url} src={urls[0]} poster="" controls>
<MediaOutlet />
</MediaPlayer>
))}
</div>
/>
);
}

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

@@ -10,8 +10,9 @@ import { useContext, useState } from "react";
export function NoteReplyForm({ id }: { id: string }) {
const ndk = useContext(RelayContext);
const account = useActiveAccount((state: any) => state.account);
const { user } = useProfile(account.npub);
const account = useActiveAccount((state) => state.account);
const { status, user } = useProfile(account.npub);
const [value, setValue] = useState("");
@@ -46,35 +47,41 @@ export function NoteReplyForm({ id }: { id: string }) {
/>
</div>
<div className="border-t border-zinc-800 w-full py-3 px-5">
<div className="flex w-full items-center justify-between">
<div className="inline-flex items-center gap-2">
<div className="relative h-9 w-9 shrink-0 rounded">
<Image
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={account.npub}
className="h-9 w-9 rounded-md bg-white object-cover"
/>
{status === "loading" ? (
<div>
<p>Loading...</p>
</div>
) : (
<div className="flex w-full items-center justify-between">
<div className="inline-flex items-center gap-2">
<div className="relative h-9 w-9 shrink-0 rounded">
<Image
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={account.npub}
className="h-9 w-9 rounded-md bg-white object-cover"
/>
</div>
<div>
<p className="mb-px leading-none text-sm text-zinc-400">
Reply as
</p>
<p className="leading-none text-sm font-medium text-zinc-100">
{user?.nip05 || user?.name}
</p>
</div>
</div>
<div>
<p className="mb-px leading-none text-sm text-zinc-400">
Reply as
</p>
<p className="leading-none text-sm font-medium text-zinc-100">
{user?.nip05 || user?.name}
</p>
<div className="flex items-center gap-2">
<Button
onClick={() => submitEvent()}
disabled={value.length === 0 ? true : false}
preset="publish"
>
Reply
</Button>
</div>
</div>
<div className="flex items-center gap-2">
<Button
onClick={() => submitEvent()}
disabled={value.length === 0 ? true : false}
preset="publish"
>
Reply
</Button>
</div>
</div>
)}
</div>
</div>
);

8
src/shared/notes/replies/list.tsx
View File

@@ -2,12 +2,12 @@ import { getReplies } from "@libs/storage";
import { NDKEvent } from "@nostr-dev-kit/ndk";
import { EmptyIcon } from "@shared/icons";
import { Reply } from "@shared/notes/replies/item";
import useSWR from "swr";
const fetcher = ([, id]) => getReplies(id);
import { useQuery } from "@tanstack/react-query";
export function RepliesList({ parent_id }: { parent_id: string }) {
const { data }: any = useSWR(["note-replies", parent_id], fetcher);
const { data } = useQuery(["replies", parent_id], async () => {
return await getReplies(parent_id);
});
return (
<div className="mt-5">

11
src/shared/notes/repost.tsx
View File

@@ -4,7 +4,6 @@ import { NoteMetadata } from "@shared/notes/metadata";
import { NoteSkeleton } from "@shared/notes/skeleton";
import { User } from "@shared/user";
import { useEvent } from "@utils/hooks/useEvent";
import { parser } from "@utils/parser";
import { getRepostID } from "@utils/transform";
import { LumeEvent } from "@utils/types";
@@ -13,14 +12,16 @@ export function Repost({
currentBlock,
}: { event: LumeEvent; currentBlock?: number }) {
const repostID = getRepostID(event.tags);
const data = useEvent(repostID);
const { status, data, isFetching } = useEvent(repostID);
const kind1 = data?.kind === 1 ? parser(data) : null;
const kind1 = data?.kind === 1 ? data.content : null;
const kind1063 = data?.kind === 1063 ? data.tags : null;
return (
<div className="relative overflow-hidden flex flex-col mt-12">
{data ? (
{isFetching || status === "loading" ? (
<NoteSkeleton />
) : (
<>
<User pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-5 pl-[49px]">
@@ -48,8 +49,6 @@ export function Repost({
/>
</div>
</>
) : (
<NoteSkeleton />
)}
</div>
);

13
src/shared/protected.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { useAccount } from "@utils/hooks/useAccount";
import { ReactNode } from "react";
import { Navigate } from "react-router-dom";
export function Protected({ children }: { children: ReactNode }) {
const { status, account } = useAccount();
if (status === "success" && !account) {
return <Navigate to="/auth/welcome" replace />;
}
return children;
}

5
src/shared/relayProvider.tsx
View File

@@ -1,9 +1,12 @@
import { initNDK } from "@libs/ndk";
import NDK from "@nostr-dev-kit/ndk";
import { FULL_RELAYS } from "@stores/constants";
import { createContext } from "react";
export const RelayContext = createContext<NDK>(null);
const ndk = await initNDK();
const ndk = new NDK({ explicitRelayUrls: FULL_RELAYS });
await ndk.connect();
export function RelayProvider({ children }: { children: React.ReactNode }) {
return <RelayContext.Provider value={ndk}>{children}</RelayContext.Provider>;

6
src/shared/user.tsx
View File

@@ -1,12 +1,12 @@
import { Popover, Transition } from "@headlessui/react";
import { Image } from "@shared/image";
import { Link } from "@shared/link";
import { DEFAULT_AVATAR } from "@stores/constants";
import { useProfile } from "@utils/hooks/useProfile";
import { shortenKey } from "@utils/shortenKey";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { Fragment } from "react";
import { Link } from "react-router-dom";
dayjs.extend(relativeTime);
@@ -96,13 +96,13 @@ export function User({
</div>
<div className="flex items-center gap-2 px-3 py-3">
<Link
href={`/app/user?pubkey=${pubkey}`}
to={`/app/user/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-700 hover:bg-fuchsia-500 text-sm font-medium"
>
View profile
</Link>
<Link
href={`/app/chat?pubkey=${pubkey}`}
to={`/app/chat/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-700 hover:bg-fuchsia-500 text-sm font-medium"
>
Message