diff --git a/ui/components/providers/SimpleLightningTopup.tsx b/ui/components/providers/SimpleLightningTopup.tsx index 476bb795..a9076f4d 100644 --- a/ui/components/providers/SimpleLightningTopup.tsx +++ b/ui/components/providers/SimpleLightningTopup.tsx @@ -1,12 +1,31 @@ 'use client'; import { type JSX, useCallback, useState } from 'react'; +import Image from 'next/image'; import { Copy, Loader2 } from 'lucide-react'; import { toast } from 'sonner'; +import QRCode from 'qrcode'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { AdminService } from '@/lib/api/services/admin'; +async function generateQRCodeSVG(text: string): Promise { + try { + return await QRCode.toDataURL(text, { + type: 'image/png', + width: 200, + margin: 1, + color: { + dark: '#000000', + light: '#FFFFFF', + }, + }); + } catch (error) { + console.error('Failed to generate QR code:', error); + return ''; + } +} + interface SimpleLightningTopupProps { providerId: number; baseUrl: string; @@ -23,6 +42,7 @@ export function SimpleLightningTopup({ bolt11: string; invoice_id: string; } | null>(null); + const [qrCode, setQrCode] = useState(''); const [isWaiting, setIsWaiting] = useState(false); const handleCopy = (text: string) => { @@ -44,6 +64,7 @@ export function SimpleLightningTopup({ if (response.paid) { toast.success('Payment received!'); setInvoice(null); + setQrCode(''); setIsWaiting(false); onSuccess?.(); return; @@ -74,10 +95,15 @@ export function SimpleLightningTopup({ if (!response.ok || !response.topup_data) throw new Error('Failed to create invoice'); + const bolt11 = response.topup_data.payment_request as string; setInvoice({ - bolt11: response.topup_data.payment_request as string, + bolt11, invoice_id: response.topup_data.invoice_id as string, }); + + const qr = await generateQRCodeSVG(bolt11); + setQrCode(qr); + setIsWaiting(true); pollStatus(response.topup_data.invoice_id as string); } catch (e) { @@ -120,6 +146,18 @@ export function SimpleLightningTopup({ + {qrCode && ( +
+ Lightning Invoice QR Code +
+ )}
{invoice.bolt11}