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

migrated to nextjs 13 app dir

Browse Source
This commit is contained in:
Ren Amamiya
2023-04-15 09:06:29 +07:00
parent da38ced72c
commit d59cc041d5
56 changed files with 617 additions and 807 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/channels/[id]/page.tsx Normal file
View File

@@ -0,0 +1,71 @@
'use client';
import { ChannelMessages } from '@components/channels/messages/index';
import FormChannelMessage from '@components/form/channelMessage';
import { RelayContext } from '@components/relaysProvider';
import { channelReplyAtom } from '@stores/channel';
import useLocalStorage from '@rehooks/local-storage';
import { useResetAtom } from 'jotai/utils';
import { useContext, useEffect, useRef, useState } from 'react';
export default function Page({ params }: { params: { id: string } }) {
const [pool, relays]: any = useContext(RelayContext);
const [messages, setMessages] = useState([]);
const [activeAccount]: any = useLocalStorage('activeAccount', {});
const resetChannelReply = useResetAtom(channelReplyAtom);
const muted = useRef(new Set());
const hided = useRef(new Set());
useEffect(() => {
// reset channel reply
resetChannelReply();
// subscribe event
const unsubscribe = pool.subscribe(
[
{
authors: [activeAccount.pubkey],
kinds: [43, 44],
since: 0,
},
{
'#e': [params.id],
kinds: [42],
since: 0,
},
],
relays,
(event: any) => {
if (event.kind === 44) {
muted.current = muted.current.add(event.tags[0][1]);
} else if (event.kind === 43) {
hided.current = hided.current.add(event.tags[0][1]);
} else {
if (muted.current.has(event.pubkey)) {
console.log('muted');
} else if (hided.current.has(event.id)) {
console.log('hided');
} else {
setMessages((messages) => [event, ...messages]);
}
}
}
);
return () => {
unsubscribe();
};
}, [pool, relays, activeAccount.pubkey, params.id, resetChannelReply]);
return (
<div className="flex h-full w-full flex-col justify-between">
<ChannelMessages data={messages.sort((a, b) => a.created_at - b.created_at)} />
<div className="shrink-0 p-3">
<FormChannelMessage eventId={params.id} />
</div>
</div>
);
}

39
src/app/channels/layout.tsx Normal file
View File

