feat: display invoice memo in Lightning invoice cards (#643)

Co-authored-by: The Daniel <dmnyc@users.noreply.github.com>

src/components/Embedded/EmbeddedLNInvoice.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/components/ui/button'
-import { formatAmount, getAmountFromInvoice } from '@/lib/lightning'
+import { formatAmount, getInvoiceDetails } from '@/lib/lightning'
 import { cn } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
 import lightning from '@/services/lightning.service'
@@ -13,8 +13,8 @@ export function EmbeddedLNInvoice({ invoice, className }: { invoice: string; cla
   const { checkLogin, pubkey } = useNostr()
   const [paying, setPaying] = useState(false)
 
-  const amount = useMemo(() => {
-    return getAmountFromInvoice(invoice)
+  const { amount, description } = useMemo(() => {
+    return getInvoiceDetails(invoice)
   }, [invoice])
 
   const handlePay = async () => {
@@ -49,6 +49,9 @@ export function EmbeddedLNInvoice({ invoice, className }: { invoice: string; cla
         <Zap className="w-5 h-5 text-yellow-400" />
         <div className="font-semibold text-sm">{t('Lightning Invoice')}</div>
       </div>
+      {description && (
+        <div className="text-sm text-muted-foreground break-words">{description}</div>
+      )}
       <div className="text-lg font-bold">
         {formatAmount(amount)} {t('sats')}
       </div>

src/lib/lightning.ts

@@ -7,6 +7,14 @@ export function getAmountFromInvoice(invoice: string): number {
   return _invoice.satoshi
 }
 
+export function getInvoiceDetails(invoice: string): { amount: number; description: string | null } {
+  const _invoice = new Invoice({ pr: invoice }) // TODO: need to validate
+  return {
+    amount: _invoice.satoshi,
+    description: _invoice.description,
+  }
+}
+
 export function formatAmount(amount: number) {
   if (amount < 1000) return amount
   if (amount < 1000000) return `${Math.round(amount / 100) / 10}k`