From 17071fa615276beb22bb6b77b921ba84fcab6b8d Mon Sep 17 00:00:00 2001 From: ekzyis Date: Sun, 24 Mar 2024 19:13:00 +0100 Subject: [PATCH 1/3] Add missing tag to custom zap toasts --- components/item-act.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/item-act.js b/components/item-act.js index e72928b3..5b05860e 100644 --- a/components/item-act.js +++ b/components/item-act.js @@ -115,6 +115,7 @@ export default function ItemAct ({ onClose, itemId, down, children }) { return { skipToastFlow, flowId, + tag: itemId, type: 'zap', pendingMessage: `${down ? 'down' : ''}zapped ${sats} sats`, onPending: async () => { From 0193ac97fec6de58045e926c7f2e6ea2cf7d8427 Mon Sep 17 00:00:00 2001 From: ekzyis Date: Sun, 24 Mar 2024 19:30:03 +0100 Subject: [PATCH 2/3] Fix toast progress bar jump due to end flow hack If an underlying toast finished, an empty toast that automatically immediately hides was dispatched to end the flow ("end flow hack"). If this empty toast had the same tag, the code marked the top toast as hidden even though it was not hidden. This meant that during render, the animation-delay for the top toast (which was already rendered) was added again, leading to a progress bar jump. This is fixed by no longer using this "end flow hack" where a toast is dispatched but a dedicated function to end flows. --- components/toast.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/components/toast.js b/components/toast.js index 7a48f3ee..bb3d1cfe 100644 --- a/components/toast.js +++ b/components/toast.js @@ -67,6 +67,10 @@ export const ToastProvider = ({ children }) => { })) }, []) + const endFlow = useCallback((flowId) => { + setToasts(toasts => toasts.filter(toast => toast.flowId !== flowId)) + }, []) + const toaster = useMemo(() => ({ success: (body, options) => { const toast = { @@ -99,8 +103,9 @@ export const ToastProvider = ({ children }) => { ...options } return dispatchToast(toast) - } - }), [dispatchToast, removeToast]) + }, + endFlow + }), [dispatchToast, removeToast, endFlow]) // Only clear toasts with no cancel function on page navigation // since navigation should not interfere with being able to cancel an action. @@ -213,9 +218,6 @@ export const withToastFlow = (toaster) => flowFn => { if (skipToastFlow) return onPending() - // XXX HACK this ends the flow by using flow toast which immediately closes itself - const endFlow = () => toaster.warning('', { ...toastProps, delay: 0, autohide: true, flowId }) - toaster.warning(pendingMessage || `${t} pending`, { progressBar: !!timeout, delay: timeout || TOAST_DEFAULT_DELAY_MS, @@ -247,7 +249,7 @@ export const withToastFlow = (toaster) => flowFn => { const ret = await onPending() if (!canceled) { if (hideSuccess) { - endFlow() + toaster.endFlow(flowId) } else { toaster.success(`${t} successful`, { ...toastProps, flowId }) } @@ -259,7 +261,7 @@ export const withToastFlow = (toaster) => flowFn => { if (canceled) return const reason = err?.message?.toString().toLowerCase() || 'unknown reason' if (hideError) { - endFlow() + toaster.endFlow(flowId) } else { toaster.danger(`${t} failed: ${reason}`, { ...toastProps, flowId }) } From 42d7a315842f9ee9030c6aceb3163041dc065e1c Mon Sep 17 00:00:00 2001 From: ekzyis Date: Sun, 24 Mar 2024 20:06:05 +0100 Subject: [PATCH 3/3] Fix custom zap modal closed after zap undo --- components/item-act.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/item-act.js b/components/item-act.js index 5b05860e..61c5e044 100644 --- a/components/item-act.js +++ b/components/item-act.js @@ -55,7 +55,7 @@ export default function ItemAct ({ onClose, itemId, down, children }) { const [act, actUpdate] = useAct() - const onSubmit = useCallback(async ({ amount, hash, hmac }, { update }) => { + const onSubmit = useCallback(async ({ amount, hash, hmac }, { update, keepOpen }) => { if (!me) { const storageKey = `TIP-item:${itemId}` const existingAmount = Number(window.localStorage.getItem(storageKey) || '0') @@ -75,7 +75,7 @@ export default function ItemAct ({ onClose, itemId, down, children }) { // due to optimistic UX on zap undos if (!me || !me.privates.zapUndos) await strike() addCustomTip(Number(amount)) - onClose() + if (!keepOpen) onClose() }, [me, act, down, itemId, strike]) const onSubmitWithUndos = withToastFlow(toaster)( @@ -128,7 +128,7 @@ export default function ItemAct ({ onClose, itemId, down, children }) { undoUpdate = update() setTimeout(() => { if (canceled) return resolve() - onSubmit(values, { flowId, ...args, update: null }) + onSubmit(values, { flowId, ...args, update: null, keepOpen: true }) .then(resolve) .catch((err) => { undoUpdate()