mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-14 09:13:31 +00:00
Merge pull request #103 from luminous-devs/feat/personal-dashboard
Add personal dashboard
This commit is contained in:
Ren Amamiya
GitHub
commit
912c740c51
58
package.json
58
package.json
@ -20,9 +20,9 @@
|
||||
"dependencies": {
|
||||
"@evilmartians/harmony": "^1.1.0",
|
||||
"@getalby/sdk": "^2.5.0",
|
||||
"@nostr-dev-kit/ndk": "^2.0.3",
|
||||
"@nostr-dev-kit/ndk": "^2.0.5",
|
||||
"@nostr-dev-kit/ndk-cache-dexie": "^2.0.3",
|
||||
"@nostr-fetch/adapter-ndk": "^0.13.0",
|
||||
"@nostr-fetch/adapter-ndk": "^0.13.1",
|
||||
"@radix-ui/react-alert-dialog": "^1.0.5",
|
||||
"@radix-ui/react-avatar": "^1.0.4",
|
||||
"@radix-ui/react-collapsible": "^1.0.3",
|
||||
@ -33,21 +33,21 @@
|
||||
"@radix-ui/react-toolbar": "^1.0.4",
|
||||
"@radix-ui/react-tooltip": "^1.0.7",
|
||||
"@tanstack/query-sync-storage-persister": "^5.4.3",
|
||||
"@tanstack/react-query": "^5.0.5",
|
||||
"@tanstack/react-query": "^5.4.3",
|
||||
"@tanstack/react-query-persist-client": "^5.4.3",
|
||||
"@tauri-apps/api": "^2.0.0-alpha.9",
|
||||
"@tauri-apps/cli": "^2.0.0-alpha.16",
|
||||
"@tauri-apps/plugin-clipboard-manager": "^2.0.0-alpha.2",
|
||||
"@tauri-apps/plugin-dialog": "^2.0.0-alpha.2",
|
||||
"@tauri-apps/plugin-fs": "^2.0.0-alpha.2",
|
||||
"@tauri-apps/plugin-http": "^2.0.0-alpha.2",
|
||||
"@tauri-apps/plugin-notification": "^2.0.0-alpha.2",
|
||||
"@tauri-apps/plugin-os": "^2.0.0-alpha.3",
|
||||
"@tauri-apps/plugin-process": "^2.0.0-alpha.2",
|
||||
"@tauri-apps/plugin-shell": "^2.0.0-alpha.2",
|
||||
"@tauri-apps/plugin-sql": "^2.0.0-alpha.2",
|
||||
"@tauri-apps/plugin-updater": "^2.0.0-alpha.2",
|
||||
"@tauri-apps/plugin-upload": "^2.0.0-alpha.2",
|
||||
"@tauri-apps/api": "2.0.0-alpha.11",
|
||||
"@tauri-apps/cli": "2.0.0-alpha.17",
|
||||
"@tauri-apps/plugin-clipboard-manager": "2.0.0-alpha.3",
|
||||
"@tauri-apps/plugin-dialog": "2.0.0-alpha.3",
|
||||
"@tauri-apps/plugin-fs": "2.0.0-alpha.3",
|
||||
"@tauri-apps/plugin-http": "2.0.0-alpha.3",
|
||||
"@tauri-apps/plugin-notification": "2.0.0-alpha.3",
|
||||
"@tauri-apps/plugin-os": "2.0.0-alpha.4",
|
||||
"@tauri-apps/plugin-process": "2.0.0-alpha.3",
|
||||
"@tauri-apps/plugin-shell": "2.0.0-alpha.3",
|
||||
"@tauri-apps/plugin-sql": "2.0.0-alpha.3",
|
||||
"@tauri-apps/plugin-updater": "2.0.0-alpha.3",
|
||||
"@tauri-apps/plugin-upload": "2.0.0-alpha.3",
|
||||
"@tiptap/extension-character-count": "^2.1.12",
|
||||
"@tiptap/extension-document": "^2.1.12",
|
||||
"@tiptap/extension-image": "^2.1.12",
|
||||
@ -67,10 +67,10 @@
|
||||
"light-bolt11-decoder": "^3.0.0",
|
||||
"lru-cache": "^10.0.1",
|
||||
"markdown-to-jsx": "^7.3.2",
|
||||
"media-chrome": "^1.4.5",
|
||||
"media-chrome": "^1.5.0",
|
||||
"million": "^2.6.4",
|
||||
"minidenticons": "^4.2.0",
|
||||
"nostr-fetch": "^0.13.0",
|
||||
"nostr-fetch": "^0.13.1",
|
||||
"nostr-tools": "^1.17.0",
|
||||
"qrcode.react": "^3.1.0",
|
||||
"re-resizable": "^6.9.11",
|
||||
@ -79,27 +79,27 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.47.0",
|
||||
"react-hotkeys-hook": "^4.4.1",
|
||||
"react-router-dom": "^6.17.0",
|
||||
"react-router-dom": "^6.18.0",
|
||||
"reactflow": "^11.9.4",
|
||||
"sonner": "^1.0.3",
|
||||
"sonner": "^1.1.0",
|
||||
"tailwind-scrollbar": "^3.0.5",
|
||||
"tauri-controls": "^0.2.0",
|
||||
"tippy.js": "^6.3.7",
|
||||
"tiptap-markdown": "^0.8.2",
|
||||
"virtua": "^0.15.6",
|
||||
"zustand": "^4.4.4"
|
||||
"tiptap-markdown": "^0.8.3",
|
||||
"virtua": "^0.16.0",
|
||||
"zustand": "^4.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"@trivago/prettier-plugin-sort-imports": "^4.2.1",
|
||||
"@types/html-to-text": "^9.0.3",
|
||||
"@types/node": "^20.8.9",
|
||||
"@types/react": "^18.2.33",
|
||||
"@types/node": "^20.8.10",
|
||||
"@types/react": "^18.2.34",
|
||||
"@types/react-dom": "^18.2.14",
|
||||
"@types/youtube-player": "^5.5.9",
|
||||
"@typescript-eslint/eslint-plugin": "^6.9.0",
|
||||
"@typescript-eslint/parser": "^6.9.0",
|
||||
"@vitejs/plugin-react-swc": "^3.4.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.9.1",
|
||||
"@typescript-eslint/parser": "^6.9.1",
|
||||
"@vitejs/plugin-react-swc": "^3.4.1",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"clsx": "^2.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
@ -107,7 +107,7 @@
|
||||
"encoding": "^0.1.13",
|
||||
"eslint": "^8.52.0",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.7.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.8.0",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-plugin-simple-import-sort": "^10.0.0",
|
||||
"husky": "^8.0.3",
|
||||
|
||||
1053
pnpm-lock.yaml
1053
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
671
src-tauri/Cargo.lock
generated
671
src-tauri/Cargo.lock
generated
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,6 @@
|
||||
|
||||
use keyring::Entry;
|
||||
use std::time::Duration;
|
||||
use tauri::Manager;
|
||||
use tauri_plugin_autostart::MacosLauncher;
|
||||
use tauri_plugin_sql::{Migration, MigrationKind};
|
||||
use webpage::{Webpage, WebpageOptions};
|
||||
@ -149,12 +148,6 @@ fn main() {
|
||||
MacosLauncher::LaunchAgent,
|
||||
Some(vec!["--flag1", "--flag2"]),
|
||||
))
|
||||
.plugin(tauri_plugin_single_instance::init(|app, argv, cwd| {
|
||||
println!("{}, {argv:?}, {cwd}", app.package_info().name);
|
||||
app
|
||||
.emit_all("single-instance", Payload { args: argv, cwd })
|
||||
.unwrap();
|
||||
}))
|
||||
.plugin(tauri_plugin_upload::init())
|
||||
.plugin(tauri_plugin_store::Builder::default().build())
|
||||
.invoke_handler(tauri::generate_handler![
|
||||
|
||||
28
src/app.tsx
28
src/app.tsx
@ -112,6 +112,34 @@ export default function App() {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/personal',
|
||||
element: <AppLayout />,
|
||||
errorElement: <ErrorScreen />,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
async lazy() {
|
||||
const { PersonalScreen } = await import('@app/personal');
|
||||
return { Component: PersonalScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'edit-profile',
|
||||
async lazy() {
|
||||
const { EditProfileScreen } = await import('@app/personal/editProfile');
|
||||
return { Component: EditProfileScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'edit-contact',
|
||||
async lazy() {
|
||||
const { EditContactScreen } = await import('@app/personal/editContact');
|
||||
return { Component: EditContactScreen };
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/new',
|
||||
element: <NewScreen />,
|
||||
|
||||
@ -23,7 +23,7 @@ export function Circle() {
|
||||
const enableLinks = async () => {
|
||||
setLoading(true);
|
||||
|
||||
const users = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||
const users = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const follows = await users.follows();
|
||||
|
||||
if (follows.size === 0) {
|
||||
|
||||
@ -12,7 +12,7 @@ export function FollowList() {
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['follows'],
|
||||
queryFn: async () => {
|
||||
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const follows = await user.follows();
|
||||
const followsAsArr = [];
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ export function useDecryptMessage(message: NDKEvent) {
|
||||
async function decryptContent() {
|
||||
try {
|
||||
const sender = new NDKUser({
|
||||
hexpubkey:
|
||||
pubkey:
|
||||
db.account.pubkey === message.pubkey
|
||||
? message.tags.find((el) => el[0] === 'p')[1]
|
||||
: message.pubkey,
|
||||
|
||||
@ -29,9 +29,9 @@ export const UserWithDrawer = memo(function UserWithDrawer({
|
||||
|
||||
const follow = async (pubkey: string) => {
|
||||
try {
|
||||
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const contacts = await user.follows();
|
||||
const add = await user.follow(new NDKUser({ hexpubkey: pubkey }), contacts);
|
||||
const add = await user.follow(new NDKUser({ pubkey: pubkey }), contacts);
|
||||
|
||||
if (add) {
|
||||
setFollowed(true);
|
||||
@ -45,14 +45,12 @@ export const UserWithDrawer = memo(function UserWithDrawer({
|
||||
|
||||
const unfollow = async (pubkey: string) => {
|
||||
try {
|
||||
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const contacts = await user.follows();
|
||||
contacts.delete(new NDKUser({ hexpubkey: pubkey }));
|
||||
contacts.delete(new NDKUser({ pubkey: pubkey }));
|
||||
|
||||
let list: string[][];
|
||||
contacts.forEach((el) =>
|
||||
list.push(['p', el.pubkey, el.relayUrls?.[0] || '', el.profile?.name || ''])
|
||||
);
|
||||
contacts.forEach((el) => list.push(['p', el.pubkey, el.relayUrls?.[0] || '', '']));
|
||||
|
||||
const event = new NDKEvent(ndk);
|
||||
event.content = '';
|
||||
|
||||
51
src/app/personal/components/contactCard.tsx
Normal file
51
src/app/personal/components/contactCard.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { EditIcon, LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { compactNumber } from '@utils/number';
|
||||
|
||||
export function ContactCard() {
|
||||
const { db } = useStorage();
|
||||
const { ndk } = useNDK();
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['contacts'],
|
||||
queryFn: async () => {
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const follows = await user.follows();
|
||||
return [...follows];
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="col-span-1 h-44 rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full w-full flex-col justify-between p-4">
|
||||
<h3 className="pt-1 text-5xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-100">
|
||||
{compactNumber.format(data.length)}
|
||||
</h3>
|
||||
<div className="mt-auto flex h-6 w-full items-center justify-between">
|
||||
<p className="text-xl font-medium leading-none text-neutral-600 dark:text-neutral-400">
|
||||
Contacts
|
||||
</p>
|
||||
<Link
|
||||
to="/personal/edit-contact"
|
||||
className="inline-flex h-6 w-max items-center gap-1 rounded-full bg-neutral-200 px-2.5 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
|
||||
>
|
||||
<EditIcon className="h-3 w-3" />
|
||||
Edit
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
60
src/app/personal/components/postCard.tsx
Normal file
60
src/app/personal/components/postCard.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { compactNumber } from '@utils/number';
|
||||
|
||||
export function PostCard() {
|
||||
const { db } = useStorage();
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['user-stats', db.account.pubkey],
|
||||
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
||||
const res = await fetch(
|
||||
`https://api.nostr.band/v0/stats/profile/${db.account.pubkey}`,
|
||||
{
|
||||
signal,
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Error');
|
||||
}
|
||||
|
||||
return await res.json();
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnMount: false,
|
||||
refetchOnReconnect: false,
|
||||
staleTime: Infinity,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="col-span-1 h-44 rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full w-full flex-col justify-between p-4">
|
||||
<h3 className="pt-1 text-5xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-100">
|
||||
{compactNumber.format(data.stats[db.account.pubkey].pub_note_count)}
|
||||
</h3>
|
||||
<div className="mt-auto flex h-6 w-full items-center justify-between">
|
||||
<p className="text-xl font-medium leading-none text-neutral-600 dark:text-neutral-400">
|
||||
Posts
|
||||
</p>
|
||||
<Link
|
||||
to={`/users/${db.account.pubkey}`}
|
||||
className="inline-flex h-6 w-max items-center gap-1 rounded-full bg-neutral-200 px-2.5 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
|
||||
>
|
||||
View
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
68
src/app/personal/components/profileCard.tsx
Normal file
68
src/app/personal/components/profileCard.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import * as Avatar from '@radix-ui/react-avatar';
|
||||
import { minidenticon } from 'minidenticons';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { EditIcon, LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { displayNpub } from '@utils/shortenKey';
|
||||
|
||||
export function ProfileCard() {
|
||||
const { db } = useStorage();
|
||||
const { status, user } = useProfile(db.account.pubkey);
|
||||
|
||||
const svgURI =
|
||||
'data:image/svg+xml;utf8,' +
|
||||
encodeURIComponent(minidenticon(db.account.pubkey, 90, 50));
|
||||
|
||||
return (
|
||||
<div className="mb-4 h-56 w-full rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full w-full flex-col justify-between p-4">
|
||||
<div className="flex h-10 w-full justify-end">
|
||||
<Link
|
||||
to="/personal/edit-profile"
|
||||
className="inline-flex h-8 w-20 items-center justify-center gap-1.5 rounded-full bg-neutral-200 text-sm font-medium hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-600"
|
||||
>
|
||||
<EditIcon className="h-4 w-4" />
|
||||
Edit
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<Avatar.Root className="shrink-0">
|
||||
<Avatar.Image
|
||||
src={user?.picture || user?.image}
|
||||
alt={db.account.pubkey}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
style={{ contentVisibility: 'auto' }}
|
||||
className="h-16 w-16 rounded-xl border border-neutral-200/50 shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] dark:border-neutral-800/50"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={db.account.pubkey}
|
||||
className="h-16 w-16 rounded-xl bg-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div>
|
||||
<h3 className="text-3xl font-semibold leading-8 text-neutral-900 dark:text-neutral-100">
|
||||
{user?.display_name || user?.name}
|
||||
</h3>
|
||||
<p className="text-lg text-neutral-700 dark:text-neutral-300">
|
||||
{user.nip05 || displayNpub(db.account.pubkey, 16)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
50
src/app/personal/components/relayCard.tsx
Normal file
50
src/app/personal/components/relayCard.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { EditIcon, LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { compactNumber } from '@utils/number';
|
||||
|
||||
export function RelayCard() {
|
||||
const { db } = useStorage();
|
||||
const { ndk } = useNDK();
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['relays'],
|
||||
queryFn: async () => {
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
return await user.relayList();
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="col-span-1 h-44 rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full w-full flex-col justify-between p-4">
|
||||
<h3 className="pt-1 text-5xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-100">
|
||||
{compactNumber.format(data?.relays?.length)}
|
||||
</h3>
|
||||
<div className="mt-auto flex h-6 w-full items-center justify-between">
|
||||
<p className="text-xl font-medium leading-none text-neutral-600 dark:text-neutral-400">
|
||||
Relays
|
||||
</p>
|
||||
<Link
|
||||
to="/relays"
|
||||
className="inline-flex h-6 w-max items-center gap-1 rounded-full bg-neutral-200 px-2.5 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
|
||||
>
|
||||
<EditIcon className="h-3 w-3" />
|
||||
Edit
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
src/app/personal/components/zapCard.tsx
Normal file
53
src/app/personal/components/zapCard.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { compactNumber } from '@utils/number';
|
||||
|
||||
export function ZapCard() {
|
||||
const { db } = useStorage();
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['user-stats', db.account.pubkey],
|
||||
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
||||
const res = await fetch(
|
||||
`https://api.nostr.band/v0/stats/profile/${db.account.pubkey}`,
|
||||
{
|
||||
signal,
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Error');
|
||||
}
|
||||
|
||||
return await res.json();
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnMount: false,
|
||||
refetchOnReconnect: false,
|
||||
staleTime: Infinity,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="col-span-1 h-44 rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full w-full flex-col justify-between p-4">
|
||||
<h3 className="pt-1 text-5xl font-semibold tabular-nums text-neutral-900 dark:text-neutral-100">
|
||||
{compactNumber.format(
|
||||
data.stats[db.account.pubkey].zaps_received.msats / 1000
|
||||
)}
|
||||
</h3>
|
||||
<div className="mt-auto flex h-6 items-center text-xl font-medium leading-none text-neutral-600 dark:text-neutral-400">
|
||||
Sats received
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
src/app/personal/editContact.tsx
Normal file
55
src/app/personal/editContact.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { ArrowLeftIcon, LoaderIcon } from '@shared/icons';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
export function EditContactScreen() {
|
||||
const { db } = useStorage();
|
||||
const { ndk } = useNDK();
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['contacts'],
|
||||
queryFn: async () => {
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
|
||||
const follows = await user.follows();
|
||||
return [...follows];
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto pb-10">
|
||||
<div className="flex h-14 shrink-0 items-center justify-between px-3">
|
||||
<Link
|
||||
to="/personal"
|
||||
className="inline-flex h-10 w-20 items-center justify-center gap-2 font-medium text-neutral-700 dark:text-neutral-300"
|
||||
>
|
||||
<ArrowLeftIcon className="h-4 w-4" />
|
||||
Back
|
||||
</Link>
|
||||
<h1 className="font-semibold">Contact Manager</h1>
|
||||
<div className="w-20" />
|
||||
</div>
|
||||
<div className="mx-auto flex w-full max-w-xl flex-col gap-3">
|
||||
{status === 'pending' ? (
|
||||
<div className="flex h-10 w-full items-center justify-center">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
data.map((item) => (
|
||||
<div
|
||||
key={item.pubkey}
|
||||
className="flex h-16 w-full items-center justify-between rounded-xl bg-neutral-100 px-2.5 dark:bg-neutral-900"
|
||||
>
|
||||
<User pubkey={item.pubkey} variant="simple" />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
323
src/app/personal/editProfile.tsx
Normal file
323
src/app/personal/editProfile.tsx
Normal file
@ -0,0 +1,323 @@
|
||||
import { NDKEvent, NDKKind, NDKUserProfile } from '@nostr-dev-kit/ndk';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { message } from '@tauri-apps/plugin-dialog';
|
||||
import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
CheckCircleIcon,
|
||||
LoaderIcon,
|
||||
PlusIcon,
|
||||
UnverifiedIcon,
|
||||
} from '@shared/icons';
|
||||
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
|
||||
export function EditProfileScreen() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [picture, setPicture] = useState('');
|
||||
const [banner, setBanner] = useState('');
|
||||
const [nip05, setNIP05] = useState({ verified: true, text: '' });
|
||||
|
||||
const { db } = useStorage();
|
||||
const { ndk } = useNDK();
|
||||
const { upload } = useNostr();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
setError,
|
||||
formState: { isValid, errors },
|
||||
} = useForm({
|
||||
defaultValues: async () => {
|
||||
const res: NDKUserProfile = queryClient.getQueryData(['user', db.account.pubkey]);
|
||||
if (res.image) {
|
||||
setPicture(res.image);
|
||||
}
|
||||
if (res.banner) {
|
||||
setBanner(res.banner);
|
||||
}
|
||||
if (res.nip05) {
|
||||
setNIP05((prev) => ({ ...prev, text: res.nip05 }));
|
||||
}
|
||||
return res;
|
||||
},
|
||||
});
|
||||
|
||||
const uploadAvatar = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const image = await upload();
|
||||
|
||||
if (image) {
|
||||
setPicture(image);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (e) {
|
||||
setLoading(false);
|
||||
await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
|
||||
}
|
||||
};
|
||||
|
||||
const uploadBanner = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const image = await upload();
|
||||
|
||||
if (image) {
|
||||
setBanner(image);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (e) {
|
||||
setLoading(false);
|
||||
await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (data: NDKUserProfile) => {
|
||||
// start loading
|
||||
setLoading(true);
|
||||
|
||||
const content = {
|
||||
...data,
|
||||
username: data.name,
|
||||
display_name: data.name,
|
||||
bio: data.about,
|
||||
image: data.picture,
|
||||
};
|
||||
|
||||
const event = new NDKEvent(ndk);
|
||||
event.kind = NDKKind.Metadata;
|
||||
event.tags = [];
|
||||
|
||||
if (data.nip05) {
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const verify = await user.validateNip05(data.nip05);
|
||||
if (verify) {
|
||||
event.content = JSON.stringify({ ...content, nip05: data.nip05 });
|
||||
} else {
|
||||
setNIP05((prev) => ({ ...prev, verified: false }));
|
||||
setError('nip05', {
|
||||
type: 'manual',
|
||||
message: "Can't verify your Lume ID / NIP-05, please check again",
|
||||
});
|
||||
}
|
||||
} else {
|
||||
event.content = JSON.stringify(content);
|
||||
}
|
||||
|
||||
const publishedRelays = await event.publish();
|
||||
|
||||
if (publishedRelays) {
|
||||
// invalid cache
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ['user', db.account.pubkey],
|
||||
});
|
||||
// reset form
|
||||
reset();
|
||||
// reset state
|
||||
setLoading(false);
|
||||
setPicture(null);
|
||||
setBanner(null);
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto">
|
||||
<div className="flex h-14 shrink-0 items-center justify-between px-3">
|
||||
<Link
|
||||
to="/personal"
|
||||
className="inline-flex h-10 w-20 items-center justify-center gap-2 font-medium text-neutral-700 dark:text-neutral-300"
|
||||
>
|
||||
<ArrowLeftIcon className="h-4 w-4" />
|
||||
Back
|
||||
</Link>
|
||||
<h1 className="font-semibold">Edit Profile</h1>
|
||||
<div className="w-20" />
|
||||
</div>
|
||||
<div className="mx-auto w-full max-w-md">
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="mb-0">
|
||||
<input type={'hidden'} {...register('picture')} value={picture} />
|
||||
<input type={'hidden'} {...register('banner')} value={banner} />
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="relative h-36 w-full">
|
||||
{banner ? (
|
||||
<img
|
||||
src={banner}
|
||||
alt="user's banner"
|
||||
className="h-full w-full rounded-xl object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full w-full rounded-xl bg-neutral-200 dark:bg-neutral-900" />
|
||||
)}
|
||||
<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-xl">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => uploadBanner()}
|
||||
className="inline-flex h-full w-full items-center justify-center bg-black/20 text-white"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-5 px-4">
|
||||
<div className="relative z-10 -mt-7 h-14 w-14 overflow-hidden rounded-xl ring-2 ring-white dark:ring-black">
|
||||
<img
|
||||
src={picture}
|
||||
alt="user's avatar"
|
||||
className="h-14 w-14 rounded-xl object-cover"
|
||||
/>
|
||||
<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => uploadAvatar()}
|
||||
className="inline-flex h-full w-full items-center justify-center rounded-xl bg-black/50 text-white"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="display_name"
|
||||
className="text-sm font-semibold uppercase tracking-wider"
|
||||
>
|
||||
Display Name
|
||||
</label>
|
||||
<input
|
||||
type={'text'}
|
||||
{...register('display_name', {
|
||||
required: true,
|
||||
minLength: 4,
|
||||
})}
|
||||
spellCheck={false}
|
||||
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="text-sm font-semibold uppercase tracking-wider"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type={'text'}
|
||||
{...register('name', {
|
||||
required: true,
|
||||
minLength: 4,
|
||||
})}
|
||||
spellCheck={false}
|
||||
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="nip05"
|
||||
className="text-sm font-semibold uppercase tracking-wider"
|
||||
>
|
||||
NIP-05
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
{...register('nip05', {
|
||||
required: true,
|
||||
minLength: 4,
|
||||
})}
|
||||
spellCheck={false}
|
||||
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||
/>
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
|
||||
{nip05.verified ? (
|
||||
<span className="inline-flex h-6 items-center gap-1 rounded-full bg-teal-500 px-1 pr-1.5 text-xs font-medium text-white">
|
||||
<CheckCircleIcon className="h-4 w-4" />
|
||||
Verified
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 pl-1 pr-1.5 text-xs font-medium text-white">
|
||||
<UnverifiedIcon className="h-4 w-4" />
|
||||
Unverified
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{errors.nip05 && (
|
||||
<p className="mt-1 text-sm text-red-400">
|
||||
{errors.nip05.message.toString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="website"
|
||||
className="text-sm font-semibold uppercase tracking-wider"
|
||||
>
|
||||
Website
|
||||
</label>
|
||||
<input
|
||||
type={'text'}
|
||||
{...register('website', { required: false })}
|
||||
spellCheck={false}
|
||||
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="website"
|
||||
className="text-sm font-semibold uppercase tracking-wider"
|
||||
>
|
||||
Lightning address
|
||||
</label>
|
||||
<input
|
||||
type={'text'}
|
||||
{...register('lud16', { required: false })}
|
||||
spellCheck={false}
|
||||
className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="about"
|
||||
className="text-sm font-semibold uppercase tracking-wider"
|
||||
>
|
||||
Bio
|
||||
</label>
|
||||
<textarea
|
||||
{...register('about')}
|
||||
spellCheck={false}
|
||||
className="relative h-20 w-full resize-none rounded-lg bg-neutral-100 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isValid}
|
||||
className="mx-auto inline-flex h-9 w-full transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
|
||||
) : (
|
||||
'Update'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
26
src/app/personal/index.tsx
Normal file
26
src/app/personal/index.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { ContactCard } from '@app/personal/components/contactCard';
|
||||
import { PostCard } from '@app/personal/components/postCard';
|
||||
import { ProfileCard } from '@app/personal/components/profileCard';
|
||||
import { RelayCard } from '@app/personal/components/relayCard';
|
||||
import { ZapCard } from '@app/personal/components/zapCard';
|
||||
|
||||
export function PersonalScreen() {
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto">
|
||||
<div className="flex h-14 shrink-0 items-center justify-between px-3">
|
||||
<div className="w-20" />
|
||||
<h1 className="font-semibold">Personal Dashboard</h1>
|
||||
<div className="w-20" />
|
||||
</div>
|
||||
<div className="mx-auto w-full max-w-xl">
|
||||
<ProfileCard />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<ContactCard />
|
||||
<RelayCard />
|
||||
<PostCard />
|
||||
<ZapCard />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,4 +1,6 @@
|
||||
import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
|
||||
import * as Avatar from '@radix-ui/react-avatar';
|
||||
import { minidenticon } from 'minidenticons';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { toast } from 'sonner';
|
||||
@ -9,7 +11,6 @@ import { UserStats } from '@app/users/components/stats';
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { Image } from '@shared/image';
|
||||
import { NIP05 } from '@shared/nip05';
|
||||
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
@ -22,11 +23,14 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
||||
|
||||
const [followed, setFollowed] = useState(false);
|
||||
|
||||
const svgURI =
|
||||
'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50));
|
||||
|
||||
const follow = async (pubkey: string) => {
|
||||
try {
|
||||
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const contacts = await user.follows();
|
||||
const add = await user.follow(new NDKUser({ hexpubkey: pubkey }), contacts);
|
||||
const add = await user.follow(new NDKUser({ pubkey: pubkey }), contacts);
|
||||
|
||||
if (add) {
|
||||
setFollowed(true);
|
||||
@ -40,14 +44,12 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
||||
|
||||
const unfollow = async (pubkey: string) => {
|
||||
try {
|
||||
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const contacts = await user.follows();
|
||||
contacts.delete(new NDKUser({ hexpubkey: pubkey }));
|
||||
contacts.delete(new NDKUser({ pubkey: pubkey }));
|
||||
|
||||
let list: string[][];
|
||||
contacts.forEach((el) =>
|
||||
list.push(['p', el.pubkey, el.relayUrls?.[0] || '', el.profile?.name || ''])
|
||||
);
|
||||
contacts.forEach((el) => list.push(['p', el.pubkey, el.relayUrls?.[0] || '', '']));
|
||||
|
||||
const event = new NDKEvent(ndk);
|
||||
event.content = '';
|
||||
@ -85,11 +87,23 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
||||
)}
|
||||
</div>
|
||||
<div className="-mt-7 flex w-full flex-col items-center px-5">
|
||||
<Image
|
||||
src={user.picture || user.image}
|
||||
alt={pubkey}
|
||||
className="h-14 w-14 rounded-lg ring-2 ring-neutral-100 dark:ring-neutral-900"
|
||||
/>
|
||||
<Avatar.Root className="shrink-0">
|
||||
<Avatar.Image
|
||||
src={user?.picture || user?.image}
|
||||
alt={pubkey}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
style={{ contentVisibility: 'auto' }}
|
||||
className="h-14 w-14 rounded-lg bg-white ring-2 ring-neutral-100 dark:ring-neutral-900"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="h-14 w-14 rounded-lg bg-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div className="mt-2 flex flex-1 flex-col gap-6">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div className="inline-flex flex-col items-center">
|
||||
@ -100,7 +114,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
||||
<NIP05
|
||||
pubkey={pubkey}
|
||||
nip05={user?.nip05}
|
||||
className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400"
|
||||
className="text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
) : (
|
||||
<span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400">
|
||||
|
||||
@ -6,15 +6,22 @@ import { compactNumber } from '@utils/number';
|
||||
|
||||
export function UserStats({ pubkey }: { pubkey: string }) {
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['user-metadata', pubkey],
|
||||
queryKey: ['user-stats', pubkey],
|
||||
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
||||
const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`, {
|
||||
signal,
|
||||
});
|
||||
|
||||
...async () => {
|
||||
const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`);
|
||||
if (!res.ok) {
|
||||
throw new Error('Error');
|
||||
}
|
||||
|
||||
return await res.json();
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnMount: false,
|
||||
refetchOnReconnect: false,
|
||||
staleTime: Infinity,
|
||||
});
|
||||
|
||||
if (status === 'pending') {
|
||||
|
||||
@ -70,7 +70,6 @@ export function UserScreen() {
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-full overflow-y-auto">
|
||||
<div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
|
||||
<UserProfile pubkey={pubkey} />
|
||||
<div className="mt-6 h-full w-full border-t border-neutral-100 px-1.5 dark:border-neutral-900">
|
||||
<h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">
|
||||
|
||||
@ -97,7 +97,7 @@ export const NDKInstance = () => {
|
||||
if (db.account) {
|
||||
const circleSetting = await db.getSettingValue('circles');
|
||||
|
||||
const user = instance.getUser({ hexpubkey: db.account.pubkey });
|
||||
const user = instance.getUser({ pubkey: db.account.pubkey });
|
||||
const follows = await user.follows();
|
||||
const relayList = await user.relayList();
|
||||
|
||||
|
||||
12
src/main.jsx
12
src/main.jsx
@ -25,7 +25,17 @@ const container = document.getElementById('root');
|
||||
const root = createRoot(container);
|
||||
|
||||
root.render(
|
||||
<PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
|
||||
<PersistQueryClientProvider
|
||||
client={queryClient}
|
||||
persistOptions={{
|
||||
persister,
|
||||
dehydrateOptions: {
|
||||
shouldDehydrateQuery: (query) => {
|
||||
if (query.queryKey !== 'widgets') return true;
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<StorageProvider>
|
||||
<NDKProvider>
|
||||
<Toaster position="top-center" closeButton />
|
||||
|
||||
@ -24,8 +24,8 @@ export function ActiveAccount() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800">
|
||||
<Link to={`/users/${db.account.pubkey}`} className="relative inline-block">
|
||||
<div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 ring-1 ring-transparent hover:bg-neutral-200 hover:ring-blue-500 dark:bg-neutral-900 dark:hover:bg-neutral-800">
|
||||
<Link to="/personal" className="relative inline-block">
|
||||
<Avatar.Root>
|
||||
<Avatar.Image
|
||||
src={user?.picture || user?.image}
|
||||
@ -38,14 +38,14 @@ export function ActiveAccount() {
|
||||
<Avatar.Fallback delayMs={150}>
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={db.account.pubkeypubkey}
|
||||
alt={db.account.pubkey}
|
||||
className="aspect-square h-auto w-full rounded-md bg-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<NetworkStatusIndicator />
|
||||
</Link>
|
||||
<AccountMoreActions pubkey={db.account.pubkey} />
|
||||
<AccountMoreActions />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { HorizontalDotsIcon } from '@shared/icons';
|
||||
import { Logout } from '@shared/logout';
|
||||
|
||||
export function AccountMoreActions({ pubkey }: { pubkey: string }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
export function AccountMoreActions() {
|
||||
return (
|
||||
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
@ -20,14 +19,6 @@ export function AccountMoreActions({ pubkey }: { pubkey: string }) {
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content className="ml-2 flex w-[200px] flex-col overflow-hidden rounded-xl bg-blue-500 p-2 focus:outline-none">
|
||||
<DropdownMenu.Item asChild>
|
||||
<Link
|
||||
to={`/users/${pubkey}`}
|
||||
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
Profile
|
||||
</Link>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item asChild>
|
||||
<Link
|
||||
to={`/settings/backup`}
|
||||
|
||||
@ -22,7 +22,7 @@ export const NIP05 = memo(function NIP05({
|
||||
}) {
|
||||
const { status, data } = useQuery({
|
||||
queryKey: ['nip05', nip05],
|
||||
queryFn: async () => {
|
||||
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
||||
try {
|
||||
const localPath = nip05.split('@')[0];
|
||||
const service = nip05.split('@')[1];
|
||||
@ -33,11 +33,13 @@ export const NIP05 = memo(function NIP05({
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8',
|
||||
},
|
||||
signal,
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
|
||||
|
||||
const data: NIP05 = await res.json();
|
||||
|
||||
if (data.names) {
|
||||
if (data.names[localPath] !== pubkey) return false;
|
||||
return true;
|
||||
@ -58,15 +60,19 @@ export const NIP05 = memo(function NIP05({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={twMerge('inline-flex items-center gap-1', className)}>
|
||||
<p className="text-sm">{nip05}</p>
|
||||
<div className="shrink-0">
|
||||
{data === true ? (
|
||||
<VerifiedIcon className="h-3 w-3 text-green-500" />
|
||||
) : (
|
||||
<UnverifiedIcon className="h-3 w-3 text-red-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-1">
|
||||
<p className={twMerge('text-sm font-medium', className)}>{nip05}</p>
|
||||
{data === true ? (
|
||||
<div className="inline-flex h-5 w-max shrink-0 items-center justify-center gap-1 rounded-full bg-teal-500 pl-0.5 pr-1.5 text-xs font-medium text-white">
|
||||
<VerifiedIcon className="h-4 w-4" />
|
||||
Verified
|
||||
</div>
|
||||
) : (
|
||||
<div className="inline-flex h-5 w-max shrink-0 items-center justify-center gap-1.5 rounded-full bg-red-500 pl-0.5 pr-1.5 text-xs font-medium text-white">
|
||||
<UnverifiedIcon className="h-4 w-4" />
|
||||
Unverified
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -115,7 +115,7 @@ export const User = memo(function User({
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
<h5 className="max-w-[10rem] truncate font-medium text-neutral-900 dark:text-neutral-100">
|
||||
{user?.name ||
|
||||
user?.display_name ||
|
||||
user?.displayName ||
|
||||
|
||||
@ -22,9 +22,9 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
||||
|
||||
const follow = async (pubkey: string) => {
|
||||
try {
|
||||
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const contacts = await user.follows();
|
||||
const add = await user.follow(new NDKUser({ hexpubkey: pubkey }), contacts);
|
||||
const add = await user.follow(new NDKUser({ pubkey: pubkey }), contacts);
|
||||
|
||||
if (add) {
|
||||
setFollowed(true);
|
||||
@ -38,14 +38,12 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
||||
|
||||
const unfollow = async (pubkey: string) => {
|
||||
try {
|
||||
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const contacts = await user.follows();
|
||||
contacts.delete(new NDKUser({ hexpubkey: pubkey }));
|
||||
contacts.delete(new NDKUser({ pubkey: pubkey }));
|
||||
|
||||
let list: string[][];
|
||||
contacts.forEach((el) =>
|
||||
list.push(['p', el.pubkey, el.relayUrls?.[0] || '', el.profile?.name || ''])
|
||||
);
|
||||
contacts.forEach((el) => list.push(['p', el.pubkey, el.relayUrls?.[0] || '', '']));
|
||||
|
||||
const event = new NDKEvent(ndk);
|
||||
event.content = '';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { NDKEvent, NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
|
||||
import { NDKEvent, NDKFilter, NDKKind, NDKSubscription } from '@nostr-dev-kit/ndk';
|
||||
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useCallback, useEffect, useMemo } from 'react';
|
||||
import { VList } from 'virtua';
|
||||
@ -25,7 +25,6 @@ export function NewsfeedWidget() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { db } = useStorage();
|
||||
const { sub } = useNostr();
|
||||
const { relayUrls, ndk, fetcher } = useNDK();
|
||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
||||
useInfiniteQuery({
|
||||
@ -112,6 +111,8 @@ export function NewsfeedWidget() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let sub: NDKSubscription = undefined;
|
||||
|
||||
if (status === 'success' && db.account && db.account.circles.length > 0) {
|
||||
queryClient.fetchQuery({ queryKey: ['notification'] });
|
||||
|
||||
@ -121,21 +122,21 @@ export function NewsfeedWidget() {
|
||||
since: Math.floor(Date.now() / 1000),
|
||||
};
|
||||
|
||||
sub(
|
||||
filter,
|
||||
async (event) => {
|
||||
queryClient.setQueryData(
|
||||
['newsfeed'],
|
||||
(prev: { pageParams: number; pages: Array<NDKEvent[]> }) => ({
|
||||
...prev,
|
||||
pages: [[event], ...prev.pages],
|
||||
})
|
||||
);
|
||||
},
|
||||
false,
|
||||
'newsfeed'
|
||||
);
|
||||
sub = ndk.subscribe(filter, { closeOnEose: false, groupable: false });
|
||||
sub.addListener('event', async (event: NDKEvent) => {
|
||||
await queryClient.setQueryData(
|
||||
['newsfeed'],
|
||||
(prev: { pageParams: number; pages: Array<NDKEvent[]> }) => ({
|
||||
...prev,
|
||||
pages: [[event], ...prev.pages],
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (sub) sub.stop();
|
||||
};
|
||||
}, [status]);
|
||||
|
||||
return (
|
||||
|
||||
@ -39,9 +39,9 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
|
||||
|
||||
const follow = async (pubkey: string) => {
|
||||
try {
|
||||
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const contacts = await user.follows();
|
||||
const add = await user.follow(new NDKUser({ hexpubkey: pubkey }), contacts);
|
||||
const add = await user.follow(new NDKUser({ pubkey: pubkey }), contacts);
|
||||
|
||||
if (add) {
|
||||
setFollowed(true);
|
||||
@ -55,14 +55,12 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
|
||||
|
||||
const unfollow = async (pubkey: string) => {
|
||||
try {
|
||||
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||
const user = ndk.getUser({ pubkey: db.account.pubkey });
|
||||
const contacts = await user.follows();
|
||||
contacts.delete(new NDKUser({ hexpubkey: pubkey }));
|
||||
contacts.delete(new NDKUser({ pubkey: pubkey }));
|
||||
|
||||
let list: string[][];
|
||||
contacts.forEach((el) =>
|
||||
list.push(['p', el.pubkey, el.relayUrls?.[0] || '', el.profile?.name || ''])
|
||||
);
|
||||
contacts.forEach((el) => list.push(['p', el.pubkey, el.relayUrls?.[0] || '', '']));
|
||||
|
||||
const event = new NDKEvent(ndk);
|
||||
event.content = '';
|
||||
|
||||
@ -54,6 +54,10 @@ export function NotificationWidget() {
|
||||
return lastEvent.created_at - 1;
|
||||
},
|
||||
enabled: false,
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnMount: false,
|
||||
refetchOnReconnect: false,
|
||||
staleTime: Infinity,
|
||||
});
|
||||
|
||||
const allEvents = useMemo(
|
||||
@ -85,7 +89,7 @@ export function NotificationWidget() {
|
||||
})
|
||||
);
|
||||
|
||||
const user = ndk.getUser({ hexpubkey: event.pubkey });
|
||||
const user = ndk.getUser({ pubkey: event.pubkey });
|
||||
await user.fetchProfile();
|
||||
|
||||
switch (event.kind) {
|
||||
|
||||
@ -194,7 +194,7 @@ export function useNostr() {
|
||||
};
|
||||
|
||||
const getContactsByPubkey = async (pubkey: string) => {
|
||||
const user = ndk.getUser({ hexpubkey: pubkey });
|
||||
const user = ndk.getUser({ pubkey: pubkey });
|
||||
const follows = [...(await user.follows())].map((user) => user.hexpubkey);
|
||||
return getMultipleRandom([...follows], 10);
|
||||
};
|
||||
|
||||
@ -18,7 +18,7 @@ export function useProfile(pubkey: string, embed?: string) {
|
||||
}
|
||||
|
||||
const cleanPubkey = pubkey.replace(/[^a-zA-Z0-9]/g, '');
|
||||
const user = ndk.getUser({ hexpubkey: cleanPubkey });
|
||||
const user = ndk.getUser({ pubkey: cleanPubkey });
|
||||
|
||||
return await user.fetchProfile();
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user