Merge pull request #1557 from stackernews/fix-invoice-waiting

fix invoice waiting

components/form.js

@@ -1126,7 +1126,7 @@ function QrPassword ({ value }) {
   )
 }
 
-function PasswordScanner ({ onScan }) {
+function PasswordScanner ({ onScan, text }) {
   const showModal = useShowModal()
   const toaster = useToast()
 
@@ -1136,26 +1136,29 @@ function PasswordScanner ({ onScan }) {
       onClick={() => {
         showModal(onClose => {
           return (
-            <Scanner
-              formats={['qr_code']}
-              onScan={([{ rawValue: result }]) => {
-                onScan(result)
-                onClose()
-              }}
-              styles={{
-                video: {
-                  aspectRatio: '1 / 1'
-                }
-              }}
-              onError={(error) => {
-                if (error instanceof DOMException) {
-                  console.log(error)
-                } else {
-                  toaster.danger('qr scan: ' + error?.message || error?.toString?.())
-                }
-                onClose()
-              }}
-            />
+            <div>
+              {text && <h5 className='line-height-md mb-4 text-center'>{text}</h5>}
+              <Scanner
+                formats={['qr_code']}
+                onScan={([{ rawValue: result }]) => {
+                  onScan(result)
+                  onClose()
+                }}
+                styles={{
+                  video: {
+                    aspectRatio: '1 / 1'
+                  }
+                }}
+                onError={(error) => {
+                  if (error instanceof DOMException) {
+                    console.log(error)
+                  } else {
+                    toaster.danger('qr scan: ' + error?.message || error?.toString?.())
+                  }
+                  onClose()
+                }}
+              />
+            </div>
           )
         })
       }}
@@ -1167,9 +1170,10 @@ function PasswordScanner ({ onScan }) {
   )
 }
 
-export function PasswordInput ({ newPass, qr, copy, readOnly, append, value, ...props }) {
+export function PasswordInput ({ newPass, qr, copy, readOnly, append, value: initialValue, ...props }) {
   const [showPass, setShowPass] = useState(false)
-  const [field, helpers] = props.noForm ? [{ value }, {}, {}] : useField(props)
+  const [value, setValue] = useState(initialValue)
+  const [field,, helpers] = props.noForm ? [{ value }, {}, { setValue }] : useField(props)
 
   const Append = useMemo(() => {
     return (
@@ -1181,12 +1185,13 @@ export function PasswordInput ({ newPass, qr, copy, readOnly, append, value, ...
         {qr && (readOnly
           ? <QrPassword value={field?.value} />
           : <PasswordScanner
+              text="Where'd you learn to square dance?"
               onScan={v => helpers.setValue(v)}
             />)}
         {append}
       </>
     )
-  }, [showPass, copy, field?.value, qr, readOnly, append])
+  }, [showPass, copy, field?.value, helpers.setValue, qr, readOnly, append])
 
   const style = props.style ? { ...props.style } : {}
   if (props.as === 'textarea') {

components/invoice.js

@@ -55,11 +55,15 @@ export default function Invoice ({
   let variant = 'default'
   let status = 'waiting for you'
 
-  if (invoice.cancelled) {
+  if (invoice.confirmedAt) {
+    variant = 'confirmed'
+    status = `${numWithUnits(invoice.satsReceived, { abbreviate: false })} ${successVerb}`
+    useWallet = false
+  } else if (invoice.cancelled) {
     variant = 'failed'
     status = 'cancelled'
     useWallet = false
-  } else if (invoice.isHeld && invoice.satsReceived && !expired) {
+  } else if (invoice.isHeld) {
     variant = 'pending'
     status = (
       <div className='d-flex justify-content-center'>
@@ -67,15 +71,11 @@ export default function Invoice ({
       </div>
     )
     useWallet = false
-  } else if (invoice.confirmedAt) {
-    variant = 'confirmed'
-    status = `${numWithUnits(invoice.satsReceived, { abbreviate: false })} ${successVerb}`
-    useWallet = false
   } else if (expired) {
     variant = 'failed'
     status = 'expired'
     useWallet = false
-  } else if (invoice.expiresAt) {
+  } else {
     variant = 'pending'
     status = (
       <CompactLongCountdown

components/payment.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { useMe } from './me'
 import { gql, useApolloClient, useMutation } from '@apollo/client'
 import { useWallet } from '@/wallets/index'
@@ -60,43 +60,6 @@ export const useInvoice = () => {
     return that(data.invoice)
   }, [client])
 
-  const waitController = useMemo(() => {
-    const controller = new AbortController()
-    const signal = controller.signal
-    controller.wait = async ({ id }, waitFor = inv => inv?.actionState === 'PAID') => {
-      return await new Promise((resolve, reject) => {
-        const interval = setInterval(async () => {
-          try {
-            const paid = await isInvoice({ id }, waitFor)
-            if (paid) {
-              resolve()
-              clearInterval(interval)
-              signal.removeEventListener('abort', abort)
-            } else {
-              console.info(`invoice #${id}: waiting for payment ...`)
-            }
-          } catch (err) {
-            reject(err)
-            clearInterval(interval)
-            signal.removeEventListener('abort', abort)
-          }
-        }, FAST_POLL_INTERVAL)
-
-        const abort = () => {
-          console.info(`invoice #${id}: stopped waiting`)
-          resolve()
-          clearInterval(interval)
-          signal.removeEventListener('abort', abort)
-        }
-        signal.addEventListener('abort', abort)
-      })
-    }
-
-    controller.stop = () => controller.abort()
-
-    return controller
-  }, [isInvoice])
-
   const cancel = useCallback(async ({ hash, hmac }) => {
     if (!hash || !hmac) {
       throw new Error('missing hash or hmac')
@@ -107,7 +70,44 @@ export const useInvoice = () => {
     return inv
   }, [cancelInvoice])
 
-  return { create, waitUntilPaid: waitController.wait, stopWaiting: waitController.stop, cancel }
+  return { create, cancel, isInvoice }
+}
+
+const invoiceController = (id, isInvoice) => {
+  const controller = new AbortController()
+  const signal = controller.signal
+  controller.wait = async (waitFor = inv => inv?.actionState === 'PAID') => {
+    return await new Promise((resolve, reject) => {
+      const interval = setInterval(async () => {
+        try {
+          const paid = await isInvoice({ id }, waitFor)
+          if (paid) {
+            resolve()
+            clearInterval(interval)
+            signal.removeEventListener('abort', abort)
+          } else {
+            console.info(`invoice #${id}: waiting for payment ...`)
+          }
+        } catch (err) {
+          reject(err)
+          clearInterval(interval)
+          signal.removeEventListener('abort', abort)
+        }
+      }, FAST_POLL_INTERVAL)
+
+      const abort = () => {
+        console.info(`invoice #${id}: stopped waiting`)
+        resolve()
+        clearInterval(interval)
+        signal.removeEventListener('abort', abort)
+      }
+      signal.addEventListener('abort', abort)
+    })
+  }
+
+  controller.stop = () => controller.abort()
+
+  return controller
 }
 
 export const useWalletPayment = () => {
@@ -118,12 +118,13 @@ export const useWalletPayment = () => {
     if (!wallet) {
       throw new NoAttachedWalletError()
     }
+    const controller = invoiceController(id, invoice.isInvoice)
     try {
       return await new Promise((resolve, reject) => {
         // can't use await here since we might pay JIT invoices and sendPaymentAsync is not supported yet.
         // see https://www.webln.guide/building-lightning-apps/webln-reference/webln.sendpaymentasync
         wallet.sendPayment(bolt11).catch(reject)
-        invoice.waitUntilPaid({ id }, waitFor)
+        controller.wait(waitFor)
           .then(resolve)
           .catch(reject)
       })
@@ -131,7 +132,7 @@ export const useWalletPayment = () => {
       console.error('payment failed:', err)
       throw err
     } finally {
-      invoice.stopWaiting()
+      controller.stop()
     }
   }, [wallet, invoice])
 

lib/validate.js

@@ -522,7 +522,7 @@ export const deviceSyncSchema = object().shape({
         try {
           await string().oneOf(bip39Words).validate(w)
         } catch {
-          return context.createError({ message: `'${w}' is not a valid pairing phrase word` })
+          return context.createError({ message: `'${w.slice(0, 10)}${w.length > 10 ? '...' : ''}' is not a valid pairing phrase word` })
         }
       }
 

wallets/index.js

@@ -41,7 +41,17 @@ function useLocalWallets () {
   }, [wallets, setWallets, me?.id])
 
   useEffect(() => {
+    // listen for changes to any wallet config in local storage
+    // from any window with the same origin
+    const handleStorage = (event) => {
+      if (event.key.startsWith(getStorageKey(''))) {
+        loadWallets()
+      }
+    }
+    window.addEventListener('storage', handleStorage)
+
     loadWallets()
+    return () => window.removeEventListener('storage', handleStorage)
   }, [loadWallets])
 
   return { wallets, reloadLocalWallets: loadWallets, removeLocalWallets: removeWallets }