refactor: Refactor Conversation List

babel.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: [
+    ['@babel/plugin-proposal-decorators', {legacy: true}],
     '@babel/plugin-proposal-export-namespace-from',
     'react-native-reanimated/plugin',
   ],

src/components/ConversationInput.tsx

@@ -33,6 +33,8 @@ export const ConversationInput: FC<ConversationInputProps> = ({
   //   ? getDraftImage(currentAddress, topic) ?? null
   //   : null,
 
+  const textInputRef = React.createRef<TextInput>();
+
   useEffect(() => {
     if (text && currentAddress && id) {
       mmkvStorage.saveDraftText(currentAddress, id, text);
@@ -126,12 +128,15 @@ export const ConversationInput: FC<ConversationInputProps> = ({
         alignItems={'center'}
         borderBottomRightRadius={0}>
         <TextInput
+          ref={textInputRef}
           autoFocus
           value={text}
           style={styles.input}
           onChangeText={setText}
           onFocus={() => setFocus(true)}
           onBlur={() => setFocus(false)}
+          returnKeyType={canSend ? 'send' : 'default'}
+          onSubmitEditing={canSend ? handleSend : textInputRef.current?.blur}
         />
         <Pressable onPress={handleSend}>
           <Box

src/components/ConversationListHeader.tsx

@@ -0,0 +1,143 @@
+import {useAddress, useENS} from '@thirdweb-dev/react-native';
+import {Box, HStack, VStack} from 'native-base';
+import React, {FC, useCallback} from 'react';
+import {Pressable} from 'react-native';
+import {AvatarWithFallback} from '../components/AvatarWithFallback';
+import {Button} from '../components/common/Button';
+import {Icon} from '../components/common/Icon';
+import {Text} from '../components/common/Text';
+import {useTypedNavigation} from '../hooks/useTypedNavigation';
+import {translate} from '../i18n';
+import {ScreenNames} from '../navigation/ScreenNames';
+import {colors} from '../theme/colors';
+
+export interface ConversationListHeaderProps {
+  list: 'ALL_MESSAGES' | 'MESSAGE_REQUESTS';
+  showPickerModal: () => void;
+  messageRequestCount: number;
+  onShowMessageRequests: () => void;
+}
+
+export const ConversationListHeader: FC<ConversationListHeaderProps> = ({
+  list,
+  showPickerModal,
+  messageRequestCount,
+  onShowMessageRequests,
+}) => {
+  const {navigate} = useTypedNavigation();
+  const address = useAddress();
+  const {data} = useENS();
+  const {avatarUrl} = data ?? {};
+
+  const handleAccountPress = useCallback(() => {
+    navigate(ScreenNames.Account);
+  }, [navigate]);
+  const navigateToDev = useCallback(() => {
+    if (__DEV__) {
+      navigate(ScreenNames.Dev);
+    }
+  }, [navigate]);
+  return (
+    <VStack marginTop={'4px'}>
+      <HStack
+        w={'100%'}
+        justifyContent={'space-between'}
+        alignItems={'center'}
+        paddingX={'16px'}
+        paddingBottom={'8px'}>
+        <Pressable onPress={handleAccountPress}>
+          <AvatarWithFallback
+            address={address ?? ''}
+            avatarUri={avatarUrl}
+            size={40}
+          />
+        </Pressable>
+        <Box
+          borderRadius={'24px'}
+          zIndex={10}
+          paddingX={'16px'}
+          paddingY={'8px'}
+          backgroundColor={'white'}
+          shadow={4}>
+          <Box>
+            <Button
+              onLongPress={navigateToDev}
+              _pressed={{backgroundColor: 'transparent'}}
+              size={'sm'}
+              variant={'ghost'}
+              leftIcon={
+                <Icon
+                  name="chat-bubble-oval-left"
+                  size={16}
+                  type="mini"
+                  color="#0F172A"
+                />
+              }
+              rightIcon={
+                <Icon
+                  name="chevron-down-thick"
+                  size={16}
+                  type="mini"
+                  color="#0F172A"
+                />
+              }
+              onPress={showPickerModal}>
+              <Text typography="text-sm/heavy">
+                {list === 'ALL_MESSAGES'
+                  ? translate('all_messages')
+                  : translate('message_requests')}
+              </Text>
+            </Button>
+          </Box>
+        </Box>
+        <Box width={10} />
+      </HStack>
+      {list === 'MESSAGE_REQUESTS' ? (
+        <Box
+          backgroundColor={colors.actionAlertBG}
+          paddingY={'8px'}
+          paddingX={'16px'}>
+          <Text
+            typography="text-caption/regular"
+            textAlign={'center'}
+            color={colors.actionAlertText}>
+            {translate('message_requests_from_new_addresses')}
+          </Text>
+        </Box>
+      ) : messageRequestCount > 0 ? (
+        <Pressable onPress={onShowMessageRequests}>
+          <HStack
+            backgroundColor={colors.actionPrimary}
+            padding={'8px'}
+            borderRadius={'8px'}
+            alignItems={'center'}
+            marginX={'16px'}>
+            <Box paddingLeft={'8px'} paddingRight={'16px'}>
+              <Icon name="inbox-arrow-down" color={colors.actionPrimaryText} />
+            </Box>
+            <Text
+              flex={1}
+              color={colors.actionPrimaryText}
+              typography="text-xs/bold">
+              {translate('message_requests_count', {
+                count: String(messageRequestCount),
+              })}
+            </Text>
+            <Box
+              paddingLeft={'8px'}
+              paddingRight={'16px'}
+              justifyContent={'flex-end'}>
+              <Icon
+                name="chevron-right-thick"
+                size={16}
+                color={colors.actionPrimaryText}
+              />
+            </Box>
+          </HStack>
+        </Pressable>
+      ) : (
+        <Box />
+      )}
+    </VStack>
+  );
+};

src/components/GroupListItem.tsx

@@ -1,42 +1,73 @@
 import {Group} from '@xmtp/react-native-sdk/build/lib/Group';
 import {Box, HStack, VStack} from 'native-base';
-import React, {FC} from 'react';
+import React, {FC, useCallback, useMemo} from 'react';
 import {Pressable} from 'react-native';
 import {SupportedContentTypes} from '../consts/ContentTypes';
 import {useGroupName} from '../hooks/useGroupName';
 import {useTypedNavigation} from '../hooks/useTypedNavigation';
 import {ScreenNames} from '../navigation/ScreenNames';
+import {useFirstGroupMessageQuery} from '../queries/useFirstGroupMessageQuery';
 import {useGroupParticipantsQuery} from '../queries/useGroupParticipantsQuery';
 import {getMessageTimeDisplay} from '../utils/getMessageTimeDisplay';
 import {GroupAvatarStack} from './GroupAvatarStack';
 import {Text} from './common/Text';
 
 interface GroupListItemProps {
   group: Group<SupportedContentTypes>;
-  display: string;
-  lastMessageTime: number;
 }
 
-export const GroupListItem: FC<GroupListItemProps> = ({
-  group,
-  display,
-  lastMessageTime,
-}) => {
-  const {data: addresses} = useGroupParticipantsQuery(group?.id);
+export const GroupListItem: FC<GroupListItemProps> = ({group}) => {
+  const topic = group?.topic;
+  const {data: addresses} = useGroupParticipantsQuery(topic);
   const {navigate} = useTypedNavigation();
-  const groupName = useGroupName(addresses ?? [], group?.id);
+  const groupName = useGroupName(addresses ?? [], topic);
+  const {data: messages, isLoading, isError} = useFirstGroupMessageQuery(topic);
+  const firstMessage = messages?.[0];
+
+  const handlePress = useCallback(() => {
+    navigate(ScreenNames.Group, {
+      topic,
+    });
+  }, [topic, navigate]);
+
+  const display: string | undefined = useMemo(() => {
+    if (!firstMessage) {
+      return '';
+    }
+    let text = '';
+    try {
+      const content = firstMessage.content();
+      if (typeof content === 'string') {
+        text = content;
+      } else {
+        text = firstMessage.fallback ?? '';
+      }
+    } catch (e) {
+      text = firstMessage.fallback ?? '';
+    }
+    return text;
+  }, [firstMessage]);
+
+  const lastMessageTime: number | undefined = useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+    if (isError) {
+      return undefined;
+    }
+    if (!firstMessage) {
+      return undefined;
+    }
+
+    return firstMessage?.sent;
+  }, [firstMessage, isLoading, isError]);
 
   return (
-    <Pressable
-      onPress={() => {
-        navigate(ScreenNames.Group, {
-          id: group?.id,
-        });
-      }}>
+    <Pressable onPress={handlePress}>
       <HStack space={[2, 3]} alignItems={'center'} w={'100%'} padding={'16px'}>
         <Box marginRight={'30px'}>
           <GroupAvatarStack
             style={{paddingRight: 10}}
             addresses={addresses ?? []}
           />
         </Box>
@@ -47,16 +78,20 @@
             typography="text-base/bold">
             {groupName}
           </Text>
-          <Text numberOfLines={1} typography="text-sm/regular">
-            {display}
-          </Text>
+          {!isLoading && (
+            <Text numberOfLines={1} typography="text-sm/regular">
+              {display}
+            </Text>
+          )}
         </VStack>
-        <Text
-          alignSelf={'flex-start'}
-          typography="text-xs/regular"
-          style={{textAlignVertical: 'top'}}>
-          {getMessageTimeDisplay(lastMessageTime)}
-        </Text>
+        {lastMessageTime && (
+          <Text
+            alignSelf={'flex-start'}
+            typography="text-xs/regular"
+            style={{textAlignVertical: 'top'}}>
+            {getMessageTimeDisplay(lastMessageTime)}
+          </Text>
+        )}
       </HStack>
     </Pressable>
   );

src/components/modals/AddGroupParticipantModal.tsx

@@ -77,7 +77,7 @@ export const AddGroupParticipantModal: FC<GroupInfoModalProps> = ({
     try {
       await group.addMembers(participants);
       DeviceEventEmitter.emit(
-        `${EventEmitterEvents.GROUP_CHANGED}_${group.id}`,
+        `${EventEmitterEvents.GROUP_CHANGED}_${group.topic}`,
       );
       hide();
     } catch (err: any) {