Account => Inbox ID Gigantic Refactor

App.tsx

@@ -7,7 +7,7 @@
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { PortalProvider } from "@gorhom/portal";
 import { useAppStateHandlers } from "@hooks/useAppStateHandlers";
-import { PrivyProvider } from "@privy-io/expo";
+// import { PrivyProvider } from "@privy-io/expo";
 import { queryClient } from "@queries/queryClient";
 import { MaterialDarkTheme, MaterialLightTheme } from "@styles/colors";
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -38,7 +38,7 @@
 import { setAuthStatus } from "./data/store/authStore";
 import Main from "./screens/Main";
 import { registerBackgroundFetchTask } from "./utils/background";
-import { privySecureStorage } from "./utils/keychain/helpers";
+// import { privySecureStorage } from "./utils/keychain/helpers";
 import { initSentry } from "./utils/sentry";
 import "./utils/splash/splash";
 import "./features/notifications/utils";
@@ -77,10 +77,10 @@
   }, []);
 
   const showDebugMenu = useCallback(() => {
     if (!debugRef.current || !(debugRef.current as any).showDebugMenu) {
       return;
     }
     (debugRef.current as any).showDebugMenu();
   }, []);
 
   useEffect(() => {
@@ -92,8 +92,8 @@
 
   // For now we use persit with zustand to get the accounts when the app launch so here is okay to see if we're logged in or not
   useEffect(() => {
-    const currentAccount = useAccountsStore.getState().currentAccount;
-    if (currentAccount && currentAccount !== TEMPORARY_ACCOUNT_NAME) {
+    const currentInboxId = useAccountsStore.getState().currentInboxId;
+    if (currentInboxId && currentInboxId !== TEMPORARY_ACCOUNT_NAME) {
       setAuthStatus("signedIn");
     } else {
       setAuthStatus("signedOut");
@@ -124,7 +124,7 @@
 const AppKeyboardProvider =
   Platform.OS === "ios" ? KeyboardProvider : React.Fragment;
 
 export default function AppWithProviders() {
   const colorScheme = useColorScheme();
 
   const paperTheme = useMemo(() => {
@@ -136,26 +136,26 @@
 
   return (
     <QueryClientProvider client={queryClient}>
-      <PrivyProvider appId={config.privy.appId} storage={privySecureStorage}>
-        <ThirdwebProvider>
-          <AppKeyboardProvider>
-            <ActionSheetProvider>
-              <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>
-                <PaperProvider theme={paperTheme}>
-                  <GestureHandlerRootView style={{ flex: 1 }}>
-                    <BottomSheetModalProvider>
-                      <PortalProvider>
-                        <App />
-                        <Snackbars />
-                      </PortalProvider>
-                    </BottomSheetModalProvider>
-                  </GestureHandlerRootView>
-                </PaperProvider>
-              </ThemeProvider>
-            </ActionSheetProvider>
-          </AppKeyboardProvider>
-        </ThirdwebProvider>
-      </PrivyProvider>
+      {/* <PrivyProvider appId={config.privy.appId} storage={privySecureStorage}> */}
+      <ThirdwebProvider>
+        <AppKeyboardProvider>
+          <ActionSheetProvider>
+            <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>
+              <PaperProvider theme={paperTheme}>
+                <GestureHandlerRootView style={{ flex: 1 }}>
+                  <BottomSheetModalProvider>
+                    <PortalProvider>
+                      <App />
+                      <Snackbars />
+                    </PortalProvider>
+                  </BottomSheetModalProvider>
+                </GestureHandlerRootView>
+              </PaperProvider>
+            </ThemeProvider>
+          </ActionSheetProvider>
+        </AppKeyboardProvider>
+      </ThirdwebProvider>
+      {/* </PrivyProvider> */}
     </QueryClientProvider>
   );
 }

components/AccountSettingsButton.tsx

@@ -31,13 +31,12 @@
 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;
+  inboxId: string;
 };
 
-export default function AccountSettingsButton({ account }: Props) {
+export default function AccountSettingsButton({ inboxId }: Props) {
   const router = useRouter();
 
   const {
@@ -52,29 +51,31 @@
     ])
   );
 
-  const { setCurrentAccount } = useAccountsStore(
-    useSelect(["setCurrentAccount"])
+  const { setCurrentInboxId } = useAccountsStore(
+    useSelect(["setCurrentInboxId"])
   );
   const erroredAccountsMap = useErroredAccountsMap();
+
   const colorScheme = useColorScheme();
-  const showDisconnectActionSheet = useDisconnectActionSheet(account);
+  const showDisconnectActionSheet = useDisconnectActionSheet({ inboxId });
 
   const onPress = useCallback(() => {
     Keyboard.dismiss();
 
     const methods = {
       [translate("your_profile_page")]: async () => {
-        if (account) {
-          invalidateProfileSocialsQuery(account, account);
-          setCurrentAccount(account, false);
+        if (inboxId) {
+          invalidateProfileSocialsQuery({ profileLookupInboxId: inboxId });
+          setCurrentInboxId({ inboxId, createIfNew: false });
+          // setCurrentAccount(inboxId, false);
           router.navigate("Chats");
           navigate("Profile", {
-            address: account,
+            inboxId,
           });
         }
       },
       [translate("copy_wallet_address")]: () => {
-        Clipboard.setString(account || "");
+        Clipboard.setString(inboxId || "");
       },
       [translate("turn_on_notifications")]: () => {
         // @todo => move that to a helper because also used in Profile
@@ -110,7 +111,7 @@
 
     const options = Object.keys(methods);
     const icons = [];
-    if (erroredAccountsMap[account] && isInternetReachable) {
+    if (erroredAccountsMap[inboxId] && isInternetReachable) {
       icons.push(
         <Picto
           style={{
@@ -135,7 +136,7 @@
           translate("disconnect_this_account")
         ),
         cancelButtonIndex: options.indexOf(translate("cancel")),
-        title: account || undefined,
+        title: inboxId || undefined,
         ...actionSheetColors(colorScheme),
       },
       (selectedIndex?: number) => {
@@ -149,11 +150,11 @@
   }, [
     router,
     erroredAccountsMap,
-    account,
+    inboxId,
     isInternetReachable,
     notificationsPermissionStatus,
     colorScheme,
-    setCurrentAccount,
+    setCurrentInboxId,
     setNotificationsPermissionStatus,
     showDisconnectActionSheet,
   ]);

components/Chat/Frame/FramePreview.tsx

@@ -176,7 +176,7 @@
 //       try {
 //         // const participantAccountAddresses: string[] = conversation.isGroup
 //         //   ? conversation.groupMembers || []
-//         //   : [account, conversation.peerAddress];
+//         //   : [account, conversation.peerEthereumAddress];
 //         // TODO: Frames when supported by V3
 //         const actionInput: FrameActionInputs = {
 //           frameUrl: actionPostUrl,

components/Chat/Transaction/TransactionPreview.tsx

@@ -123,7 +123,7 @@
 // //   const colorScheme = useColorScheme();
 // //   const styles = useStyles();
 // //   const { transaction, transactionDisplay, amountToDisplay } =
-// //     useTransactionForMessage(message, conversation?.peerAddress);
+// //     useTransactionForMessage(message, conversation?.peerEthereumAddress);
 
 // //   const showTransactionActionSheet = useCallback(() => {
 // //     const methods: { [key: string]: () => void } = {};

components/ClickableText.tsx

@@ -37,9 +37,12 @@ export function ClickableText({ children, style }: Props) {
     Linking.openURL(uri);
   }, []);
 
-  const handleNewConversationPress = useCallback((peer: string) => {
-    navigate("NewConversation", { peer });
-  }, []);
+  const handleNewConversationPress = useCallback(
+    (peerEthereumAddress: string) => {
+      navigate("NewConversation", { peerEthereumAddress });
+    },
+    []
+  );
 
   const showCopyActionSheet = useCallback(
     (cta: string) => (content: string) => {

components/Connecting.tsx

@@ -66,7 +66,7 @@ export const useShouldShowConnecting = () => {
 };
 
 export const useShouldShowConnectingOrSyncing = () => {
-  const currentAccount = useCurrentAccount();
+  const currentInboxId = useCurrentInboxId()();
   const { isLoading } = useConversationListQuery({ account: currentAccount! });
   const initialLoadDoneOnce = !isLoading;
   const shouldShowConnecting = useShouldShowConnecting();

components/ConversationList/ChatNullState.tsx

@@ -24,22 +24,16 @@ import { usePreferredName } from "@/hooks/usePreferredName";
 import { usePreferredAvatarUri } from "@/hooks/usePreferredAvatarUri";
 
 type ChatNullStateProps = {
-  currentAccount: string;
-  navigation: any;
-  route: any;
+  currentInboxId: string;
 };
 
-const ChatNullState: React.FC<ChatNullStateProps> = ({
-  currentAccount,
-  navigation,
-  route,
-}) => {
+const ChatNullState: React.FC<ChatNullStateProps> = ({ currentInboxId }) => {
   const colorScheme = useColorScheme();
   const styles = useStyles();
 
-  const username = usePreferredUsername(currentAccount);
-  const displayName = usePreferredName(currentAccount);
-  const avatar = usePreferredAvatarUri(currentAccount);
+  const username = usePreferredUsername({ peerInboxId: currentInboxId });
+  const displayName = usePreferredName(currentInboxId);
+  const avatar = usePreferredAvatarUri(currentInboxId);
 
   const profileUrl = `https://${config.websiteDomain}/dm/${
     username || currentAccount

components/ConversationList/ProfileSettingsButton.tsx

@@ -2,21 +2,21 @@ import { AvatarSizes } from "@styles/sizes";
 import React, { useCallback } from "react";
 import { Platform, TouchableOpacity } from "react-native";
 
-import { currentAccount } from "@data/store/accountsStore";
 import { navigate } from "@utils/navigation";
 import Avatar from "../Avatar";
 import { usePreferredName } from "@/hooks/usePreferredName";
 import { usePreferredAvatarUri } from "@/hooks/usePreferredAvatarUri";
+import { useCurrentInboxId } from "@data/store/accountsStore";
 
 export default function ProfileSettingsButton() {
-  const account = currentAccount();
+  const inboxId = useCurrentInboxId();
 
-  const displayName = usePreferredName(account);
-  const avatarUri = usePreferredAvatarUri(account);
+  const displayName = usePreferredName({ inboxId: inboxId! });
+  const avatarUri = usePreferredAvatarUri({ inboxId: inboxId! });
 
   const openProfile = useCallback(() => {
-    navigate("Profile", { address: currentAccount() });
-  }, []);
+    navigate("Profile", { inboxId: inboxId! });
+  }, [inboxId]);
 
   return (
     <TouchableOpacity activeOpacity={0.2} onPress={openProfile}>

components/CurrentAccount.tsx

@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
 });
 
 export function CurrentAccount(props: ICurrentAccountProps) {
-  const account = currentAccount();
+  const inboxId = getCurrentInboxId();
   const name = usePreferredName(account);
   const avatarUri = usePreferredAvatarUri(account);
 

components/DebugButton.tsx

@@ -1,9 +1,4 @@
-import Clipboard from "@react-native-clipboard/clipboard";
 import * as Sentry from "@sentry/react-native";
-import {
-  getDbEncryptionKey,
-  getDbEncryptionSalt,
-} from "@utils/keychain/helpers";
 import {
   getPreviousSessionLoggingFile,
   loggingFilePath,
@@ -21,22 +16,12 @@ import { Platform, Alert } from "react-native";
 
 import config from "../config";
 import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
-import { useAccountsList } from "../data/store/accountsStore";
 import mmkv from "../utils/mmkv";
 import { translate } from "@/i18n";
+import { isDev } from "@/utils/getEnv";
 
-export const useDebugEnabled = (address?: string) => {
-  const accounts = useAccountsList();
-  if (address && debugEnabled(address)) {
-    return true;
-  }
-  for (const account of accounts) {
-    if (debugEnabled(account)) {
-      return true;
-    }
-  }
-
-  return false;
+export const useDebugEnabled = () => {
+  return isDev;
 };
 
 export const debugEnabled = (address?: string) => {
@@ -46,11 +31,6 @@ export const debugEnabled = (address?: string) => {
   );
 };
 
-export async function delayToPropogate(): Promise<void> {
-  // delay 1s to avoid clobbering
-  return new Promise((r) => setTimeout(r, 100));
-}
-
 const DebugButton = forwardRef((props, ref) => {
   const appVersion = Constants.expoConfig?.version;
   const debugEnabled = useDebugEnabled();

components/GroupAvatar.tsx

@@ -17,14 +17,14 @@ import {
 } from "react-native";
 
 import Avatar from "./Avatar";
-import { useCurrentAccount } from "../data/store/accountsStore";
 import { useGroupMembers } from "../hooks/useGroupMembers";
 import {
   getPreferredInboxAvatar,
   getPreferredInboxName,
 } from "../utils/profile";
 import { ConversationTopic } from "@xmtp/react-native-sdk";
 import { useGroupMembersSocials } from "@/hooks/useGroupMembersSocials";
+import { isCurrentUser } from "@/features/shared/utils/user";
 
 const MAIN_CIRCLE_RADIUS = 50;
 const MAX_VISIBLE_MEMBERS = 4;
@@ -191,22 +191,29 @@ const GroupAvatar: React.FC<GroupAvatarProps> = ({
 }) => {
   const colorScheme = useColorScheme();
   const styles = getStyles(colorScheme);
-  const { members: groupMembers } = useGroupMembers(topic!);
+  const { members: groupMembers } = useGroupMembers({ topic: topic! });
   const socialsData = useGroupMembersSocials(groupMembers);
-  const account = useCurrentAccount();
 
   const memoizedAndSortedGroupMembers = useMemo(() => {
     if (!groupMembers) return [];
     const members = groupMembers.ids.reduce(
-      (acc: { address: string; uri?: string; name?: string }[], id) => {
+      (
+        acc: {
+          inboxId: string;
+          address: string;
+          uri?: string;
+          name?: string;
+        }[],
+        id
+      ) => {
         const member = groupMembers.byId[id];
-        const address = member.addresses[0].toLowerCase();
+        const groupMemberInboxId = member.inboxId;
         const senderSocials = socialsData[id];
-        const shouldExclude =
-          excludeSelf && account && address === account.toLowerCase();
+        const shouldExclude = excludeSelf && isCurrentUser(groupMemberInboxId);
         if (shouldExclude) return acc;
         const newMember = {
-          address,
+          inboxId: groupMemberInboxId,
+          address: member.addresses[0],
           uri: getPreferredInboxAvatar(senderSocials),
           name: getPreferredInboxName(senderSocials),
         };
@@ -217,7 +224,7 @@ const GroupAvatar: React.FC<GroupAvatarProps> = ({
     );
     // Sort the members so that members with avatars are positioned first
     return members.sort((a, b) => (a.uri ? -1 : 1));
-  }, [groupMembers, socialsData, excludeSelf, account]);
+  }, [groupMembers, socialsData, excludeSelf]);
 
   const membersToDisplay = pendingGroupMembers || memoizedAndSortedGroupMembers;
   const memberCount = membersToDisplay.length;