Fix invitation syncing in realtime

src/tui/hooks/useInvitations.tsx

@@ -10,7 +10,7 @@ import { useAppContext } from './useAppContext.js';
 
 /**
  * Get all invitations reactively.
- * Re-renders when invitations are added or removed.
+ * Re-renders when invitations are added, removed, or updated.
  */
 export function useInvitations(): Invitation[] {
   const { appService } = useAppContext();
@@ -21,26 +21,22 @@ export function useInvitations(): Invitation[] {
         return () => {};
       }
 
-      // Subscribe to invitation list changes
-      const onAdded = () => callback();
-      const onRemoved = () => callback();
-
-      appService.on('invitation-added', onAdded);
-      appService.on('invitation-removed', onRemoved);
+      appService.on('wallet-state-changed', callback);
 
       return () => {
-        appService.off('invitation-added', onAdded);
-        appService.off('invitation-removed', onRemoved);
+        appService.off('wallet-state-changed', callback);
       };
     },
     [appService]
   );
 
   const getSnapshot = useCallback(() => {
-    return appService?.invitations ?? [];
+    return appService?.invitationsRevision ?? 0;
   }, [appService]);
 
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const revision = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  return useMemo(() => [...(appService?.invitations ?? [])], [appService, revision]);
 }
 
 /**
@@ -56,48 +52,41 @@ export function useInvitation(invitationId: string | null): Invitation | null {
         return () => {};
       }
 
-      // Find the invitation instance
-      const invitation = appService.invitations.find(
-        (inv) => inv.data.invitationIdentifier === invitationId
-      );
-
-      if (!invitation) {
-        return () => {};
-      }
-
-      // Subscribe to this specific invitation's updates
-      const onUpdated = () => callback();
-      const onStatusChanged = () => callback();
-
-      invitation.on('invitation-updated', onUpdated);
-      invitation.on('invitation-status-changed', onStatusChanged);
-
-      // Also subscribe to list changes in case the invitation is removed
-      const onRemoved = () => callback();
-      appService.on('invitation-removed', onRemoved);
+      const onWalletStateChanged = ({
+        invitationIdentifier,
+      }: {
+        invitationIdentifier: string;
+      }) => {
+        if (invitationIdentifier === invitationId) {
+          callback();
+        }
+      };
+      appService.on('wallet-state-changed', onWalletStateChanged);
 
       return () => {
-        invitation.off('invitation-updated', onUpdated);
-        invitation.off('invitation-status-changed', onStatusChanged);
-        appService.off('invitation-removed', onRemoved);
+        appService.off('wallet-state-changed', onWalletStateChanged);
       };
     },
     [appService, invitationId]
   );
 
   const getSnapshot = useCallback(() => {
-    if (!appService || !invitationId) {
-      return null;
-    }
-
-    return (
-      appService.invitations.find(
-        (inv) => inv.data.invitationIdentifier === invitationId
-      ) ?? null
-    );
+    return appService && invitationId
+      ? appService.getInvitationRevision(invitationId)
+      : 0;
   }, [appService, invitationId]);
 
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  if (!appService || !invitationId) {
+    return null;
+  }
+
+  return (
+    appService.invitations.find(
+      (inv) => inv.data.invitationIdentifier === invitationId
+    ) ?? null
+  );
 }
 
 /**
@@ -109,7 +98,7 @@ export function useInvitationData(invitationId: string | null): XOInvitation | n
 
   return useMemo(() => {
     return invitation?.data ?? null;
-  }, [invitation?.data.invitationIdentifier, invitation?.data.commits?.length]);
+  }, [invitation?.data]);
 }
 
 /**

src/tui/screens/index.tsx

@@ -7,4 +7,3 @@ export { SeedInputScreen } from './SeedInput.js';
 export { WalletStateScreen } from './WalletState.js';
 export { TemplateListScreen } from './TemplateList.js';
 export { InvitationScreen } from './invitations/InvitationScreen.js';
-export { TransactionScreen } from './Transaction.js';