mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-02 18:00:47 +00:00
wip
This commit is contained in:
reya
parent
025d7a623b
commit
773e49afa2
@ -60,7 +60,7 @@
|
||||
],
|
||||
"copyright": "",
|
||||
"identifier": "com.lume.nu",
|
||||
"longDescription": "",
|
||||
"longDescription": "The communication app build on Nostr Protocol",
|
||||
"shortDescription": "",
|
||||
"targets": "all",
|
||||
"updater": {
|
||||
|
||||
11
src/app.tsx
11
src/app.tsx
@ -260,15 +260,8 @@ export default function App() {
|
||||
{
|
||||
path: '',
|
||||
async lazy() {
|
||||
const { GeneralSettingsScreen } = await import('@app/settings/general');
|
||||
return { Component: GeneralSettingsScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'backup',
|
||||
async lazy() {
|
||||
const { AccountSettingsScreen } = await import('@app/settings/account');
|
||||
return { Component: AccountSettingsScreen };
|
||||
const { SettingsScreen } = await import('@app/settings');
|
||||
return { Component: SettingsScreen };
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,138 +0,0 @@
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { EyeOffIcon, EyeOnIcon } from '@shared/icons';
|
||||
|
||||
export function AccountSettingsScreen() {
|
||||
const { db } = useStorage();
|
||||
|
||||
const [privType, setPrivType] = useState('password');
|
||||
const [nsecType, setNsecType] = useState('password');
|
||||
|
||||
const privkey = 'todo';
|
||||
const nsec = useMemo(() => nip19.nsecEncode(privkey), [privkey]);
|
||||
|
||||
const showPrivkey = () => {
|
||||
if (privType === 'password') {
|
||||
setPrivType('text');
|
||||
} else {
|
||||
setPrivType('password');
|
||||
}
|
||||
};
|
||||
|
||||
const showNsec = () => {
|
||||
if (nsecType === 'password') {
|
||||
setNsecType('text');
|
||||
} else {
|
||||
setNsecType('password');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full px-3 pt-11">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-xl font-semibold text-white">Account</h1>
|
||||
<div className="flex flex-col gap-4 rounded-xl bg-white/10 p-3 backdrop-blur-xl">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="pubkey"
|
||||
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
Public Key
|
||||
</label>
|
||||
<input
|
||||
readOnly
|
||||
value={db.account.pubkey}
|
||||
className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="npub"
|
||||
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
Npub
|
||||
</label>
|
||||
<input
|
||||
readOnly
|
||||
value={db.account.npub}
|
||||
className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="privkey"
|
||||
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
Private Key
|
||||
</label>
|
||||
<div className="relative w-full">
|
||||
<input
|
||||
readOnly
|
||||
type={privType}
|
||||
value={privkey}
|
||||
className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => showPrivkey()}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-neutral-700"
|
||||
>
|
||||
{privType === 'password' ? (
|
||||
<EyeOffIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
|
||||
/>
|
||||
) : (
|
||||
<EyeOnIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="privkey"
|
||||
className="text-base font-semibold text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
Nsec
|
||||
</label>
|
||||
<div className="relative w-full">
|
||||
<input
|
||||
readOnly
|
||||
type={nsecType}
|
||||
value={nsec}
|
||||
className="relative w-full rounded-lg bg-white/10 py-3 pl-3.5 pr-11 text-white !outline-none backdrop-blur-xl placeholder:text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => showNsec()}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-neutral-700"
|
||||
>
|
||||
{privType === 'password' ? (
|
||||
<EyeOffIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
|
||||
/>
|
||||
) : (
|
||||
<EyeOnIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-neutral-600 group-hover:text-white dark:text-neutral-400"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
export function AutoStartSetting() {
|
||||
return (
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-neutral-200">Auto start</span>
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
Auto start at login
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { CheckCircleIcon } from '@shared/icons';
|
||||
|
||||
export function CacheTimeSetting() {
|
||||
const [time, setTime] = useState('0');
|
||||
|
||||
const update = async () => {
|
||||
// await updateSetting('cache_time', time);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-neutral-200">
|
||||
Cache time (milliseconds)
|
||||
</span>
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
The length of time before inactive data gets removed from the cache
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<input
|
||||
value={time}
|
||||
onChange={(e) => setTime(e.currentTarget.value)}
|
||||
autoCapitalize="none"
|
||||
autoCorrect="none"
|
||||
className="h-8 w-24 rounded-md bg-neutral-800 px-2 text-right font-medium text-neutral-300 focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => update()}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-800 font-medium hover:bg-blue-600"
|
||||
>
|
||||
<CheckCircleIcon className="h-4 w-4 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
import { appConfigDir } from '@tauri-apps/api/path';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export function DataPath() {
|
||||
const [path, setPath] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
async function getPath() {
|
||||
const dir = await appConfigDir();
|
||||
setPath(dir);
|
||||
}
|
||||
getPath();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-neutral-200">App data path</span>
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
Where the local data is stored
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="font-medium text-neutral-300">{path}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
export function VersionSetting() {
|
||||
return (
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-neutral-200">Version</span>
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
You're using latest version
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="font-medium text-neutral-300">2</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import { AutoStartSetting } from '@app/settings/components/autoStart';
|
||||
import { DataPath } from '@app/settings/components/dataPath';
|
||||
import { VersionSetting } from '@app/settings/components/version';
|
||||
|
||||
export function GeneralSettingsScreen() {
|
||||
return (
|
||||
<div className="h-full w-full px-3 pt-11">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-xl font-semibold text-white">General</h1>
|
||||
<div className="w-full rounded-xl bg-neutral-400 dark:bg-neutral-600">
|
||||
<div className="flex h-full w-full flex-col divide-y divide-white/5">
|
||||
<AutoStartSetting />
|
||||
<DataPath />
|
||||
<VersionSetting />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
3
src/app/settings/index.tsx
Normal file
3
src/app/settings/index.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export function SettingsScreen() {
|
||||
return <div></div>;
|
||||
}
|
||||
@ -1,118 +0,0 @@
|
||||
import { CommandIcon } from '@shared/icons';
|
||||
|
||||
export function ShortcutsSettingsScreen() {
|
||||
return (
|
||||
<div className="h-full w-full px-3 pt-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-lg font-semibold text-white">Shortcuts</h1>
|
||||
<div className="w-full rounded-xl bg-neutral-400 dark:bg-neutral-600">
|
||||
<div className="flex h-full w-full flex-col divide-y divide-white/5">
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-white">Open composer</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
N
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-white">
|
||||
Add image block
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
I
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-white">
|
||||
Add newsfeed block
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
F
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-white">
|
||||
Open personal page
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
P
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-white">
|
||||
Open notification
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-neutral-400 dark:bg-neutral-600">
|
||||
<span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
|
||||
B
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
<DropdownMenu.Item asChild>
|
||||
<Logout />
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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'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 />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user