From 37a522ecbe319c1e2ab09384aa45c55a051d0d9b Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Mon, 22 Apr 2024 14:52:37 +0200
Subject: [PATCH] Fix zap user feedback

---
 src/components/Note/Note.tsx | 16 ++++++++++------
 src/contexts/AppContext.tsx  |  8 +++++++-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx
index 7a31e87..c77224f 100644
--- a/src/components/Note/Note.tsx
+++ b/src/components/Note/Note.tsx
@@ -82,6 +82,7 @@ const Note: Component<{
     app?.actions.closeCustomZapModal();
     batch(() => {
       updateFooterState('zappedAmount', () => zapOption.amount || 0);
+      updateFooterState('satsZapped', (z) => z + (zapOption.amount || 0));
       // updateFooterState('zappedNow', () => true);
       updateFooterState('zapped', () => true);
       updateFooterState('showZapAnim', () => true)
@@ -90,6 +91,7 @@ const Note: Component<{
 
   const onSuccessZap = (zapOption: ZapOption) => {
     app?.actions.closeCustomZapModal();
+    app?.actions.resetCustomZap();
     batch(() => {
       updateFooterState('zapCount', (z) => z + 1);
       // updateFooterState('satsZapped', (z) => z + (zapOption.amount || 0));
@@ -103,6 +105,7 @@ const Note: Component<{
 
   const onFailZap = (zapOption: ZapOption) => {
     app?.actions.closeCustomZapModal();
+    app?.actions.resetCustomZap();
     batch(() => {
       updateFooterState('zappedAmount', () => -(zapOption.amount || 0));
       updateFooterState('satsZapped', (z) => z - (zapOption.amount || 0));
@@ -116,6 +119,7 @@ const Note: Component<{
 
   const onCancelZap = (zapOption: ZapOption) => {
     app?.actions.closeCustomZapModal();
+    app?.actions.resetCustomZap();
     batch(() => {
       updateFooterState('zappedAmount', () => -(zapOption.amount || 0));
       updateFooterState('satsZapped', (z) => z - (zapOption.amount || 0));
@@ -127,13 +131,13 @@ const Note: Component<{
     });
   };
 
-  const customZapInfo: CustomZapInfo = {
+  const customZapInfo: () => CustomZapInfo = () => ({
     note: props.note,
     onConfirm: onConfirmZap,
     onSuccess: onSuccessZap,
     onFail: onFailZap,
     onCancel: onCancelZap,
-  };
+  });
 
   const openReactionModal = (openOn = 'likes') =>  {
     app?.actions.openReactionModal(props.note.post.id, {
@@ -150,7 +154,7 @@ const Note: Component<{
       props.note,
       noteContextMenu?.getBoundingClientRect(),
       () => {
-        app?.actions.openCustomZapModal(customZapInfo);
+        app?.actions.openCustomZapModal(customZapInfo());
       },
       openReactionModal,
     );
@@ -211,7 +215,7 @@ const Note: Component<{
                   note={props.note}
                   state={footerState}
                   updateState={updateFooterState}
-                  customZapInfo={customZapInfo}
+                  customZapInfo={customZapInfo()}
                 />
               </div>
             </div>
@@ -306,7 +310,7 @@ const Note: Component<{
               note={props.note}
               state={footerState}
               updateState={updateFooterState}
-              customZapInfo={customZapInfo}
+              customZapInfo={customZapInfo()}
               wide={true}
               large={true}
             />
@@ -369,7 +373,7 @@ const Note: Component<{
                 note={props.note}
                 state={footerState}
                 updateState={updateFooterState}
-                customZapInfo={customZapInfo}
+                customZapInfo={customZapInfo()}
               />
             </div>
           </div>
diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
index d7c96b7..e067504 100644
--- a/src/contexts/AppContext.tsx
+++ b/src/contexts/AppContext.tsx
@@ -71,6 +71,7 @@ export type AppContextStore = {
     closeReactionModal: () => void,
     openCustomZapModal: (custonZapInfo: CustomZapInfo) => void,
     closeCustomZapModal: () => void,
+    resetCustomZap: () => void,
     openContextMenu: (note: PrimalNote, position: DOMRect | undefined, openCustomZapModal: () => void, openReactionModal: () => void) => void,
     closeContextMenu: () => void,
     openLnbcModal: (lnbc: string, onPay: () => void) => void,
@@ -141,7 +142,7 @@ export const AppProvider = (props: { children: JSXElement }) => {
   };
 
   const openCustomZapModal = (customZapInfo: CustomZapInfo) => {
-    updateStore('customZap', reconcile({ ...customZapInfo }));
+    updateStore('customZap', () => ({ ...customZapInfo }));
     updateStore('showCustomZapModal', () => true);
   };
 
@@ -149,6 +150,10 @@ export const AppProvider = (props: { children: JSXElement }) => {
     updateStore('showCustomZapModal', () => false);
   };
 
+  const resetCustomZap = () => {
+    updateStore('customZap', () => undefined);
+  };
+
   const openContextMenu = (
     note: PrimalNote,
     position: DOMRect | undefined,
@@ -258,6 +263,7 @@ export const AppProvider = (props: { children: JSXElement }) => {
       closeReactionModal,
       openCustomZapModal,
       closeCustomZapModal,
+      resetCustomZap,
       openContextMenu,
       closeContextMenu,
       openLnbcModal,