feat: Frames support

ios/Podfile.lock

@@ -1222,7 +1222,7 @@ PODS:
     - GzipSwift
     - LibXMTP (= 0.4.2-beta1)
     - web3.swift
-  - XMTPReactNative (1.27.0-beta.16):
+  - XMTPReactNative (1.28.0-beta.1):
     - ExpoModulesCore
     - MessagePacker
     - secp256k1.swift
@@ -1636,7 +1636,7 @@ SPEC CHECKSUMS:
   WatermelonDB: 842d22ba555425aa9f3ce551239a001200c539bc
   web3.swift: 2263d1e12e121b2c42ffb63a5a7beb1acaf33959
   XMTP: 35a0ca7e90bbabf4c49a862ae7750626324f55bf
-  XMTPReactNative: 4fb753f8ce7f7c151072d2723605a318b243f24e
+  XMTPReactNative: 6587faa646e66864b80e8bef0d2c248aebaae455
   Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047
 
 PODFILE CHECKSUM: c765268d8eab018a5f4619e1d00ca4dab437bc4f

package.json

@@ -28,7 +28,7 @@
     "@thirdweb-dev/react-native": "^0.5.4",
     "@thirdweb-dev/react-native-compat": "^0.5.4",
     "@xmtp/frames-client": "^0.3.2",
-    "@xmtp/react-native-sdk": "1.27.0-beta.16",
+    "@xmtp/react-native-sdk": "1.28.0-beta.1",
     "aws-sdk": "^2.1540.0",
     "ethers": "^5",
     "expo": ">=50.0.0-0 <51.0.0",

src/components/ConversationMessageContent.tsx

@@ -5,6 +5,7 @@ import {
 } from '@xmtp/react-native-sdk';
 import {Container, Image} from 'native-base';
 import React, {FC} from 'react';
+import {useWindowDimensions} from 'react-native';
 import {ContentTypes, SupportedContentTypes} from '../consts/ContentTypes';
 import {useFrame} from '../hooks/useFrame';
 import {translate} from '../i18n';
