feat: New conversation composer + refactor and fix profile socials + many other chat related fixes (#1569)

Co-authored-by: Thierry <[email protected]>

Author: technoplato

.cursorrules

@@ -91,6 +91,53 @@
 - Keep features self-contained. Create a new feature folder if accessing features across boundaries.
 - Place queries within their respective feature folders, but maintain queryKeys at the root level for better visibility.
 
+## File Naming Convention
+
+Use descriptive suffixes:
+
+```
+[featureName].screen.tsx
+[featureName].nav.tsx
+[featureName].store.ts
+[featureName].queries.ts
+[featureName].utils.ts
+[featureName].client.ts
+[featureName].types.ts
+[featureName].test.ts
+```
+
+// ❌ Bad: Generic or unclear names
+profile.ts
+group-chat.tsx
+utils.ts
+types.ts
+
+// ✅ Good: Clear, descriptive names with proper suffixes
+profile.screen.tsx
+group-chat.nav.tsx
+conversation.store.ts
+messages.queries.ts
+profile.utils.ts
+auth.client.ts
+user.types.ts
+login.test.ts
+
+## Imports
+
+Always import using the @alias as examplified below:
+
+// ✅ Good: Using the @ to simplify imports
+import { isConversationGroup } from "@/features/conversation/utils/is-conversation-group";
+import { isConversationDm } from "@/features/conversation/utils/is-conversation-dm";
+import { getReadableProfile } from "@/utils/getReadableProfile";
+import { IConversationMembershipSearchResult } from "@/features/search/search.types";
+
+// ❌ Bad: Using relative paths
+import { isConversationGroup } from "../../../features/conversation/utils/is-conversation-group";
+import { isConversationDm } from "../../../features/conversation/utils/is-conversation-dm";
+import { getReadableProfile } from "../../../../utils/getReadableProfile";
+import { IConversationMembershipSearchResult } from "../../../features/search/search.types";
+
 ## Theming & Styling
 
 - Always use the theme for styling. Import it from @/theme/useAppTheme like `const { theme } = useAppTheme();`.

App.tsx

@@ -62,14 +62,19 @@ LogBox.ignoreLogs([
   "Error destroying session", // Privy
   'event="noNetwork', // ethers
   "[Reanimated] Reading from `value` during component render. Please ensure that you do not access the `value` property or use `get` method of a shared value while React is rendering a component.",
-  "Attempted to import the module",
+  "Attempted to import the module", // General module import warnings
+  'Attempted to import the module "/Users', // More specific module import warnings
   "Falling back to file-based resolution. Consider updating the call site or asking the package maintainer(s) to expose this API",
   "Couldn't find real values for `KeyboardContext`. Please make sure you're inside of `KeyboardProvider` - otherwise functionality of `react-native-keyboard-controller` will not work. [Component Stack]",
   "sync worker error storage error: Pool needs to  reconnect before use",
   "[Converse.debug.dylib] sync worker error storage error: Pool needs to  reconnect before use",
   "Falling back to file-based resolution. Consider updating the call site or asking the package maintainer(s) to expose this API.",
 ]);
 
+if (__DEV__) {
+  require("./ReactotronConfig.ts");
+}
+
 // This is the default configuration
 configureReanimatedLogger({
   level: ReanimatedLogLevel.warn,

ReactotronConfig.ts

@@ -0,0 +1,19 @@
+import Reactotron from "reactotron-react-native";
+import {
+  QueryClientManager,
+  reactotronReactQuery,
+} from "reactotron-react-query";
+import { queryClient } from "./queries/queryClient";
+const queryClientManager = new QueryClientManager({
+  queryClient,
+});
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+Reactotron.use(reactotronReactQuery(queryClientManager))
+  .configure({
+    onDisconnect: () => {
+      queryClientManager.unsubscribe();
+    },
+  })
+  .useReactNative()
+  .connect();

components/Avatar.tsx

@@ -68,7 +68,6 @@ export const Avatar = memo(function Avatar({
       {name ? (
         <Text
           weight="medium"
-          color="primary"
           style={{
             color: theme.colors.global.white, // white looks better for both dark/light themes
             fontSize: avatarSize / 2.4, // 2.4 is the ratio in the Figma design

components/ClickableText.tsx

@@ -38,7 +38,7 @@ export function ClickableText({ children, style }: Props) {
   }, []);
 
   const handleNewConversationPress = useCallback((peer: string) => {
-    navigate("Conversation", { peer });
+    // TODO
   }, []);
 
   const showCopyActionSheet = useCallback(

components/DebugButton.tsx

@@ -1,3 +1,5 @@
+import { translate } from "@/i18n";
+import { getNativeLogFile } from "@/utils/xmtpRN/logs";
 import * as Sentry from "@sentry/react-native";
 import {
   getPreviousSessionLoggingFile,
@@ -6,17 +8,16 @@ import {
 } from "@utils/logger";
 import { navigate } from "@utils/navigation";
 import Share from "@utils/share";
-import { getNativeLogFile } from "@/utils/xmtpRN/logs";
 import Constants from "expo-constants";
 import { Image } from "expo-image";
 import * as Updates from "expo-updates";
 import { forwardRef, useImperativeHandle } from "react";
 import { Alert, Platform } from "react-native";
-import { translate } from "@/i18n";
 import { config } from "../config";
-import { useAccountsList } from "../data/store/accountsStore";
+import { useAccountsList, getAccountsList } from "../data/store/accountsStore";
 import mmkv from "../utils/mmkv";
 import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
+import { logoutAccount } from "@/utils/logout";
 
 export const useDebugEnabled = (address?: string) => {
   const accounts = useAccountsList();
@@ -57,6 +58,16 @@ const DebugButton = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     showDebugMenu() {
       const debugMethods = {
+        "Logout all accounts": async () => {
+          const allAccounts = getAccountsList();
+          try {
+            for (const account of allAccounts) {
+              await logoutAccount({ account });
+            }
+          } catch (error) {
+            alert(error);
+          }
+        },
         "Trigger OTA Update": async () => {
           try {
             const update = await Updates.fetchUpdateAsync();

components/ParsedText/ParsedText.utils.ts

@@ -3,7 +3,7 @@ import {
   IDefaultParseShape,
   IParseShape,
 } from "@components/ParsedText/ParsedText.types";
-import { ObjectTyped } from "@utils/objectTyped";
+import { ObjectTyped } from "@/utils/object-typed";
 
 type ITextPart = {
   children: string;
@@ -73,27 +73,22 @@ function createMatchedPart(args: {
   const { pattern, match, index } = args;
   const text = match[0];
 
-  const props = ObjectTyped.entries(pattern).reduce(
-    (acc, [key, value]) => {
-      if (
-        ["pattern", "renderText", "nonExhaustiveMaxMatchCount"].includes(key)
-      ) {
-        return acc;
-      }
-
-      if (typeof value === "function") {
-        // Support onPress / onLongPress functions
-        acc[key] = () =>
-          // @ts-ignore
-          value(text, index);
-      } else {
-        // Set a prop with an arbitrary name to the value in the match-config
-        acc[key] = value;
-      }
+  const props = ObjectTyped.entries(pattern).reduce((acc, [key, value]) => {
+    if (["pattern", "renderText", "nonExhaustiveMaxMatchCount"].includes(key)) {
       return acc;
-    },
-    {} as Record<string, any>
-  );
+    }
+
+    if (typeof value === "function") {
+      // Support onPress / onLongPress functions
+      acc[key] = () =>
+        // @ts-ignore
+        value(text, index);
+    } else {
+      // Set a prop with an arbitrary name to the value in the match-config
+      acc[key] = value;
+    }
+    return acc;
+  }, {} as Record<string, any>);
 
   return {
     ...props,

features/search/components/SearchBar.tsx components/SearchBar.tsx

@@ -1,25 +1,41 @@
-import { fetchConversationsQuery } from "@/queries/use-conversations-query";
-import { prefetchInboxIdQuery } from "@/queries/inbox-id-query";
+import { subscribeToNotifications } from "@/features/notifications/utils/subscribeToNotifications";
+import { prefetchConversationMetadataQuery } from "@/queries/conversation-metadata-query";
+import { fetchAllowedConsentConversationsQuery } from "@/queries/conversations-allowed-consent-query";
+import { ensureInboxId } from "@/queries/inbox-id-query";
 import { captureError } from "@/utils/capture-error";
-import { getAccountsList } from "@data/store/accountsStore";
+import { getAccountsList, useAccountsStore } from "@data/store/accountsStore";
 import { useAppStore } from "@data/store/appStore";
 import logger from "@utils/logger";
-import { useEffect } from "react";
-import { subscribeToNotifications } from "@/features/notifications/utils/subscribeToNotifications";
-import { syncConsent } from "@/utils/xmtpRN/xmtp-preferences/xmtp-preferences";
-import { prefetchConversationMetadataQuery } from "@/queries/conversation-metadata-query";
 import { Conversation } from "@xmtp/react-native-sdk";
+import { useEffect } from "react";
 
 export default function HydrationStateHandler() {
   useEffect(() => {
     const hydrate = async () => {
       const startTime = new Date().getTime();
       const accounts = getAccountsList();
 
+      // Critical queries
+      const results = await Promise.allSettled(
+        // We need the inboxId for each account since we use them so much
+        accounts.map((account) => ensureInboxId({ account }))
+      );
+
+      // Remove accounts that failed to get an inboxId
+      results.forEach((result, index) => {
+        if (result.status === "rejected") {
+          const failedAccount = accounts[index];
+          captureError({
+            ...result.reason,
+            message: `[Hydration] Failed to get inboxId for account ${failedAccount}, removing account. ${result.reason.message}`,
+          });
+          useAccountsStore.getState().removeAccount(failedAccount);
+        }
+      });
+
+      // Non critical queries
       for (const account of accounts) {
-        // Don't await because this is for performance but not critical
-        prefetchInboxIdQuery({ account }).catch(captureError);
-        fetchConversationsQuery({
+        fetchAllowedConsentConversationsQuery({
           account,
           caller: "HydrationStateHandler",
         })
@@ -36,7 +52,6 @@ export default function HydrationStateHandler() {
             });
           })
           .catch(captureError);
-        syncConsent(account).catch(captureError);
       }
 
       useAppStore.getState().setHydrationDone(true);