277 lines
12 KiB
TypeScript
277 lines
12 KiB
TypeScript
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
|
import * as Accordion from '@radix-ui/react-accordion';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { nip19 } from 'nostr-tools';
|
|
import { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { toast } from 'sonner';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
import { useNDK } from '@libs/ndk/provider';
|
|
import { useStorage } from '@libs/storage/provider';
|
|
|
|
import {
|
|
ArrowLeftIcon,
|
|
ArrowRightIcon,
|
|
CancelIcon,
|
|
ChevronDownIcon,
|
|
LoaderIcon,
|
|
PlusIcon,
|
|
} from '@shared/icons';
|
|
import { User } from '@shared/user';
|
|
|
|
const POPULAR_USERS = [
|
|
'npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6',
|
|
'npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m',
|
|
'npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s',
|
|
'npub1gcxzte5zlkncx26j68ez60fzkvtkm9e0vrwdcvsjakxf9mu9qewqlfnj5z',
|
|
'npub1az9xj85cmxv8e9j9y80lvqp97crsqdu2fpu3srwthd99qfu9qsgstam8y8',
|
|
'npub1a2cww4kn9wqte4ry70vyfwqyqvpswksna27rtxd8vty6c74era8sdcw83a',
|
|
'npub168ghgug469n4r2tuyw05dmqhqv5jcwm7nxytn67afmz8qkc4a4zqsu2dlc',
|
|
'npub133vj8ycevdle0cq8mtgddq0xtn34kxkwxvak983dx0u5vhqnycyqj6tcza',
|
|
'npub18ams6ewn5aj2n3wt2qawzglx9mr4nzksxhvrdc4gzrecw7n5tvjqctp424',
|
|
'npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac',
|
|
'npub1prya33fnqerq0fljwjtp77ehtu7jlsjt5ydhwveuwmqdsdm6k8esk42xcv',
|
|
'npub19mduaf5569jx9xz555jcx3v06mvktvtpu0zgk47n4lcpjsz43zzqhj6vzk',
|
|
];
|
|
const LUME_USERS = ['npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445'];
|
|
|
|
export function FollowScreen() {
|
|
const { ndk } = useNDK();
|
|
const { db } = useStorage();
|
|
const { status, data } = useQuery({
|
|
queryKey: ['trending-profiles-widget'],
|
|
queryFn: async () => {
|
|
const res = await fetch('https://api.nostr.band/v0/trending/profiles');
|
|
if (!res.ok) {
|
|
throw new Error('Error');
|
|
}
|
|
return res.json();
|
|
},
|
|
});
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [follows, setFollows] = useState<string[]>([]);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
// toggle follow state
|
|
const toggleFollow = (pubkey: string) => {
|
|
const arr = follows.includes(pubkey)
|
|
? follows.filter((i) => i !== pubkey)
|
|
: [...follows, pubkey];
|
|
setFollows(arr);
|
|
};
|
|
|
|
const submit = async () => {
|
|
try {
|
|
setLoading(true);
|
|
if (!follows.length) return navigate('/auth/finish');
|
|
|
|
const event = new NDKEvent(ndk);
|
|
event.kind = NDKKind.Contacts;
|
|
event.tags = follows.map((item) => {
|
|
if (item.startsWith('npub')) return ['p', nip19.decode(item).data as string];
|
|
return ['p', item];
|
|
});
|
|
|
|
const publish = await event.publish();
|
|
if (publish) {
|
|
db.account.contacts = follows.map((item) => {
|
|
if (item.startsWith('npub')) return nip19.decode(item).data as string;
|
|
return item;
|
|
});
|
|
|
|
return navigate('/auth/finish');
|
|
}
|
|
} catch (e) {
|
|
setLoading(false);
|
|
toast.error(e);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="relative flex h-full w-full items-center justify-center">
|
|
<div className="mx-auto flex w-full max-w-md flex-col gap-10">
|
|
<div className="text-center">
|
|
<h1 className="text-2xl font-semibold">Dive into the nostrverse</h1>
|
|
<h2 className="text-neutral-700 dark:text-neutral-300">
|
|
Try following some users that interest you
|
|
<br />
|
|
to build up your timeline.
|
|
</h2>
|
|
</div>
|
|
<Accordion.Root type="single" defaultValue="recommended" collapsible>
|
|
<Accordion.Item value="recommended" className="mb-3 overflow-hidden rounded-xl">
|
|
<Accordion.Trigger className="flex h-12 w-full items-center justify-between rounded-t-xl bg-neutral-100 px-3 font-medium dark:bg-neutral-900">
|
|
Popular users
|
|
<ChevronDownIcon className="h-4 w-4" />
|
|
</Accordion.Trigger>
|
|
<Accordion.Content>
|
|
<div className="flex h-[420px] w-full flex-col gap-3 overflow-y-auto rounded-b-xl bg-neutral-50 p-3 dark:bg-neutral-950">
|
|
{POPULAR_USERS.map((pubkey) => (
|
|
<div
|
|
key={pubkey}
|
|
className="flex h-max w-full shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-100 bg-white dark:border-neutral-900 dark:bg-black"
|
|
>
|
|
<div className="p-3">
|
|
<User pubkey={pubkey} variant="large" />
|
|
</div>
|
|
<div className="border-t border-neutral-100 px-3 py-4 dark:border-neutral-900">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleFollow(pubkey)}
|
|
className={twMerge(
|
|
'inline-flex h-9 w-full items-center justify-center gap-1 rounded-lg font-medium text-white',
|
|
follows.includes(pubkey)
|
|
? 'bg-red-500 hover:bg-red-600'
|
|
: 'bg-blue-500 hover:bg-blue-600'
|
|
)}
|
|
>
|
|
{follows.includes(pubkey) ? (
|
|
<>
|
|
<CancelIcon className="h-4 w-4" />
|
|
Unfollow
|
|
</>
|
|
) : (
|
|
<>
|
|
<PlusIcon className="h-4 w-4" />
|
|
Follow
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Accordion.Content>
|
|
</Accordion.Item>
|
|
<Accordion.Item value="trending" className="mb-3 overflow-hidden rounded-xl">
|
|
<Accordion.Trigger className="flex h-12 w-full items-center justify-between rounded-t-xl bg-neutral-100 px-3 font-medium dark:bg-neutral-900">
|
|
Trending users
|
|
<ChevronDownIcon className="h-4 w-4" />
|
|
</Accordion.Trigger>
|
|
<Accordion.Content>
|
|
<div className="flex h-[420px] w-full flex-col gap-3 overflow-y-auto rounded-b-xl bg-neutral-50 p-3 dark:bg-neutral-950">
|
|
{status === 'pending' ? (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<LoaderIcon className="h-4 w-4 animate-spin" />
|
|
</div>
|
|
) : (
|
|
data?.profiles.map(
|
|
(item: { pubkey: string; profile: { content: string } }) => (
|
|
<div
|
|
key={item.pubkey}
|
|
className="flex h-max w-full shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-100 bg-white dark:border-neutral-900 dark:bg-black"
|
|
>
|
|
<div className="p-3">
|
|
<User
|
|
pubkey={item.pubkey}
|
|
variant="large"
|
|
embedProfile={item.profile?.content}
|
|
/>
|
|
</div>
|
|
<div className="border-t border-neutral-100 px-3 py-4 dark:border-neutral-900">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleFollow(item.pubkey)}
|
|
className={twMerge(
|
|
'inline-flex h-9 w-full items-center justify-center gap-1 rounded-lg font-medium text-white',
|
|
follows.includes(item.pubkey)
|
|
? 'bg-red-500 hover:bg-red-600'
|
|
: 'bg-blue-500 hover:bg-blue-600'
|
|
)}
|
|
>
|
|
{follows.includes(item.pubkey) ? (
|
|
<>
|
|
<CancelIcon className="h-4 w-4" />
|
|
Unfollow
|
|
</>
|
|
) : (
|
|
<>
|
|
<PlusIcon className="h-4 w-4" />
|
|
Follow
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
)
|
|
)}
|
|
</div>
|
|
</Accordion.Content>
|
|
</Accordion.Item>
|
|
<Accordion.Item value="lume" className="mb-3 overflow-hidden rounded-xl">
|
|
<Accordion.Trigger className="flex h-12 w-full items-center justify-between rounded-t-xl bg-neutral-100 px-3 font-medium dark:bg-neutral-900">
|
|
Lume team
|
|
<ChevronDownIcon className="h-4 w-4" />
|
|
</Accordion.Trigger>
|
|
<Accordion.Content>
|
|
<div className="flex h-[420px] w-full flex-col gap-3 overflow-y-auto rounded-b-xl bg-neutral-50 p-3 dark:bg-neutral-950">
|
|
{LUME_USERS.map((pubkey) => (
|
|
<div
|
|
key={pubkey}
|
|
className="flex h-max w-full shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-100 bg-white dark:border-neutral-900 dark:bg-black"
|
|
>
|
|
<div className="p-3">
|
|
<User pubkey={pubkey} variant="large" />
|
|
</div>
|
|
<div className="border-t border-neutral-100 px-3 py-4 dark:border-neutral-900">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleFollow(pubkey)}
|
|
className={twMerge(
|
|
'inline-flex h-9 w-full items-center justify-center gap-1 rounded-lg font-medium text-white',
|
|
follows.includes(pubkey)
|
|
? 'bg-red-500 hover:bg-red-600'
|
|
: 'bg-blue-500 hover:bg-blue-600'
|
|
)}
|
|
>
|
|
{follows.includes(pubkey) ? (
|
|
<>
|
|
<CancelIcon className="h-4 w-4" />
|
|
Unfollow
|
|
</>
|
|
) : (
|
|
<>
|
|
<PlusIcon className="h-4 w-4" />
|
|
Follow
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Accordion.Content>
|
|
</Accordion.Item>
|
|
</Accordion.Root>
|
|
</div>
|
|
<div className="absolute bottom-3 right-3 flex w-full items-center justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate(-1)}
|
|
className="inline-flex h-11 w-max items-center justify-center gap-2 rounded-lg bg-neutral-100 px-3 font-semibold hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-blue-800"
|
|
>
|
|
<ArrowLeftIcon className="h-4 w-4" />
|
|
Back
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={submit}
|
|
disabled={loading}
|
|
className="inline-flex h-11 w-max items-center justify-center gap-2 rounded-lg bg-blue-500 px-3 font-semibold text-white hover:bg-blue-600"
|
|
>
|
|
Continue
|
|
{loading ? (
|
|
<LoaderIcon className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<ArrowRightIcon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|