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

2
src-tauri/tauri.conf.json
View File

@@ -60,7 +60,7 @@
], ],
"copyright": "", "copyright": "",
"identifier": "com.lume.nu", "identifier": "com.lume.nu",
"longDescription": "", "longDescription": "The communication app build on Nostr Protocol",
"shortDescription": "", "shortDescription": "",
"targets": "all", "targets": "all",
"updater": { "updater": {

11
src/app.tsx
View File

@@ -260,15 +260,8 @@ export default function App() {
{ {
path: '', path: '',
async lazy() { async lazy() {
const { GeneralSettingsScreen } = await import('@app/settings/general'); const { SettingsScreen } = await import('@app/settings');
return { Component: GeneralSettingsScreen }; return { Component: SettingsScreen };
},
},
{
path: 'backup',
async lazy() {
const { AccountSettingsScreen } = await import('@app/settings/account');
return { Component: AccountSettingsScreen };
}, },
}, },
], ],

138
src/app/settings/account.tsx
View File

@@ -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>
);
}

12
src/app/settings/components/autoStart.tsx
View File

@@ -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>
);
}

40
src/app/settings/components/cacheTime.tsx
View File

@@ -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>
);
}

28
src/app/settings/components/dataPath.tsx
View File

@@ -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>
);
}

15
src/app/settings/components/version.tsx
View File

@@ -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&apos;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>
);
}

20
src/app/settings/general.tsx
View File

@@ -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
View File

@@ -0,0 +1,3 @@
export function SettingsScreen() {
return <div></div>;
}

118
src/app/settings/shortcuts.tsx
View File

@@ -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>
);
}

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

@@ -1,8 +1,6 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { HorizontalDotsIcon } from '@shared/icons'; import { HorizontalDotsIcon } from '@shared/icons';
import { Logout } from '@shared/logout'; 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.Content className="ml-2 flex w-[200px] flex-col overflow-hidden rounded-xl bg-blue-500 p-2 focus:outline-none">
<DropdownMenu.Item asChild> <DropdownMenu.Item asChild>
<Link <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" 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> </Link>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item asChild> <DropdownMenu.Item asChild>
<Link <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" 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 Settings
</Link> </Link>
</DropdownMenu.Item> </DropdownMenu.Item>
<Logout /> <DropdownMenu.Item asChild>
<Logout />
</DropdownMenu.Item>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Portal> </DropdownMenu.Portal>
</DropdownMenu.Root> </DropdownMenu.Root>

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