@@ -26,6 +27,7 @@ const TextMessage = ({
   isMe: boolean;
   message: DecodedMessage<SupportedContentTypes>;
 }) => {
+  const {width} = useWindowDimensions();
   const {frameData, postFrame} = useFrame(message.content() as string);
   if (!frameData) {
     return (
@@ -60,12 +62,16 @@ const TextMessage = ({
       <Image
         source={{uri: frameData.image}}
         alt="frame image"
-        height={200}
-        width={200}
+        height={150}
+        width={width / 2}
       />
-      {frameData.buttons.map((it, id) => (
-        <Button onPress={() => postFrame(id + 1)}>{it}</Button>
-      ))}
+      <Container flexWrap={'wrap'} flexDirection={'row'} width={'100%'}>
+        {frameData.buttons.map((it, id) => (
+          <Button key={String(it)} onPress={() => postFrame(id + 1)}>
+            {it}
+          </Button>
+        ))}
+      </Container>
     </Container>
   );
 };

src/components/modals/GroupInfoModal.tsx

@@ -3,6 +3,7 @@
 import React, {FC, useCallback, useState} from 'react';
 import {Alert, DeviceEventEmitter} from 'react-native';
 import {AppConfig} from '../../consts/AppConfig';
+import {SupportedContentTypes} from '../../consts/ContentTypes';
 import {EventEmitterEvents} from '../../consts/EventEmitters';
 import {useClient} from '../../hooks/useClient';
 import {useContactInfo} from '../../hooks/useContactInfo';
@@ -20,7 +21,7 @@
   hide: () => void;
   addresses: string[];
   onPlusPress: () => void;
-  group: Group<any>;
+  group?: Group<SupportedContentTypes>;
 }
 
 const GroupParticipant: React.FC<{
@@ -38,7 +39,7 @@
           {displayName}
         </Text>
         <AvatarWithFallback
           style={{marginLeft: 10}}
           size={40}
           address={address}
           avatarUri={avatarUrl}
@@ -85,9 +86,9 @@
   const onRemovePress = useCallback(
     async (address: string) => {
       try {
-        await group.removeMembers([address]);
+        await group?.removeMembers([address]);
         DeviceEventEmitter.emit(
-          `${EventEmitterEvents.GROUP_CHANGED}_${group.id}`,
+          `${EventEmitterEvents.GROUP_CHANGED}_${group?.id}`,
         );
         hide();
       } catch (err: any) {
@@ -102,10 +103,10 @@
     if (!groupName) {
       return;
     }
-    saveGroupName(client?.address ?? '', group.id, groupName);
+    saveGroupName(client?.address ?? '', group?.id ?? '', groupName);
     setEditing(false);
     setGroupName('');
-  }, [client?.address, group.id, groupName]);
+  }, [client?.address, group?.id, groupName]);
 
   return (
     <Modal onBackgroundPress={hide} isOpen={shown}>
@@ -130,7 +131,7 @@
         ) : (
           <HStack w={'100%'} alignItems={'center'} justifyContent={'center'}>
             <Text typography="text-xl/bold" textAlign={'center'}>
-              {getGroupName(client?.address ?? '', group.id) ??
+              {(!!group && getGroupName(client?.address ?? '', group?.id)) ??
                 translate('group')}
             </Text>
             <Pressable onPress={() => setEditing(true)} alignSelf={'flex-end'}>

src/hooks/useFrame.ts

@@ -3,18 +3,18 @@ import {useMutation} from 'wagmi';
 import {QueryKeys} from '../queries/QueryKeys';
 import {useFramesClient} from './useFramesClient';
 
+const urlRegex = /(https?:\/\/[^\s]+)/g;
+
 export const useFrame = (messageText: string) => {
   const {data: client} = useFramesClient();
   const {data: frameData} = useQuery({
     queryKey: [QueryKeys.Frame, messageText],
     queryFn: async () => {
-      console.log('messageText', messageText, !client);
       if (!client || !messageText || messageText.length === 0) {
         return null;
       }
       // extract a url from message text
-      const url = messageText.match(/(https?:\/\/[^\s]+)/g);
-      console.log('url', url);
+      const url = messageText.match(urlRegex);
       if (!url?.[0]) {
         return null;
       }
@@ -33,14 +33,14 @@ export const useFrame = (messageText: string) => {
           buttons.push(data?.extractedTags[key]);
         }
       });
-      console.log('postUrl', postUrl, data);
       return {
         image,
         postUrl,
         url: data.url,
         buttons,
       };
     },
+    enabled: Boolean(client),
   });
 
   const {mutateAsync, data} = useMutation({
@@ -49,14 +49,12 @@ export const useFrame = (messageText: string) => {
       if (!client || !frameData) {
         return null;
       }
-      console.log('frameData1', frameData);
       const signedPayload = await client.signFrameAction({
         frameUrl: frameData.url,
         buttonIndex,
         conversationTopic: 'foo',
         participantAccountAddresses: ['amal', 'bola'],
       });
-      console.log('signedPayload', signedPayload);
       const response = await client.proxy.post(
         frameData.postUrl,
         signedPayload,
@@ -72,7 +70,6 @@ export const useFrame = (messageText: string) => {
           buttons.push(response?.extractedTags[key]);
         }
       });
-      console.log('postUrl', postUrl, data);
       return {
         image,
         postUrl,

src/screens/ConversationScreen.tsx

@@ -3,7 +3,12 @@ import {useQueryClient} from '@tanstack/react-query';
 import {DecodedMessage, RemoteAttachmentContent} from '@xmtp/react-native-sdk';
 import {Box, FlatList, HStack, Pressable, VStack} from 'native-base';
 import React, {useCallback, useEffect, useState} from 'react';
-import {KeyboardAvoidingView, ListRenderItem, Platform} from 'react-native';
+import {
+  Alert,
+  KeyboardAvoidingView,
+  ListRenderItem,
+  Platform,
+} from 'react-native';
 import {Asset} from 'react-native-image-picker';
 import {ConversationHeader} from '../components/ConversationHeader';
 import {ConversationInput} from '../components/ConversationInput';
@@ -118,9 +123,13 @@ export const ConversationScreen = () => {
         return;
       }
       if (payload.text) {
-        conversation?.send(payload.text);
-      }
-      if (payload.asset) {
+        conversation
+          ?.send(payload.text)
+          .then(() => {})
+          .catch(err => {
+            Alert.alert('Error', err.message);
+          });
+      } else if (payload.asset) {
         client
           ?.encryptAttachment({
             fileUri: payload.asset.uri ?? '',

src/utils/getAllListMessages.ts

@@ -12,10 +12,14 @@ export const getAllListMessages = async (client?: Client<any> | null) => {
     if (!client) {
       return [];
     }
-    const consentList = await withRequestLogger(
-      client.contacts.refreshConsentList(),
-      {name: 'consent'},
-    );
+    const [consentList] = await Promise.all([
+      withRequestLogger(client.contacts.refreshConsentList(), {
+        name: 'consent',
+      }),
+      withRequestLogger(client.conversations.syncGroups(), {
+        name: 'group_sync',
+      }),
+    ]);
 
     consentList.forEach(async item => {
       saveConsent(
@@ -24,9 +28,6 @@ export const getAllListMessages = async (client?: Client<any> | null) => {
         item.permissionType === 'allowed',
       );
     });
-    await withRequestLogger(client.conversations.syncGroups(), {
-      name: 'group_sync',
-    });
 
     const [convos, groups] = await Promise.all([
       withRequestLogger(client.conversations.list(), {name: 'list'}),

yarn.lock

@@ -9544,10 +9544,10 @@
     rxjs "^7.8.0"
     undici "^5.8.1"
 
-"@xmtp/react-native-sdk@1.27.0-beta.16":
-  version "1.27.0-beta.16"
-  resolved "https://registry.yarnpkg.com/@xmtp/react-native-sdk/-/react-native-sdk-1.27.0-beta.16.tgz#2d3114471b5b4219041924b7024c8357d00fdf4c"
-  integrity sha512-GJ1Q5DiuEwRcfMOatcuJvACd/sRRnwDuSojkOSnkiyIGEh17rc6yMDRD999QyngHNM0tXB0jr84aHANBbOXmEg==
+"@xmtp/react-native-sdk@1.28.0-beta.1":
+  version "1.28.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@xmtp/react-native-sdk/-/react-native-sdk-1.28.0-beta.1.tgz#25c73e182a6747287b62f48e5988e8107cdbcbb1"
+  integrity sha512-uT7dBPfZNfCcLpZnyZN4uUzsqv0tud7xBgLtYW0iFzV4wzRHgoI7Yd48EQP1bvqV/pMjO2TzvRx+9+yMxT9j+Q==
   dependencies:
     "@ethersproject/bytes" "^5.7.0"
     "@msgpack/msgpack" "^3.0.0-beta2"