Add progress bar to toasts

stackernews · Feb 21, 2024 · b123dc5 · b123dc5
1 parent 839f6b8
commit b123dc5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/components/item-act.js b/components/item-act.js
@@ -7,7 +7,7 @@ import UpBolt from '../svgs/bolt.svg'
 import { amountSchema } from '../lib/validate'
 import { gql, useApolloClient, useMutation } from '@apollo/client'
 import { payOrLoginError, useInvoiceModal } from './invoice'
-import { useToast, withToastFlow } from './toast'
+import { TOAST_DEFAULT_DELAY_MS, useToast, withToastFlow } from './toast'
 import { useLightning } from './lightning'
 
 const defaultTips = [100, 1000, 10000, 100000]
@@ -79,7 +79,6 @@ export default function ItemAct ({ onClose, itemId, down, children }) {
 
   const onSubmitWithUndos = withToastFlow(toaster)(
     (values, args) => {
-      const delay = 5000
       const { flowId } = args
       let canceled
       const sats = values.amount
@@ -125,7 +124,7 @@ export default function ItemAct ({ onClose, itemId, down, children }) {
                   undoUpdate()
                   reject(err)
                 })
-            }, delay)
+            }, TOAST_DEFAULT_DELAY_MS)
           })
         },
         onUndo: () => {
@@ -311,7 +310,6 @@ export function useZap () {
   const zapWithUndos = withToastFlow(toaster)(
     ({ variables, optimisticResponse, update, flowId }) => {
       const { id: itemId, amount } = variables
-      const delay = 5000
       let canceled
       // update function for optimistic UX
       const _update = () => {
@@ -345,7 +343,7 @@ export function useZap () {
                   reject(err)
                 })
               },
-              delay
+              TOAST_DEFAULT_DELAY_MS
             )
           }),
         onUndo: () => {

diff --git a/components/toast.js b/components/toast.js
@@ -8,6 +8,8 @@ import styles from './toast.module.css'
 
 const ToastContext = createContext(() => {})
 
+export const TOAST_DEFAULT_DELAY_MS = 5000
+
 export const ToastProvider = ({ children }) => {
   const router = useRouter()
   const [toasts, setToasts] = useState([])
@@ -62,7 +64,7 @@ export const ToastProvider = ({ children }) => {
         body,
         variant: 'success',
         autohide: true,
-        delay: 5000,
+        delay: TOAST_DEFAULT_DELAY_MS,
         tag: options?.tag || body,
         ...options
       }
@@ -73,7 +75,7 @@ export const ToastProvider = ({ children }) => {
         body,
         variant: 'warning',
         autohide: true,
-        delay: 5000,
+        delay: TOAST_DEFAULT_DELAY_MS,
         tag: options?.tag || body,
         ...options
       }
@@ -134,6 +136,7 @@ export const ToastProvider = ({ children }) => {
     <ToastContext.Provider value={toaster}>
       <ToastContainer className={`pb-3 pe-3 ${styles.toastContainer}`} position='bottom-end' containerPosition='fixed'>
         {visibleToasts.map(toast => {
+          console.log('variant', toast.variant)
           const textStyle = toast.variant === 'warning' ? 'text-dark' : ''
           const onClose = () => {
             toast.onUndo?.()
@@ -163,6 +166,7 @@ export const ToastProvider = ({ children }) => {
                   </Button>
                 </div>
               </ToastBody>
+              {toast.delay > 0 && <div className={`${styles.progressBar} ${styles[toast.variant]}`} />}
             </Toast>
           )
         })}

diff --git a/components/toast.module.css b/components/toast.module.css
@@ -1,5 +1,5 @@
 .toastContainer {
-  transform: translate3d(0,0,0);
+  transform: translate3d(0, 0, 0);
 }
 
 .toast {
@@ -46,6 +46,38 @@
   align-items: center;
 }
 
+.progressBar {
+  width: 0;
+  height: 5px;
+  filter: brightness(66%);
+  /* same duration as toast delay */
+  animation: progressBar 5s linear;
+}
+
+.progressBar.success {
+  background-color: var(--bs-success);
+}
+
+.progressBar.danger {
+  background-color: var(--bs-danger);
+}
+
+.progressBar.warning {
+  background-color: var(--bs-warning);
+}
+
+
+
+@keyframes progressBar {
+  0% {
+    width: 0;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
 .toastClose:hover {
   opacity: 0.7;
 }
@@ -54,4 +86,4 @@
   .toast {
     width: var(--bs-toast-max-width);
   }
-}
+}