Ml/cleanup auth and types and stuff (#1605)

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

Author: 3 people

.cursorrules

@@ -5,13 +5,12 @@
 - Write concise TypeScript code.
 - Use functional programming patterns.
 - Prefer clean, readable code over compact code, using empty lines to separate logical blocks and improve readability.
-- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError). Doesn't mater if it's long. For example this is good: "useGroupMembersInfoForCurrentAccount".
+- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError). Doesn't mater if it's long. For example this is good: "useGroupMembersInfo".
 - Prefer clean and easy to read code over compact code.
 - Don't create function(s) inside other functions unless it's specified
 - Add clear, concise comments to explain non-obvious logic or unconventional implementation decisions.
 - When refactoring code, preserve existing comments unless explicitly instructed otherwise or the related code is removed. Comments often explain important context or implementation decisions that should be maintained.
 - Comments should be above the code they are describing.
-- Use the suffix 'ForCurrentAccount' when using useCurrentAccount inside components or hooks.
 - Handle errors at the caller level. Unless if we really need to log something but make sure to throw back the error to the caller.
 - Minimize using external hooks inside custom hooks to prevent unnecessary rerenders. Instead, use getter functions to access data, especially in mutations.
 - Use Zod for external API response validation. Define zod schema and infer types from it.
@@ -129,13 +128,11 @@ 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
@@ -174,7 +171,16 @@ enabled: !!args.account
 - Export query options generators for cross-component usage
 - Handle conditional fetching with `enabled` and `skipToken`
 - Create an `enabled` variable before returning query options to avoid duplicating logic
--
+- Never create a conditional queryKey:
+  @example
+  // ❌ conditional queryKey
+  queryKey: enabled ? queryKeyFactory(args) : ["profile"],
+
+// ✅ Good: Explicit property usage
+queryKey: queryKeyFactory(args),
+
+- Always use a ternary checking enabled to return liveQueryFn if enabled is true and skipToken if enabled is false
+  - queryFn: enabled ? () => liveQueryFn(args) : skipToken,
 
 @example
 // queries/use-conversation-messages-query.ts

App.tsx

