feat: Clean up XMTP functions + new Prettier configs to match BE + other fixes (#1620) (#1620)

Author: thierryskoda

.cursorrules

@@ -0,0 +1,30 @@
+module.exports = {
+  arrowParens: "always",
+  bracketSameLine: false,
+  bracketSpacing: true,
+  embeddedLanguageFormatting: "auto",
+  endOfLine: "lf",
+  htmlWhitespaceSensitivity: "css",
+  jsxSingleQuote: false,
+  printWidth: 80,
+  proseWrap: "preserve",
+  quoteProps: "as-needed",
+  semi: true,
+  singleAttributePerLine: false,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "all",
+  useTabs: false,
+  plugins: [
+    "prettier-plugin-packagejson",
+    "@ianvs/prettier-plugin-sort-imports",
+  ],
+  importOrder: [
+    "<BUILTIN_MODULES>",
+    "<THIRD_PARTY_MODULES>",
+    "^@(/.*)$",
+    "^@test(/.*)$",
+    "^[.]",
+  ],
+  importOrderTypeScriptVersion: "5.7.3",
+};

.prettierrc

@@ -1,12 +1,3 @@
-import { ActionSheet } from "@/components/action-sheet";
-import { DebugProvider } from "@/components/debug-provider";
-import { Snackbars } from "@/components/snackbar/snackbars";
-import { useHydrateAuth } from "@/features/authentication/use-hydrate-auth";
-import { useLogoutOnJwtRefreshError } from "@/features/authentication/use-logout-on-jwt-refresh-error";
-import { useInitializeMultiInboxClient } from "@/features/multi-inbox/multi-inbox.client";
-import { useSetupStreamingSubscriptions } from "@/features/streams/streams";
-import { $globalStyles } from "@/theme/styles";
-import { useThemeProvider } from "@/theme/use-app-theme";
 import { configure as configureCoinbase } from "@coinbase/wallet-mobile-sdk";
 import { BottomSheetModalProvider } from "@design-system/BottomSheet/BottomSheetModalProvider";
 import { useReactQueryDevTools } from "@dev-plugins/react-query";
@@ -17,6 +8,14 @@ import { queryClient } from "@queries/queryClient";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { useCoinbaseWalletListener } from "@utils/coinbaseWallet";
 import * as Clipboard from "expo-clipboard";
+import { ActionSheet } from "@/components/action-sheet";
+import { DebugProvider } from "@/components/debug-provider";
+import { Snackbars } from "@/components/snackbar/snackbars";
+import { useHydrateAuth } from "@/features/authentication/use-hydrate-auth";
+import { useLogoutOnJwtRefreshError } from "@/features/authentication/use-logout-on-jwt-refresh-error";
+import { useSetupStreamingSubscriptions } from "@/features/streams/streams";
+import { $globalStyles } from "@/theme/styles";
+import { useThemeProvider } from "@/theme/use-app-theme";
 import "expo-dev-client";
 import React, { useEffect } from "react";
 import { Platform } from "react-native";
@@ -25,8 +24,8 @@ import { KeyboardProvider } from "react-native-keyboard-controller";
 import { Provider as PaperProvider } from "react-native-paper";
 import { DevToolsBubble } from "react-native-react-query-devtools";
 import {
-  ReanimatedLogLevel,
   configureReanimatedLogger,
+  ReanimatedLogLevel,
 } from "react-native-reanimated";
 import { ThirdwebProvider } from "thirdweb/react";
 import { config } from "./config";
@@ -60,7 +59,6 @@ configureCoinbase({
 const coinbaseUrl = new URL(`https://${config.websiteDomain}/coinbase`);
 
 export function App() {
-  useInitializeMultiInboxClient();
   useLogoutOnJwtRefreshError();
   useMonitorNetworkConnectivity();
   useHydrateAuth();
@@ -90,8 +88,7 @@ export function App() {
     <QueryClientProvider client={queryClient}>
       <PrivyProvider
         appId={config.privy.appId}
-        clientId={config.privy.clientId}
-      >
+        clientId={config.privy.clientId}>
         <SmartWalletsProvider>
           <ThirdwebProvider>
             <AppKeyboardProvider>
@@ -104,7 +101,7 @@ export function App() {
                           {/* <AuthenticateWithPasskeyProvider> */}
                           <AppNavigator />
                           {/* </AuthenticateWithPasskeyProvider> */}
-                          {__DEV__ && <DevToolsBubble onCopy={onCopy} />}
+                          {/* {__DEV__ && <DevToolsBubble onCopy={onCopy} />} */}
                           <ActionSheet />
                           <Snackbars />
                         </BottomSheetModalProvider>

.prettierrc.cjs

@@ -4,6 +4,7 @@ import {
   reactotronReactQuery,
 } from "reactotron-react-query";
 import { queryClient } from "./queries/queryClient";
+
 const queryClientManager = new QueryClientManager({
   queryClient,
 });

App.tsx

@@ -97,7 +97,6 @@ const settings: Record<Environment, EnvironmentConfig> = {
   },
 };
 
-// eslint-disable-next-line import/no-default-export
 export default (): ExpoConfig => {
   const expoEnv = (process.env.EXPO_ENV || "development") as Environment;
   const config = settings[expoEnv];

ReactotronConfig.ts

@@ -1,12 +1,12 @@
+import { Image } from "expo-image";
+import React, { memo, useCallback, useState } from "react";
+import { Platform, StyleProp, ViewStyle } from "react-native";
 import { Center } from "@/design-system/Center";
 import { Icon } from "@/design-system/Icon/Icon";
 import { Text } from "@/design-system/Text";
 import { useAppTheme } from "@/theme/use-app-theme";
 import { Nullable } from "@/types/general";
 import { getCapitalizedLettersForAvatar } from "@/utils/get-capitalized-letters-for-avatar";
-import { Image } from "expo-image";
-import React, { memo, useCallback, useState } from "react";
-import { Platform, StyleProp, ViewStyle } from "react-native";
 
 export type IAvatarProps = {
   uri: Nullable<string>;
@@ -34,48 +34,41 @@ export const Avatar = memo(function Avatar({
     setDidError(false);
   }, []);
 
-  if (uri && !didError) {
-    return (
-      <Center style={style}>
+  return (
+    <Center
+      style={[
+        {
+          borderRadius: 9999,
+          width: avatarSize,
+          height: avatarSize,
+          backgroundColor: theme.colors.fill.tertiary,
+        },
+        style,
+      ]}
+      testID="avatar-placeholder">
+      {uri && !didError ? (
         <Image
           onLoad={handleImageLoad}
           onError={handleImageError}
           source={{ uri }}
           style={{
+            position: "absolute",
             borderRadius: avatarSize / 2,
             width: avatarSize,
             height: avatarSize,
           }}
           cachePolicy="memory-disk"
           testID="avatar-image"
         />
-      </Center>
-    );
-  }
-
-  return (
-    <Center
-      style={[
-        {
-          borderRadius: 9999,
-          width: avatarSize,
-          height: avatarSize,
-          backgroundColor: theme.colors.fill.tertiary,
-        },
-        style,
-      ]}
-      testID="avatar-placeholder"
-    >
-      {name ? (
+      ) : name ? (
         <Text
           weight="medium"
           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
             lineHeight: avatarSize / 2.4, // 2.4 is the ratio in the Figma design
             paddingTop: avatarSize / 15, // 15 is totally random and padding top shouldn't be needed but otherwise the text is not centered
-          }}
-        >
+          }}>
           {firstLetter}
         </Text>
       ) : (

app.config.ts

@@ -1,10 +1,3 @@
-import { VStack } from "@/design-system/VStack";
-import { useLogout } from "@/features/authentication/use-logout.hook";
-import { translate } from "@/i18n";
-import { navigate } from "@/navigation/navigation.utils";
-import { $globalStyles } from "@/theme/styles";
-import { getEnv } from "@/utils/getEnv";
-import { getNativeLogFile } from "@/utils/xmtpRN/logs";
 import * as Sentry from "@sentry/react-native";
 import {
   getPreviousSessionLoggingFile,
@@ -17,6 +10,13 @@ import { Image } from "expo-image";
 import * as Updates from "expo-updates";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Alert, Platform } from "react-native";
+import { VStack } from "@/design-system/VStack";
+import { useLogout } from "@/features/authentication/use-logout.hook";
+import { getXmtpNativeLogFile } from "@/features/xmtp/utils/xmtp-logs";
+import { translate } from "@/i18n";
+import { navigate } from "@/navigation/navigation.utils";
+import { $globalStyles } from "@/theme/styles";
+import { getEnv } from "@/utils/getEnv";
 import { showActionSheet } from "./action-sheet";
 
 export function DebugProvider(props: { children: React.ReactNode }) {
@@ -64,7 +64,7 @@ export function DebugProvider(props: { children: React.ReactNode }) {
         await RNFS.unlink(
           `file://${RNFS.CachesDirectoryPath}${
             RNFS.CachesDirectoryPath.endsWith("/") ? "" : "/"
-          }mediacache`
+          }mediacache`,
         );
         alert("Done!");
       },
@@ -95,7 +95,7 @@ export function DebugProvider(props: { children: React.ReactNode }) {
               : "",
           ]
             .filter(Boolean)
-            .join("\n")
+            .join("\n"),
         );
       },
       "Check for Updates": async () => {
@@ -123,7 +123,7 @@ export function DebugProvider(props: { children: React.ReactNode }) {
                     }
                   },
                 },
-              ]
+              ],
             );
           } else {
             Alert.alert("No Updates", "You are running the latest version");
@@ -144,7 +144,7 @@ export function DebugProvider(props: { children: React.ReactNode }) {
         });
       },
       "Share native logs": async () => {
-        const nativeLogFilePath = await getNativeLogFile();
+        const nativeLogFilePath = await getXmtpNativeLogFile();
         Share.open({
           title: translate("debug.libxmtp_log_session"),
           url: `file://${nativeLogFilePath}`,
@@ -167,7 +167,7 @@ export function DebugProvider(props: { children: React.ReactNode }) {
         navigate("WebviewPreview", { uri: loggingFilePath });
       },
       "Display native logs": async () => {
-        const nativeLogFilePath = await getNativeLogFile();
+        const nativeLogFilePath = await getXmtpNativeLogFile();
         navigate("WebviewPreview", { uri: nativeLogFilePath });
       },
       "Display previous session logs": async () => {

components/avatar.tsx

@@ -1,16 +1,16 @@
+import { ConversationTopic, InboxId } from "@xmtp/react-native-sdk";
+import React, { memo, useMemo } from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
 import { Center } from "@/design-system/Center";
 import { Text } from "@/design-system/Text";
 import { VStack } from "@/design-system/VStack";
-import { useCurrentSenderEthAddress } from "@/features/multi-inbox/multi-inbox.store";
+import { useSafeCurrentSender } from "@/features/authentication/multi-inbox.store";
 import { useProfilesQueries } from "@/features/profiles/profiles.query";
 import { useGroupMembersQuery } from "@/queries/useGroupMembersQuery";
 import { useGroupQuery } from "@/queries/useGroupQuery";
 import { $globalStyles } from "@/theme/styles";
 import { ThemedStyle, useAppTheme } from "@/theme/use-app-theme";
 import { Nullable } from "@/types/general";
-import { ConversationTopic, InboxId } from "@xmtp/react-native-sdk";
-import React, { memo, useMemo } from "react";
-import { StyleProp, TextStyle, ViewStyle } from "react-native";
 import { Avatar } from "./avatar";
 
 /**
@@ -34,7 +34,7 @@ export const GroupAvatarInboxIds = memo(function GroupAvatarInboxIds(props: {
               uri: profile.avatar,
               name: profile.name,
             }
-          : null
+          : null,
       )
       .filter(Boolean);
   }, [profiles]);
@@ -53,16 +53,16 @@ export const GroupAvatar = memo(function GroupAvatar(props: {
 
   const { theme } = useAppTheme();
 
-  const currentAccount = useCurrentSenderEthAddress()!;
+  const currentSender = useSafeCurrentSender();
 
   const { data: group } = useGroupQuery({
-    account: currentAccount,
+    account: currentSender.ethereumAddress,
     topic: groupTopic,
   });
 
   const { data: members } = useGroupMembersQuery({
     caller: "GroupAvatar",
-    account: currentAccount,
+    account: currentSender.ethereumAddress,
     topic: groupTopic,
   });
 
@@ -71,17 +71,17 @@ export const GroupAvatar = memo(function GroupAvatar(props: {
       return [];
     }
 
-    return members.ids.reduce<string[]>((addresses, memberId) => {
-      const memberAddress = members.byId[memberId]?.addresses[0];
+    return members.ids.reduce<InboxId[]>((inboxIds, memberId) => {
+      const memberInboxId = members.byId[memberId].inboxId;
       if (
-        memberAddress &&
-        memberAddress.toLowerCase() !== currentAccount?.toLowerCase()
+        memberInboxId &&
+        memberInboxId.toLowerCase() !== currentSender?.inboxId?.toLowerCase()
       ) {
-        addresses.push(memberAddress);
+        inboxIds.push(memberInboxId);
       }
-      return addresses;
+      return inboxIds;
     }, []);
-  }, [members, currentAccount]);
+  }, [members, currentSender]);
 
   const { data: profiles } = useProfilesQueries({
     xmtpInboxIds: memberAddresses,
@@ -97,7 +97,7 @@ export const GroupAvatar = memo(function GroupAvatar(props: {
                 uri: profile.avatar,
                 name: profile.name,
               }
-            : null
+            : null,
         )
         .filter(Boolean) ?? []
     );
@@ -148,7 +148,7 @@ const GroupAvatarUI = memo(function GroupAvatarUI(props: IGroupAvatarUIProps) {
 
   const positions = useMemo(
     () => calculatePositions(memberCount, MAIN_CIRCLE_RADIUS),
-    [memberCount]
+    [memberCount],
   );
 
   return (
@@ -194,7 +194,7 @@ const GroupAvatarUI = memo(function GroupAvatarUI(props: IGroupAvatarUIProps) {
 
 const calculatePositions = (
   memberCount: number,
-  mainCircleRadius: number
+  mainCircleRadius: number,
 ): Position[] => {
   const positionMaps: { [key: number]: Position[] } = {
     0: [],

components/debug-provider.tsx

@@ -1,6 +1,6 @@
 // import { IXmtpEnv } from "@/utils/xmtpRN/xmtp.types";
 
-import type { IXmtpEnv } from "@/utils/xmtpRN/xmtp.types";
+import type { IXmtpEnv } from "@/features/xmtp/xmtp.types";
 
 type IWalletConnectConfig = {
   projectId: string | undefined;

components/group-avatar.tsx

@@ -28,7 +28,7 @@ const EXPO_ENV = process.env.EXPO_ENV;
 if (API_URL.includes("localhost")) {
   if (EXPO_ENV && EXPO_ENV !== "development") {
     throw new Error(
-      "Using localhost API URL in non-dev environment. Did you forget to pull env vars?"
+      "Using localhost API URL in non-dev environment. Did you forget to pull env vars?",
     );
   }
 }

config/config.types.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck note(lustig) env types aren't working for me OOTB
 
-import { IConfig, ILoggerColorScheme } from "@/config/config.types";
 import Constants from "expo-constants";
+import { IConfig, ILoggerColorScheme } from "@/config/config.types";
 
 function maybeReplaceLocalhost(uri: string) {
   try {