feat: Conversation list polished

components/AccountSettingsButton.tsx

@@ -17,21 +17,17 @@ import {
   useColorScheme,
 } from "react-native";
 
-import {
-  useAccountsStore,
-  useErroredAccountsMap,
-} from "../data/store/accountsStore";
+import { invalidateProfileSocialsQuery } from "@/queries/useProfileSocialsQuery";
+import { useAccountsStore } from "../data/store/accountsStore";
 import { useAppStore } from "../data/store/appStore";
 import { useSelect } from "../data/store/storeHelpers";
+import { NotificationPermissionStatus } from "../features/notifications/types/Notifications.types";
+import { requestPushNotificationsPermissions } from "../features/notifications/utils/requestPushNotificationsPermissions";
 import { useRouter } from "../navigation/useNavigation";
 import { navigate } from "../utils/navigation";
-import { requestPushNotificationsPermissions } from "../features/notifications/utils/requestPushNotificationsPermissions";
 import Picto from "./Picto/Picto";
 import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
 import { TableViewPicto } from "./TableView/TableViewImage";
-import { NotificationPermissionStatus } from "../features/notifications/types/Notifications.types";
-import { invalidateProfileSocialsQuery } from "@/queries/useProfileSocialsQuery";
-import { invalidateInboxProfileSocialsQuery } from "@/queries/useInboxProfileSocialsQuery";
 
 type Props = {
   account: string;
@@ -55,7 +51,6 @@ export default function AccountSettingsButton({ account }: Props) {
   const { setCurrentAccount } = useAccountsStore(
     useSelect(["setCurrentAccount"])
   );
-  const erroredAccountsMap = useErroredAccountsMap();
   const colorScheme = useColorScheme();
   const showDisconnectActionSheet = useDisconnectActionSheet(account);
 
@@ -110,7 +105,7 @@ export default function AccountSettingsButton({ account }: Props) {
 
     const options = Object.keys(methods);
     const icons = [];
-    if (erroredAccountsMap[account] && isInternetReachable) {
+    if (isInternetReachable) {
       icons.push(
         <Picto
           style={{
@@ -148,7 +143,6 @@ export default function AccountSettingsButton({ account }: Props) {
     );
   }, [
     router,
-    erroredAccountsMap,
     account,
     isInternetReachable,
     notificationsPermissionStatus,

components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx

@@ -1,3 +1,5 @@
+import { useAppTheme } from "@/theme/useAppTheme";
+import { hexToRGBA } from "@/utils/colors";
 import { useSnackbars } from "@components/Snackbar/Snackbar.service";
 import { useGradientHeight } from "@components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.utils";
 // import MaskedView from "@react-native-masked-view/masked-view";
@@ -18,6 +20,7 @@ import Animated, {
 
 export const SnackbarBackdrop = memo(() => {
   const snackbars = useSnackbars();
+  const { theme } = useAppTheme();
   const { height: windowHeight } = useWindowDimensions();
   const gradientHeight = useGradientHeight();
 
@@ -38,7 +41,10 @@ export const SnackbarBackdrop = memo(() => {
     >
       <LinearGradient
         locations={[0, 0.55]}
-        colors={["rgba(255, 255,255,0.0)", "rgba(255, 255,255,1)"]}
+        colors={[
+          hexToRGBA(theme.colors.background.surface, 0),
+          hexToRGBA(theme.colors.background.surface, 1),
+        ]}
         style={StyleSheet.absoluteFill}
       />
       {/* TODO: Maybe add back later. For now masked view can be a litte unstable and buggy */}

components/StateHandlers/HydrationStateHandler.tsx

@@ -1,11 +1,10 @@
 import { prefetchInboxIdQuery } from "@/queries/use-inbox-id-query";
-import { fetchPersistedConversationListQuery } from "@/queries/useConversationListQuery";
-import logger from "@utils/logger";
-import { useEffect } from "react";
 import { getAccountsList } from "@data/store/accountsStore";
 import { useAppStore } from "@data/store/appStore";
-import { getXmtpClient } from "@utils/xmtpRN/sync";
+import logger from "@utils/logger";
+import { useEffect } from "react";
 import { getInstalledWallets } from "../Onboarding/ConnectViaWallet/ConnectViaWalletSupportedWallets";
+import { prefetchConversationsQuery } from "@/queries/conversations-query";
 
 export default function HydrationStateHandler() {
   // Initial hydration
@@ -24,26 +23,18 @@ export default function HydrationStateHandler() {
       // Fetching persisted conversation lists for all accounts
       // We may want to fetch only the selected account's conversation list
       // in the future, but this is simple for now, and want to get feedback to really confirm
-      logger.debug("[Hydration] Fetching persisted conversation list");
+      logger.debug(
+        "[Hydration] Fetching persisted conversation list for all accounts"
+      );
       await Promise.allSettled(
         accounts.map(async (account) => {
           const accountStartTime = new Date().getTime();
           logger.debug(
             `[Hydration] Fetching persisted conversation list for ${account}`
           );
 
-          const results = await Promise.allSettled([
-            // This will handle creating the client and setting the conversation list from persistence
-            fetchPersistedConversationListQuery({ account }),
-          ]);
           prefetchInboxIdQuery({ account });
-
-          const errors = results.filter(
-            (result) => result.status === "rejected"
-          );
-          if (errors.length > 0) {
-            logger.warn(`[Hydration] error for ${account}:`, errors);
-          }
+          prefetchConversationsQuery({ account });
 
           const accountEndTime = new Date().getTime();
           logger.debug(

components/XmtpEngine.tsx

@@ -6,14 +6,8 @@ import {
   AppStateStatus,
   NativeEventSubscription,
 } from "react-native";
-
-import {
-  getAccountsList,
-  getChatStore,
-  useAccountsStore,
-} from "../data/store/accountsStore";
+import { getAccountsList, useAccountsStore } from "../data/store/accountsStore";
 import { useAppStore } from "../data/store/appStore";
-import { getTopicsData } from "../utils/api";
 import { stopStreamingConversations } from "../utils/xmtpRN/conversations";
 import { syncConversationListXmtpClient } from "../utils/xmtpRN/sync";
 
@@ -131,9 +125,6 @@ class XmtpEngine {
     accountsToSync.forEach((a) => {
       if (!this.syncingAccounts[a]) {
         logger.info(`[XmtpEngine] Syncing account ${a}`);
-        getTopicsData(a).then((topicsData) => {
-          getChatStore(a).getState().setTopicsData(topicsData, true);
-        });
         this.syncedAccounts[a] = true;
         this.syncingAccounts[a] = true;
         syncConversationListXmtpClient(a)

components/swipeable.tsx

@@ -12,7 +12,6 @@ export type ISwipeableRenderActionsArgs = {
   progressAnimatedValue: SharedValue<number>;
   dragAnimatedValue: SharedValue<number>;
   swipeable: SwipeableMethods;
-  // caca: number;
 };
 
 export type ISwipeableProps = {

data/helpers/conversations/spamScore.ts

@@ -5,12 +5,12 @@ import {
 } from "@/utils/xmtpRN/content-types/content-types";
 
 type V3SpameScoreParams = {
-  message: string;
+  messageText: string;
   contentType: IConvosContentType;
 };
 
 export const getV3SpamScore = async ({
-  message,
+  messageText,
   contentType,
 }: V3SpameScoreParams): Promise<number> => {
   // TODO: Check if adder has been approved already
@@ -19,7 +19,7 @@ export const getV3SpamScore = async ({
   // TODO: Check spam score between sender and receiver
 
   // Check contents of last message
-  spamScore += computeMessageContentSpamScore(message, contentType);
+  spamScore += computeMessageContentSpamScore(messageText, contentType);
   return spamScore;
 };
 

data/store/accountsStore.ts

@@ -3,6 +3,8 @@ import { v4 as uuidv4 } from "uuid";
 import { create, StoreApi, UseBoundStore } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 
+import { removeLogoutTask } from "@utils/logout";
+import mmkv, { zustandMMKVStorage } from "../../utils/mmkv";
 import { ChatStoreType, initChatStore } from "./chatStore";
 import {
   initRecommendationsStore,
@@ -18,8 +20,6 @@ import {
   TransactionsStoreType,
 } from "./transactionsStore";
 import { initWalletStore, WalletStoreType } from "./walletStore";
-import { removeLogoutTask } from "@utils/logout";
-import mmkv, { zustandMMKVStorage } from "../../utils/mmkv";
 
 type AccountStoreType = {
   [K in keyof AccountStoreDataType]: UseBoundStore<
@@ -71,22 +71,6 @@ export const useAccountsList = () => {
   return accounts.filter((a) => a && a !== TEMPORARY_ACCOUNT_NAME);
 };
 
-export const useErroredAccountsMap = () => {
-  const accounts = useAccountsList();
-  return accounts.reduce(
-    (acc, a) => {
-      const errored = getChatStore(a).getState().errored;
-
-      if (errored) {
-        acc[a] = errored;
-      }
-
-      return acc;
-    },
-    {} as { [account: string]: boolean }
-  );
-};
-
 // This store is global (i.e. not linked to an account)
 // For now we only use a single account so we initialize it
 // and don't add a setter.