From a067a9fcf113954ca9a73ddc71db4220e9e801d6 Mon Sep 17 00:00:00 2001
From: ekzyis <ek@stacker.news>
Date: Sat, 24 Feb 2024 21:33:08 +0100
Subject: [PATCH] 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       | 2 +-
 components/item-act.js      | 3 ++-
 components/toast.js         | 7 +++++--
 components/toast.module.css | 6 ++++--
 components/webln/index.js   | 6 ++++--
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/components/invoice.js b/components/invoice.js
index 4cfbef35..9da9657c 100644
--- a/components/invoice.js
+++ b/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 })
diff --git a/components/item-act.js b/components/item-act.js
index d8bdd909..ef30f068 100644
--- a/components/item-act.js
+++ b/components/item-act.js
@@ -361,7 +361,8 @@ export function useZap () {
           undoUpdate?.()
         },
         hideSuccess: true,
-        hideError: true
+        hideError: true,
+        timeout: TOAST_DEFAULT_DELAY_MS
       }
     }
   )
diff --git a/components/toast.js b/components/toast.js
index 234e6a75..d43be0f8 100644
--- a/components/toast.js
+++ b/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 {
diff --git a/components/toast.module.css b/components/toast.module.css
index d1ad302f..6811bc8b 100644
--- a/components/toast.module.css
+++ b/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 {
diff --git a/components/webln/index.js b/components/webln/index.js
index 91af2ddf..2e16aff8 100644
--- a/components/webln/index.js
+++ b/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
       }
     }
   )