feat: Persistence + Our own types for conversations, messages, groups, etc (#1639)

Author: thierryskoda

App.tsx

@@ -3,7 +3,8 @@ import { useReactQueryDevTools } from "@dev-plugins/react-query"
 import { ActionSheetProvider } from "@expo/react-native-action-sheet"
 import { Chain, PrivyProvider } from "@privy-io/expo"
 import { SmartWalletsProvider } from "@privy-io/expo/smart-wallets"
-import { QueryClientProvider } from "@tanstack/react-query"
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client"
+import { DevToolsBubble } from "react-native-react-query-devtools"
 import { ActionSheet } from "@/components/action-sheet"
 import { DebugProvider } from "@/components/debug-provider"
 import { Snackbars } from "@/components/snackbar/snackbars"
@@ -13,17 +14,19 @@ import { $globalStyles } from "@/theme/styles"
 import { useThemeProvider } from "@/theme/use-app-theme"
 import { useCachedResources } from "@/utils/cache-resources"
 import { reactQueryClient } from "@/utils/react-query/react-query.client"
+import { DEFAULT_GC_TIME } from "@/utils/react-query/react-query.constants"
+import { reactQueryPersister } from "@/utils/react-query/react-query.utils"
 import "expo-dev-client"
 import React, { useEffect } from "react"
 import { GestureHandlerRootView } from "react-native-gesture-handler"
 import { KeyboardProvider } from "react-native-keyboard-controller"
+import { SafeAreaProvider } from "react-native-safe-area-context"
 import { ThirdwebProvider } from "thirdweb/react"
 import { base } from "viem/chains"
 import { config } from "./config"
 import { useMonitorNetworkConnectivity } from "./dependencies/NetworkMonitor/use-monitor-network-connectivity"
 import { AppNavigator } from "./navigation/app-navigator"
 import "./utils/ignore-logs"
-import { SafeAreaProvider } from "react-native-safe-area-context"
 import { sentryInit } from "./utils/sentry"
 import { preventSplashScreenAutoHide } from "./utils/splash/splash"
 
@@ -58,14 +61,19 @@ export function App() {
   }, [])
 
   return (
-    // <PersistQueryClientProvider
-    //   client={queryClient}
-    //   persistOptions={{
-    //     persister: reactQueryPersister,
-    //     maxAge: DEFAULT_GC_TIME,
-    //   }}
-    // >
-    <QueryClientProvider client={reactQueryClient}>
+    <PersistQueryClientProvider
+      client={reactQueryClient}
+      persistOptions={{
+        persister: reactQueryPersister,
+        maxAge: DEFAULT_GC_TIME,
+        dehydrateOptions: {
+          shouldDehydrateQuery(query) {
+            return query.meta?.persist !== false
+          },
+        },
+      }}
+    >
+      {/* <QueryClientProvider client={reactQueryClient}> */}
       <PrivyProvider
         appId={config.privy.appId}
         clientId={config.privy.clientId}
@@ -83,7 +91,7 @@ export function App() {
                           {/* <AuthenticateWithPasskeyProvider> */}
                           <AppNavigator />
                           {/* </AuthenticateWithPasskeyProvider> */}
-                          {/* {__DEV__ && <DevToolsBubble />} */}
+                          {__DEV__ && <DevToolsBubble />}
                           <Snackbars />
                           <ActionSheet />
                         </BottomSheetModalProvider>
@@ -96,7 +104,7 @@ export function App() {
           </ThirdwebProvider>
         </SmartWalletsProvider>
       </PrivyProvider>
-    </QueryClientProvider>
-    // </PersistQueryClientProvider>
+      {/* </QueryClientProvider> */}
+    </PersistQueryClientProvider>
   )
 }

components/debug-provider.tsx

@@ -23,6 +23,7 @@ import { $globalStyles } from "@/theme/styles"
 import { captureError } from "@/utils/capture-error"
 import { GenericError } from "@/utils/error"
 import { getEnv } from "@/utils/getEnv"
+import { ObjectTyped } from "@/utils/object-typed"
 import { showActionSheet } from "./action-sheet"
 
 export function DebugProvider(props: { children: React.ReactNode }) {
@@ -258,17 +259,17 @@ function useShowDebugMenu() {
       },
       "Show Streaming Status": () => {
         const { accountStreamingStates } = useStreamingStore.getState()
-        const accounts = Object.keys(accountStreamingStates)
+        const accounts = ObjectTyped.keys(accountStreamingStates)
 
         if (accounts.length === 0) {
           Alert.alert("No Streaming States", "No accounts are currently streaming")
           return
         }
 
-        const statusMessages = accounts.map((account) => {
-          const state = accountStreamingStates[account]
+        const statusMessages = accounts.map((inboxId) => {
+          const state = accountStreamingStates[inboxId]
           return [
-            `Account: ${account}`,
+            `InboxId: ${inboxId}`,
             `Conversations Streaming: ${state.isStreamingConversations ? "ON" : "OFF"}`,
             `Messages Streaming: ${state.isStreamingMessages ? "ON" : "OFF"}`,
             `Consent Streaming: ${state.isStreamingConsent ? "ON" : "OFF"}`,

components/group-avatar.tsx

@@ -1,12 +1,13 @@
-import { IXmtpConversationTopic, IXmtpInboxId } from "@features/xmtp/xmtp.types"
+import { IXmtpInboxId } from "@features/xmtp/xmtp.types"
 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 { useSafeCurrentSender } from "@/features/authentication/multi-inbox.store"
-import { useGroupMembersQuery } from "@/features/groups/useGroupMembersQuery"
-import { useGroupQuery } from "@/features/groups/useGroupQuery"
+import { IConversationTopic } from "@/features/conversation/conversation.types"
+import { useGroupMembersQuery } from "@/features/groups/group-members.query"
+import { useGroupQuery } from "@/features/groups/group.query"
 import { usePreferredDisplayInfoBatch } from "@/features/preferred-display-info/use-preferred-display-info-batch"
 import { $globalStyles } from "@/theme/styles"
 import { ThemedStyle, useAppTheme } from "@/theme/use-app-theme"
@@ -81,7 +82,7 @@ export const GroupAvatarInboxIds = memo(function GroupAvatarInboxIds(props: {
  * Will render the group image if available, otherwise shows member avatars
  */
 export const GroupAvatar = memo(function GroupAvatar(props: {
-  groupTopic: IXmtpConversationTopic
+  groupTopic: IConversationTopic
   size?: IGroupAvatarSize
   sizeNumber?: number
 }) {
@@ -169,8 +170,8 @@ export const GroupAvatar = memo(function GroupAvatar(props: {
   }, [size, theme, sizeNumberProp])
 
   // If group has an image, use it instead of member avatars
-  if (group?.groupImageUrl) {
-    return <Avatar uri={group.groupImageUrl} sizeNumber={sizeNumber} name={group.groupName} />
+  if (group?.imageUrl) {
+    return <Avatar uri={group.imageUrl} sizeNumber={sizeNumber} name={group.name} />
   }
 
   return <GroupAvatarUI members={memberData} size={sizeNumber} />

design-system/empty-state.tsx

@@ -5,6 +5,7 @@
 
 import { memo } from "react"
 import { View } from "react-native"
+import { useHeaderHeight } from "@/design-system/Header/Header.utils"
 import { Icon } from "@/design-system/Icon/Icon"
 import { IIconName } from "@/design-system/Icon/Icon.types"
 import { Text } from "@/design-system/Text"
@@ -18,6 +19,7 @@ type IEmptyStateProps = {
   icon?: React.ReactNode
   containerStyle?: IVStackProps["style"]
   style?: IVStackProps["style"]
+  hasScreenHeader?: boolean // Adds bottom padding so it can be centered when using it inside a screen that has a header
 }
 
 export const EmptyState = memo(function EmptyState({
@@ -27,17 +29,21 @@ export const EmptyState = memo(function EmptyState({
   icon,
   containerStyle,
   style,
+  hasScreenHeader = false,
 }: IEmptyStateProps) {
   const { theme } = useAppTheme()
 
+  const headerHeight = useHeaderHeight()
+
   return (
     <VStack
       style={[
         {
           flex: 1,
           alignItems: "center",
           justifyContent: "center",
-          padding: theme.spacing.lg,
+          paddingHorizontal: theme.spacing.lg,
+          paddingBottom: hasScreenHeader ? headerHeight : 0,
         },
         containerStyle,
         style,

features/GroupInvites/joinGroup/components/JoinGroupHeader.tsx

@@ -9,7 +9,7 @@
 //  * and description (if available).
 //  *
 //  * @param {Object} props - The component props
-//  * @param {string} props.groupName - The name of the group
+//  * @param {string} props.name - The name of the group
 //  * @param {string} props.imageUrl - The URL of the group's avatar
 //  * @param {string} [props.description] - The group's description
 //  *

features/authentication/components/account-switcher.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/features/authentication/multi-inbox.store"
 import { usePreferredDisplayInfo } from "@/features/preferred-display-info/use-preferred-display-info"
 import { usePreferredDisplayInfoBatch } from "@/features/preferred-display-info/use-preferred-display-info-batch"
+import { IXmtpInboxId } from "@/features/xmtp/xmtp.types"
 import { translate } from "@/i18n"
 import { useAppTheme } from "@/theme/use-app-theme"
 import { shortAddress } from "@/utils/strings/shortAddress"
@@ -48,7 +49,7 @@ export function AccountSwitcher(props: { noAvatar?: boolean }) {
         navigation.navigate("AppSettings")
       } else {
         useMultiInboxStore.getState().actions.setCurrentSender({
-          inboxId: profileXmtpInboxId,
+          inboxId: profileXmtpInboxId as IXmtpInboxId,
         })
       }
     },

features/authentication/use-logout.ts

@@ -4,8 +4,8 @@ import { useAuthenticationStore } from "@/features/authentication/authentication
 import { resetMultiInboxStore } from "@/features/authentication/multi-inbox.store"
 import { captureError } from "@/utils/capture-error"
 import { GenericError } from "@/utils/error"
-import { reactQueryMMKV, secureQueryMMKV } from "@/utils/mmkv"
 import { reactQueryClient } from "@/utils/react-query/react-query.client"
+import { reactQueryMMKV, secureQueryMMKV } from "@/utils/react-query/react-query.utils"
 import { logger } from "../../utils/logger"
 
 export const useLogout = () => {

features/consent/consent.types.ts

@@ -1,3 +1,4 @@
-import { IXmtpConsentState } from "@/features/xmtp/xmtp.types"
+import { ConsentState } from "@xmtp/react-native-sdk"
 
-export type IConsentState = IXmtpConsentState
+// For now we do 1-1
+export type IConsentState = ConsentState

features/consent/consent.utils.ts

@@ -0,0 +1,16 @@
+import { IConsentState } from "@/features/consent/consent.types"
+import { IXmtpConsentState } from "@/features/xmtp/xmtp.types"
+
+export function convertConsentStateToXmtpConsentState(
+  consentState: IConsentState,
+): IXmtpConsentState {
+  if (consentState === "allowed") {
+    return "allowed"
+  }
+
+  if (consentState === "unknown") {
+    return "unknown"
+  }
+
+  return "denied"
+}

features/consent/use-allow-dm.mutation.ts

@@ -10,17 +10,12 @@ import {
 } from "@/features/conversation/conversation-requests-list/conversations-unknown-consent.query"
 import { getConversationQueryData } from "@/features/conversation/queries/conversation.query"
 import { getDmQueryData, setDmQueryData } from "@/features/dm/use-dm-query"
-import {
-  IXmtpConversationId,
-  IXmtpConversationTopic,
-  IXmtpConversationWithCodecs,
-  IXmtpDmWithCodecs,
-  IXmtpInboxId,
-} from "@/features/xmtp/xmtp.types"
+import { IXmtpConversationId, IXmtpInboxId } from "@/features/xmtp/xmtp.types"
 import { updateObjectAndMethods } from "@/utils/update-object-and-methods"
+import { IConversationId, IConversationTopic } from "../conversation/conversation.types"
 import {
   setXmtpConsentStateForInboxId,
-  updateConsentForGroupsForAccount,
+  updateConsentForGroupsForInbox,
 } from "../xmtp/xmtp-consent/xmtp-consent"
 
 export function useAllowDmMutation() {
@@ -29,17 +24,17 @@ export function useAllowDmMutation() {
   return useMutation({
     mutationFn: async (args: {
       peerInboxId: IXmtpInboxId
-      conversationId: IXmtpConversationId
-      topic: IXmtpConversationTopic
+      conversationId: IConversationId
+      topic: IConversationTopic
     }) => {
       const { peerInboxId, conversationId } = args
       if (!peerInboxId) {
         throw new Error("Peer inbox id not found")
       }
       await Promise.all([
-        updateConsentForGroupsForAccount({
+        updateConsentForGroupsForInbox({
           clientInboxId: currentSenderInboxId,
-          groupIds: [conversationId],
+          groupIds: [conversationId as unknown as IXmtpConversationId],
           consent: "allowed",
         }),
         setXmtpConsentStateForInboxId({
@@ -55,19 +50,19 @@ export function useAllowDmMutation() {
       })
       if (conversation) {
         const updatedDm = updateObjectAndMethods(conversation, {
-          state: "allowed",
+          consentState: "allowed",
         })
 
         setDmQueryData({
-          ethAccountAddress: currentSenderInboxId,
-          inboxId: peerInboxId,
-          dm: updatedDm as IXmtpDmWithCodecs,
+          targetInboxId: currentSenderInboxId,
+          clientInboxId: peerInboxId,
+          dm: updatedDm,
         })
 
         // Add to main conversations list
         addConversationToAllowedConsentConversationsQuery({
           inboxId: currentSenderInboxId,
-          conversation: updatedDm as IXmtpConversationWithCodecs,
+          conversation: updatedDm,
         })
 
         // Remove from requests
@@ -76,35 +71,35 @@ export function useAllowDmMutation() {
           topic,
         })
 
-        return { previousDmConsent: conversation.state }
+        return { previousDmConsent: conversation.consentState }
       }
     },
     onError: (error, { topic, peerInboxId }, context) => {
       const { previousDmConsent } = context || {}
       if (previousDmConsent) {
         const dm = getDmQueryData({
-          ethAccountAddress: currentSenderInboxId,
-          inboxId: peerInboxId,
+          targetInboxId: currentSenderInboxId,
+          clientInboxId: peerInboxId,
         })
 
         if (!dm) {
           return
         }
 
         const previousDm = updateObjectAndMethods(dm, {
-          state: previousDmConsent,
+          consentState: previousDmConsent,
         })
 
         setDmQueryData({
-          ethAccountAddress: currentSenderInboxId,
-          inboxId: peerInboxId,
+          targetInboxId: currentSenderInboxId,
+          clientInboxId: peerInboxId,
           dm: previousDm,
         })
 
         // Add back in requests
         addConversationToUnknownConsentConversationsQuery({
           inboxId: currentSenderInboxId,
-          conversation: previousDm as IXmtpConversationWithCodecs,
+          conversation: previousDm,
         })
 
         // Remove from main conversations list