Use progress bar for pending payments (#873)

The progress bar indicates when the invoice will expire.

This works by passing in a timeout to the withToastFlow wrapper.

If timeout is set, progressBar option will be true for the toast and delay will be set to the timeout.

If progressBar is set, the progress bar will use the delay for its duration.

components/invoice.js

@@ -257,7 +257,7 @@ export const useInvoiceable = (onSubmit, options = defaultOptions) => {
     })
 
     const retry = () => onSubmit(
-      { hash: inv.hash, hmac: inv.hmac, ...formValues },
+      { hash: inv.hash, hmac: inv.hmac, expiresAt: inv.expiresAt, ...formValues },
       // unset update function since we already ran an cache update if we paid using WebLN
       // also unset update function if null was explicitly passed in
       { ...submitArgs, variables, update: webLn ? null : undefined })

components/item-act.js

@@ -361,7 +361,8 @@ export function useZap () {
           undoUpdate?.()
         },
         hideSuccess: true,
-        hideError: true
+        hideError: true,
+        timeout: TOAST_DEFAULT_DELAY_MS
       }
     }
   )

components/toast.js

@@ -163,6 +163,7 @@ export const ToastProvider = ({ children }) => {
           // if we don't do this, the animation for rerendered toasts skips ahead and toast delay and animation get out of sync.
           const elapsed = (+new Date() - toast.createdAt)
           const animationDelay = unhidden ? `-${elapsed}ms` : undefined
+          const animationDuration = `${toast.delay}ms`
           return (
             <Toast
               key={toast.id} bg={toast.variant} show autohide={toast.autohide}
@@ -180,7 +181,7 @@ export const ToastProvider = ({ children }) => {
                   </Button>
                 </div>
               </ToastBody>
-              {toast.onUndo && toast.delay > 0 && <div className={`${styles.progressBar} ${styles[toast.variant]}`} style={{ animationDelay }} />}
+              {toast.progressBar && <div className={`${styles.progressBar} ${styles[toast.variant]}`} style={{ animationDuration, animationDelay }} />}
             </Toast>
           )
         })}
@@ -206,6 +207,7 @@ export const withToastFlow = (toaster) => flowFn => {
       hideError,
       hideSuccess,
       skipToastFlow,
+      timeout,
       ...toastProps
     } = flowFn(...args)
     let canceled
@@ -216,7 +218,8 @@ export const withToastFlow = (toaster) => flowFn => {
     const endFlow = () => toaster.warning('', { ...toastProps, delay: 0, autohide: true, flowId })
 
     toaster.warning(pendingMessage || `${t} pending`, {
-      autohide: false,
+      progressBar: !!timeout,
+      delay: timeout || TOAST_DEFAULT_DELAY_MS,
       onCancel: onCancel
         ? async () => {
           try {

components/toast.module.css

@@ -50,8 +50,10 @@
   width: 0;
   height: 5px;
   filter: brightness(66%);
-  /* same duration as toast delay */
-  animation: progressBar 5s linear;
+  animation-name: progressBar;
+  animation-iteration-count: 1;
+  animation-timing-function: linear;
+  /* animation-duration set via JS */
 }
 
 .progressBar.success {

components/webln/index.js

@@ -82,13 +82,15 @@ function RawWebLNProvider ({ children }) {
   `)
 
   const sendPaymentWithToast = withToastFlow(toaster)(
-    ({ bolt11, hash, hmac, flowId }) => {
+    ({ bolt11, hash, hmac, expiresAt, flowId }) => {
+      const expiresIn = (+new Date(expiresAt)) - (+new Date())
       return {
         flowId: flowId || hash,
         type: 'payment',
         onPending: () => provider.sendPayment(bolt11),
         // hash and hmac are only passed for JIT invoices
-        onCancel: () => hash && hmac ? cancelInvoice({ variables: { hash, hmac } }) : undefined
+        onCancel: () => hash && hmac ? cancelInvoice({ variables: { hash, hmac } }) : undefined,
+        timeout: expiresIn
       }
     }
   )