mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-14 09:13:31 +00:00
wip: zap (done)
This commit is contained in:
Ren Amamiya
parent
22a678ec08
commit
515fda5e97
@ -44,6 +44,7 @@
|
||||
"light-bolt11-decoder": "^3.0.0",
|
||||
"nostr-fetch": "^0.12.1",
|
||||
"nostr-tools": "^1.13.0",
|
||||
"qrcode.react": "^3.1.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.45.2",
|
||||
|
||||
@ -82,6 +82,9 @@ dependencies:
|
||||
nostr-tools:
|
||||
specifier: ^1.13.0
|
||||
version: 1.13.0
|
||||
qrcode.react:
|
||||
specifier: ^3.1.0
|
||||
version: 3.1.0(react@18.2.0)
|
||||
react:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0
|
||||
@ -6168,6 +6171,14 @@ packages:
|
||||
resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
/qrcode.react@3.1.0(react@18.2.0):
|
||||
resolution: {integrity: sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/queue-microtask@1.2.3:
|
||||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ button {
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
hyphens: auto;
|
||||
@apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:last:mb-0 prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
|
||||
@apply prose prose-zinc max-w-none select-text dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
|
||||
}
|
||||
|
||||
.ProseMirror p.is-empty::before {
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
import { NostrEvent } from '@nostr-dev-kit/ndk';
|
||||
import * as Tooltip from '@radix-ui/react-tooltip';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import { useState } from 'react';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
import { ZapIcon } from '@shared/icons';
|
||||
import { Button } from '@shared/button';
|
||||
import { CancelIcon, ZapIcon } from '@shared/icons';
|
||||
|
||||
import { useEvent } from '@utils/hooks/useEvent';
|
||||
import { usePublish } from '@utils/hooks/usePublish';
|
||||
@ -10,28 +14,185 @@ export function NoteZap({ id }: { id: string }) {
|
||||
const { createZap } = usePublish();
|
||||
const { data: event } = useEvent(id);
|
||||
|
||||
const submit = async () => {
|
||||
const res = await createZap(event as NostrEvent, 21000);
|
||||
console.log(res);
|
||||
const [amount, setAmount] = useState<null | number>(null);
|
||||
const [invoice, setInvoice] = useState<null | string>(null);
|
||||
|
||||
const selected = (num: number) => {
|
||||
if (amount === num) return true;
|
||||
return false;
|
||||
};
|
||||
|
||||
const createZapRequest = async () => {
|
||||
const res = await createZap(event as NostrEvent, amount);
|
||||
if (res) setInvoice(res);
|
||||
};
|
||||
|
||||
return (
|
||||
<Tooltip.Root delayDuration={150}>
|
||||
<Tooltip.Trigger asChild>
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => submit()}
|
||||
className="group inline-flex h-7 w-7 items-center justify-center"
|
||||
>
|
||||
<ZapIcon className="h-5 w-5 text-zinc-300 group-hover:text-orange-400" />
|
||||
</button>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content className="-left-10 select-none rounded-md border-t border-zinc-600/50 bg-zinc-700 px-3.5 py-1.5 text-sm leading-none text-zinc-100 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
||||
Tip
|
||||
<Tooltip.Arrow className="fill-zinc-700" />
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal className="relative z-10">
|
||||
<Dialog.Overlay className="fixed inset-0 z-[1000px] bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
|
||||
<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center data-[state=open]:animate-contentShow">
|
||||
<Dialog.Content className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
|
||||
<div className="relative h-min w-full shrink-0 border-b border-zinc-800 px-5 py-3">
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
<Dialog.Title className="font-medium leading-none text-zinc-100">
|
||||
Zap (Beta)
|
||||
</Dialog.Title>
|
||||
<Dialog.Description className="text-sm leading-none text-zinc-400">
|
||||
Send tip with Bitcoin via Lightning
|
||||
</Dialog.Description>
|
||||
</div>
|
||||
<Dialog.Close asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-3 top-3 inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
|
||||
>
|
||||
<CancelIcon className="h-4 w-4 text-zinc-300" />
|
||||
</button>
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
<div className="overflow-y-auto overflow-x-hidden px-5 pb-5">
|
||||
{!invoice ? (
|
||||
<>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAmount(21000)}
|
||||
className={twMerge(
|
||||
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
|
||||
`${selected(21000) && 'bg-zinc-800'}`
|
||||
)}
|
||||
>
|
||||
<img
|
||||
className="h-12 w-12"
|
||||
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
|
||||
alt="High Voltage"
|
||||
/>
|
||||
<span className="text-sm font-medium leading-none text-zinc-200">
|
||||
21 sats
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAmount(69000)}
|
||||
className={twMerge(
|
||||
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
|
||||
`${selected(69000) && 'bg-zinc-800'}`
|
||||
)}
|
||||
>
|
||||
<img
|
||||
className="h-12 w-12"
|
||||
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
|
||||
alt="High Voltage"
|
||||
/>
|
||||
<span className="text-sm font-medium leading-none text-zinc-200">
|
||||
69 sats
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAmount(100000)}
|
||||
className={twMerge(
|
||||
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
|
||||
`${selected(100000) && 'bg-zinc-800'}`
|
||||
)}
|
||||
>
|
||||
<img
|
||||
className="h-12 w-12"
|
||||
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
|
||||
alt="High Voltage"
|
||||
/>
|
||||
<span className="text-sm font-medium leading-none text-zinc-200">
|
||||
100 sats
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAmount(200000)}
|
||||
className={twMerge(
|
||||
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
|
||||
`${selected(200000) && 'bg-zinc-800'}`
|
||||
)}
|
||||
>
|
||||
<img
|
||||
className="h-12 w-12"
|
||||
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
|
||||
alt="High Voltage"
|
||||
/>
|
||||
<span className="text-sm font-medium leading-none text-zinc-200">
|
||||
200 sats
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAmount(500000)}
|
||||
className={twMerge(
|
||||
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
|
||||
`${selected(500000) && 'bg-zinc-800'}`
|
||||
)}
|
||||
>
|
||||
<img
|
||||
className="h-12 w-12"
|
||||
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
|
||||
alt="High Voltage"
|
||||
/>
|
||||
<span className="text-sm font-medium leading-none text-zinc-200">
|
||||
500 sats
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAmount(1000000)}
|
||||
className={twMerge(
|
||||
'inline-flex flex-col items-center justify-center gap-2 rounded-md px-2 py-2 hover:bg-zinc-800',
|
||||
`${selected(1000000) && 'bg-zinc-800'}`
|
||||
)}
|
||||
>
|
||||
<img
|
||||
className="h-12 w-12"
|
||||
src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png"
|
||||
alt="High Voltage"
|
||||
/>
|
||||
<span className="text-sm font-medium leading-none text-zinc-200">
|
||||
1000 sats
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-4 flex w-full">
|
||||
<Button onClick={() => createZapRequest()} preset="large">
|
||||
Create invoice
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="mt-3 flex flex-col items-center justify-center gap-4">
|
||||
<div className="rounded-md bg-white p-3">
|
||||
<QRCodeSVG value={invoice} size={256} />
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<h3 className="text-lg font-medium leading-none text-zinc-100">
|
||||
Scan to pay
|
||||
</h3>
|
||||
<span className="text-center text-sm text-zinc-400">
|
||||
You must use Bitcoin wallet which support Lightning
|
||||
<br />
|
||||
such as: Blue Wallet, Bitkit, Phoenix,...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</div>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user