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

wip

Browse Source
This commit is contained in:
reya
2023-11-15 13:13:11 +07:00
parent 025d7a623b
commit 773e49afa2
14 changed files with 49 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/shared/accounts/more.tsx
View File

@@ -1,8 +1,6 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { Link } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { HorizontalDotsIcon } from '@shared/icons';
import { Logout } from '@shared/logout';
@@ -21,21 +19,23 @@ export function AccountMoreActions() {
<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={`/settings/backup`}
to="/personal"
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
>
Backup
Dashboard
</Link>
</DropdownMenu.Item>
<DropdownMenu.Item asChild>
<Link
to={`/settings/`}
to="/settings"
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
>
Settings
</Link>
</DropdownMenu.Item>
<Logout />
<DropdownMenu.Item asChild>
<Logout />
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>

73
src/shared/layouts/settings.tsx
View File

@@ -1,68 +1,21 @@
import { Link, NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { Outlet, ScrollRestoration } from 'react-router-dom';
import { WindowTitlebar } from 'tauri-controls';
import { ArrowLeftIcon, SecureIcon, SettingsIcon } from '@shared/icons';
import { useStorage } from '@libs/storage/provider';
export function SettingsLayout() {
const { db } = useStorage();
return (
<div className="flex h-screen w-screen">
<div className="relative flex h-full w-[232px] flex-col">
<div data-tauri-drag-region className="h-11 w-full shrink-0" />
<div className="flex h-full flex-1 flex-col gap-2 overflow-y-auto pb-32 scrollbar-none">
<div className="inline-flex items-center gap-2 border-l-2 border-transparent pl-4">
<Link
to="/"
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
>
<ArrowLeftIcon className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
</Link>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
Settings
</h3>
</div>
<div className="flex flex-col pr-2">
<NavLink
to="/settings/"
className={({ isActive }) =>
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
isActive
? 'border-blue-500 bg-white/5 text-white'
: 'border-transparent text-white/80'
)
}
>
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<SettingsIcon className="h-4 w-4 text-white" />
</span>
<span className="font-medium">General</span>
</NavLink>
<NavLink
to="/settings/backup"
className={({ isActive }) =>
twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
isActive
? 'border-blue-500 bg-white/5 text-white'
: 'border-transparent text-white/80'
)
}
>
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
<SecureIcon className="h-4 w-4 text-white" />
</span>
<span className="font-medium">Backup</span>
</NavLink>
</div>
</div>
</div>
<div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
<div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
{db.platform !== 'macos' ? (
<WindowTitlebar />
) : (
<div data-tauri-drag-region className="h-9" />
)}
<div className="flex h-full min-h-0 w-full">
<Outlet />
<ScrollRestoration
getKey={(location) => {
return location.pathname;
}}
/>
<ScrollRestoration />
</div>
</div>
);

4
src/shared/logout.tsx
View File

@@ -5,11 +5,11 @@ import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider';
export function Logout() {
const navigate = useNavigate();
const { db } = useStorage();
const { ndk } = useNDK();
const navigate = useNavigate();
const logout = async () => {
ndk.signer = null;

48
src/shared/notes/actions/zap.tsx
View File

@@ -80,9 +80,7 @@ export function NoteZap({ event }: { event: NDKEvent }) {
if (uri) setWalletConnectURL(uri);
}
if (isOpen) {
getWalletConnectURL();
}
if (isOpen) getWalletConnectURL();
return () => {
setAmount('21');
@@ -103,16 +101,16 @@ export function NoteZap({ event }: { event: NDKEvent }) {
</button>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-black" />
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm dark:bg-black/20" />
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-xl rounded-xl bg-neutral-400 dark:bg-neutral-600">
<div className="relative h-min w-full max-w-xl rounded-xl bg-white dark:bg-black">
<div className="inline-flex w-full shrink-0 items-center justify-between px-5 py-3">
<div className="w-6" />
<Dialog.Title className="text-center text-sm font-semibold leading-none text-white">
<Dialog.Title className="text-center font-semibold">
Send tip to {user?.name || user?.display_name || user?.displayName}
</Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
<CancelIcon className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-neutral-100 dark:bg-neutral-900">
<CancelIcon className="h-4 w-4" />
</Dialog.Close>
</div>
<div className="overflow-y-auto overflow-x-hidden px-5 pb-5">
@@ -129,7 +127,7 @@ export function NoteZap({ event }: { event: NDKEvent }) {
max={10000} // 1M sats
maxLength={10000} // 1M sats
onValueChange={(value) => setAmount(value)}
className="w-full flex-1 bg-transparent text-right text-4xl font-semibold text-white placeholder:text-neutral-600 focus:outline-none dark:text-neutral-400"
className="w-full flex-1 bg-transparent text-right text-4xl font-semibold placeholder:text-neutral-600 focus:outline-none dark:text-neutral-400"
/>
<span className="w-full flex-1 text-left text-4xl font-semibold text-neutral-600 dark:text-neutral-400">
sats
@@ -139,35 +137,35 @@ export function NoteZap({ event }: { event: NDKEvent }) {
<button
type="button"
onClick={() => setAmount('69')}
className="w-max rounded-full border border-white/5 bg-white/5 px-2.5 py-1 text-sm font-medium hover:bg-white/10"
className="w-max rounded-full border border-neutral-200 bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800"
>
69 sats
</button>
<button
type="button"
onClick={() => setAmount('100')}
className="w-max rounded-full border border-white/5 bg-white/5 px-2.5 py-1 text-sm font-medium hover:bg-white/10"
className="w-max rounded-full border border-neutral-200 bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800"
>
100 sats
</button>
<button
type="button"
onClick={() => setAmount('200')}
className="w-max rounded-full border border-white/5 bg-white/5 px-2.5 py-1 text-sm font-medium hover:bg-white/10"
className="w-max rounded-full border border-neutral-200 bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800"
>
200 sats
</button>
<button
type="button"
onClick={() => setAmount('500')}
className="w-max rounded-full border border-white/5 bg-white/5 px-2.5 py-1 text-sm font-medium hover:bg-white/10"
className="w-max rounded-full border border-neutral-200 bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800"
>
500 sats
</button>
<button
type="button"
onClick={() => setAmount('1000')}
className="w-max rounded-full border border-white/5 bg-white/5 px-2.5 py-1 text-sm font-medium hover:bg-white/10"
className="w-max rounded-full border border-neutral-200 bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800"
>
1K sats
</button>
@@ -183,28 +181,28 @@ export function NoteZap({ event }: { event: NDKEvent }) {
autoCorrect="off"
autoCapitalize="off"
placeholder="Enter message (optional)"
className="relative min-h-[56px] w-full resize-none rounded-lg bg-white/10 px-3 py-2 !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
className="w-full resize-none rounded-lg bg-neutral-100 px-3 py-3 !outline-none placeholder:text-neutral-600 dark:bg-neutral-900 dark:text-neutral-400"
/>
<div className="flex flex-col gap-2">
{walletConnectURL ? (
<button
type="button"
onClick={() => createZapRequest()}
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
>
{isCompleted ? (
<p>Successfully tipped</p>
) : isLoading ? (
<span className="flex flex-col">
<p className="mb-px leading-none">Waiting for approval</p>
<p className="text-xs leading-none text-neutral-600 dark:text-neutral-400">
<p>Waiting for approval</p>
<p className="text-xs text-neutral-600 dark:text-neutral-400">
Go to your wallet and approve payment request
</p>
</span>
) : (
<span className="flex flex-col">
<p className="mb-px leading-none">Send tip</p>
<p className="text-xs leading-none text-neutral-600 dark:text-neutral-400">
<p>Send tip</p>
<p className="text-xs text-neutral-600 dark:text-neutral-400">
You&apos;re using nostr wallet connect
</p>
</span>
@@ -214,9 +212,9 @@ export function NoteZap({ event }: { event: NDKEvent }) {
<button
type="button"
onClick={() => createZapRequest()}
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium hover:bg-blue-600"
className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
>
<p>Create Lightning invoice</p>
Create Lightning invoice
</button>
)}
</div>
@@ -224,13 +222,11 @@ export function NoteZap({ event }: { event: NDKEvent }) {
</>
) : (
<div className="mt-3 flex flex-col items-center justify-center gap-4">
<div className="rounded-md bg-white p-3">
<div className="rounded-md bg-neutral-100 p-3 dark:bg-neutral-900">
<QRCodeSVG value={invoice} size={256} />
</div>
<div className="flex flex-col items-center gap-1">
<h3 className="text-lg font-medium leading-none text-white">
Scan to pay
</h3>
<h3 className="text-lg font-medium">Scan to pay</h3>
<span className="text-center text-sm text-neutral-600 dark:text-neutral-400">
You must use Bitcoin wallet which support Lightning
<br />