@@ -0,0 +1,39 @@
import AppHeader from '@components/appHeader';
import MultiAccounts from '@components/multiAccounts';
import Navigation from '@components/navigation';
export default function ChannelsLayout({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<MultiAccounts />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
<div className="h-full w-full rounded-lg">{children}</div>
</div>
<div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
<div className="flex h-full w-full items-center justify-center">
<p className="select-text p-8 text-center text-zinc-400">
This feature hasn&apos;t implemented yet, so resize Lume to the initial size for a better experience.
I&apos;m sorry for this inconvenience, and I swear I will add it soon 😁
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

28
src/app/channels/page.tsx Normal file
View File

@@ -0,0 +1,28 @@
'use client';
import { BrowseChannelItem } from '@components/channels/browseChannelItem';
import { useEffect, useState } from 'react';
export default function Page() {
const [list, setList] = useState([]);
useEffect(() => {
const fetchChannels = async () => {
const { getChannels } = await import('@utils/bindings');
return await getChannels({ limit: 100, offset: 0 });
};
fetchChannels()
.then((res) => setList(res))
.catch(console.error);
}, []);
return (
<div className="h-full w-full overflow-y-auto">
{list.map((channel) => (
<BrowseChannelItem key={channel.id} data={channel} />
))}
</div>
);
}

49
src/app/chats/[pubkey]/page.tsx Normal file
View File

@@ -0,0 +1,49 @@
'use client';
import { MessageList } from '@components/chats/messageList';
import FormChat from '@components/form/chat';
import { RelayContext } from '@components/relaysProvider';
import useLocalStorage from '@rehooks/local-storage';
import { useContext, useEffect, useState } from 'react';
export default function Page({ params }: { params: { pubkey: string } }) {
const [pool, relays]: any = useContext(RelayContext);
const [activeAccount]: any = useLocalStorage('activeAccount', {});
const [messages, setMessages] = useState([]);
useEffect(() => {
const unsubscribe = pool.subscribe(
[
{
kinds: [4],
authors: [params.pubkey],
'#p': [activeAccount.pubkey],
},
{
kinds: [4],
authors: [activeAccount.pubkey],
'#p': [params.pubkey],
},
],
relays,
(event: any) => {
setMessages((messages) => [event, ...messages]);
}
);
return () => {
unsubscribe();
};
}, [pool, relays, params.pubkey, activeAccount.pubkey]);
return (
<div className="flex h-full w-full flex-col justify-between">
<MessageList data={messages.sort((a, b) => a.created_at - b.created_at)} />
<div className="shrink-0 p-3">
<FormChat receiverPubkey={params.pubkey} />
</div>
</div>
);
}

39
src/app/chats/layout.tsx Normal file
View File

@@ -0,0 +1,39 @@
import AppHeader from '@components/appHeader';
import MultiAccounts from '@components/multiAccounts';
import Navigation from '@components/navigation';
export default function ChatsLayout({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<MultiAccounts />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
<div className="h-full w-full rounded-lg">{children}</div>
</div>
<div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
<div className="flex h-full w-full items-center justify-center">
<p className="select-text p-8 text-center text-zinc-400">
This feature hasn&apos;t implemented yet, so resize Lume to the initial size for a better experience.
I&apos;m sorry for this inconvenience, and I swear I will add it soon 😁
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

3
src/app/explore/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Page() {
return <></>;
}

13
src/app/layout.tsx Normal file
View File

@@ -0,0 +1,13 @@
import '@assets/global.css';
import { Providers } from './providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className="dark">
<body className="cursor-default select-none overflow-hidden font-sans antialiased">
<Providers>{children}</Providers>
</body>
</html>
);
}

5
src/app/newsfeed/[id]/page.tsx Normal file
View File

@@ -0,0 +1,5 @@
'use client';
export default function Page({ params }: { params: { id: string } }) {
return <div className="scrollbar-hide flex h-full flex-col gap-2 overflow-y-auto py-3">{params.id}</div>;
}

7
src/app/newsfeed/circle/page.tsx Normal file
View File

@@ -0,0 +1,7 @@
export default function Page() {
return (
<div className="flex h-full w-full items-center justify-center">
<p className="text-sm text-zinc-400">Sorry, this feature under development, it will come in the next version</p>
</div>
);
}

113
src/app/newsfeed/following/page.tsx Normal file
View File

@@ -0,0 +1,113 @@
'use client';
import FormBase from '@components/form/base';
import { NoteBase } from '@components/note/base';
import { Placeholder } from '@components/note/placeholder';
import { hasNewerNoteAtom } from '@stores/note';
import { dateToUnix } from '@utils/getDate';
import { filterDuplicateParentID } from '@utils/transform';
import { ArrowUp } from 'iconoir-react';
import { useAtom } from 'jotai';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Virtuoso } from 'react-virtuoso';
export default function Page() {
const [data, setData] = useState([]);
const [hasNewerNote, setHasNewerNote] = useAtom(hasNewerNoteAtom);
const virtuosoRef = useRef(null);
const now = useRef(new Date());
const limit = useRef(20);
const offset = useRef(0);
const itemContent: any = useCallback(
(index: string | number) => {
return <NoteBase event={data[index]} />;
},
[data]
);
const computeItemKey = useCallback(
(index: string | number) => {
return data[index].eventId;
},
[data]
);
const initialData = useCallback(async () => {
const { getNotes } = await import('@utils/bindings');
const result: any = await getNotes({
date: dateToUnix(now.current),
limit: limit.current,
offset: offset.current,
});
setData((data) => [...data, ...result]);
}, []);
const loadMore = useCallback(async () => {
const { getNotes } = await import('@utils/bindings');
offset.current += limit.current;
// next query
const result: any = await getNotes({
date: dateToUnix(now.current),
limit: limit.current,
offset: offset.current,
});
setData((data) => [...data, ...result]);
}, []);
const loadLatest = useCallback(async () => {
const { getLatestNotes } = await import('@utils/bindings');
// next query
const result: any = await getLatestNotes({ date: dateToUnix(now.current) });
// update data
if (result.length > 0) {
setData((data) => [...data, ...result]);
} else {
setData((data) => [...data, result]);
}
// hide newer trigger
setHasNewerNote(false);
// scroll to top
virtuosoRef.current.scrollToIndex({ index: 0 });
}, [setHasNewerNote]);
useEffect(() => {
initialData().catch(console.error);
}, [initialData]);
return (
<div className="relative h-full w-full">
{hasNewerNote && (
<div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
<button
onClick={() => loadLatest()}
className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 pl-3 pr-3.5 text-sm shadow-md shadow-fuchsia-800/20 active:translate-y-1"
>
<ArrowUp width={14} height={14} />
Load latest
</button>
</div>
)}
<Virtuoso
ref={virtuosoRef}
data={filterDuplicateParentID(data)}
itemContent={itemContent}
computeItemKey={computeItemKey}
components={COMPONENTS}
overscan={200}
endReached={loadMore}
className="scrollbar-hide h-full w-full overflow-y-auto"
/>
</div>
);
}
const COMPONENTS = {
Header: () => <FormBase />,
EmptyPlaceholder: () => <Placeholder />,
ScrollSeekPlaceholder: () => <Placeholder />,
};

39
src/app/newsfeed/layout.tsx Normal file
View File

@@ -0,0 +1,39 @@
import AppHeader from '@components/appHeader';
import MultiAccounts from '@components/multiAccounts';
import Navigation from '@components/navigation';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<MultiAccounts />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
<div className="h-full w-full rounded-lg">{children}</div>
</div>
<div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
<div className="flex h-full w-full items-center justify-center">
<p className="select-text p-8 text-center text-zinc-400">
This feature hasn&apos;t implemented yet, so resize Lume to the initial size for a better experience.
I&apos;m sorry for this inconvenience, and I swear I will add it soon 😁
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

172
src/app/onboarding/create/[...slug]/page.tsx Normal file
View File

@@ -0,0 +1,172 @@
'use client';
import { RelayContext } from '@components/relaysProvider';
import { UserBase } from '@components/user/base';
import { fetchMetadata } from '@utils/metadata';
import { followsTag } from '@utils/transform';
import { createClient } from '@supabase/supabase-js';
import { CheckCircle } from 'iconoir-react';
import { useRouter } from 'next/navigation';
import { getEventHash, signEvent } from 'nostr-tools';
import { Key, useCallback, useContext, useEffect, useState } from 'react';
const supabase = createClient(
'https://niwaazauwnrwiwmnocnn.supabase.co',
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im5pd2FhemF1d25yd2l3bW5vY25uIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzYwMjAzMjAsImV4cCI6MTk5MTU5NjMyMH0.IbjrnE6rDgC6lhIAHBIMN4niM2bPjxkRLtvAy_gFgqw'
);
const initialList = [
{ pubkey: '82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2' },
{ pubkey: 'a341f45ff9758f570a21b000c17d4e53a3a497c8397f26c0e6d61e5acffc7a98' },
{ pubkey: '04c915daefee38317fa734444acee390a8269fe5810b2241e5e6dd343dfbecc9' },
{ pubkey: 'c4eabae1be3cf657bc1855ee05e69de9f059cb7a059227168b80b89761cbc4e0' },
{ pubkey: '6e468422dfb74a5738702a8823b9b28168abab8655faacb6853cd0ee15deee93' },
{ pubkey: 'e88a691e98d9987c964521dff60025f60700378a4879180dcbbb4a5027850411' },
{ pubkey: '3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d' },
{ pubkey: 'c49d52a573366792b9a6e4851587c28042fb24fa5625c6d67b8c95c8751aca15' },
{ pubkey: 'e33fe65f1fde44c6dc17eeb38fdad0fceaf1cae8722084332ed1e32496291d42' },
{ pubkey: '84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240' },
{ pubkey: '703e26b4f8bc0fa57f99d815dbb75b086012acc24fc557befa310f5aa08d1898' },
{ pubkey: 'bf2376e17ba4ec269d10fcc996a4746b451152be9031fa48e74553dde5526bce' },
{ pubkey: '4523be58d395b1b196a9b8c82b038b6895cb02b683d0c253a955068dba1facd0' },
{ pubkey: 'c9b19ffcd43e6a5f23b3d27106ce19e4ad2df89ba1031dd4617f1b591e108965' },
{ pubkey: 'c7dccba4fe4426a7b1ea239a5637ba40fab9862c8c86b3330fe65e9f667435f6' },
{ pubkey: '6e1534f56fc9e937e06237c8ba4b5662bcacc4e1a3cfab9c16d89390bec4fca3' },
{ pubkey: '50d94fc2d8580c682b071a542f8b1e31a200b0508bab95a33bef0855df281d63' },
{ pubkey: '3d2e51508699f98f0f2bdbe7a45b673c687fe6420f466dc296d90b908d51d594' },
{ pubkey: '6e3f51664e19e082df5217fd4492bb96907405a0b27028671dd7f297b688608c' },
{ pubkey: '2edbcea694d164629854a52583458fd6d965b161e3c48b57d3aff01940558884' },
{ pubkey: '3f770d65d3a764a9c5cb503ae123e62ec7598ad035d836e2a810f3877a745b24' },
{ pubkey: 'eab0e756d32b80bcd464f3d844b8040303075a13eabc3599a762c9ac7ab91f4f' },
{ pubkey: 'be1d89794bf92de5dd64c1e60f6a2c70c140abac9932418fee30c5c637fe9479' },
{ pubkey: 'a5e93aef8e820cbc7ab7b6205f854b87aed4b48c5f6b30fbbeba5c99e40dcf3f' },
{ pubkey: '1989034e56b8f606c724f45a12ce84a11841621aaf7182a1f6564380b9c4276b' },
{ pubkey: 'c48b5cced5ada74db078df6b00fa53fc1139d73bf0ed16de325d52220211dbd5' },
{ pubkey: '460c25e682fda7832b52d1f22d3d22b3176d972f60dcdc3212ed8c92ef85065c' },
{ pubkey: '7f3b464b9ff3623630485060cbda3a7790131c5339a7803bde8feb79a5e1b06a' },
{ pubkey: 'b99dbca0184a32ce55904cb267b22e434823c97f418f36daf5d2dff0dd7b5c27' },
{ pubkey: 'e9e4276490374a0daf7759fd5f475deff6ffb9b0fc5fa98c902b5f4b2fe3bba2' },
{ pubkey: 'ea2e3c814d08a378f8a5b8faecb2884d05855975c5ca4b5c25e2d6f936286f14' },
{ pubkey: 'ff04a0e6cd80c141b0b55825fed127d4532a6eecdb7e743a38a3c28bf9f44609' },
];
export default function Page({ params }: { params: { id: string; pubkey: string; privkey: string } }) {
const router = useRouter();
const [pool, relays]: any = useContext(RelayContext);
const [loading, setLoading] = useState(false);
const [list, setList]: any = useState(initialList);
const [follows, setFollows] = useState([]);
// toggle follow state
const toggleFollow = (pubkey: string) => {
const arr = follows.includes(pubkey) ? follows.filter((i) => i !== pubkey) : [...follows, pubkey];
setFollows(arr);
};
// save follows to database then broadcast
const submit = useCallback(async () => {
const { createPleb } = await import('@utils/bindings');
setLoading(true);
for (const follow of follows) {
const metadata: any = await fetchMetadata(follow);
createPleb({
pleb_id: follow + '-lume' + params.id,
pubkey: follow,
kind: 0,
metadata: metadata.content,
account_id: parseInt(params.id),
}).catch(console.error);
}
// build event
const event: any = {
content: '',
created_at: Math.floor(Date.now() / 1000),
kind: 3,
pubkey: params.pubkey,
tags: followsTag(follows),
};
event.id = getEventHash(event);
event.sig = signEvent(event, params.privkey);
pool.publish(event, relays);
router.replace('/');
}, [params.pubkey, params.privkey, params.id, follows, pool, relays, router]);
useEffect(() => {
const fetchData = async () => {
const { data } = await supabase.from('random_users').select('pubkey').limit(28);
// update state
setList((list: any) => [...list, ...data]);
};
fetchData().catch(console.error);
}, []);
return (
<div className="relative grid h-full w-full grid-rows-5">
<div className="row-span-1 flex items-center justify-center">
<div className="text-center">
<h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium leading-tight text-transparent">
Personalized your newsfeed
</h1>
<h3 className="text-lg text-zinc-500">
Follow at least{' '}
<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
{follows.length}/10
</span>{' '}
plebs
</h3>
</div>
</div>
<div className="row-span-4 h-full w-full overflow-y-auto">
<div className="grid grid-cols-4 gap-4 px-8 py-4">
{list.map((item: { pubkey: string }, index: Key) => (
<button
key={index}
onClick={() => toggleFollow(item.pubkey)}
className="flex transform items-center justify-between rounded-lg bg-zinc-900 p-2 ring-amber-100 hover:ring-1 active:translate-y-1"
>
<UserBase pubkey={item.pubkey} />
{follows.includes(item.pubkey) && (
<div>
<CheckCircle width={16} height={16} className="text-zinc-400" />
</div>
)}
</button>
))}
</div>
</div>
{follows.length >= 10 && (
<div className="fixed bottom-0 left-0 z-10 flex h-24 w-full items-center justify-center">
<button
onClick={() => submit()}
className="relative z-20 inline-flex w-36 transform items-center justify-center rounded-full bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 shadow-xl active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
>
{loading === true ? (
<svg
className="h-5 w-5 animate-spin text-zinc-900"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
) : (
<span className="drop-shadow-lg">Done →</span>
)}
</button>
</div>
)}
</div>
);
}

183
src/app/onboarding/create/page.tsx Normal file
View File

@@ -0,0 +1,183 @@
'use client';
import { RelayContext } from '@components/relaysProvider';
import { ArrowLeft, EyeClose, EyeEmpty } from 'iconoir-react';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
import { useCallback, useContext, useMemo, useState } from 'react';
import { Config, names, uniqueNamesGenerator } from 'unique-names-generator';
const config: Config = {
dictionaries: [names],
};
export default function Page() {
const router = useRouter();
const [pool, relays]: any = useContext(RelayContext);
const [type, setType] = useState('password');
const [loading, setLoading] = useState(false);
const [privKey] = useState(() => generatePrivateKey());
const [name] = useState(() => uniqueNamesGenerator(config).toString());
const pubKey = getPublicKey(privKey);
const npub = nip19.npubEncode(pubKey);
const nsec = nip19.nsecEncode(privKey);
const goBack = () => {
router.back();
};
// auto-generated profile metadata
const metadata: any = useMemo(
() => ({
display_name: name,
name: name,
username: name.toLowerCase(),
picture: 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp',
}),
[name]
);
// toggle privatek key
const showPrivateKey = () => {
if (type === 'password') {
setType('text');
} else {
setType('password');
}
};
// create account and broadcast to all relays
const submit = useCallback(async () => {
const { createAccount } = await import('@utils/bindings');
setLoading(true);
// build event
const event: any = {
content: JSON.stringify(metadata),
created_at: Math.floor(Date.now() / 1000),
kind: 0,
pubkey: pubKey,
tags: [],
};
event.id = getEventHash(event);
event.sig = signEvent(event, privKey);
// insert to database then broadcast
createAccount({ pubkey: pubKey, privkey: privKey, metadata: metadata })
.then((res) => {
pool.publish(event, relays);
router.push(`/onboarding/create/${res.id}/${res.pubkey}/${res.privkey}`);
})
.catch(console.error);
}, [pool, pubKey, privKey, metadata, relays, router]);
return (
<div className="grid h-full w-full grid-rows-5">
<div className="row-span-1 mx-auto flex w-full max-w-md items-center justify-between">
<button
onClick={() => goBack()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
</button>
<div>
<h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent">
Create new account
</h1>
</div>
<div></div>
</div>
<div className="row-span-4">
<div className="mx-auto w-full max-w-md">
<div className="mb-8 flex flex-col gap-4">
<div className="flex flex-col gap-1">
<label className="text-sm font-semibold text-zinc-400">Public Key</label>
<div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
<input
readOnly
value={npub}
className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
/>
</div>
</div>
<div className="flex flex-col gap-1">
<label className="text-sm font-semibold text-zinc-400">Private Key</label>
<div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
<input
readOnly
type={type}
value={nsec}
className="relative w-full rounded-lg border border-black/5 py-2.5 pl-3.5 pr-11 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
/>
<button
onClick={() => showPrivateKey()}
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
>
{type === 'password' ? (
<EyeClose width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
) : (
<EyeEmpty width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
)}
</button>
</div>
</div>
<div className="flex flex-col gap-1">
<label className="text-sm font-semibold text-zinc-400">Default Profile (you can change it later)</label>
<div className="relative w-full shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
<div className="relative w-full rounded-lg border border-black/5 px-3.5 py-4 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600">
<div className="flex space-x-2">
<div className="relative h-11 w-11 rounded-md">
<Image className="inline-block rounded-md" src={metadata.picture} alt="" fill={true} />
</div>
<div className="flex-1 space-y-2 py-1">
<div className="flex items-center gap-1">
<p className="font-semibold">{metadata.display_name}</p>
<p className="text-zinc-400">@{metadata.username}</p>
</div>
<div className="space-y-1">
<div className="grid grid-cols-3 gap-4">
<div className="col-span-2 h-2 rounded bg-zinc-700"></div>
<div className="col-span-1 h-2 rounded bg-zinc-700"></div>
</div>
<div className="h-2 rounded bg-zinc-700"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="flex h-10 items-center justify-center">
{loading === true ? (
<svg
className="h-5 w-5 animate-spin text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
) : (
<button
onClick={() => submit()}
className="w-full transform rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
>
<span className="drop-shadow-lg">Continue →</span>
</button>
)}
</div>
</div>
</div>
</div>
);
}

13
src/app/onboarding/layout.tsx Normal file
View File

@@ -0,0 +1,13 @@
export default function OnboardingLayout({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
></div>
<div className="relative flex min-h-0 w-full flex-1">{children}</div>
</div>
</div>
);
}

159
src/app/onboarding/login/[...slug]/page.tsx Normal file
View File

@@ -0,0 +1,159 @@
'use client';
import { RelayContext } from '@components/relaysProvider';
import { DEFAULT_AVATAR } from '@stores/constants';
import { fetchMetadata } from '@utils/metadata';
import { truncate } from '@utils/truncate';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { getPublicKey } from 'nostr-tools';
import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
export default function Page({ params }: { params: { privkey: string } }) {
const router = useRouter();
const [pool, relays]: any = useContext(RelayContext);
const pubkey = useMemo(() => (params.privkey ? getPublicKey(params.privkey) : null), [params.privkey]);
const [profile, setProfile] = useState({ id: null, metadata: null });
const [done, setDone] = useState(false);
const insertAccountToStorage = useCallback(async (pubkey, privkey, metadata) => {
const { createAccount } = await import('@utils/bindings');
createAccount({ pubkey: pubkey, privkey: privkey, metadata: metadata })
.then((res) =>
setProfile({
id: res.id,
metadata: JSON.parse(res.metadata),
})
)
.catch(console.error);
}, []);
const insertFollowsToStorage = useCallback(
async (tags) => {
const { createPleb } = await import('@utils/bindings');
if (profile?.id !== null) {
for (const tag of tags) {
const metadata: any = await fetchMetadata(tag[1]);
createPleb({
pleb_id: tag[1] + '-lume' + profile.id.toString(),
pubkey: tag[1],
kind: 0,
metadata: metadata.content,
account_id: profile.id,
}).catch(console.error);
}
}
},
[profile.id]
);
useEffect(() => {
const unsubscribe = pool.subscribe(
[
{
authors: [pubkey],
kinds: [0, 3],
since: 0,
},
],
relays,
(event: any) => {
if (event.kind === 0) {
insertAccountToStorage(pubkey, params.privkey, event.content);
} else {
if (event.tags.length > 0) {
insertFollowsToStorage(event.tags);
}
}
},
undefined,
() => {
setDone(true);
}
);
return () => {
unsubscribe;
};
}, [insertAccountToStorage, insertFollowsToStorage, pool, relays, pubkey, params.privkey]);
// submit then redirect to home
const submit = () => {
router.replace('/');
};
return (
<div className="grid h-full w-full grid-rows-5">
<div className="row-span-1 flex items-center justify-center">
<div>
<h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent">
Bringing back your profile...
</h1>
</div>
</div>
<div className="row-span-4 flex flex-col gap-8">
<div className="mx-auto w-full max-w-md">
<div className="mb-4 flex flex-col gap-2">
<div className="w-full rounded-lg bg-zinc-900 p-4 shadow-input ring-1 ring-zinc-800">
<div className="flex space-x-4">
<div className="relative h-10 w-10 rounded-full">
<Image
className="inline-block rounded-full"
src={profile.metadata?.picture || DEFAULT_AVATAR}
alt=""
fill={true}
/>
</div>
<div className="flex-1 space-y-4 py-1">
<div className="flex items-center gap-2">
<p className="font-semibold">{profile.metadata?.display_name || profile.metadata?.name}</p>
<span className="leading-tight text-zinc-500">·</span>
<p className="text-zinc-500">
@{profile.metadata?.username || (pubkey && truncate(pubkey, 16, ' .... '))}
</p>
</div>
<div className="space-y-3">
<div className="grid grid-cols-3 gap-4">
<div className="col-span-2 h-2 rounded bg-zinc-700"></div>
<div className="col-span-1 h-2 rounded bg-zinc-700"></div>
</div>
<div className="h-2 rounded bg-zinc-700"></div>
</div>
</div>
</div>
</div>
</div>
<div className="flex items-center justify-center">
{done === false ? (
<svg
className="h-5 w-5 animate-spin text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
) : (
<button
onClick={() => submit()}
className="inline-flex w-full transform items-center justify-center rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
>
<span className="drop-shadow-lg">Done →</span>
</button>
)}
</div>
</div>
</div>
</div>
);
}

132
src/app/onboarding/login/page.tsx Normal file
View File

@@ -0,0 +1,132 @@
'use client';
import { ArrowLeft, CableTag } from 'iconoir-react';
import { useRouter } from 'next/navigation';
import { nip19 } from 'nostr-tools';
import { Resolver, useForm } from 'react-hook-form';
type FormValues = {
key: string;
};
const resolver: Resolver<FormValues> = async (values) => {
return {
values: values.key ? values : {},
errors: !values.key
? {
key: {
type: 'required',
message: 'This is required.',
},
}
: {},
};
};
export default function Page() {
const router = useRouter();
const {
register,
setError,
handleSubmit,
formState: { errors, isDirty, isValid, isSubmitting },
} = useForm<FormValues>({ resolver });
const goBack = () => {
router.back();
};
const onSubmit = async (data: any) => {
let privkey = data['key'];
if (privkey.substring(0, 4) === 'nsec') {
privkey = nip19.decode(privkey).data;
}
try {
router.push(`/onboarding/login/${privkey}`);
} catch (error) {
setError('key', {
type: 'custom',
message: 'Private Key is invalid, please check again',
});
}
};
return (
<div className="grid h-full w-full grid-rows-5">
<div className="row-span-1 mx-auto flex w-full max-w-md items-center justify-between">
<button
onClick={() => goBack()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
</button>
<div>
<h1 className="bg-gradient-to-br from-zinc-200 via-white to-zinc-300 bg-clip-text text-3xl font-semibold text-transparent">
Login with Private Key
</h1>
</div>
<div></div>
</div>
<form onSubmit={handleSubmit(onSubmit)} className="row-span-4">
<div className="mx-auto w-full max-w-md">
<div className="flex flex-col gap-4">
<div>
{/* #TODO: add function */}
<button className="inline-flex w-full transform items-center justify-center gap-1.5 rounded-lg bg-zinc-700 px-3.5 py-2.5 font-medium text-zinc-200 shadow-input ring-1 ring-zinc-600 active:translate-y-1">
{/* #TODO: change to nostr connect logo */}
<CableTag width={20} height={20} className="text-fuchsia-500" />
<span>Continue with Nostr Connect</span>
</button>
</div>
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-zinc-800"></div>
</div>
<div className="relative flex justify-center">
<span className="bg-black px-2 text-sm text-zinc-500">or</span>
</div>
</div>
<div className="flex flex-col gap-2">
<div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
<input
{...register('key', { required: true, minLength: 32 })}
type={'password'}
placeholder="Paste private key here..."
className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 text-center shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
/>
</div>
<span className="text-sm text-red-400">{errors.key && <p>{errors.key.message}</p>}</span>
</div>
</div>
<div className="mt-1 flex h-10 items-center justify-center">
{isSubmitting ? (
<svg
className="h-5 w-5 animate-spin text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
) : (
<button
type="submit"
disabled={!isDirty || !isValid}
className="w-full transform rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
>
<span className="drop-shadow-lg">Continue →</span>
</button>
)}
</div>
</div>
</form>
</div>
);
}

127
src/app/onboarding/page.tsx Normal file
View File

@@ -0,0 +1,127 @@
import { ArrowRight } from 'iconoir-react';
import Image from 'next/image';
import Link from 'next/link';
const PLEBS = [
'https://133332.xyz/p.jpg',
'https://void.cat/d/3Bp6jSHURFNQ9u3pK8nwtq.webp',
'https://i.imgur.com/f8SyhRL.jpg',
'http://nostr.build/i/6369.jpg',
'https://pbs.twimg.com/profile_images/1622010345589190656/mAPqsmtz_400x400.jpg',
'https://media.tenor.com/l5arkXy9RfIAAAAd/thunder.gif',
'https://nostr.build/i/p/nostr.build_0e412058980ed2ac4adf3de639304c9e970e2745ba9ca19c75f984f4f6da4971.jpeg',
'https://nostr.build/i/nostr.build_864a019a6c1d3a90a17363553d32b71de618d250f02cf0a59ca19fb3029fd5bc.jpg',
'https://void.cat/d/8zE9T8a39YfUVjrLM4xcpE.webp',
'https://avatars.githubusercontent.com/u/89577423',
'https://pbs.twimg.com/profile_images/1363180486080663554/iN-r_BiM_400x400.jpg',
'https://void.cat/d/JUBBqXgCcGBEh7jUgJaayy',
'https://phase1.attract-eu.com/wp-content/uploads/2020/03/ATTRACT_HPLM.png',
'https://www.retro-synthwave.com/wp-content/uploads/2017/01/PowerGlove-23.jpg',
'https://void.cat/d/KvAEMvYNmy1rfCH6a7HZzh.webp',
'https://media.giphy.com/media/NqfMNCkyGwtXhKFlCR/giphy-downsized-large.gif',
'https://i.imgur.com/VGpUNFS.jpg',
'https://nostr.build/i/p/nostr.build_b39254db43d5557df99d1eb516f1c2f56a21a01b10c248f6eb66aa827c9a90f4.jpeg',
'https://davidcoen.it/wp-content/uploads/2020/11/7004972-taglio.jpg',
'https://pbs.twimg.com/profile_images/1570432066348515330/26PtCuwF_400x400.jpg',
'https://nostr.build/i/nostr.build_9d33ee801aa08955be174554832952ab95a65d5e015176834c8aa9a4e2f2e3a5.jpg',
'https://www.linkpicture.com/q/0FE78CFF-C931-4568-A7AA-DD8AEE889992.jpeg',
'https://nostr.build/i/nostr.build_97d6e2d25dd92422eb3d6d645b7cee9ed9c614f331be7e6f7db9ccfdbc5ee260.png',
'https://pbs.twimg.com/profile_images/1569570198348337152/-n1KD74u_400x400.jpg',
'https://pbs.twimg.com/profile_images/1600149653898596354/5PVe-r-J_400x400.jpg',
'https://pbs.twimg.com/profile_images/1639659216372658178/Dnn-Ysp-_400x400.jpg',
'https://pbs.twimg.com/profile_images/1554429112978120706/yr1hXl6R_400x400.jpg',
'https://pbs.twimg.com/profile_images/1615478486688272385/q2ECeZDX_400x400.jpg',
'https://pbs.twimg.com/profile_images/1638644441773748226/tNsA6RpG_400x400.jpg',
'https://pbs.twimg.com/profile_images/1607882836740120576/3Tg1mTYJ_400x400.jpg',
'https://pbs.twimg.com/profile_images/1401907430339002369/WKrP9Esn_400x400.jpg',
'https://pbs.twimg.com/profile_images/1523971278478131200/TMPzfvhE_400x400.jpg',
'https://pbs.twimg.com/profile_images/1626421539884204032/aj4tmzsk_400x400.png',
'https://pbs.twimg.com/profile_images/1582771691779985408/C9MHYIgt_400x400.jpg',
'https://pbs.twimg.com/profile_images/1409612480465276931/38Vyx4e8_400x400.jpg',
'https://pbs.twimg.com/profile_images/1549826566787588098/MlduJCZO_400x400.jpg',
'https://pbs.twimg.com/profile_images/539211568035004416/sBMjPR9q_400x400.jpeg',
'https://pbs.twimg.com/profile_images/1548660003522887682/1QMHmles_400x400.jpg',
'https://pbs.twimg.com/profile_images/1362497143999787013/KLUoN1Vn_400x400.png',
'https://pbs.twimg.com/profile_images/1600434913240563713/AssmMGwf_400x400.jpg',
];
const DURATION = 50000;
const ROWS = 7;
const PLEBS_PER_ROW = 20;
const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
const shuffle = (arr) => [...arr].sort(() => 0.5 - Math.random());
const InfiniteLoopSlider = ({ children, duration, reverse }: { children: any; duration: any; reverse: any }) => {
return (
<div>
<div
className="flex w-fit"
style={{
animationName: 'loop',
animationIterationCount: 'infinite',
animationDirection: reverse ? 'reverse' : 'normal',
animationDuration: duration + 'ms',
animationTimingFunction: 'linear',
}}
>
{children}
{children}
</div>
</div>
);
};
export default function Page() {
return (
<div className="grid h-full w-full grid-rows-5">
<div className="row-span-3 overflow-hidden">
<div className="relaive flex w-full max-w-full shrink-0 flex-col gap-4 overflow-hidden p-4">
{[...new Array(ROWS)].map((_, i) => (
<InfiniteLoopSlider key={i} duration={random(DURATION - 5000, DURATION + 20000)} reverse={i % 2}>
{shuffle(PLEBS)
.slice(0, PLEBS_PER_ROW)
.map((tag) => (
<div
key={tag}
className="relative mr-4 flex h-11 w-11 items-center gap-2 rounded-md bg-zinc-900 px-4 py-1.5 shadow-xl"
>
<Image
src={tag}
alt={tag}
fill={true}
className="rounded-md border border-zinc-900"
placeholder="blur"
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
priority
/>
</div>
))}
</InfiniteLoopSlider>
))}
<div className="pointer-events-none absolute inset-0 bg-fade" />
</div>
</div>
<div className="row-span-2 flex w-full flex-col items-center gap-4 overflow-hidden pt-6 min-[1050px]:gap-8 min-[1050px]:pt-10">
<h1 className="animate-moveBg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-5xl font-bold leading-none text-transparent">
Let&apos;s start!
</h1>
<div className="mt-4 flex flex-col items-center gap-1.5">
<Link
href="/onboarding/create"
className="relative inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full bg-zinc-900 px-6 text-lg font-medium ring-1 ring-zinc-800 hover:bg-zinc-800"
>
Create new key
<ArrowRight width={20} height={20} />
</Link>
<Link
href="/onboarding/login"
className="inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full px-6 text-base font-medium text-zinc-300 hover:bg-zinc-800"
>
Login with private key
</Link>
</div>
</div>
</div>
);
}

204
src/app/page.tsx Normal file
View File

@@ -0,0 +1,204 @@
'use client';
import { RelayContext } from '@components/relaysProvider';
import { dateToUnix, hoursAgo } from '@utils/getDate';
import { getParentID, pubkeyArray } from '@utils/transform';
import LumeSymbol from '@assets/icons/Lume';
import useLocalStorage, { writeStorage } from '@rehooks/local-storage';
import { useRouter } from 'next/navigation';
import { useCallback, useContext, useEffect, useRef } from 'react';
export default function Page() {
const [pool, relays]: any = useContext(RelayContext);
const router = useRouter();
const [lastLogin] = useLocalStorage('lastLogin', new Date());
const now = useRef(new Date());
const eose = useRef(0);
const unsubscribe = useRef(null);
const fetchActiveAccount = useCallback(async () => {
const { getAccounts } = await import('@utils/bindings');
return await getAccounts();
}, []);
const fetchPlebsByAccount = useCallback(async (id: number, kind: number) => {
const { getPlebs } = await import('@utils/bindings');
return await getPlebs({ account_id: id, kind: kind });
}, []);
const totalNotes = useCallback(async () => {
const { countTotalNotes } = await import('@utils/commands');
return countTotalNotes();
}, []);
const totalChannels = useCallback(async () => {
const { countTotalChannels } = await import('@utils/commands');
return countTotalChannels();
}, []);
const totalChats = useCallback(async () => {
const { countTotalChats } = await import('@utils/commands');
return countTotalChats();
}, []);
const fetchData = useCallback(
async (account, follows) => {
const { createNote } = await import('@utils/bindings');
const { createChat } = await import('@utils/bindings');
const { createChannel } = await import('@utils/bindings');
const notes = await totalNotes();
const channels = await totalChannels();
const chats = await totalChats();
const query = [];
let since: number;
// kind 1 (notes) query
if (notes === 0) {
since = dateToUnix(hoursAgo(24, now.current));
} else {
since = dateToUnix(new Date(lastLogin));
}
query.push({
kinds: [1],
authors: follows,
since: since,
until: dateToUnix(now.current),
});
// kind 4 (chats) query
if (chats === 0) {
query.push({
kinds: [4],
'#p': [account.pubkey],
since: 0,
until: dateToUnix(now.current),
});
}
// kind 40 (channels) query
if (channels === 0) {
query.push({
kinds: [40],
since: 0,
until: dateToUnix(now.current),
});
}
// subscribe relays
unsubscribe.current = pool.subscribe(
query,
relays,
(event) => {
if (event.kind === 1) {
const parentID = getParentID(event.tags, event.id);
// insert event to local database
createNote({
event_id: event.id,
pubkey: event.pubkey,
kind: event.kind,
tags: JSON.stringify(event.tags),
content: event.content,
parent_id: parentID,
parent_comment_id: '',
created_at: event.created_at,
account_id: account.id,
}).catch(console.error);
} else if (event.kind === 4) {
if (event.pubkey !== account.pubkey) {
createChat({
pubkey: event.pubkey,
created_at: event.created_at,
account_id: account.id,
}).catch(console.error);
}
} else if (event.kind === 40) {
createChannel({ event_id: event.id, content: event.content, account_id: account.id }).catch(console.error);
} else {
console.error;
}
},
undefined,
() => {
if (eose.current > relays.length - 7) {
router.replace('/newsfeed/following');
} else {
eose.current += 1;
}
}
);
},
[router, pool, relays, lastLogin, totalChannels, totalChats, totalNotes]
);
useEffect(() => {
let account;
let follows;
fetchActiveAccount()
.then((res: any) => {
if (res.length > 0) {
account = res[0];
// update local storage
writeStorage('activeAccount', res[0]);
// fetch plebs, kind 0 = following
fetchPlebsByAccount(res[0].id, 0).then((res) => {
follows = pubkeyArray(res);
writeStorage('activeAccountFollows', res);
// fetch data
fetchData(account, follows);
});
} else {
router.replace('/onboarding');
}
})
.catch(console.error);
return () => {
if (unsubscribe.current) {
unsubscribe.current();
}
};
}, [fetchActiveAccount, fetchPlebsByAccount, totalNotes, fetchData, router]);
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
<div className="relative h-full overflow-hidden">
{/* dragging area */}
<div data-tauri-drag-region className="absolute left-0 top-0 z-20 h-16 w-full bg-transparent" />
{/* end dragging area */}
<div className="relative flex h-full flex-col items-center justify-center">
<div className="flex flex-col items-center gap-2">
<LumeSymbol className="h-16 w-16 text-black dark:text-white" />
<div className="text-center">
<h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
Here&apos;s an interesting fact:
</h3>
<p className="font-medium text-zinc-300 dark:text-zinc-600">
Bitcoin and Nostr can be used by anyone, and no one can stop you!
</p>
</div>
</div>
<div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform">
<svg
className="h-5 w-5 animate-spin text-black dark:text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>
</div>
</div>
</div>
);
}

7
src/app/providers.tsx Normal file
View File

@@ -0,0 +1,7 @@
'use client';
import RelayProvider from '@components/relaysProvider';
export function Providers({ children }: { children: React.ReactNode }) {
return <RelayProvider>{children}</RelayProvider>;
}

47
src/app/users/[id]/page.tsx Normal file
View File

@@ -0,0 +1,47 @@
'use client';
import ProfileFollowers from '@components/profile/followers';
import ProfileFollows from '@components/profile/follows';
import ProfileMetadata from '@components/profile/metadata';
import ProfileNotes from '@components/profile/notes';
import * as Tabs from '@radix-ui/react-tabs';
export default function Page({ params }: { params: { id: string } }) {
return (
<div className="scrollbar-hide h-full w-full overflow-y-auto">
<ProfileMetadata id={params.id} />
<Tabs.Root className="flex w-full flex-col" defaultValue="notes">
<Tabs.List className="flex border-b border-zinc-800">
<Tabs.Trigger
className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium leading-none text-zinc-400 outline-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
value="notes"
>
Notes
</Tabs.Trigger>
<Tabs.Trigger
className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium text-zinc-400 outline-none placeholder:leading-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
value="followers"
>
Followers
</Tabs.Trigger>
<Tabs.Trigger
className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium leading-none text-zinc-400 outline-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
value="following"
>
Following
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="notes">
<ProfileNotes id={params.id} />
</Tabs.Content>
<Tabs.Content value="followers">
<ProfileFollowers id={params.id} />
</Tabs.Content>
<Tabs.Content value="following">
<ProfileFollows id={params.id} />
</Tabs.Content>
</Tabs.Root>
</div>
);
}

39
src/app/users/layout.tsx Normal file
View File

@@ -0,0 +1,39 @@
import AppHeader from '@components/appHeader';
import MultiAccounts from '@components/multiAccounts';
import Navigation from '@components/navigation';
export default function UsersLayout({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<MultiAccounts />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
<div className="h-full w-full rounded-lg">{children}</div>
</div>
<div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
<div className="flex h-full w-full items-center justify-center">
<p className="select-text p-8 text-center text-zinc-400">
This feature hasn&apos;t implemented yet, so resize Lume to the initial size for a better experience.
I&apos;m sorry for this inconvenience, and I swear I will add it soon 😁
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}