Refresh top zaps after zapping

src/components/CustomZap/CustomZap.tsx

@@ -127,7 +127,9 @@ const CustomZap: Component<{
 
   const handleZap = (success = false) => {
     if (success) {
-      props.onSuccess(selectedValue());
+      setTimeout(() => {
+        props.onSuccess(selectedValue());
+      }, 2_000)
       return;
     }
 

src/components/Note/Note.tsx

@@ -103,6 +103,7 @@ const Note: Component<{
       updateReactionsState('hideZapIcon', () => false);
       updateReactionsState('zapped', () => true);
     });
+    threadContext?.actions.fetchTopZaps(props.note.post.id);
   };
 
   const onFailZap = (zapOption: ZapOption) => {
@@ -168,7 +169,7 @@ const Note: Component<{
     return (likes || 0) + (zapCount || 0) + (reposts || 0);
   };
 
-  const topZaps = createMemo( () => threadContext?.topZaps[props.note.post.id] || []);
+  const topZaps = () => threadContext?.topZaps[props.note.post.id] || [];
 
   const firstZap = createMemo(() => topZaps()[0]);
 

src/components/Note/NoteFooter/NoteFooter.tsx

@@ -1,6 +1,6 @@
 import { batch, Component, createEffect, Show } from 'solid-js';
 import { MenuItem, PrimalNote } from '../../../types/primal';
-import { sendRepost } from '../../../lib/notes';
+import { sendRepost, triggerImportEvents } from '../../../lib/notes';
 
 import styles from './NoteFooter.module.scss';
 import { useAccountContext } from '../../../contexts/AccountContext';
@@ -22,6 +22,7 @@ import NoteFooterActionButton from './NoteFooterActionButton';
 import { NoteFooterState } from '../Note';
 import { SetStoreFunction } from 'solid-js/store';
 import BookmarkNote from '../../BookmarkNote/BookmarkNote';
+import { APP_ID } from '../../../App';
 
 export const lottieDuration = () => zapMD.op * 1_000 / zapMD.fr;
 
@@ -278,19 +279,17 @@ const NoteFooter: Component<{
       props.updateState('isZapping', () => false);
 
       if (success) {
-        props.customZapInfo.onSuccess({
+        setTimeout(() => {
-          emoji,
+          props.customZapInfo.onSuccess({
-          amount,
+            emoji,
-          message,
+            amount,
-        });
+            message,
+          });
+        }, 2_000);
+
         return;
       }
 
-      batch(() => {
-        props.updateState('zappedAmount', () => -amount);
-        props.updateState('zapped', () => props.note.post.noteActions.zapped);
-      });
-
       props.customZapInfo.onFail({
         emoji,
         amount,

src/contexts/ThreadContext.tsx

@@ -68,6 +68,7 @@ export type ThreadContextStore = {
     updatePage: (content: NostrEventContent) => void,
     savePage: (page: FeedPage) => void,
     setPrimaryNote: (context: PrimalNote | undefined) => void,
+    fetchTopZaps: (noteId: string) => void,
   }
 }
 
@@ -112,7 +113,7 @@ export const ThreadProvider = (props: { children: ContextChildren }) => {
     clearNotes();
     updateStore('noteId', noteId)
     getThread(account?.publicKey, noteId, `thread_${APP_ID}`);
-    getEventZaps(noteId, account?.publicKey, `thread_zapps_${APP_ID}`, 10, 0);
+    fetchTopZaps(noteId);
     updateStore('isFetching', () => true);
   }
 
@@ -256,16 +257,20 @@ export const ThreadProvider = (props: { children: ContextChildren }) => {
         eventId,
       };
 
-      if (store.topZaps[eventId] === undefined) {
+      const oldZaps = store.topZaps[eventId];
+
+      if (oldZaps === undefined) {
         updateStore('topZaps', () => ({ [eventId]: [{ ...zap }]}));
         return;
       }
 
-      if (store.topZaps[eventId].find(i => i.id === zap.id)) {
+      if (oldZaps.find(i => i.id === zap.id)) {
         return;
       }
 
-      updateStore('topZaps', eventId, (zs) => [ ...zs, { ...zap }]);
+      const newZaps = [ ...oldZaps, { ...zap }].sort((a, b) => b.amount - a.amount);
+
+      updateStore('topZaps', eventId, () => [ ...newZaps ]);
 
       return;
     }
@@ -283,6 +288,10 @@ export const ThreadProvider = (props: { children: ContextChildren }) => {
     updateStore('primaryNote', () => ({ ...context }));
   };
 
+  const fetchTopZaps = (noteId: string) => {
+    getEventZaps(noteId, account?.publicKey, `thread_zapps_${APP_ID}`, 10, 0);
+  };
+
 // SOCKET HANDLERS ------------------------------
 
   const onMessage = (event: MessageEvent) => {
@@ -410,6 +419,7 @@ export const ThreadProvider = (props: { children: ContextChildren }) => {
       updatePage,
       savePage,
       setPrimaryNote,
+      fetchTopZaps,
     },
   });