feat: XMTP sdk v4 (#1638)

Author: thierryskoda

.cursorrules

@@ -498,7 +498,7 @@ export const getMessagesQueryOptions = (args: { id: string }) => {
   const enabled = !!args.id
 
   return queryOptions({
-    queryKey: messagesQueryKey(args.id),
+    queryKey: ["get-message", arg.id],
     queryFn: enabled ? () => fetchMessages(args) : skipToken,
     enabled,
   })

components/group-avatar.tsx

@@ -1,4 +1,4 @@
-import { ConversationTopic, InboxId } from "@xmtp/react-native-sdk"
+import { IXmtpConversationTopic, 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"
@@ -49,7 +49,7 @@ type ExtraMembersIndicatorProps = {
  * Component to render a group avatar from a list of inbox IDs
  */
 export const GroupAvatarInboxIds = memo(function GroupAvatarInboxIds(props: {
-  inboxIds: InboxId[]
+  inboxIds: IXmtpInboxId[]
 }) {
   const { inboxIds } = props
 
@@ -81,7 +81,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: ConversationTopic
+  groupTopic: IXmtpConversationTopic
   size?: IGroupAvatarSize
   sizeNumber?: number
 }) {
@@ -91,14 +91,14 @@ export const GroupAvatar = memo(function GroupAvatar(props: {
 
   // Fetch group data
   const { data: group } = useGroupQuery({
-    account: currentSender.ethereumAddress,
+    inboxId: currentSender.inboxId,
     topic: groupTopic,
   })
 
   // Fetch group members
   const { data: members } = useGroupMembersQuery({
     caller: "GroupAvatar",
-    account: currentSender.ethereumAddress,
+    clientInboxId: currentSender.inboxId,
     topic: groupTopic,
   })
 
@@ -108,7 +108,7 @@ export const GroupAvatar = memo(function GroupAvatar(props: {
       return []
     }
 
-    return members.ids.reduce<InboxId[]>((inboxIds, memberId) => {
+    return members.ids.reduce<IXmtpInboxId[]>((inboxIds, memberId) => {
       const memberInboxId = members.byId[memberId].inboxId
 
       if (memberInboxId) {
@@ -169,8 +169,8 @@ export const GroupAvatar = memo(function GroupAvatar(props: {
   }, [size, theme, sizeNumberProp])
 
   // If group has an image, use it instead of member avatars
-  if (group?.imageUrlSquare) {
-    return <Avatar uri={group.imageUrlSquare} sizeNumber={sizeNumber} name={group.name} />
+  if (group?.groupImageUrl) {
+    return <Avatar uri={group.groupImageUrl} sizeNumber={sizeNumber} name={group.groupName} />
   }
 
   return <GroupAvatarUI members={memberData} size={sizeNumber} />

config/config.types.ts

@@ -43,4 +43,7 @@ export type IConfig = {
   evm: IEvmConfig
   appCheckDebugToken: string | undefined
   reactQueryEncryptionKey: string
+  xmtp: {
+    maxMsUntilLogError: number
+  }
 }

config/shared.ts

@@ -49,4 +49,7 @@ export const shared = {
     Platform.OS === "android"
       ? process.env.EXPO_PUBLIC_FIREBASE_APP_CHECK_DEBUG_TOKEN_ANDROID
       : process.env.EXPO_PUBLIC_FIREBASE_APP_CHECK_DEBUG_TOKEN_IOS,
+  xmtp: {
+    maxMsUntilLogError: 3000,
+  },
 } as const satisfies Partial<IConfig>

custom-eslint-plugin/require-promise-error-handling.js

@@ -13,25 +13,81 @@ module.exports = {
     },
   },
   create(context) {
+    // Get the file extension
+    const filename = context.getFilename()
+    const isTsxFile = filename.endsWith(".tsx")
+
     // Track if we're inside a React component
     let insideComponent = false
     // Track if we're inside a try block
     let insideTryBlock = 0
 
+    // Helper to check if a node is a React component
+    function isReactComponent(node) {
+      // Check for JSX in the function body
+      const hasJSX =
+        node.body &&
+        (node.body.type === "JSXElement" ||
+          (node.body.type === "BlockStatement" &&
+            node.body.body.some(
+              (n) =>
+                n.type === "ReturnStatement" &&
+                n.argument &&
+                (n.argument.type === "JSXElement" || n.argument.type === "JSXFragment"),
+            )))
+
+      // Check for React hooks usage
+      const hasHooks =
+        node.body &&
+        node.body.type === "BlockStatement" &&
+        node.body.body.some(
+          (n) =>
+            n.type === "VariableDeclaration" &&
+            n.declarations.some(
+              (d) =>
+                d.init &&
+                d.init.type === "CallExpression" &&
+                d.init.callee.name &&
+                (d.init.callee.name.startsWith("use") || d.init.callee.name === "memo"),
+            ),
+        )
+
+      return hasJSX || hasHooks
+    }
+
     return {
       // Detect React component function declarations
-      "FunctionDeclaration[id.name=/[A-Z].*/]"(node) {
-        insideComponent = true
+      FunctionDeclaration(node) {
+        if (isTsxFile && isReactComponent(node)) {
+          insideComponent = true
+        }
       },
       // Detect React component arrow functions
-      "VariableDeclarator[id.name=/[A-Z].*/] > ArrowFunctionExpression"(node) {
-        insideComponent = true
+      ArrowFunctionExpression(node) {
+        if (isTsxFile && isReactComponent(node)) {
+          insideComponent = true
+        }
+      },
+      // Detect memo wrapped components
+      "CallExpression[callee.name='memo']"(node) {
+        if (isTsxFile) {
+          insideComponent = true
+        }
       },
       "FunctionDeclaration:exit"(node) {
-        insideComponent = false
+        if (isTsxFile && isReactComponent(node)) {
+          insideComponent = false
+        }
       },
       "ArrowFunctionExpression:exit"(node) {
-        insideComponent = false
+        if (isTsxFile && isReactComponent(node)) {
+          insideComponent = false
+        }
+      },
+      "CallExpression[callee.name='memo']:exit"(node) {
+        if (isTsxFile) {
+          insideComponent = false
+        }
       },
       // Track try blocks
       TryStatement(node) {
@@ -42,7 +98,7 @@ module.exports = {
       },
       // Check await expressions
       AwaitExpression(node) {
-        if (!insideComponent) return
+        if (!isTsxFile || !insideComponent) return
 
         // Skip if we're inside a try block
         if (insideTryBlock > 0) return
@@ -61,7 +117,7 @@ module.exports = {
       },
       // Check Promise.then() calls
       "CallExpression[callee.property.name='then']"(node) {
-        if (!insideComponent) return
+        if (!isTsxFile || !insideComponent) return
 
         // Skip if we're inside a try block
         if (insideTryBlock > 0) return

design-system/Header/HeaderAction.tsx

@@ -39,10 +39,12 @@ export function HeaderAction(props: HeaderActionProps) {
 
   if (ActionComponent) return ActionComponent
 
+  const disabledStyle: ViewStyle = disabled ? { opacity: 0.7 } : {}
+
   if (content) {
     return (
       <TouchableOpacity
-        style={[themed([$actionTextContainer, { backgroundColor }]), style]}
+        style={[themed([$actionTextContainer, { backgroundColor }]), style, disabledStyle]}
         onPress={onPress}
         disabled={disabled || !onPress}
         activeOpacity={0.8}
@@ -59,7 +61,7 @@ export function HeaderAction(props: HeaderActionProps) {
         // {...debugBorder()}
         onPress={onPress}
         disabled={disabled || !onPress}
-        style={[themed([$actionIconContainer, { backgroundColor }]), style]}
+        style={[themed([$actionIconContainer, { backgroundColor }]), style, disabledStyle]}
         hitSlop={theme.spacing.sm}
       >
         <Icon size={theme.iconSize.lg} icon={icon} color={iconColor} />

features/GroupInvites/joinGroup/JoinGroup.client.ts

@@ -231,8 +231,8 @@
 //         [getV3IdFromTopic(topic).toLowerCase()]: "allowed",
 //       });
 
-//       const inboxIdsToAllow: InboxId[] = [];
-//       const inboxIds: { [inboxId: string]: "allowed" } = {};
+//       const inboxIdsToAllow: IXmtpInboxId[] = [];
+//       const inboxIds: { [inboxId: IXmtpInboxId]: "allowed" } = {};
 //       if (
 //         options.includeAddedBy &&
 //         conversation.version === ConversationVersion.GROUP &&
@@ -305,7 +305,7 @@
 //         creatorInboxId: async () => "0xabc" as InboxId,
 //         name: "Group Name",
 //         addedByInboxId: "0x123" as InboxId,
-//         imageUrlSquare: "https://www.google.com",
+//         groupImageUrl: "https://www.google.com",
 //         description: "Group Description",
 //       } as const;
 
@@ -321,7 +321,7 @@
 //         creatorInboxId: async () => "0xabc" as InboxId,
 //         name: "Group Name",
 //         addedByInboxId: "0x123" as InboxId,
-//         imageUrlSquare: "https://www.google.com",
+//         groupImageUrl: "https://www.google.com",
 //         description: "Group Description",
 //       };
 
@@ -398,7 +398,7 @@
 //         creatorInboxId: async () => "0xabc" as InboxId,
 //         name: "Group Name",
 //         addedByInboxId: "0x123" as InboxId,
-//         imageUrlSquare: "https://www.google.com",
+//         groupImageUrl: "https://www.google.com",
 //         description: "Group Description",
 //       } as const;
 
@@ -476,7 +476,7 @@
 //         creatorInboxId: async () => "0xabc" as InboxId,
 //         name: "Group Name",
 //         addedByInboxId: "0x123" as InboxId,
-//         imageUrlSquare: "https://www.google.com",
+//         groupImageUrl: "https://www.google.com",
 //         description: "Group Description",
 //       } as const;
 

features/auth-onboarding/auth-onboarding.constants.ts

@@ -2,11 +2,11 @@ import { config } from "@/config"
 
 export enum ONBOARDING_ENTERING_DELAY {
   FIRST = 100,
-  SECOND = 175,
-  THIRD = 250,
-  FOURTH = 850,
-  FIFTH = 925,
-  SIXTH = 1000,
+  SECOND = 125,
+  THIRD = 175,
+  FOURTH = 250,
+  FIFTH = 350,
+  SIXTH = 500,
 }
 
 export const RPID = config.websiteDomain

features/auth-onboarding/components/auth-onboarding-welcome/auth-onboarding-welcome.tsx

@@ -109,18 +109,21 @@ function useHeaderWrapper() {
 
   const isProcessingWeb3Stuff = useAuthOnboardingStore((s) => s.isProcessingWeb3Stuff)
 
-  return useHeader({
-    safeAreaEdges: ["top"],
-    RightActionComponent: (
-      <AnimatedCenter
-        entering={theme.animation
-          .reanimatedFadeInSpringSlow()
-          .delay(ONBOARDING_ENTERING_DELAY.SIXTH)}
-      >
-        <HeaderAction disabled={isProcessingWeb3Stuff} icon="person-badge-key" onPress={login} />
-      </AnimatedCenter>
-    ),
-  })
+  return useHeader(
+    {
+      safeAreaEdges: ["top"],
+      RightActionComponent: (
+        <AnimatedCenter
+          entering={theme.animation
+            .reanimatedFadeInSpringSlow()
+            .delay(ONBOARDING_ENTERING_DELAY.SIXTH)}
+        >
+          <HeaderAction disabled={isProcessingWeb3Stuff} icon="person-badge-key" onPress={login} />
+        </AnimatedCenter>
+      ),
+    },
+    [isProcessingWeb3Stuff],
+  )
 }
 
 const $termsContainer: ThemedStyle<ViewStyle> = ({ spacing, borderRadius, colors }) => ({

features/auth-onboarding/contexts/auth-onboarding.context.tsx

@@ -16,7 +16,10 @@ import { useLogout } from "@/features/authentication/use-logout"
 import { useSmartWalletClient } from "@/features/wallets/smart-wallet"
 import { createXmtpSignerFromSwc } from "@/features/wallets/utils/create-xmtp-signer-from-swc"
 import { createXmtpClient } from "@/features/xmtp/xmtp-client/xmtp-client.service"
+import { validateClientInstallation } from "@/features/xmtp/xmtp-installations/xmtp-installations"
+import { IXmtpInboxId } from "@/features/xmtp/xmtp.types"
 import { captureError, captureErrorWithToast } from "@/utils/capture-error"
+import { IEthereumAddress } from "@/utils/evm/address"
 import { authLogger } from "@/utils/logger"
 import { tryCatch } from "@/utils/try-catch"
 
@@ -114,29 +117,31 @@ export const AuthOnboardingContextProvider = (props: IAuthOnboardingContextProps
       authLogger.debug(`Smart wallet created`)
 
       // Step 3: XMTP Inbox client
-      const signer = createXmtpSignerFromSwc(swcClient)
-      const { data: xmtpClient, error: xmtpError } = await tryCatch(
-        createXmtpClient({
-          inboxSigner: signer,
-        }),
-      )
-
-      if (xmtpError) {
-        throw xmtpError
-      }
+      const xmtpClient = await createXmtpClient({
+        inboxSigner: createXmtpSignerFromSwc(swcClient),
+      })
 
       if (!xmtpClient) {
         throw new Error("XMTP client creation failed")
       }
 
+      const isValid = await validateClientInstallation({
+        client: xmtpClient,
+      })
+
+      if (!isValid) {
+        throw new Error("Invalid client installation")
+      }
+
       // Step 4: Set the current sender
       useMultiInboxStore.getState().actions.setCurrentSender({
-        ethereumAddress: swcClient.account.address,
-        inboxId: xmtpClient.inboxId,
+        ethereumAddress: swcClient.account.address as IEthereumAddress,
+        inboxId: xmtpClient.inboxId as IXmtpInboxId,
       })
 
       await hydrateAuth()
     } catch (error) {
+      useAuthOnboardingStore.getState().actions.reset()
       captureErrorWithToast(error, {
         message: "Failed to login with passkey",
       })
@@ -194,10 +199,9 @@ export const AuthOnboardingContextProvider = (props: IAuthOnboardingContextProps
       authLogger.debug(`Smart wallet created`)
 
       // Step 3: Create XMTP Inbox
-      const signer = createXmtpSignerFromSwc(swcClient)
       const { data: xmtpClient, error: xmtpError } = await tryCatch(
         createXmtpClient({
-          inboxSigner: signer,
+          inboxSigner: createXmtpSignerFromSwc(swcClient),
         }),
       )
 
@@ -211,10 +215,11 @@ export const AuthOnboardingContextProvider = (props: IAuthOnboardingContextProps
 
       // Step 4: Set the current sender
       useMultiInboxStore.getState().actions.setCurrentSender({
-        ethereumAddress: swcClient.account.address,
-        inboxId: xmtpClient.inboxId,
+        ethereumAddress: swcClient.account.address as IEthereumAddress,
+        inboxId: xmtpClient.inboxId as IXmtpInboxId,
       })
     } catch (error) {
+      useAuthOnboardingStore.getState().actions.reset()
       captureErrorWithToast(error, {
         message: "Failed to sign up with passkey",
       })