Show invoice amount below QR code

stackernews · Aug 11, 2023 · db994c0 · db994c0
1 parent 53a6c94
commit db994c0
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 5 deletions.
diff --git a/api/resolvers/wallet.js b/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: {

diff --git a/api/typeDefs/wallet.js b/api/typeDefs/wallet.js
@@ -23,6 +23,7 @@ export default gql`
     cancelled: Boolean!
     confirmedAt: Date
     satsReceived: Int
+    satsRequested: Int
     nostr: JSONObject
     hmac: String
   }

diff --git a/components/invoice.js b/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} statusVariant={variant} status={status} satsAmount={invoice.satsRequested} />
       <div className='w-100'>
         {nostr
           ? <AccordianItem
@@ -155,6 +155,7 @@ export const useInvoiceable = (fn, options = defaultOptions) => {
         id
         hash
         hmac
+        satsRequested
       }
     }`)
   const showModal = useShowModal()
@@ -164,7 +165,7 @@ export const useInvoiceable = (fn, options = defaultOptions) => {
   let errorCount = 0
   const onConfirmation = useCallback(
     (onClose, hmac) => {
-      return async ({ id, satsReceived, hash }) => {
+      return async ({ id, satsRequested, satsReceived, hash }) => {
         await sleep(2000)
         const repeat = () =>
           fn(satsReceived, ...fnArgs, hash, hmac)
@@ -178,6 +179,7 @@ export const useInvoiceable = (fn, options = defaultOptions) => {
                   id={id}
                   hash={hash}
                   hmac={hmac}
+                  satsRequested={satsRequested}
                   onConfirmation={onConfirmation(onClose, hmac)}
                   successVerb='received'
                   errorCount={errorCount}

diff --git a/components/qr.js b/components/qr.js
@@ -3,8 +3,9 @@ import { CopyInput, InputSkeleton } from './form'
 import InvoiceStatus from './invoice-status'
 import { requestProvider } from 'webln'
 import { useEffect } from 'react'
+import { numWithUnits } from '../lib/format'
 
-export default function Qr ({ asIs, value, webLn, statusVariant, status }) {
+export default function Qr ({ asIs, value, webLn, statusVariant, satsAmount, status }) {
   const qrValue = asIs ? value : 'lightning:' + value.toUpperCase()
 
   useEffect(() => {
@@ -28,7 +29,12 @@ export default function Qr ({ asIs, value, webLn, statusVariant, status }) {
           className='h-auto mw-100' value={qrValue} renderAs='svg' size={300}
         />
       </a>
-      <div className='mt-3 w-100'>
+      {satsAmount && (
+        <div className='mt-1 w-100 text-center'>
+          {numWithUnits(satsAmount, { abbreviate: false })}
+        </div>
+      )}
+      <div className={`mt-${satsAmount ? '1' : '3'} w-100`}>
         <CopyInput type='text' placeholder={value} readOnly noForm />
       </div>
       <InvoiceStatus variant={statusVariant} status={status} />

diff --git a/fragments/wallet.js b/fragments/wallet.js
@@ -8,6 +8,7 @@ export const INVOICE = gql`
       hash
       bolt11
       satsReceived
+      satsRequested
       cancelled
       confirmedAt
       expiresAt