fix: Xmtp Engine Rerenders, Race Conditions, Crashes

App.tsx

@@ -29,7 +29,7 @@
 import { ThirdwebProvider } from "thirdweb/react";
 
 import "./utils/splash/splash";
-import XmtpEngine from "./components/XmtpEngine";
+import { xmtpCron, xmtpEngine } from "./components/XmtpEngine";
 import config from "./config";
 import { useAppStore } from "./data/store/appStore";
 import { useSelect } from "./data/store/storeHelpers";
@@ -59,6 +59,9 @@
 
 const coinbaseUrl = new URL(`https://${config.websiteDomain}/coinbase`);
 
+xmtpEngine.start();
+xmtpCron.start();
+
 const App = () => {
   const styles = useStyles();
   const debugRef = useRef();
@@ -99,7 +102,6 @@
 
   return (
     <View style={styles.safe}>
-      <XmtpEngine />
       <Main />
       <DebugButton ref={debugRef} />
     </View>
@@ -110,7 +112,7 @@
 const AppKeyboardProvider =
   Platform.OS === "ios" ? KeyboardProvider : React.Fragment;
 
 export default function AppWithProviders() {
   const colorScheme = useColorScheme();
 
   const paperTheme = useMemo(() => {

App.web.tsx

@@ -9,7 +9,7 @@
 import "./assets/web.css";
 import "./polyfills";
 
-import XmtpEngine from "./components/XmtpEngine";
+import { xmtpCron, xmtpEngine } from "./components/XmtpEngine";
 import config from "./config";
 import Main from "./screens/Main";
 
@@ -29,8 +29,12 @@
   projectId: config.walletConnectConfig.projectId,
 });
 
+xmtpEngine.start();
+xmtpCron.start();
+
 export default function App() {
   const colorScheme = useColorScheme();
+
   return (
     <SafeAreaProvider key={`app-${colorScheme}`}>
       <ActionSheetProvider>
@@ -57,7 +61,6 @@
           >
             <>
               <Main />
-              <XmtpEngine />
             </>
           </PrivyProvider>
         </PaperProvider>

components/ExternalWalletPicker.tsx

@@ -6,7 +6,7 @@ import {
   textPrimaryColor,
 } from "@styles/colors";
 import { PictoSizes } from "@styles/sizes";
-import { waitUntilAppActive } from "@utils/appState";
+import { waitUntilAppActive } from "@utils/appState/waitUntilAppActive";
 import { converseEventEmitter } from "@utils/events";
 import { thirdwebClient } from "@utils/thirdweb";
 import { Image } from "expo-image";

components/XmtpEngine.tsx

@@ -2,19 +2,19 @@ import {
   dropConverseDbConnections,
   reconnectConverseDbConnections,
 } from "@data/db/driver";
+import { appStateIsBlurredState } from "@utils/appState/appStateIsBlurred";
 import logger from "@utils/logger";
 import { stopStreamingAllMessage } from "@utils/xmtpRN/messages";
-import { useCallback, useEffect, useRef } from "react";
-import { AppState, Platform } from "react-native";
+import {
+  AppState,
+  AppStateStatus,
+  NativeEventSubscription,
+  Platform,
+} from "react-native";
 
 import { getExistingDataSource } from "../data/db/datasource";
-import {
-  getAccountsList,
-  getChatStore,
-  useAccountsList,
-} from "../data/store/accountsStore";
+import { getAccountsList, getChatStore } from "../data/store/accountsStore";
 import { useAppStore } from "../data/store/appStore";
-import { useSelect } from "../data/store/storeHelpers";
 import { getTopicsData } from "../utils/api";
 import { loadSavedNotificationMessagesToContext } from "../utils/notifications";
 import {
@@ -25,120 +25,145 @@ import {
 import { sendPendingMessages } from "../utils/xmtpRN/send";
 import { syncXmtpClient } from "../utils/xmtpRN/sync";
 
-export default function XmtpEngine() {
-  const appState = useRef(AppState.currentState);
-  const accounts = useAccountsList();
-  const syncedAccounts = useRef<{ [account: string]: boolean }>({});
-  const syncingAccounts = useRef<{ [account: string]: boolean }>({});
-  const { hydrationDone, isInternetReachable } = useAppStore(
-    useSelect(["hydrationDone", "isInternetReachable"])
-  );
+class XmtpEngine {
+  appStoreSubscription: (() => void) | null = null;
+  appStateSubscription: NativeEventSubscription | null = null;
+  isInternetReachable: boolean = false;
+  hydrationDone: boolean = false;
+  syncedAccounts: { [account: string]: boolean } = {};
+  syncingAccounts: { [account: string]: boolean } = {};
+  appState: AppStateStatus = AppState.currentState;
+  started: boolean = false;
 
-  const syncAccounts = useCallback((accountsToSync: string[]) => {
-    accountsToSync.forEach((a) => {
-      if (!syncingAccounts.current[a]) {
-        getTopicsData(a).then((topicsData) => {
-          getChatStore(a).getState().setTopicsData(topicsData, true);
-        });
-        syncedAccounts.current[a] = true;
-        syncingAccounts.current[a] = true;
-        syncXmtpClient(a)
-          .then(() => {
-            syncingAccounts.current[a] = false;
-          })
-          .catch(() => {
-            syncingAccounts.current[a] = false;
-          });
-      }
-    });
-  }, []);
-
-  // Sync accounts on load and when a new one is added
-  useEffect(() => {
-    // Let's remove accounts that dont exist anymore from ref
-    Object.keys(syncedAccounts.current).forEach((account) => {
-      if (!accounts.includes(account)) {
-        delete syncedAccounts.current[account];
-      }
-    });
-    if (hydrationDone) {
-      const unsyncedAccounts = accounts.filter(
-        (a) => !syncedAccounts.current[a]
-      );
-      syncAccounts(unsyncedAccounts);
+  start() {
+    logger.debug("[XmtpEngine] Starting");
+    if (this.started) {
+      return;
     }
-  }, [accounts, hydrationDone, syncAccounts]);
 
-  const isInternetReachableRef = useRef(isInternetReachable);
+    this.started = true;
+    this.syncedAccounts = {};
+    this.syncingAccounts = {};
+
+    const { isInternetReachable, hydrationDone } = useAppStore.getState();
+    this.isInternetReachable = isInternetReachable;
+    this.hydrationDone = hydrationDone;
+    this.appStoreSubscription = useAppStore.subscribe(
+      (state, previousState) => {
+        this.isInternetReachable = state.isInternetReachable;
+        this.hydrationDone = state.hydrationDone;
+
+        if (previousState.isInternetReachable !== state.isInternetReachable) {
+          this.onInternetReachabilityChange(state.isInternetReachable);
+        }
+        if (previousState.hydrationDone !== state.hydrationDone) {
+          this.onHydrationDone(state.hydrationDone);
+        }
+      }
+    );
 
-  // When app back active, resync all, in case we lost sync
-  // And also save data from notifications
-  useEffect(() => {
-    const subscription = AppState.addEventListener(
+    this.appState = AppState.currentState;
+    this.appStateSubscription = AppState.addEventListener(
       "change",
-      async (nextAppState) => {
+      (nextAppState: AppStateStatus) => {
+        const previousAppState = this.appState;
+        this.appState = nextAppState;
         logger.debug(
-          `[AppState] App is was ${appState.current} - now ${nextAppState}`
+          `[XmtpEngine] App is now ${nextAppState} - was ${previousAppState}`
         );
         if (
           nextAppState === "active" &&
-          appState.current.match(/inactive|background/)
+          appStateIsBlurredState(previousAppState)
         ) {
-          reconnectConverseDbConnections();
-          if (hydrationDone) {
-            loadSavedNotificationMessagesToContext();
-            if (isInternetReachableRef.current) {
-              syncAccounts(accounts);
-            }
-          }
+          this.onAppFocus();
         } else if (
-          nextAppState.match(/inactive|background/) &&
-          appState.current === "active"
+          appStateIsBlurredState(nextAppState) &&
+          previousAppState === "active"
         ) {
-          for (const account of accounts) {
-            await Promise.all([
-              stopStreamingAllMessage(account),
-              stopStreamingConversations(account),
-              stopStreamingGroups(account),
-            ]);
-          }
-          dropConverseDbConnections();
+          this.onAppBlur();
         }
-        appState.current = nextAppState;
       }
     );
+  }
 
-    return () => {
-      subscription.remove();
-    };
-  }, [syncAccounts, accounts, hydrationDone]);
+  onInternetReachabilityChange(isInternetReachable: boolean) {
+    logger.debug(
+      `[XmtpEngine]  Internet reachability changed: ${isInternetReachable}`
+    );
+    this.syncAccounts(getAccountsList());
+  }
 
-  // If lost connection, resync
-  useEffect(() => {
-    if (
-      !isInternetReachableRef.current &&
-      isInternetReachable &&
-      hydrationDone
-    ) {
-      // We're back online!
-      syncAccounts(accounts);
+  onHydrationDone(hydrationDone: boolean) {
+    logger.debug(`[XmtpEngine] Hydration done changed: ${hydrationDone}`);
+    this.syncAccounts(getAccountsList());
+  }
+
+  onAppFocus() {
+    logger.debug("[XmtpEngine] App is now active, reconnecting db connections");
+    reconnectConverseDbConnections();
+    if (this.hydrationDone) {
+      loadSavedNotificationMessagesToContext();
+      if (this.isInternetReachable) {
+        this.syncAccounts(getAccountsList());
+      }
     }
-    isInternetReachableRef.current = isInternetReachable;
-  }, [accounts, hydrationDone, isInternetReachable, syncAccounts]);
+  }
 
-  // Cron
+  async onAppBlur() {
+    logger.debug(
+      "[XmtpEngine] App is now inactive, stopping xmtp streams and db connections"
+    );
+    for (const account of getAccountsList()) {
+      await Promise.all([
+        stopStreamingAllMessage(account),
+        stopStreamingConversations(account),
+        stopStreamingGroups(account),
+      ]);
+    }
+    dropConverseDbConnections();
+  }
 
-  const lastCronTimestamp = useRef(0);
-  const runningCron = useRef(false);
+  async syncAccounts(accountsToSync: string[]) {
+    accountsToSync.forEach((a) => {
+      if (!this.syncingAccounts[a]) {
+        getTopicsData(a).then((topicsData) => {
+          getChatStore(a).getState().setTopicsData(topicsData, true);
+        });
+        this.syncedAccounts[a] = true;
+        this.syncingAccounts[a] = true;
+        syncXmtpClient(a)
+          .then(() => {
+            this.syncingAccounts[a] = false;
+          })
+          .catch(() => {
+            this.syncingAccounts[a] = false;
+          });
+      }
+    });
+  }
+
+  destroy() {
+    logger.debug("[XmtpEngine] Removing subscriptions");
+    this.appStoreSubscription?.();
+    this.appStateSubscription?.remove();
+  }
+}
 
-  const xmtpCron = useCallback(async () => {
+export const xmtpEngine = new XmtpEngine();
+
+class XmtpCron {
+  private lastCronTimestamp: number = 0;
+  private runningCron: boolean = false;
+  private interval: NodeJS.Timeout | null = null;
+
+  private async xmtpCron() {
     if (
       !useAppStore.getState().splashScreenHidden ||
       AppState.currentState.match(/inactive|background/)
     ) {
       return;
     }
-    runningCron.current = true;
+    this.runningCron = true;
     const accounts = getAccountsList();
     for (const account of accounts) {
       if (
@@ -153,22 +178,25 @@ export default function XmtpEngine() {
         }
       }
     }
-    lastCronTimestamp.current = new Date().getTime();
-    runningCron.current = false;
-  }, []);
-
-  useEffect(() => {
-    // Launch cron
-    const interval = setInterval(() => {
-      if (runningCron.current) return;
+    this.lastCronTimestamp = new Date().getTime();
+    this.runningCron = false;
+  }
+
+  start() {
+    logger.debug("[XmtpCron] Starting");
+    this.interval = setInterval(() => {
+      if (this.runningCron) return;
       const now = new Date().getTime();
-      if (now - lastCronTimestamp.current > 1000) {
-        xmtpCron();
+      if (now - this.lastCronTimestamp > 1000) {
+        this.xmtpCron();
       }
     }, 300);
+  }
 
-    return () => clearInterval(interval);
-  }, [xmtpCron]);
-
-  return null;
+  destroy() {
+    logger.debug("[XmtpCron] Destroying");
+    this.interval && clearInterval(this.interval);
+  }
 }
+
+export const xmtpCron = new XmtpCron();

data/db/index.ts

@@ -1,4 +1,4 @@
-import { waitUntilAppActive } from "@utils/appState";
+import { waitUntilAppActive } from "@utils/appState/waitUntilAppActive";
 import logger from "@utils/logger";
 import { AppState, Platform } from "react-native";
 import RNFS from "react-native-fs";

data/store/appStore.ts

@@ -19,13 +19,13 @@ type AppStoreType = {
   ) => void;
 
   splashScreenHidden: boolean;
-  setSplashScreenHidden: (hidden: boolean) => void;
+  setSplashScreenHidden: (hidden: true) => void;
 
   isInternetReachable: boolean;
   setIsInternetReachable: (reachable: boolean) => void;
 
   hydrationDone: boolean;
-  setHydrationDone: (done: boolean) => void;
+  setHydrationDone: (done: true) => void;
 
   lastVersionOpen: string;
   setLastVersionOpen: (version: string) => void;

utils/alert.ts

@@ -1,6 +1,6 @@
 import { Alert, AlertButton } from "react-native";
 
-import { waitUntilAppActive } from "./appState";
+import { waitUntilAppActive } from "./appState/waitUntilAppActive";
 
 export const awaitableAlert = (
   title: string,