@@ -48,6 +48,8 @@ import {
 // import { useAppStateHandlers } from "./hooks/useAppStateHandlers";
 // import { useInstalledWallets } from "@/features/wallets/use-installed-wallets.hook";
 import logger from "./utils/logger";
+import { AuthenticateWithPasskeyProvider } from "./features/onboarding/contexts/signup-with-passkey.context";
+import { PrivyPlaygroundLandingScreen } from "./features/privy-playground/privy-playground-landing.screen";
 // import { useAccountsStore } from "./features/multi-inbox/multi-inbox.store";
 // import { AuthenticateWithPasskeyProvider } from "./features/onboarding/contexts/signup-with-passkey.context";
 // import { PrivyPlaygroundLandingScreen } from "./features/privy-playground/privy-playground-landing.screen";
@@ -203,10 +205,10 @@ export function AppWithProviders() {
                   <PaperProvider theme={paperTheme}>
                     <GestureHandlerRootView style={{ flex: 1 }}>
                       <BottomSheetModalProvider>
-                        <App />
-                        {/* <AuthenticateWithPasskeyProvider>
+                        {/* <App /> */}
+                        <AuthenticateWithPasskeyProvider>
                           <PrivyPlaygroundLandingScreen />
-                        </AuthenticateWithPasskeyProvider> */}
+                        </AuthenticateWithPasskeyProvider>
                         {__DEV__ && <DevToolsBubble onCopy={onCopy} />}
                         <Snackbars />
                       </BottomSheetModalProvider>

app.config.ts

@@ -27,6 +27,12 @@ type EnvironmentConfig = {
   alchemyApiKey: string;
 };
 
+// Type assertion for process.env to include our Expo public variables
+const env = process.env as {
+  EXPO_PUBLIC_ALCHEMY_API_KEY?: string;
+  EXPO_ENV?: string;
+};
+
 const settings: Record<Environment, EnvironmentConfig> = {
   development: {
     scheme: "converse-dev",
@@ -53,7 +59,7 @@ const settings: Record<Environment, EnvironmentConfig> = {
     appDomainGetConverse: "dev.getconverse.app",
     appName: "Converse DEV",
     icon: "./assets/icon-preview.png",
-    alchemyApiKey: process.env.EXPO_PUBLIC_ALCHEMY_API_KEY || "",
+    alchemyApiKey: env.EXPO_PUBLIC_ALCHEMY_API_KEY || "",
   },
   preview: {
     scheme: "converse-preview",
@@ -80,7 +86,7 @@ const settings: Record<Environment, EnvironmentConfig> = {
     appDomainGetConverse: "preview.getconverse.app",
     appName: "Converse PREVIEW",
     icon: "./assets/icon-preview.png",
-    alchemyApiKey: process.env.EXPO_PUBLIC_ALCHEMY_API_KEY || "",
+    alchemyApiKey: env.EXPO_PUBLIC_ALCHEMY_API_KEY || "",
   },
   production: {
     scheme: "converse",
@@ -107,14 +113,13 @@ const settings: Record<Environment, EnvironmentConfig> = {
     appDomainGetConverse: "getconverse.app",
     appName: "Converse",
     icon: "./assets/icon.png",
-    alchemyApiKey: process.env.EXPO_PUBLIC_ALCHEMY_API_KEY || "",
+    alchemyApiKey: env.EXPO_PUBLIC_ALCHEMY_API_KEY || "",
   },
 };
 
 // eslint-disable-next-line import/no-default-export
 export default (): ExpoConfig => {
-  // @ts-expect-error note(lustig) env types aren't working for me OOTB
-  const expoEnv = (process.env.EXPO_ENV || "development") as Environment;
+  const expoEnv = (env.EXPO_ENV || "development") as Environment;
   const config = settings[expoEnv];
 
   return {

components/CurrentAccount.tsx

@@ -5,9 +5,8 @@ import { spacing } from "@theme/spacing";
 import { ViewStyle, StyleSheet } from "react-native";
 
 import { Avatar } from "./Avatar";
-import { usePreferredName } from "@/hooks/usePreferredName";
-import { usePreferredAvatarUri } from "@/hooks/usePreferredAvatarUri";
 import { useSafeCurrentSender } from "@/features/multi-inbox/multi-inbox.store";
+import { useInboxAvatar, useInboxName } from "@/features/inbox/inbox.api";
 
 type ICurrentAccountProps = {
   style?: ViewStyle;
@@ -19,9 +18,11 @@ const styles = StyleSheet.create({
 });
 
 export function CurrentAccount(props: ICurrentAccountProps) {
-  const account = useSafeCurrentSender().ethereumAddress;
-  const name = usePreferredName(account);
-  const avatarUri = usePreferredAvatarUri(account);
+  const inboxId = useSafeCurrentSender().inboxId;
+  const { data: name, isLoading } = useInboxName({ inboxId });
+  const { data: avatarUri, isLoading: isAvatarLoading } = useInboxAvatar({
+    inboxId,
+  });
 
   return (
     <HStack style={[styles.container, props.style]}>

components/StateHandlers/HydrationStateHandler.tsx

@@ -2,7 +2,7 @@ import { prefetchConversationMetadataQuery } from "@/queries/conversation-metada
 import { fetchAllowedConsentConversationsQuery } from "@/queries/conversations-allowed-consent-query";
 import { captureError } from "@/utils/capture-error";
 import { useAppStore } from "@data/store/appStore";
-import logger from "@utils/logger";
+import { logger } from "@utils/logger";
 import { Conversation } from "@xmtp/react-native-sdk";
 import { MultiInboxClient } from "@/features/multi-inbox/multi-inbox.client";
 import { useEffect } from "react";

components/StateHandlers/InitialStateHandler.tsx

@@ -7,7 +7,7 @@ import { useAppStore } from "../../data/store/appStore";
 import { useSelect } from "../../data/store/storeHelpers";
 import { getSchemedURLFromUniversalURL } from "../../utils/navigation";
 import { hideSplashScreen } from "../../utils/splash/splash";
-import logger from "@utils/logger";
+import { logger } from "@utils/logger";
 import { useAuthStatus } from "@/features/authentication/useAuthStatus.hook";
 
 const isDevelopmentClientURL = (url: string) => {

components/StateHandlers/NetworkStateHandler.tsx

@@ -1,5 +1,5 @@
 import NetInfo from "@react-native-community/netinfo";
-import logger from "@utils/logger";
+import { logger } from "@utils/logger";
 import { useEffect, useRef } from "react";
 
 import { config } from "../../config";