@@ -1,68 +1,21 @@
import { Link, NavLink, Outlet, ScrollRestoration } from 'react-router-dom'; import { Outlet, ScrollRestoration } from 'react-router-dom';
import { twMerge } from 'tailwind-merge'; import { WindowTitlebar } from 'tauri-controls';
import { ArrowLeftIcon, SecureIcon, SettingsIcon } from '@shared/icons'; import { useStorage } from '@libs/storage/provider';
export function SettingsLayout() { export function SettingsLayout() {
const { db } = useStorage();
return ( return (
<div className="flex h-screen w-screen"> <div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
<div className="relative flex h-full w-[232px] flex-col"> {db.platform !== 'macos' ? (
<div data-tauri-drag-region className="h-11 w-full shrink-0" /> <WindowTitlebar />
<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"> <div data-tauri-drag-region className="h-9" />
<Link )}
to="/" <div className="flex h-full min-h-0 w-full">
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">
<Outlet /> <Outlet />
<ScrollRestoration <ScrollRestoration />
getKey={(location) => {
return location.pathname;
}}
/>
</div> </div>
</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'; import { useStorage } from '@libs/storage/provider';
export function Logout() { export function Logout() {
const navigate = useNavigate();
const { db } = useStorage(); const { db } = useStorage();
const { ndk } = useNDK(); const { ndk } = useNDK();
const navigate = useNavigate();
const logout = async () => { const logout = async () => {
ndk.signer = null; 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 (uri) setWalletConnectURL(uri);
} }
if (isOpen) { if (isOpen) getWalletConnectURL();
getWalletConnectURL();
}
return () => { return () => {
setAmount('21'); setAmount('21');
@@ -103,16 +101,16 @@ export function NoteZap({ event }: { event: NDKEvent }) {
</button> </button>
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Portal> <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"> <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="inline-flex w-full shrink-0 items-center justify-between px-5 py-3">
<div className="w-6" /> <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} Send tip to {user?.name || user?.display_name || user?.displayName}
</Dialog.Title> </Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10"> <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 text-neutral-600 dark:text-neutral-400" /> <CancelIcon className="h-4 w-4" />
</Dialog.Close> </Dialog.Close>
</div> </div>
<div className="overflow-y-auto overflow-x-hidden px-5 pb-5"> <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 max={10000} // 1M sats
maxLength={10000} // 1M sats maxLength={10000} // 1M sats
onValueChange={(value) => setAmount(value)} 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"> <span className="w-full flex-1 text-left text-4xl font-semibold text-neutral-600 dark:text-neutral-400">
sats sats
@@ -139,35 +137,35 @@ export function NoteZap({ event }: { event: NDKEvent }) {
<button <button
type="button" type="button"
onClick={() => setAmount('69')} 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 69 sats
</button> </button>
<button <button
type="button" type="button"
onClick={() => setAmount('100')} 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 100 sats
</button> </button>
<button <button
type="button" type="button"
onClick={() => setAmount('200')} 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 200 sats
</button> </button>
<button <button
type="button" type="button"
onClick={() => setAmount('500')} 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 500 sats
</button> </button>
<button <button
type="button" type="button"
onClick={() => setAmount('1000')} 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 1K sats
</button> </button>
@@ -183,28 +181,28 @@ export function NoteZap({ event }: { event: NDKEvent }) {
autoCorrect="off" autoCorrect="off"
autoCapitalize="off" autoCapitalize="off"
placeholder="Enter message (optional)" 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"> <div className="flex flex-col gap-2">
{walletConnectURL ? ( {walletConnectURL ? (
<button <button
type="button" type="button"
onClick={() => createZapRequest()} 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 ? ( {isCompleted ? (
<p>Successfully tipped</p> <p>Successfully tipped</p>
) : isLoading ? ( ) : isLoading ? (
<span className="flex flex-col"> <span className="flex flex-col">
<p className="mb-px leading-none">Waiting for approval</p> <p>Waiting for approval</p>
<p className="text-xs leading-none text-neutral-600 dark:text-neutral-400"> <p className="text-xs text-neutral-600 dark:text-neutral-400">
Go to your wallet and approve payment request Go to your wallet and approve payment request
</p> </p>
</span> </span>
) : ( ) : (
<span className="flex flex-col"> <span className="flex flex-col">
<p className="mb-px leading-none">Send tip</p> <p>Send tip</p>
<p className="text-xs leading-none text-neutral-600 dark:text-neutral-400"> <p className="text-xs text-neutral-600 dark:text-neutral-400">
You&apos;re using nostr wallet connect You&apos;re using nostr wallet connect
</p> </p>
</span> </span>
@@ -214,9 +212,9 @@ export function NoteZap({ event }: { event: NDKEvent }) {
<button <button
type="button" type="button"
onClick={() => createZapRequest()} 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> </button>
)} )}
</div> </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="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} /> <QRCodeSVG value={invoice} size={256} />
</div> </div>
<div className="flex flex-col items-center gap-1"> <div className="flex flex-col items-center gap-1">
<h3 className="text-lg font-medium leading-none text-white"> <h3 className="text-lg font-medium">Scan to pay</h3>
Scan to pay
</h3>
<span className="text-center text-sm text-neutral-600 dark:text-neutral-400"> <span className="text-center text-sm text-neutral-600 dark:text-neutral-400">
You must use Bitcoin wallet which support Lightning You must use Bitcoin wallet which support Lightning
<br /> <br />