aljaz/rabbit
1
0
Fork 0
mirror of https://github.com/aljazceru/rabbit.git synced 2025-12-17 05:54:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add button to copy invoice

Browse Source
This commit is contained in:
Shusui MOYATANI
2024-02-19 20:22:47 +09:00
parent db188e6d27
commit e96e8f4897
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/modal/ZapRequestModal.tsx
View File

@@ -21,6 +21,7 @@ import { requestProvider, type WebLNProvider } from 'webln';
// eslint-disable-next-line import/no-cycle // eslint-disable-next-line import/no-cycle
import EventDisplay from '@/components/event/EventDisplay'; import EventDisplay from '@/components/event/EventDisplay';
import BasicModal from '@/components/modal/BasicModal'; import BasicModal from '@/components/modal/BasicModal';
import Copy from '@/components/utils/Copy';
import useConfig from '@/core/useConfig'; import useConfig from '@/core/useConfig';
import { useTranslation } from '@/i18n/useTranslation'; import { useTranslation } from '@/i18n/useTranslation';
import createZapRequest from '@/nostr/builder/createZapRequest'; import createZapRequest from '@/nostr/builder/createZapRequest';
@@ -81,7 +82,7 @@ const QRCodeDisplay: Component<{ text: string }> = (props) => {
qrcode qrcode
.toCanvas(canvasRef, props.text, { .toCanvas(canvasRef, props.text, {
margin: 8, margin: 2,
color: { color: {
dark: currentTheme.brightness === 'dark' ? '#ffffffff' : '#000000ff', dark: currentTheme.brightness === 'dark' ? '#ffffffff' : '#000000ff',
light: '#00000000', light: '#00000000',
@@ -102,7 +103,7 @@ const InvoiceDisplay: Component<{ invoice: string; event: NostrEvent; nostrPubke
const { config } = useConfig(); const { config } = useConfig();
const webln = useWebLN(); const webln = useWebLN();
const lightingInvoice = () => `lightning:${props.invoice}`; const lightingInvoiceWithSchema = () => `lightning:${props.invoice}`;
const { events } = useSubscription(() => const { events } = useSubscription(() =>
ensureNonNull([props.nostrPubkey] as const)(([nostrPubkey]) => ({ ensureNonNull([props.nostrPubkey] as const)(([nostrPubkey]) => ({
@@ -150,13 +151,21 @@ const InvoiceDisplay: Component<{ invoice: string; event: NostrEvent; nostrPubke
</div> </div>
} }
> >
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-4">
<div> <div>
<QRCodeDisplay text={lightingInvoice()} /> <QRCodeDisplay text={lightingInvoiceWithSchema()} />
</div>
<div class="flex items-center gap-2 ps-5">
<textarea
class="h-12 w-80 flex-1 select-all whitespace-pre-wrap break-all rounded-md border border-border bg-bg font-mono text-sm ring-border placeholder:text-fg-secondary focus:border-border focus:ring-primary"
value={props.invoice}
readonly
/>
<Copy class="size-5 hover:text-primary" text={props.invoice} />
</div> </div>
<a <a
class="inline-block rounded bg-primary p-4 font-bold text-primary-fg hover:bg-primary-hover" class="inline-block rounded bg-primary p-4 font-bold text-primary-fg hover:bg-primary-hover"
href={lightingInvoice()} href={lightingInvoiceWithSchema()}
> >
{i18n.t('zap.sendViaWallet')} {i18n.t('zap.sendViaWallet')}
</a> </a>
@@ -370,7 +379,7 @@ const ZapRequestModal: Component<ZapRequestModalProps> = (props) => {
return ( return (
<BasicModal onClose={props.onClose}> <BasicModal onClose={props.onClose}>
<div class="p-8"> <div class="px-8 py-12">
<Show when={isZapConfigured()} fallback={i18n.t('zap.userDidNotConfigureZap')}> <Show when={isZapConfigured()} fallback={i18n.t('zap.userDidNotConfigureZap')}>
<Show when={lud06() != null && lud16() != null}> <Show when={lud06() != null && lud16() != null}>
<div class="flex justify-center gap-3 pb-2"> <div class="flex justify-center gap-3 pb-2">