From ec0bd99d8441a6be01070f761f09233ed681b467 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Mon, 22 Apr 2024 15:41:19 +0200
Subject: [PATCH] Delay zapping after the animation has completed

---
 src/components/CustomZap/CustomZap.tsx        | 52 ++++++++++++-------
 src/components/Note/NoteFooter/NoteFooter.tsx | 38 ++++++++------
 src/pages/Profile.tsx                         |  3 ++
 3 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/src/components/CustomZap/CustomZap.tsx b/src/components/CustomZap/CustomZap.tsx
index cf9e901..93a06f9 100644
--- a/src/components/CustomZap/CustomZap.tsx
+++ b/src/components/CustomZap/CustomZap.tsx
@@ -11,6 +11,7 @@ import { PrimalNote, PrimalUser, ZapOption } from '../../types/primal';
 import { debounce } from '../../utils';
 import ButtonPrimary from '../Buttons/ButtonPrimary';
 import Modal from '../Modal/Modal';
+import { lottieDuration } from '../Note/NoteFooter/NoteFooter';
 import TextInput from '../TextInput/TextInput';
 import { useToastContext } from '../Toaster/Toaster';
 
@@ -92,40 +93,51 @@ const CustomZap: Component<{
     if (account?.hasPublicKey()) {
       props.onConfirm(selectedValue());
 
-      let success = false;
+      const note = props.note;
 
-      if (props.note) {
-        success = await zapNote(
-          props.note,
-          account.publicKey,
-          selectedValue().amount || 0,
-          comment(),
-          account.relays,
-        );
+      if (note) {
+        setTimeout(async () => {
+          const success = await zapNote(
+            note,
+            account.publicKey,
+            selectedValue().amount || 0,
+            comment(),
+            account.relays,
+          );
+
+          handleZap(success);
+        }, lottieDuration());
+        return;
       }
-      else if (props.profile) {
-        success = await zapProfile(
+
+      if (props.profile) {
+        const success = await zapProfile(
           props.profile,
           account.publicKey,
           selectedValue().amount || 0,
           comment(),
           account.relays,
         );
-      }
 
-      if (success) {
-        props.onSuccess(selectedValue());
+        handleZap(success);
         return;
       }
-
-      toast?.sendWarning(
-        intl.formatMessage(toastZapFail),
-      );
-
-      props.onFail(selectedValue())
     }
   };
 
+  const handleZap = (success = false) => {
+    if (success) {
+      props.onSuccess(selectedValue());
+      return;
+    }
+
+    toast?.sendWarning(
+      intl.formatMessage(toastZapFail),
+    );
+
+    props.onFail(selectedValue());
+  };
+
   return (
     <Modal open={props.open} onClose={() => props.onCancel({ amount: 0, message: '' })}>
       <div id={props.id} class={styles.customZap}>
diff --git a/src/components/Note/NoteFooter/NoteFooter.tsx b/src/components/Note/NoteFooter/NoteFooter.tsx
index 5ecb2ea..9ec9d0a 100644
--- a/src/components/Note/NoteFooter/NoteFooter.tsx
+++ b/src/components/Note/NoteFooter/NoteFooter.tsx
@@ -23,6 +23,8 @@ import { NoteFooterState } from '../Note';
 import { SetStoreFunction } from 'solid-js/store';
 import BookmarkNote from '../../BookmarkNote/BookmarkNote';
 
+export const lottieDuration = () => zapMD.op * 1_000 / zapMD.fr;
+
 const NoteFooter: Component<{
   note: PrimalNote,
   wide?: boolean,
@@ -269,29 +271,33 @@ const NoteFooter: Component<{
       props.updateState('satsZapped', (z) => z + amount);
     });
 
-    const success = await zapNote(props.note, account.publicKey, amount, message, account.relays);
 
-    props.updateState('isZapping', () => false);
+    setTimeout(async () => {
+      const success = await zapNote(props.note, account.publicKey, amount, message, account.relays);
 
-    if (success) {
-      props.customZapInfo.onSuccess({
+      props.updateState('isZapping', () => false);
+
+      if (success) {
+        props.customZapInfo.onSuccess({
+          emoji,
+          amount,
+          message,
+        });
+        return;
+      }
+
+      batch(() => {
+        props.updateState('zappedAmount', () => -amount);
+        props.updateState('zapped', () => props.note.post.noteActions.zapped);
+      });
+
+      props.customZapInfo.onFail({
         emoji,
         amount,
         message,
       });
-      return;
-    }
+    }, lottieDuration());
 
-    batch(() => {
-      props.updateState('zappedAmount', () => -amount);
-      props.updateState('zapped', () => props.note.post.noteActions.zapped);
-    });
-
-    props.customZapInfo.onFail({
-      emoji,
-      amount,
-      message,
-    });
   }
 
   const buttonTypeClasses: Record<string, string> = {
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 1e803e3..38bb719 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -488,15 +488,18 @@ const Profile: Component = () => {
     },
     onSuccess: (zapOption: ZapOption) => {
       app?.actions.closeCustomZapModal();
+      app?.actions.resetCustomZap();
       toaster?.sendSuccess(intl.formatMessage(toastZapProfile, {
         name: authorName(profile?.userProfile)
       }))
     },
     onFail: (zapOption: ZapOption) => {
       app?.actions.closeCustomZapModal();
+      app?.actions.resetCustomZap();
     },
     onCancel: (zapOption: ZapOption) => {
       app?.actions.closeCustomZapModal();
+      app?.actions.resetCustomZap();
     },
   });