add sat amounts to invoices

api/resolvers/wallet.js

@@ -296,7 +296,8 @@ export default {
   },
 
   Invoice: {
-    satsReceived: i => msatsToSats(i.msatsReceived)
+    satsReceived: i => msatsToSats(i.msatsReceived),
+    satsRequested: i => msatsToSats(i.msatsRequested)
   },
 
   Fact: {

api/typeDefs/wallet.js

@@ -23,6 +23,7 @@ export default gql`
     cancelled: Boolean!
     confirmedAt: Date
     satsReceived: Int
+    satsRequested: Int!
     nostr: JSONObject
     hmac: String
   }

components/invoice.js

@@ -41,7 +41,7 @@ export function Invoice ({ invoice, onConfirmation, successVerb }) {
 
   return (
     <>
-      <Qr webLn={webLn} value={invoice.bolt11} statusVariant={variant} status={status} />
+      <Qr webLn={webLn} value={invoice.bolt11} description={numWithUnits(invoice.satsRequested)} statusVariant={variant} status={status} />
       <div className='w-100'>
         {nostr
           ? <AccordianItem

components/qr.js

@@ -4,7 +4,7 @@ import InvoiceStatus from './invoice-status'
 import { requestProvider } from 'webln'
 import { useEffect } from 'react'
 
-export default function Qr ({ asIs, value, webLn, statusVariant, status }) {
+export default function Qr ({ asIs, value, webLn, statusVariant, description, status }) {
   const qrValue = asIs ? value : 'lightning:' + value.toUpperCase()
 
   useEffect(() => {
@@ -28,6 +28,7 @@ export default function Qr ({ asIs, value, webLn, statusVariant, status }) {
           className='h-auto mw-100' value={qrValue} renderAs='svg' size={300}
         />
       </a>
+      {description && <div className='mt-1 fst-italic text-center text-muted'>{description}</div>}
       <div className='mt-3 w-100'>
         <CopyInput type='text' placeholder={value} readOnly noForm />
       </div>

fragments/wallet.js

@@ -7,6 +7,7 @@ export const INVOICE = gql`
       id
       hash
       bolt11
+      satsRequested
       satsReceived
       cancelled
       confirmedAt