mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
wip: restructure
This commit is contained in:
parent
6918660a5c
commit
98a37d4618
12
.prettierrc
12
.prettierrc
@ -8,17 +8,7 @@
|
|||||||
"endOfLine": "lf",
|
"endOfLine": "lf",
|
||||||
"bracketSpacing": true,
|
"bracketSpacing": true,
|
||||||
"bracketSameLine": false,
|
"bracketSameLine": false,
|
||||||
"importOrder": [
|
"importOrder": ["^@lume/(.*)$", "<THIRD_PARTY_MODULES>", "^[./]"],
|
||||||
"^@app/(.*)$",
|
|
||||||
"^@pages/(.*)$",
|
|
||||||
"^@components/(.*)$",
|
|
||||||
"^@stores/(.*)$",
|
|
||||||
"^@utils/(.*)$",
|
|
||||||
"^@assets/(.*)$",
|
|
||||||
"^@renderer/(.*)$",
|
|
||||||
"<THIRD_PARTY_MODULES>",
|
|
||||||
"^[./]"
|
|
||||||
],
|
|
||||||
"importOrderSeparation": true,
|
"importOrderSeparation": true,
|
||||||
"importOrderSortSpecifiers": true,
|
"importOrderSortSpecifiers": true,
|
||||||
"plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
|
"plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
|
||||||
|
1
src/channel/_default.page.tsx
Normal file
1
src/channel/_default.page.tsx
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { LayoutChannel as Layout } from './layout';
|
29
src/channel/layout.tsx
Normal file
29
src/channel/layout.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import AppHeader from '@lume/shared/appHeader';
|
||||||
|
import MultiAccounts from '@lume/shared/multiAccounts';
|
||||||
|
import Navigation from '@lume/shared/navigation';
|
||||||
|
|
||||||
|
export function LayoutChannel({ 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 collector={true} />
|
||||||
|
</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 xl:col-span-4">{children}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1,31 +1,29 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { ChannelBlackList } from '@components/channels/channelBlackList';
|
import { ChannelBlackList } from '@lume/shared/channels/channelBlackList';
|
||||||
import { ChannelProfile } from '@components/channels/channelProfile';
|
import { ChannelProfile } from '@lume/shared/channels/channelProfile';
|
||||||
import { UpdateChannelModal } from '@components/channels/updateChannelModal';
|
import { UpdateChannelModal } from '@lume/shared/channels/updateChannelModal';
|
||||||
import { FormChannel } from '@components/form/channel';
|
import { FormChannel } from '@lume/shared/form/channel';
|
||||||
import NewsfeedLayout from '@components/layouts/newsfeed';
|
import NewsfeedLayout from '@lume/shared/layouts/newsfeed';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { channelMessagesAtom, channelReplyAtom } from '@lume/stores/channel';
|
||||||
import { channelMessagesAtom, channelReplyAtom } from '@stores/channel';
|
import { FULL_RELAYS } from '@lume/stores/constants';
|
||||||
import { FULL_RELAYS } from '@stores/constants';
|
import { dateToUnix, hoursAgo } from '@lume/utils/getDate';
|
||||||
|
import { usePageContext } from '@lume/utils/hooks/usePageContext';
|
||||||
import { dateToUnix, hoursAgo } from '@utils/getDate';
|
import { arrayObjToPureArr } from '@lume/utils/transform';
|
||||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
|
||||||
import { arrayObjToPureArr } from '@utils/transform';
|
|
||||||
|
|
||||||
import { useSetAtom } from 'jotai';
|
import { useSetAtom } from 'jotai';
|
||||||
import { useResetAtom } from 'jotai/utils';
|
import { useResetAtom } from 'jotai/utils';
|
||||||
import { Suspense, lazy, useContext, useRef } from 'react';
|
import { Suspense, lazy, useContext, useRef } from 'react';
|
||||||
import useSWRSubscription from 'swr/subscription';
|
import useSWRSubscription from 'swr/subscription';
|
||||||
|
|
||||||
const ChannelMessages = lazy(() => import('@components/channels/messages'));
|
const ChannelMessages = lazy(() => import('@lume/shared/channels/messages'));
|
||||||
|
|
||||||
let mutedList: any = [];
|
let mutedList: any = [];
|
||||||
let activeMutedList: any = [];
|
let activeMutedList: any = [];
|
||||||
let activeHidedList: any = [];
|
let activeHidedList: any = [];
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
const { getBlacklist, getActiveBlacklist, getActiveAccount } = await import('@utils/storage');
|
const { getBlacklist, getActiveBlacklist, getActiveAccount } = await import('@lume/utils/storage');
|
||||||
const activeAccount = await getActiveAccount();
|
const activeAccount = await getActiveAccount();
|
||||||
activeHidedList = await getActiveBlacklist(activeAccount.id, 43);
|
activeHidedList = await getActiveBlacklist(activeAccount.id, 43);
|
||||||
activeMutedList = await getActiveBlacklist(activeAccount.id, 44);
|
activeMutedList = await getActiveBlacklist(activeAccount.id, 44);
|
1
src/chat/_default.page.tsx
Normal file
1
src/chat/_default.page.tsx
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { LayoutChat as Layout } from './layout';
|
29
src/chat/layout.tsx
Normal file
29
src/chat/layout.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import AppHeader from '@lume/shared/appHeader';
|
||||||
|
import MultiAccounts from '@lume/shared/multiAccounts';
|
||||||
|
import Navigation from '@lume/shared/navigation';
|
||||||
|
|
||||||
|
export function LayoutChat({ 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 collector={true} />
|
||||||
|
</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 xl:col-span-4">{children}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1,13 +1,11 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { MessageListItem } from '@components/chats/messageListItem';
|
import { MessageListItem } from '@lume/shared/chats/messageListItem';
|
||||||
import FormChat from '@components/form/chat';
|
import FormChat from '@lume/shared/form/chat';
|
||||||
import NewsfeedLayout from '@components/layouts/newsfeed';
|
import NewsfeedLayout from '@lume/shared/layouts/newsfeed';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { FULL_RELAYS } from '@lume/stores/constants';
|
||||||
import { FULL_RELAYS } from '@stores/constants';
|
import { usePageContext } from '@lume/utils/hooks/usePageContext';
|
||||||
|
import { sortMessages } from '@lume/utils/transform';
|
||||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
|
||||||
import { sortMessages } from '@utils/transform';
|
|
||||||
|
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
import useSWRSubscription from 'swr/subscription';
|
import useSWRSubscription from 'swr/subscription';
|
1
src/newsfeed/_default.page.tsx
Normal file
1
src/newsfeed/_default.page.tsx
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { LayoutNewsfeed as Layout } from './layout';
|
29
src/newsfeed/layout.tsx
Normal file
29
src/newsfeed/layout.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import AppHeader from '@lume/shared/appHeader';
|
||||||
|
import MultiAccounts from '@lume/shared/multiAccounts';
|
||||||
|
import Navigation from '@lume/shared/navigation';
|
||||||
|
|
||||||
|
export function LayoutNewsfeed({ 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 collector={true} />
|
||||||
|
</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 xl:col-span-4">{children}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
9
src/newsfeed/pages/circle/index.page.tsx
Normal file
9
src/newsfeed/pages/circle/index.page.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export function Page() {
|
||||||
|
return (
|
||||||
|
<div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
114
src/newsfeed/pages/following/index.page.tsx
Normal file
114
src/newsfeed/pages/following/index.page.tsx
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
import FormBase from '@lume/shared/form/base';
|
||||||
|
import { NoteBase } from '@lume/shared/note/base';
|
||||||
|
import { Placeholder } from '@lume/shared/note/placeholder';
|
||||||
|
import { NoteQuoteRepost } from '@lume/shared/note/quoteRepost';
|
||||||
|
import { hasNewerNoteAtom } from '@lume/stores/note';
|
||||||
|
import { countTotalNotes, getNotes } from '@lume/utils/storage';
|
||||||
|
|
||||||
|
import { useInfiniteQuery } from '@tanstack/react-query';
|
||||||
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||||
|
import { ArrowUp } from 'iconoir-react';
|
||||||
|
import { useAtom } from 'jotai';
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
|
||||||
|
const ITEM_PER_PAGE = 20;
|
||||||
|
const TIME = Math.floor(Date.now() / 1000);
|
||||||
|
|
||||||
|
let totalNotes = 0;
|
||||||
|
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const result = await countTotalNotes();
|
||||||
|
totalNotes = result.total;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Page() {
|
||||||
|
const [hasNewerNote] = useAtom(hasNewerNoteAtom);
|
||||||
|
|
||||||
|
const { status, error, data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage }: any = useInfiniteQuery({
|
||||||
|
queryKey: ['following'],
|
||||||
|
queryFn: async ({ pageParam = 0 }) => {
|
||||||
|
return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
|
||||||
|
},
|
||||||
|
getNextPageParam: (lastPage) => (lastPage.nextCursor <= totalNotes ? lastPage.nextCursor : 'undefined'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
|
||||||
|
const parentRef = useRef();
|
||||||
|
|
||||||
|
const rowVirtualizer = useVirtualizer({
|
||||||
|
count: hasNextPage ? allRows.length + 1 : allRows.length,
|
||||||
|
getScrollElement: () => parentRef.current,
|
||||||
|
estimateSize: () => 400,
|
||||||
|
overscan: 5,
|
||||||
|
});
|
||||||
|
|
||||||
|
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
|
||||||
|
|
||||||
|
if (!lastItem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lastItem.index >= allRows.length - 1 && hasNextPage && !isFetchingNextPage) {
|
||||||
|
fetchNextPage();
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
|
||||||
|
{hasNewerNote && (
|
||||||
|
<div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
|
||||||
|
<button 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>
|
||||||
|
)}
|
||||||
|
{status === 'loading' ? (
|
||||||
|
<Placeholder />
|
||||||
|
) : status === 'error' ? (
|
||||||
|
<div>{error.message}</div>
|
||||||
|
) : (
|
||||||
|
<div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
|
||||||
|
<FormBase />
|
||||||
|
<div
|
||||||
|
className="relative w-full"
|
||||||
|
style={{
|
||||||
|
height: `${rowVirtualizer.getTotalSize()}px`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute left-0 top-0 w-full"
|
||||||
|
style={{
|
||||||
|
transform: `translateY(${itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin}px)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
||||||
|
const note = allRows[virtualRow.index];
|
||||||
|
if (note) {
|
||||||
|
if (note.kind === 1) {
|
||||||
|
return (
|
||||||
|
<div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
|
||||||
|
<NoteBase key={note.event_id} event={note} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
|
||||||
|
<NoteQuoteRepost key={note.event_id} event={note} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>{isFetching && !isFetchingNextPage ? 'Background Updating...' : null}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
1
src/onboarding/_default.page.tsx
Normal file
1
src/onboarding/_default.page.tsx
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { LayoutOnboarding as Layout } from './layout';
|
47
src/onboarding/layout.tsx
Normal file
47
src/onboarding/layout.tsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import { ArrowLeft, ArrowRight } from 'iconoir-react';
|
||||||
|
|
||||||
|
let platformName = 'darwin';
|
||||||
|
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const { platform } = await import('@tauri-apps/api/os');
|
||||||
|
platformName = await platform();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LayoutOnboarding({ children }: { children: React.ReactNode }) {
|
||||||
|
const goBack = () => {
|
||||||
|
window.history.back();
|
||||||
|
};
|
||||||
|
|
||||||
|
const goForward = () => {
|
||||||
|
window.history.forward();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
|
||||||
|
<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
|
||||||
|
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>
|
||||||
|
<button
|
||||||
|
onClick={() => goForward()}
|
||||||
|
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
|
||||||
|
>
|
||||||
|
<ArrowRight 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">{children}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
160
src/onboarding/pages/create/index.page.tsx
Normal file
160
src/onboarding/pages/create/index.page.tsx
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
|
||||||
|
import { createAccount } from '@lume/utils/storage';
|
||||||
|
|
||||||
|
import { EyeClose, EyeEmpty } from 'iconoir-react';
|
||||||
|
import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
|
||||||
|
import { useCallback, useContext, useMemo, useState } from 'react';
|
||||||
|
import { navigate } from 'vite-plugin-ssr/client/router';
|
||||||
|
|
||||||
|
export function Page() {
|
||||||
|
const pool: any = useContext(RelayContext);
|
||||||
|
|
||||||
|
const [type, setType] = useState('password');
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const privkey = useMemo(() => generatePrivateKey(), []);
|
||||||
|
const name = 'Pleb';
|
||||||
|
|
||||||
|
const pubkey = getPublicKey(privkey);
|
||||||
|
const npub = nip19.npubEncode(pubkey);
|
||||||
|
const nsec = nip19.nsecEncode(privkey);
|
||||||
|
|
||||||
|
// 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 () => {
|
||||||
|
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
|
||||||
|
createAccount(pubkey, privkey, metadata);
|
||||||
|
// broadcast
|
||||||
|
pool.publish(event, WRITEONLY_RELAYS);
|
||||||
|
// redirect to next step
|
||||||
|
navigate(`/onboarding/create/step-2?pubkey=${pubkey}&privkey=${privkey}`, { overwriteLastHistoryEntry: true });
|
||||||
|
}, [pool, pubkey, privkey, metadata]);
|
||||||
|
|
||||||
|
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-center">
|
||||||
|
<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 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">
|
||||||
|
<img src={metadata.picture} alt="default avatar" className="h-11 w-11 rounded-md object-cover" />
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
@ -1,13 +1,10 @@
|
|||||||
import OnboardingLayout from '@components/layouts/onboarding';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { UserBase } from '@lume/shared/user/base';
|
||||||
import { UserBase } from '@components/user/base';
|
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
|
||||||
|
import { usePageContext } from '@lume/utils/hooks/usePageContext';
|
||||||
import { WRITEONLY_RELAYS } from '@stores/constants';
|
import { fetchProfileMetadata } from '@lume/utils/hooks/useProfile';
|
||||||
|
import { createPleb, updateAccount } from '@lume/utils/storage';
|
||||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
import { arrayToNIP02 } from '@lume/utils/transform';
|
||||||
import { fetchProfileMetadata } from '@utils/hooks/useProfile';
|
|
||||||
import { createPleb, updateAccount } from '@utils/storage';
|
|
||||||
import { arrayToNIP02 } from '@utils/transform';
|
|
||||||
|
|
||||||
import { createClient } from '@supabase/supabase-js';
|
import { createClient } from '@supabase/supabase-js';
|
||||||
import { CheckCircle } from 'iconoir-react';
|
import { CheckCircle } from 'iconoir-react';
|
||||||
@ -124,67 +121,65 @@ export function Page() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<OnboardingLayout>
|
<div className="relative grid h-full w-full grid-rows-5">
|
||||||
<div className="relative grid h-full w-full grid-rows-5">
|
<div className="row-span-1 flex items-center justify-center">
|
||||||
<div className="row-span-1 flex items-center justify-center">
|
<div className="text-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">
|
||||||
<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
|
||||||
Personalized your newsfeed
|
</h1>
|
||||||
</h1>
|
<h3 className="text-lg text-zinc-500">
|
||||||
<h3 className="text-lg text-zinc-500">
|
Follow at least{' '}
|
||||||
Follow at least{' '}
|
<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
|
||||||
<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
|
{follows.length}/10
|
||||||
{follows.length}/10
|
</span>{' '}
|
||||||
</span>{' '}
|
plebs
|
||||||
plebs
|
</h3>
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="row-span-4 h-full w-full overflow-y-auto">
|
</div>
|
||||||
<div className="grid grid-cols-4 gap-4 px-8 py-4">
|
<div className="row-span-4 h-full w-full overflow-y-auto">
|
||||||
{list.map((item: { pubkey: string }, index: Key) => (
|
<div className="grid grid-cols-4 gap-4 px-8 py-4">
|
||||||
<button
|
{list.map((item: { pubkey: string }, index: Key) => (
|
||||||
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
|
<button
|
||||||
onClick={() => submit()}
|
key={index}
|
||||||
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"
|
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"
|
||||||
>
|
>
|
||||||
{loading === true ? (
|
<UserBase pubkey={item.pubkey} />
|
||||||
<svg
|
{follows.includes(item.pubkey) && (
|
||||||
className="h-5 w-5 animate-spin text-zinc-900"
|
<div>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<CheckCircle width={16} height={16} className="text-zinc-400" />
|
||||||
fill="none"
|
</div>
|
||||||
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! Go to newsfeed</span>
|
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
))}
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</OnboardingLayout>
|
{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! Go to newsfeed</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
124
src/onboarding/pages/import/index.page.tsx
Normal file
124
src/onboarding/pages/import/index.page.tsx
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
import { onboardingAtom } from '@lume/stores/onboarding';
|
||||||
|
|
||||||
|
import { useSetAtom } from 'jotai';
|
||||||
|
import { getPublicKey, nip19 } from 'nostr-tools';
|
||||||
|
import { Resolver, useForm } from 'react-hook-form';
|
||||||
|
import { navigate } from 'vite-plugin-ssr/client/router';
|
||||||
|
|
||||||
|
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 function Page() {
|
||||||
|
const setOnboardingPrivkey = useSetAtom(onboardingAtom);
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
setError,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors, isDirty, isValid, isSubmitting },
|
||||||
|
} = useForm<FormValues>({ resolver });
|
||||||
|
|
||||||
|
const onSubmit = async (data: any) => {
|
||||||
|
try {
|
||||||
|
let privkey = data['key'];
|
||||||
|
|
||||||
|
if (privkey.substring(0, 4) === 'nsec') {
|
||||||
|
privkey = nip19.decode(privkey).data;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof getPublicKey(privkey) === 'string') {
|
||||||
|
setOnboardingPrivkey((prev) => ({ ...prev, privkey: privkey }));
|
||||||
|
navigate(`/onboarding/import/step-2`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setError('key', {
|
||||||
|
type: 'custom',
|
||||||
|
message: 'Private Key is invalid, please check again',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<div className="mx-auto w-full max-w-md">
|
||||||
|
<div className="mb-8 text-center">
|
||||||
|
<h1 className="text-2xl font-semibold text-zinc-200">Import your key</h1>
|
||||||
|
</div>
|
||||||
|
<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-900 px-3.5 py-2.5 font-medium text-zinc-400 active:translate-y-1">
|
||||||
|
<div className="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-0.5 text-xs font-medium ring-1 ring-inset ring-zinc-400/20">
|
||||||
|
<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
|
||||||
|
Coming soon
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<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-zinc-950 px-2 text-sm text-zinc-500">or</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
|
||||||
|
<div className="flex flex-col gap-0.5">
|
||||||
|
<div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] 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-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-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-xs text-red-400">{errors.key && <p>{errors.key.message}</p>}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex h-9 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-fuchsia-500 px-3.5 py-2.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
|
||||||
|
>
|
||||||
|
<span className="drop-shadow-lg">Continue →</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
89
src/onboarding/pages/import/step-2/index.page.tsx
Normal file
89
src/onboarding/pages/import/step-2/index.page.tsx
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
import { DEFAULT_AVATAR, READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
|
import { onboardingAtom } from '@lume/stores/onboarding';
|
||||||
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
|
|
||||||
|
import { useAtom } from 'jotai';
|
||||||
|
import { RelayPool } from 'nostr-relaypool';
|
||||||
|
import { getPublicKey } from 'nostr-tools';
|
||||||
|
import { useMemo } from 'react';
|
||||||
|
import useSWRSubscription from 'swr/subscription';
|
||||||
|
|
||||||
|
export function Page() {
|
||||||
|
const [onboarding, setOnboarding] = useAtom(onboardingAtom);
|
||||||
|
const pubkey = useMemo(() => (onboarding.privkey ? getPublicKey(onboarding.privkey) : ''), [onboarding.privkey]);
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
console.log('click');
|
||||||
|
};
|
||||||
|
|
||||||
|
const { data: user, error } = useSWRSubscription(
|
||||||
|
pubkey
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
kinds: [0, 3],
|
||||||
|
authors: [pubkey],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: null,
|
||||||
|
(key, { next }) => {
|
||||||
|
const pool = new RelayPool(READONLY_RELAYS);
|
||||||
|
|
||||||
|
const unsubscribe = pool.subscribe(key, READONLY_RELAYS, (event: any) => {
|
||||||
|
switch (event.kind) {
|
||||||
|
case 0:
|
||||||
|
// update state
|
||||||
|
next(null, JSON.parse(event.content));
|
||||||
|
// create account
|
||||||
|
setOnboarding((prev) => ({ ...prev, metadata: event.content }));
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
console.log(event);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
unsubscribe();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<div className="mx-auto w-full max-w-md">
|
||||||
|
<div className="mb-8 text-center">
|
||||||
|
<h1 className="text-2xl font-semibold">Continue with</h1>
|
||||||
|
</div>
|
||||||
|
<div className="w-full rounded-lg border border-zinc-800 bg-zinc-900 p-4">
|
||||||
|
{error && <div>Failed to load profile</div>}
|
||||||
|
{!user ? (
|
||||||
|
<div className="h-44 w-full animate-pulse bg-zinc-800"></div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<img
|
||||||
|
className="relative inline-flex h-11 w-11 rounded-lg ring-2 ring-zinc-900"
|
||||||
|
src={user.picture || DEFAULT_AVATAR}
|
||||||
|
alt={pubkey}
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium leading-none text-zinc-200">{user.display_name || user.name}</h3>
|
||||||
|
<p className="text-sm text-zinc-400">{user.nip05 || shortenKey(pubkey)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => submit()}
|
||||||
|
className="w-full transform rounded-lg bg-fuchsia-500 px-3.5 py-2.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
|
||||||
|
>
|
||||||
|
<span className="drop-shadow-lg">Continue →</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1,5 +1,3 @@
|
|||||||
import OnboardingLayout from '@components/layouts/onboarding';
|
|
||||||
|
|
||||||
import { ArrowRight } from 'iconoir-react';
|
import { ArrowRight } from 'iconoir-react';
|
||||||
|
|
||||||
const PLEBS = [
|
const PLEBS = [
|
||||||
@ -74,45 +72,43 @@ const InfiniteLoopSlider = ({ children, duration, reverse }: { children: any; du
|
|||||||
|
|
||||||
export function Page() {
|
export function Page() {
|
||||||
return (
|
return (
|
||||||
<OnboardingLayout>
|
<div className="grid h-full w-full grid-rows-5">
|
||||||
<div className="grid h-full w-full grid-rows-5">
|
<div className="row-span-3 overflow-hidden">
|
||||||
<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">
|
||||||
<div className="relaive flex w-full max-w-full shrink-0 flex-col gap-4 overflow-hidden p-4">
|
{[...new Array(ROWS)].map((_, i) => (
|
||||||
{[...new Array(ROWS)].map((_, i) => (
|
<InfiniteLoopSlider key={i} duration={random(DURATION - 5000, DURATION + 20000)} reverse={i % 2}>
|
||||||
<InfiniteLoopSlider key={i} duration={random(DURATION - 5000, DURATION + 20000)} reverse={i % 2}>
|
{shuffle(PLEBS)
|
||||||
{shuffle(PLEBS)
|
.slice(0, PLEBS_PER_ROW)
|
||||||
.slice(0, PLEBS_PER_ROW)
|
.map((tag) => (
|
||||||
.map((tag) => (
|
<div key={tag} className="relative mr-4 h-11 w-11 gap-2 rounded-md bg-zinc-900 shadow-xl">
|
||||||
<div key={tag} className="relative mr-4 h-11 w-11 gap-2 rounded-md bg-zinc-900 shadow-xl">
|
<img src={tag} alt={tag} className="h-11 w-11 rounded-md border border-zinc-900" />
|
||||||
<img src={tag} alt={tag} className="h-11 w-11 rounded-md border border-zinc-900" />
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
</InfiniteLoopSlider>
|
||||||
</InfiniteLoopSlider>
|
))}
|
||||||
))}
|
<div className="pointer-events-none absolute inset-0 bg-fade" />
|
||||||
<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's start!
|
|
||||||
</h1>
|
|
||||||
<div className="mt-4 flex flex-col items-center gap-1.5">
|
|
||||||
<a
|
|
||||||
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} />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
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
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</OnboardingLayout>
|
<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's start!
|
||||||
|
</h1>
|
||||||
|
<div className="mt-4 flex flex-col items-center gap-1.5">
|
||||||
|
<a
|
||||||
|
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} />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/onboarding/import"
|
||||||
|
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
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
@ -1,15 +0,0 @@
|
|||||||
import NewsfeedLayout from '@components/layouts/newsfeed';
|
|
||||||
|
|
||||||
export function Page() {
|
|
||||||
return (
|
|
||||||
<NewsfeedLayout>
|
|
||||||
<div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</NewsfeedLayout>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,119 +0,0 @@
|
|||||||
import FormBase from '@components/form/base';
|
|
||||||
import NewsfeedLayout from '@components/layouts/newsfeed';
|
|
||||||
import { NoteBase } from '@components/note/base';
|
|
||||||
import { Placeholder } from '@components/note/placeholder';
|
|
||||||
import { NoteQuoteRepost } from '@components/note/quoteRepost';
|
|
||||||
|
|
||||||
import { hasNewerNoteAtom } from '@stores/note';
|
|
||||||
|
|
||||||
import { countTotalNotes, getNotes } from '@utils/storage';
|
|
||||||
|
|
||||||
import { useInfiniteQuery } from '@tanstack/react-query';
|
|
||||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
||||||
import { ArrowUp } from 'iconoir-react';
|
|
||||||
import { useAtom } from 'jotai';
|
|
||||||
import { useEffect, useRef } from 'react';
|
|
||||||
|
|
||||||
const ITEM_PER_PAGE = 20;
|
|
||||||
const TIME = Math.floor(Date.now() / 1000);
|
|
||||||
|
|
||||||
let totalNotes = 0;
|
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
const result = await countTotalNotes();
|
|
||||||
totalNotes = result.total;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Page() {
|
|
||||||
const [hasNewerNote] = useAtom(hasNewerNoteAtom);
|
|
||||||
|
|
||||||
const { status, error, data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage }: any = useInfiniteQuery({
|
|
||||||
queryKey: ['following'],
|
|
||||||
queryFn: async ({ pageParam = 0 }) => {
|
|
||||||
return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
|
|
||||||
},
|
|
||||||
getNextPageParam: (lastPage) => (lastPage.nextCursor <= totalNotes ? lastPage.nextCursor : 'undefined'),
|
|
||||||
});
|
|
||||||
|
|
||||||
const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
|
|
||||||
const parentRef = useRef();
|
|
||||||
|
|
||||||
const rowVirtualizer = useVirtualizer({
|
|
||||||
count: hasNextPage ? allRows.length + 1 : allRows.length,
|
|
||||||
getScrollElement: () => parentRef.current,
|
|
||||||
estimateSize: () => 400,
|
|
||||||
overscan: 5,
|
|
||||||
});
|
|
||||||
|
|
||||||
const itemsVirtualizer = rowVirtualizer.getVirtualItems();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
|
|
||||||
|
|
||||||
if (!lastItem) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (lastItem.index >= allRows.length - 1 && hasNextPage && !isFetchingNextPage) {
|
|
||||||
fetchNextPage();
|
|
||||||
}
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NewsfeedLayout>
|
|
||||||
<div className="relative h-full w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
|
|
||||||
{hasNewerNote && (
|
|
||||||
<div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
|
|
||||||
<button 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>
|
|
||||||
)}
|
|
||||||
{status === 'loading' ? (
|
|
||||||
<Placeholder />
|
|
||||||
) : status === 'error' ? (
|
|
||||||
<div>{error.message}</div>
|
|
||||||
) : (
|
|
||||||
<div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
|
|
||||||
<FormBase />
|
|
||||||
<div
|
|
||||||
className="relative w-full"
|
|
||||||
style={{
|
|
||||||
height: `${rowVirtualizer.getTotalSize()}px`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="absolute left-0 top-0 w-full"
|
|
||||||
style={{
|
|
||||||
transform: `translateY(${itemsVirtualizer[0].start - rowVirtualizer.options.scrollMargin}px)`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
|
||||||
const note = allRows[virtualRow.index];
|
|
||||||
if (note) {
|
|
||||||
if (note.kind === 1) {
|
|
||||||
return (
|
|
||||||
<div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
|
|
||||||
<NoteBase key={note.event_id} event={note} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<div key={virtualRow.index} data-index={virtualRow.index} ref={rowVirtualizer.measureElement}>
|
|
||||||
<NoteQuoteRepost key={note.event_id} event={note} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div>{isFetching && !isFetchingNextPage ? 'Background Updating...' : null}</div>
|
|
||||||
</div>
|
|
||||||
</NewsfeedLayout>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,169 +0,0 @@
|
|||||||
import OnboardingLayout from '@components/layouts/onboarding';
|
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
|
||||||
|
|
||||||
import { WRITEONLY_RELAYS } from '@stores/constants';
|
|
||||||
|
|
||||||
import { createAccount } from '@utils/storage';
|
|
||||||
|
|
||||||
import { EyeClose, EyeEmpty } from 'iconoir-react';
|
|
||||||
import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
|
|
||||||
import { useCallback, useContext, useMemo, useState } from 'react';
|
|
||||||
import { navigate } from 'vite-plugin-ssr/client/router';
|
|
||||||
|
|
||||||
export function Page() {
|
|
||||||
const pool: any = useContext(RelayContext);
|
|
||||||
|
|
||||||
const [type, setType] = useState('password');
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const privkey = useMemo(() => generatePrivateKey(), []);
|
|
||||||
const name = 'Pleb';
|
|
||||||
|
|
||||||
const pubkey = getPublicKey(privkey);
|
|
||||||
const npub = nip19.npubEncode(pubkey);
|
|
||||||
const nsec = nip19.nsecEncode(privkey);
|
|
||||||
|
|
||||||
// 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 () => {
|
|
||||||
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
|
|
||||||
createAccount(pubkey, privkey, metadata);
|
|
||||||
// broadcast
|
|
||||||
pool.publish(event, WRITEONLY_RELAYS);
|
|
||||||
// redirect to next step
|
|
||||||
navigate(`/onboarding/create/step-2?pubkey=${pubkey}&privkey=${privkey}`, { overwriteLastHistoryEntry: true });
|
|
||||||
}, [pool, pubkey, privkey, metadata]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<OnboardingLayout>
|
|
||||||
<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-center">
|
|
||||||
<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 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">
|
|
||||||
<img
|
|
||||||
src={metadata.picture}
|
|
||||||
alt="default avatar"
|
|
||||||
className="h-11 w-11 rounded-md object-cover"
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
</OnboardingLayout>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,121 +0,0 @@
|
|||||||
import OnboardingLayout from '@components/layouts/onboarding';
|
|
||||||
|
|
||||||
import { CableTag } from 'iconoir-react';
|
|
||||||
import { getPublicKey, nip19 } from 'nostr-tools';
|
|
||||||
import { Resolver, useForm } from 'react-hook-form';
|
|
||||||
import { navigate } from 'vite-plugin-ssr/client/router';
|
|
||||||
|
|
||||||
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 function Page() {
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
setError,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors, isDirty, isValid, isSubmitting },
|
|
||||||
} = useForm<FormValues>({ resolver });
|
|
||||||
|
|
||||||
const onSubmit = async (data: any) => {
|
|
||||||
try {
|
|
||||||
let privkey = data['key'];
|
|
||||||
|
|
||||||
if (privkey.substring(0, 4) === 'nsec') {
|
|
||||||
privkey = nip19.decode(privkey).data;
|
|
||||||
}
|
|
||||||
if (typeof getPublicKey(privkey) === 'string') {
|
|
||||||
navigate(`/onboarding/login/step-2?privkey=${privkey}`, { overwriteLastHistoryEntry: true });
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
setError('key', {
|
|
||||||
type: 'custom',
|
|
||||||
message: 'Private Key is invalid, please check again',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<OnboardingLayout>
|
|
||||||
<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-center">
|
|
||||||
<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>
|
|
||||||
<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-0.5">
|
|
||||||
<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-xs text-red-400">{errors.key && <p>{errors.key.message}</p>}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-3 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>
|
|
||||||
</OnboardingLayout>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,156 +0,0 @@
|
|||||||
import OnboardingLayout from '@components/layouts/onboarding';
|
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
|
||||||
|
|
||||||
import { DEFAULT_AVATAR, READONLY_RELAYS } from '@stores/constants';
|
|
||||||
|
|
||||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
|
||||||
import { fetchProfileMetadata } from '@utils/hooks/useProfile';
|
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
import { createAccount, createPleb, updateAccount } from '@utils/storage';
|
|
||||||
import { nip02ToArray } from '@utils/transform';
|
|
||||||
|
|
||||||
import { getPublicKey } from 'nostr-tools';
|
|
||||||
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
||||||
import { navigate } from 'vite-plugin-ssr/client/router';
|
|
||||||
|
|
||||||
export function Page() {
|
|
||||||
const pageContext = usePageContext();
|
|
||||||
const searchParams = pageContext.urlParsed.search;
|
|
||||||
|
|
||||||
const privkey = searchParams.privkey;
|
|
||||||
const pubkey = useMemo(() => (privkey ? getPublicKey(privkey) : ''), [privkey]);
|
|
||||||
|
|
||||||
const pool: any = useContext(RelayContext);
|
|
||||||
const [profile, setProfile] = useState({ metadata: null });
|
|
||||||
const [done, setDone] = useState(false);
|
|
||||||
|
|
||||||
const timeout = useRef(null);
|
|
||||||
const nip02 = useRef(null);
|
|
||||||
|
|
||||||
const createPlebs = useCallback(async (tags: string[]) => {
|
|
||||||
for (const tag of tags) {
|
|
||||||
fetchProfileMetadata(tag[1])
|
|
||||||
.then((res: any) => createPleb(tag[1], res.content))
|
|
||||||
.catch(console.error);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const submit = () => {
|
|
||||||
// update account's folllows with NIP-02 tag list
|
|
||||||
const arr = nip02ToArray(nip02.current);
|
|
||||||
updateAccount('follows', arr, pubkey);
|
|
||||||
// create plebs (saved nostr profile)
|
|
||||||
createPlebs(nip02.current);
|
|
||||||
// redirect to splashscreen
|
|
||||||
navigate('/', { overwriteLastHistoryEntry: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const unsubscribe = pool.subscribe(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
kinds: [0, 3],
|
|
||||||
authors: [pubkey],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
READONLY_RELAYS,
|
|
||||||
(event: any) => {
|
|
||||||
switch (event.kind) {
|
|
||||||
case 0:
|
|
||||||
// create account
|
|
||||||
createAccount(pubkey, privkey, event.content);
|
|
||||||
// update state
|
|
||||||
setProfile({
|
|
||||||
metadata: JSON.parse(event.content),
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
nip02.current = event.tags;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
undefined,
|
|
||||||
() => {
|
|
||||||
timeout.current = setTimeout(() => setDone(true), 5000);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
unsubscribeOnEose: true,
|
|
||||||
logAllEvents: false,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
unsubscribe();
|
|
||||||
clearTimeout(timeout.current);
|
|
||||||
};
|
|
||||||
}, [pool, pubkey, privkey]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<OnboardingLayout>
|
|
||||||
<div className="grid h-full w-full grid-rows-5">
|
|
||||||
<div className="row-span-1 flex items-center justify-center">
|
|
||||||
<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 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">
|
|
||||||
<img
|
|
||||||
className="h-10 w-10 rounded-full object-cover"
|
|
||||||
src={profile.metadata?.picture || DEFAULT_AVATAR}
|
|
||||||
alt="avatar"
|
|
||||||
/>
|
|
||||||
</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 && shortenKey(pubkey))}</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! Go to newsfeed</span>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</OnboardingLayout>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,18 +0,0 @@
|
|||||||
import NewsfeedLayout from '@components/layouts/newsfeed';
|
|
||||||
|
|
||||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
|
||||||
|
|
||||||
export function Page() {
|
|
||||||
const pageContext = usePageContext();
|
|
||||||
const searchParams: any = pageContext.urlParsed.search;
|
|
||||||
|
|
||||||
const pubkey = searchParams.pubkey;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NewsfeedLayout>
|
|
||||||
<div className="scrollbar-hide h-full w-full overflow-y-auto">
|
|
||||||
<p>{pubkey}</p>
|
|
||||||
</div>
|
|
||||||
</NewsfeedLayout>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,12 +1,14 @@
|
|||||||
import '@renderer/index.css';
|
import '@lume/renderer/index.css';
|
||||||
import { Shell } from '@renderer/shell';
|
import { Shell } from '@lume/renderer/shell';
|
||||||
import { PageContextClient } from '@renderer/types';
|
import { PageContextClient } from '@lume/renderer/types';
|
||||||
|
|
||||||
import { StrictMode } from 'react';
|
import { StrictMode } from 'react';
|
||||||
import { Root, createRoot, hydrateRoot } from 'react-dom/client';
|
import { Root, createRoot, hydrateRoot } from 'react-dom/client';
|
||||||
import 'vidstack/styles/defaults.css';
|
import 'vidstack/styles/defaults.css';
|
||||||
|
|
||||||
export const clientRouting = true;
|
export const clientRouting = true;
|
||||||
|
export const hydrationCanBeAborted = true;
|
||||||
|
|
||||||
let root: Root;
|
let root: Root;
|
||||||
|
|
||||||
export async function render(pageContext: PageContextClient) {
|
export async function render(pageContext: PageContextClient) {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { Shell } from '@renderer/shell';
|
import { Shell } from '@lume/renderer/shell';
|
||||||
import { PageContextServer } from '@renderer/types';
|
import { PageContextServer } from '@lume/renderer/types';
|
||||||
|
|
||||||
import { StrictMode } from 'react';
|
import { StrictMode } from 'react';
|
||||||
import ReactDOMServer from 'react-dom/server';
|
import ReactDOMServer from 'react-dom/server';
|
||||||
|
3
src/renderer/layoutDefault.tsx
Normal file
3
src/renderer/layoutDefault.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export function LayoutDefault({ children }: { children: React.ReactNode }) {
|
||||||
|
return <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">{children}</div>;
|
||||||
|
}
|
@ -1,22 +1,23 @@
|
|||||||
import AccountProvider from '@components/accountProvider';
|
import AccountProvider from '@lume/shared/accountProvider';
|
||||||
import RelayProvider from '@components/relaysProvider';
|
import { PageContextProvider } from '@lume/utils/hooks/usePageContext';
|
||||||
|
|
||||||
import { PageContextProvider } from '@utils/hooks/usePageContext';
|
|
||||||
|
|
||||||
import { PageContext } from '@renderer/types';
|
import { PageContext } from '@renderer/types';
|
||||||
|
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import { LayoutDefault } from './layoutDefault';
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
export function Shell({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) {
|
export function Shell({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) {
|
||||||
|
const Layout = (pageContext.exports.Layout as React.ElementType) || (LayoutDefault as React.ElementType);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageContextProvider pageContext={pageContext}>
|
<PageContextProvider pageContext={pageContext}>
|
||||||
<RelayProvider>
|
<Layout>
|
||||||
<AccountProvider>
|
<AccountProvider>
|
||||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||||
</AccountProvider>
|
</AccountProvider>
|
||||||
</RelayProvider>
|
</Layout>
|
||||||
</PageContextProvider>
|
</PageContextProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -5,7 +5,7 @@ export const AccountContext = createContext({});
|
|||||||
let activeAccount: any = { id: '', pubkey: '', follows: null, metadata: {} };
|
let activeAccount: any = { id: '', pubkey: '', follows: null, metadata: {} };
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
const { getActiveAccount } = await import('@utils/storage');
|
const { getActiveAccount } = await import('@lume/utils/storage');
|
||||||
activeAccount = await getActiveAccount();
|
activeAccount = await getActiveAccount();
|
||||||
}
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
|||||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
import { usePageContext } from '@lume/utils/hooks/usePageContext';
|
||||||
|
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
@ -1,4 +1,4 @@
|
|||||||
import EventCollector from '@components/eventCollector';
|
import EventCollector from '@lume/shared/eventCollector';
|
||||||
|
|
||||||
import { ArrowLeft, ArrowRight, Refresh } from 'iconoir-react';
|
import { ArrowLeft, ArrowRight, Refresh } from 'iconoir-react';
|
||||||
|
|
@ -1,4 +1,4 @@
|
|||||||
import { createBlobFromFile } from '@utils/createBlobFromFile';
|
import { createBlobFromFile } from '@lume/utils/createBlobFromFile';
|
||||||
|
|
||||||
import { open } from '@tauri-apps/api/dialog';
|
import { open } from '@tauri-apps/api/dialog';
|
||||||
import { Body, fetch } from '@tauri-apps/api/http';
|
import { Body, fetch } from '@tauri-apps/api/http';
|
@ -1,4 +1,4 @@
|
|||||||
import { UserMuted } from '@components/user/muted';
|
import { UserMuted } from '@lume/shared/user/muted';
|
||||||
|
|
||||||
import { Popover, Transition } from '@headlessui/react';
|
import { Popover, Transition } from '@headlessui/react';
|
||||||
import { MicMute } from 'iconoir-react';
|
import { MicMute } from 'iconoir-react';
|
@ -1,10 +1,10 @@
|
|||||||
import { ChannelListItem } from '@components/channels/channelListItem';
|
import { ChannelListItem } from '@lume/shared/channels/channelListItem';
|
||||||
import { CreateChannelModal } from '@components/channels/createChannelModal';
|
import { CreateChannelModal } from '@lume/shared/channels/createChannelModal';
|
||||||
|
|
||||||
let channels: any = [];
|
let channels: any = [];
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
const { getChannels } = await import('@utils/storage');
|
const { getChannels } = await import('@lume/utils/storage');
|
||||||
channels = await getChannels(100, 0);
|
channels = await getChannels(100, 0);
|
||||||
}
|
}
|
||||||
|
|
@ -1,7 +1,6 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { useChannelMetadata } from '@lume/utils/hooks/useChannelMetadata';
|
||||||
import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
|
import { usePageContext } from '@lume/utils/hooks/usePageContext';
|
||||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
|
||||||
|
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
@ -1,6 +1,5 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { useChannelProfile } from '@lume/utils/hooks/useChannelProfile';
|
||||||
import { useChannelProfile } from '@utils/hooks/useChannelProfile';
|
|
||||||
|
|
||||||
import { Copy } from 'iconoir-react';
|
import { Copy } from 'iconoir-react';
|
||||||
import { nip19 } from 'nostr-tools';
|
import { nip19 } from 'nostr-tools';
|
@ -1,11 +1,9 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { AvatarUploader } from '@components/avatarUploader';
|
import { AvatarUploader } from '@lume/shared/avatarUploader';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@stores/constants';
|
import { dateToUnix } from '@lume/utils/getDate';
|
||||||
|
import { createChannel } from '@lume/utils/storage';
|
||||||
import { dateToUnix } from '@utils/getDate';
|
|
||||||
import { createChannel } from '@utils/storage';
|
|
||||||
|
|
||||||
import { Dialog, Transition } from '@headlessui/react';
|
import { Dialog, Transition } from '@headlessui/react';
|
||||||
import { Cancel, Plus } from 'iconoir-react';
|
import { Cancel, Plus } from 'iconoir-react';
|
@ -1,10 +1,8 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
import Tooltip from '@components/tooltip';
|
import Tooltip from '@lume/shared/tooltip';
|
||||||
|
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { WRITEONLY_RELAYS } from '@stores/constants';
|
import { dateToUnix } from '@lume/utils/getDate';
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
|
||||||
|
|
||||||
import { EyeClose } from 'iconoir-react';
|
import { EyeClose } from 'iconoir-react';
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
@ -1,7 +1,6 @@
|
|||||||
import { ChannelMessageItem } from '@components/channels/messages/item';
|
import { ChannelMessageItem } from '@lume/shared/channels/messages/item';
|
||||||
import { Placeholder } from '@components/note/placeholder';
|
import { Placeholder } from '@lume/shared/note/placeholder';
|
||||||
|
import { sortedChannelMessagesAtom } from '@lume/stores/channel';
|
||||||
import { sortedChannelMessagesAtom } from '@stores/channel';
|
|
||||||
|
|
||||||
import { useAtomValue } from 'jotai';
|
import { useAtomValue } from 'jotai';
|
||||||
import { useCallback, useRef } from 'react';
|
import { useCallback, useRef } from 'react';
|
@ -1,9 +1,8 @@
|
|||||||
import { HideMessageButton } from '@components/channels/messages/hideMessageButton';
|
import { HideMessageButton } from '@lume/shared/channels/messages/hideMessageButton';
|
||||||
import { MuteButton } from '@components/channels/messages/muteButton';
|
import { MuteButton } from '@lume/shared/channels/messages/muteButton';
|
||||||
import { ReplyButton } from '@components/channels/messages/replyButton';
|
import { ReplyButton } from '@lume/shared/channels/messages/replyButton';
|
||||||
import { MessageUser } from '@components/chats/messageUser';
|
import { MessageUser } from '@lume/shared/chats/messageUser';
|
||||||
|
import { messageParser } from '@lume/utils/parser';
|
||||||
import { messageParser } from '@utils/parser';
|
|
||||||
|
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
|
|
@ -1,10 +1,8 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
import Tooltip from '@components/tooltip';
|
import Tooltip from '@lume/shared/tooltip';
|
||||||
|
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { WRITEONLY_RELAYS } from '@stores/constants';
|
import { dateToUnix } from '@lume/utils/getDate';
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
|
||||||
|
|
||||||
import { MicMute } from 'iconoir-react';
|
import { MicMute } from 'iconoir-react';
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
@ -1,6 +1,5 @@
|
|||||||
import Tooltip from '@components/tooltip';
|
import Tooltip from '@lume/shared/tooltip';
|
||||||
|
import { channelReplyAtom } from '@lume/stores/channel';
|
||||||
import { channelReplyAtom } from '@stores/channel';
|
|
||||||
|
|
||||||
import { Reply } from 'iconoir-react';
|
import { Reply } from 'iconoir-react';
|
||||||
import { useSetAtom } from 'jotai';
|
import { useSetAtom } from 'jotai';
|
@ -1,11 +1,9 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { AvatarUploader } from '@components/avatarUploader';
|
import { AvatarUploader } from '@lume/shared/avatarUploader';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@stores/constants';
|
import { dateToUnix } from '@lume/utils/getDate';
|
||||||
|
import { getChannel, updateChannelMetadata } from '@lume/utils/storage';
|
||||||
import { dateToUnix } from '@utils/getDate';
|
|
||||||
import { getChannel, updateChannelMetadata } from '@utils/storage';
|
|
||||||
|
|
||||||
import { Dialog, Transition } from '@headlessui/react';
|
import { Dialog, Transition } from '@headlessui/react';
|
||||||
import { Cancel, EditPencil } from 'iconoir-react';
|
import { Cancel, EditPencil } from 'iconoir-react';
|
@ -1,15 +1,14 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { ChatListItem } from '@components/chats/chatListItem';
|
import { ChatListItem } from '@lume/shared/chats/chatListItem';
|
||||||
import { ChatModal } from '@components/chats/chatModal';
|
import { ChatModal } from '@lume/shared/chats/chatModal';
|
||||||
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
|
||||||
|
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
|
|
||||||
let list: any = [];
|
let list: any = [];
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
const { getChats, getActiveAccount } = await import('@utils/storage');
|
const { getChats, getActiveAccount } = await import('@lume/utils/storage');
|
||||||
const activeAccount = await getActiveAccount();
|
const activeAccount = await getActiveAccount();
|
||||||
|
|
||||||
list = await getChats(activeAccount.id);
|
list = await getChats(activeAccount.id);
|
@ -1,8 +1,7 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { usePageContext } from '@lume/utils/hooks/usePageContext';
|
||||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
import { useProfile } from '@lume/utils/hooks/useProfile';
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
@ -1,6 +1,5 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
import { navigate } from 'vite-plugin-ssr/client/router';
|
import { navigate } from 'vite-plugin-ssr/client/router';
|
||||||
|
|
@ -1,8 +1,7 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { MessageListItem } from '@components/chats/messageListItem';
|
import { MessageListItem } from '@lume/shared/chats/messageListItem';
|
||||||
import { Placeholder } from '@components/note/placeholder';
|
import { Placeholder } from '@lume/shared/note/placeholder';
|
||||||
|
import { sortedChatMessagesAtom } from '@lume/stores/chat';
|
||||||
import { sortedChatMessagesAtom } from '@stores/chat';
|
|
||||||
|
|
||||||
import { useAtomValue } from 'jotai';
|
import { useAtomValue } from 'jotai';
|
||||||
import { useCallback, useContext, useRef } from 'react';
|
import { useCallback, useContext, useRef } from 'react';
|
@ -1,6 +1,5 @@
|
|||||||
import { MessageUser } from '@components/chats/messageUser';
|
import { MessageUser } from '@lume/shared/chats/messageUser';
|
||||||
|
import { useDecryptMessage } from '@lume/utils/hooks/useDecryptMessage';
|
||||||
import { useDecryptMessage } from '@utils/hooks/useDecryptMessage';
|
|
||||||
|
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
|
|
@ -1,7 +1,6 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { useProfile } from '@lume/utils/hooks/useProfile';
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
@ -1,13 +1,11 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { NetworkStatusIndicator } from '@components/networkStatusIndicator';
|
import { NetworkStatusIndicator } from '@lume/shared/networkStatusIndicator';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { READONLY_RELAYS } from '@stores/constants';
|
import { hasNewerNoteAtom } from '@lume/stores/note';
|
||||||
import { hasNewerNoteAtom } from '@stores/note';
|
import { dateToUnix } from '@lume/utils/getDate';
|
||||||
|
import { createChat, createNote, updateAccount } from '@lume/utils/storage';
|
||||||
import { dateToUnix } from '@utils/getDate';
|
import { getParentID, nip02ToArray } from '@lume/utils/transform';
|
||||||
import { createChat, createNote, updateAccount } from '@utils/storage';
|
|
||||||
import { getParentID, nip02ToArray } from '@utils/transform';
|
|
||||||
|
|
||||||
import { useSetAtom } from 'jotai';
|
import { useSetAtom } from 'jotai';
|
||||||
import { useCallback, useContext, useEffect, useRef } from 'react';
|
import { useCallback, useContext, useEffect, useRef } from 'react';
|
@ -1,11 +1,9 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { ImagePicker } from '@components/form/imagePicker';
|
import { ImagePicker } from '@lume/shared/form/imagePicker';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { WRITEONLY_RELAYS } from '@stores/constants';
|
import { noteContentAtom } from '@lume/stores/note';
|
||||||
import { noteContentAtom } from '@stores/note';
|
import { dateToUnix } from '@lume/utils/getDate';
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
|
||||||
|
|
||||||
import { useAtom } from 'jotai';
|
import { useAtom } from 'jotai';
|
||||||
import { useResetAtom } from 'jotai/utils';
|
import { useResetAtom } from 'jotai/utils';
|
@ -1,12 +1,10 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { ImagePicker } from '@components/form/imagePicker';
|
import { ImagePicker } from '@lume/shared/form/imagePicker';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
import { UserMini } from '@components/user/mini';
|
import { UserMini } from '@lume/shared/user/mini';
|
||||||
|
import { channelContentAtom, channelReplyAtom } from '@lume/stores/channel';
|
||||||
import { channelContentAtom, channelReplyAtom } from '@stores/channel';
|
import { FULL_RELAYS } from '@lume/stores/constants';
|
||||||
import { FULL_RELAYS } from '@stores/constants';
|
import { dateToUnix } from '@lume/utils/getDate';
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
|
||||||
|
|
||||||
import { Cancel } from 'iconoir-react';
|
import { Cancel } from 'iconoir-react';
|
||||||
import { useAtom, useAtomValue } from 'jotai';
|
import { useAtom, useAtomValue } from 'jotai';
|
@ -1,11 +1,9 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { ImagePicker } from '@components/form/imagePicker';
|
import { ImagePicker } from '@lume/shared/form/imagePicker';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { chatContentAtom } from '@lume/stores/chat';
|
||||||
import { chatContentAtom } from '@stores/chat';
|
import { FULL_RELAYS } from '@lume/stores/constants';
|
||||||
import { FULL_RELAYS } from '@stores/constants';
|
import { dateToUnix } from '@lume/utils/getDate';
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
|
||||||
|
|
||||||
import { useAtom } from 'jotai';
|
import { useAtom } from 'jotai';
|
||||||
import { useResetAtom } from 'jotai/utils';
|
import { useResetAtom } from 'jotai/utils';
|
@ -1,9 +1,7 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { WRITEONLY_RELAYS } from '@stores/constants';
|
import { dateToUnix } from '@lume/utils/getDate';
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
|
||||||
|
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
||||||
import { useContext, useState } from 'react';
|
import { useContext, useState } from 'react';
|
@ -1,8 +1,7 @@
|
|||||||
import { channelContentAtom } from '@stores/channel';
|
import { channelContentAtom } from '@lume/stores/channel';
|
||||||
import { chatContentAtom } from '@stores/chat';
|
import { chatContentAtom } from '@lume/stores/chat';
|
||||||
import { noteContentAtom } from '@stores/note';
|
import { noteContentAtom } from '@lume/stores/note';
|
||||||
|
import { createBlobFromFile } from '@lume/utils/createBlobFromFile';
|
||||||
import { createBlobFromFile } from '@utils/createBlobFromFile';
|
|
||||||
|
|
||||||
import { open } from '@tauri-apps/api/dialog';
|
import { open } from '@tauri-apps/api/dialog';
|
||||||
import { Body, fetch } from '@tauri-apps/api/http';
|
import { Body, fetch } from '@tauri-apps/api/http';
|
@ -1,4 +1,4 @@
|
|||||||
export default function LumeSymbol({ className }: { className: string }) {
|
export default function LumeIcon({ className }: { className: string }) {
|
||||||
return (
|
return (
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className}>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className}>
|
||||||
<path
|
<path
|
@ -1,6 +1,6 @@
|
|||||||
import AppHeader from '@components/appHeader';
|
import AppHeader from '@lume/shared/appHeader';
|
||||||
import MultiAccounts from '@components/multiAccounts';
|
import MultiAccounts from '@lume/shared/multiAccounts';
|
||||||
import Navigation from '@components/navigation';
|
import Navigation from '@lume/shared/navigation';
|
||||||
|
|
||||||
export default function ChannelLayout({ children }: { children: React.ReactNode }) {
|
export default function ChannelLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
@ -1,6 +1,6 @@
|
|||||||
import AppHeader from '@components/appHeader';
|
import AppHeader from '@lume/shared/appHeader';
|
||||||
import MultiAccounts from '@components/multiAccounts';
|
import MultiAccounts from '@lume/shared/multiAccounts';
|
||||||
import Navigation from '@components/navigation';
|
import Navigation from '@lume/shared/navigation';
|
||||||
|
|
||||||
export default function NewsfeedLayout({ children }: { children: React.ReactNode }) {
|
export default function NewsfeedLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
@ -1,4 +1,4 @@
|
|||||||
import AppHeader from '@components/appHeader';
|
import AppHeader from '@lume/shared/appHeader';
|
||||||
|
|
||||||
export default function OnboardingLayout({ children }: { children: React.ReactNode }) {
|
export default function OnboardingLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
@ -1,4 +1,4 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
|
||||||
export const ActiveAccount = ({ user }: { user: any }) => {
|
export const ActiveAccount = ({ user }: { user: any }) => {
|
||||||
const userData = JSON.parse(user.metadata);
|
const userData = JSON.parse(user.metadata);
|
@ -1,4 +1,4 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
|
|
@ -1,18 +1,16 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { ActiveAccount } from '@components/multiAccounts/activeAccount';
|
import { ActiveAccount } from '@lume/shared/multiAccounts/activeAccount';
|
||||||
import { InactiveAccount } from '@components/multiAccounts/inactiveAccount';
|
import { InactiveAccount } from '@lume/shared/multiAccounts/inactiveAccount';
|
||||||
|
import { APP_VERSION } from '@lume/stores/constants';
|
||||||
import { APP_VERSION } from '@stores/constants';
|
|
||||||
|
|
||||||
import LumeSymbol from '@assets/icons/Lume';
|
import LumeSymbol from '@assets/icons/Lume';
|
||||||
|
|
||||||
import { Plus } from 'iconoir-react';
|
import { Plus } from 'iconoir-react';
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
|
|
||||||
let accounts: any = [];
|
let accounts: any = [];
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
const { getAccounts } = await import('@utils/storage');
|
const { getAccounts } = await import('@lume/utils/storage');
|
||||||
accounts = await getAccounts();
|
accounts = await getAccounts();
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
|||||||
import ActiveLink from '@components/activeLink';
|
import ActiveLink from '@lume/shared/activeLink';
|
||||||
import ChannelList from '@components/channels/channelList';
|
import ChannelList from '@lume/shared/channels/channelList';
|
||||||
import ChatList from '@components/chats/chatList';
|
import ChatList from '@lume/shared/chats/chatList';
|
||||||
|
|
||||||
import { Disclosure } from '@headlessui/react';
|
import { Disclosure } from '@headlessui/react';
|
||||||
import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
|
import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
|
@ -1,4 +1,4 @@
|
|||||||
import { useNetworkStatus } from '@utils/hooks/useNetworkStatus';
|
import { useNetworkStatus } from '@lume/utils/hooks/useNetworkStatus';
|
||||||
|
|
||||||
export const NetworkStatusIndicator = () => {
|
export const NetworkStatusIndicator = () => {
|
||||||
const isOnline = useNetworkStatus();
|
const isOnline = useNetworkStatus();
|
@ -1,8 +1,7 @@
|
|||||||
import { NoteMetadata } from '@components/note/metadata';
|
import { NoteMetadata } from '@lume/shared/note/metadata';
|
||||||
import { NoteParent } from '@components/note/parent';
|
import { NoteParent } from '@lume/shared/note/parent';
|
||||||
import { UserExtend } from '@components/user/extend';
|
import { UserExtend } from '@lume/shared/user/extend';
|
||||||
|
import { contentParser } from '@lume/utils/parser';
|
||||||
import { contentParser } from '@utils/parser';
|
|
||||||
|
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
import { navigate } from 'vite-plugin-ssr/client/router';
|
import { navigate } from 'vite-plugin-ssr/client/router';
|
@ -1,9 +1,9 @@
|
|||||||
import { NoteMetadata } from '@components/note/metadata';
|
import { NoteMetadata } from '@lume/shared/note/metadata';
|
||||||
import { ImagePreview } from '@components/note/preview/image';
|
import { ImagePreview } from '@lume/shared/note/preview/image';
|
||||||
import { VideoPreview } from '@components/note/preview/video';
|
import { VideoPreview } from '@lume/shared/note/preview/video';
|
||||||
import { NoteQuote } from '@components/note/quote';
|
import { NoteQuote } from '@lume/shared/note/quote';
|
||||||
import { UserExtend } from '@components/user/extend';
|
import { UserExtend } from '@lume/shared/user/extend';
|
||||||
import { UserMention } from '@components/user/mention';
|
import { UserMention } from '@lume/shared/user/mention';
|
||||||
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { memo, useMemo } from 'react';
|
import { memo, useMemo } from 'react';
|
@ -1,9 +1,9 @@
|
|||||||
import { NoteMetadata } from '@components/note/metadata';
|
import { NoteMetadata } from '@lume/shared/note/metadata';
|
||||||
import { ImagePreview } from '@components/note/preview/image';
|
import { ImagePreview } from '@lume/shared/note/preview/image';
|
||||||
import { VideoPreview } from '@components/note/preview/video';
|
import { VideoPreview } from '@lume/shared/note/preview/video';
|
||||||
import { NoteQuote } from '@components/note/quote';
|
import { NoteQuote } from '@lume/shared/note/quote';
|
||||||
import { UserLarge } from '@components/user/large';
|
import { UserLarge } from '@lume/shared/user/large';
|
||||||
import { UserMention } from '@components/user/mention';
|
import { UserMention } from '@lume/shared/user/mention';
|
||||||
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { memo, useMemo } from 'react';
|
import { memo, useMemo } from 'react';
|
@ -1,10 +1,8 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
import { UserExtend } from '@components/user/extend';
|
import { UserExtend } from '@lume/shared/user/extend';
|
||||||
|
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { WRITEONLY_RELAYS } from '@stores/constants';
|
import { dateToUnix } from '@lume/utils/getDate';
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
|
||||||
|
|
||||||
import { Dialog, Transition } from '@headlessui/react';
|
import { Dialog, Transition } from '@headlessui/react';
|
||||||
import { ChatLines, OpenNewWindow } from 'iconoir-react';
|
import { ChatLines, OpenNewWindow } from 'iconoir-react';
|
@ -1,9 +1,7 @@
|
|||||||
import { AccountContext } from '@components/accountProvider';
|
import { AccountContext } from '@lume/shared/accountProvider';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { WRITEONLY_RELAYS } from '@stores/constants';
|
import { dateToUnix } from '@lume/utils/getDate';
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
|
||||||
|
|
||||||
import { Heart } from 'iconoir-react';
|
import { Heart } from 'iconoir-react';
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
@ -1,10 +1,8 @@
|
|||||||
import { NoteMetadata } from '@components/note/metadata';
|
import { NoteMetadata } from '@lume/shared/note/metadata';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
import { UserExtend } from '@components/user/extend';
|
import { UserExtend } from '@lume/shared/user/extend';
|
||||||
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { READONLY_RELAYS } from '@stores/constants';
|
import { contentParser } from '@lume/utils/parser';
|
||||||
|
|
||||||
import { contentParser } from '@utils/parser';
|
|
||||||
|
|
||||||
import { memo, useContext } from 'react';
|
import { memo, useContext } from 'react';
|
||||||
import useSWRSubscription from 'swr/subscription';
|
import useSWRSubscription from 'swr/subscription';
|
@ -1,9 +1,7 @@
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
import { UserExtend } from '@components/user/extend';
|
import { UserExtend } from '@lume/shared/user/extend';
|
||||||
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { READONLY_RELAYS } from '@stores/constants';
|
import { contentParser } from '@lume/utils/parser';
|
||||||
|
|
||||||
import { contentParser } from '@utils/parser';
|
|
||||||
|
|
||||||
import { memo, useContext } from 'react';
|
import { memo, useContext } from 'react';
|
||||||
import useSWRSubscription from 'swr/subscription';
|
import useSWRSubscription from 'swr/subscription';
|
@ -1,7 +1,6 @@
|
|||||||
import { RootNote } from '@components/note/rootNote';
|
import { RootNote } from '@lume/shared/note/rootNote';
|
||||||
import { UserQuoteRepost } from '@components/user/quoteRepost';
|
import { UserQuoteRepost } from '@lume/shared/user/quoteRepost';
|
||||||
|
import { getQuoteID } from '@lume/utils/transform';
|
||||||
import { getQuoteID } from '@utils/transform';
|
|
||||||
|
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
|
|
@ -1,10 +1,8 @@
|
|||||||
import { NoteMetadata } from '@components/note/metadata';
|
import { NoteMetadata } from '@lume/shared/note/metadata';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
import { UserExtend } from '@components/user/extend';
|
import { UserExtend } from '@lume/shared/user/extend';
|
||||||
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { READONLY_RELAYS } from '@stores/constants';
|
import { contentParser } from '@lume/utils/parser';
|
||||||
|
|
||||||
import { contentParser } from '@utils/parser';
|
|
||||||
|
|
||||||
import { memo, useContext } from 'react';
|
import { memo, useContext } from 'react';
|
||||||
import useSWRSubscription from 'swr/subscription';
|
import useSWRSubscription from 'swr/subscription';
|
@ -1,7 +1,6 @@
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
import { UserFollow } from '@components/user/follow';
|
import { UserFollow } from '@lume/shared/user/follow';
|
||||||
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { READONLY_RELAYS } from '@stores/constants';
|
|
||||||
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { Author } from 'nostr-relaypool';
|
import { Author } from 'nostr-relaypool';
|
@ -1,7 +1,6 @@
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
import { UserFollow } from '@components/user/follow';
|
import { UserFollow } from '@lume/shared/user/follow';
|
||||||
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { READONLY_RELAYS } from '@stores/constants';
|
|
||||||
|
|
||||||
import { Author } from 'nostr-relaypool';
|
import { Author } from 'nostr-relaypool';
|
||||||
import { useContext, useEffect, useState } from 'react';
|
import { useContext, useEffect, useState } from 'react';
|
@ -1,8 +1,6 @@
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { DEFAULT_AVATAR, READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { DEFAULT_AVATAR, READONLY_RELAYS } from '@stores/constants';
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
|
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
import destr from 'destr';
|
import destr from 'destr';
|
||||||
import { Author } from 'nostr-relaypool';
|
import { Author } from 'nostr-relaypool';
|
@ -1,7 +1,6 @@
|
|||||||
import { NoteBase } from '@components/note/base';
|
import { NoteBase } from '@lume/shared/note/base';
|
||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { READONLY_RELAYS } from '@stores/constants';
|
|
||||||
|
|
||||||
import { Author } from 'nostr-relaypool';
|
import { Author } from 'nostr-relaypool';
|
||||||
import { useContext, useEffect, useState } from 'react';
|
import { useContext, useEffect, useState } from 'react';
|
@ -1,4 +1,4 @@
|
|||||||
import { READONLY_RELAYS } from '@stores/constants';
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
|
|
||||||
import { RelayPool } from 'nostr-relaypool';
|
import { RelayPool } from 'nostr-relaypool';
|
||||||
import { createContext, useMemo } from 'react';
|
import { createContext, useMemo } from 'react';
|
@ -1,7 +1,6 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { useProfile } from '@lume/utils/hooks/useProfile';
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
|
|
@ -1,7 +1,6 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { useProfile } from '@lume/utils/hooks/useProfile';
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
@ -1,7 +1,6 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { useProfile } from '@lume/utils/hooks/useProfile';
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
export const UserFollow = ({ pubkey }: { pubkey: string }) => {
|
export const UserFollow = ({ pubkey }: { pubkey: string }) => {
|
||||||
const profile = useProfile(pubkey);
|
const profile = useProfile(pubkey);
|
@ -1,7 +1,6 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { useProfile } from '@lume/utils/hooks/useProfile';
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
@ -1,5 +1,5 @@
|
|||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { useProfile } from '@lume/utils/hooks/useProfile';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
|
|
||||||
export const UserMention = ({ pubkey }: { pubkey: string }) => {
|
export const UserMention = ({ pubkey }: { pubkey: string }) => {
|
||||||
const profile = useProfile(pubkey);
|
const profile = useProfile(pubkey);
|
@ -1,7 +1,6 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { useProfile } from '@lume/utils/hooks/useProfile';
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
export const UserMini = ({ pubkey }: { pubkey: string }) => {
|
export const UserMini = ({ pubkey }: { pubkey: string }) => {
|
||||||
const profile = useProfile(pubkey);
|
const profile = useProfile(pubkey);
|
@ -1,7 +1,6 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { useProfile } from '@lume/utils/hooks/useProfile';
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
@ -10,7 +9,7 @@ export const UserMuted = ({ data }: { data: any }) => {
|
|||||||
const [status, setStatus] = useState(data.status);
|
const [status, setStatus] = useState(data.status);
|
||||||
|
|
||||||
const unmute = async () => {
|
const unmute = async () => {
|
||||||
const { updateItemInBlacklist } = await import('@utils/storage');
|
const { updateItemInBlacklist } = await import('@lume/utils/storage');
|
||||||
const res = await updateItemInBlacklist(data.content, 0);
|
const res = await updateItemInBlacklist(data.content, 0);
|
||||||
if (res) {
|
if (res) {
|
||||||
setStatus(0);
|
setStatus(0);
|
||||||
@ -18,7 +17,7 @@ export const UserMuted = ({ data }: { data: any }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const mute = async () => {
|
const mute = async () => {
|
||||||
const { updateItemInBlacklist } = await import('@utils/storage');
|
const { updateItemInBlacklist } = await import('@lume/utils/storage');
|
||||||
const res = await updateItemInBlacklist(data.content, 1);
|
const res = await updateItemInBlacklist(data.content, 1);
|
||||||
if (res) {
|
if (res) {
|
||||||
setStatus(1);
|
setStatus(1);
|
@ -1,7 +1,6 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@lume/stores/constants';
|
||||||
|
import { useProfile } from '@lume/utils/hooks/useProfile';
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { shortenKey } from '@lume/utils/shortenKey';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
|
||||||
|
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
1
src/splashscreen/_default.page.route.tsx
Normal file
1
src/splashscreen/_default.page.route.tsx
Normal file
@ -0,0 +1 @@
|
|||||||
|
export const filesystemRoutingRoot = '/';
|
@ -1,8 +1,7 @@
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import LumeIcon from '@lume/shared/icons/lume';
|
||||||
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
import { READONLY_RELAYS } from '@stores/constants';
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
|
import { dateToUnix, hoursAgo } from '@lume/utils/getDate';
|
||||||
import { dateToUnix, hoursAgo } from '@utils/getDate';
|
|
||||||
import {
|
import {
|
||||||
addToBlacklist,
|
addToBlacklist,
|
||||||
countTotalNotes,
|
countTotalNotes,
|
||||||
@ -11,10 +10,8 @@ import {
|
|||||||
getActiveAccount,
|
getActiveAccount,
|
||||||
getLastLogin,
|
getLastLogin,
|
||||||
updateLastLogin,
|
updateLastLogin,
|
||||||
} from '@utils/storage';
|
} from '@lume/utils/storage';
|
||||||
import { getParentID } from '@utils/transform';
|
import { getParentID } from '@lume/utils/transform';
|
||||||
|
|
||||||
import LumeSymbol from '@assets/icons/Lume';
|
|
||||||
|
|
||||||
import { useContext, useEffect, useRef } from 'react';
|
import { useContext, useEffect, useRef } from 'react';
|
||||||
import { navigate } from 'vite-plugin-ssr/client/router';
|
import { navigate } from 'vite-plugin-ssr/client/router';
|
||||||
@ -150,7 +147,7 @@ export function Page() {
|
|||||||
}
|
}
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout);
|
||||||
};
|
};
|
||||||
}, []);
|
}, [pool]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
|
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
|
||||||
@ -160,7 +157,7 @@ export function Page() {
|
|||||||
{/* end dragging area */}
|
{/* end dragging area */}
|
||||||
<div className="relative flex h-full flex-col items-center justify-center">
|
<div className="relative flex h-full flex-col items-center justify-center">
|
||||||
<div className="flex flex-col items-center gap-2">
|
<div className="flex flex-col items-center gap-2">
|
||||||
<LumeSymbol className="h-16 w-16 text-black dark:text-white" />
|
<LumeIcon className="h-16 w-16 text-black dark:text-white" />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
|
<h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
|
||||||
Here's an interesting fact:
|
Here's an interesting fact:
|
3
src/stores/onboarding.tsx
Normal file
3
src/stores/onboarding.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { atom } from 'jotai';
|
||||||
|
|
||||||
|
export const onboardingAtom = atom({ pubkey: null, privkey: null, metadata: null, follows: null });
|
@ -1,4 +1,4 @@
|
|||||||
import { WRITEONLY_RELAYS } from '@stores/constants';
|
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
|
||||||
|
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
import { getEventHash, signEvent } from 'nostr-tools';
|
||||||
|
|
||||||
|
@ -1,9 +1,7 @@
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { READONLY_RELAYS } from '@stores/constants';
|
import { updateChannelMetadata } from '@lume/utils/storage';
|
||||||
|
import { getChannel } from '@lume/utils/storage';
|
||||||
import { updateChannelMetadata } from '@utils/storage';
|
|
||||||
import { getChannel } from '@utils/storage';
|
|
||||||
|
|
||||||
import { useCallback, useContext, useEffect, useState } from 'react';
|
import { useCallback, useContext, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import { RelayContext } from '@components/relaysProvider';
|
import { RelayContext } from '@lume/shared/relaysProvider';
|
||||||
|
import { READONLY_RELAYS } from '@lume/stores/constants';
|
||||||
import { READONLY_RELAYS } from '@stores/constants';
|
|
||||||
|
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
import useSWRSubscription from 'swr/subscription';
|
import useSWRSubscription from 'swr/subscription';
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { messageParser } from '@utils/parser';
|
import { messageParser } from '@lume/utils/parser';
|
||||||
|
|
||||||
import { nip04 } from 'nostr-tools';
|
import { nip04 } from 'nostr-tools';
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user