feat: Group Names from network

src/components/GroupHeader.tsx

@@ -12,7 +12,7 @@
 interface GroupHeaderProps {
   peerAddresses: string[];
   onGroupPress: () => void;
-  groupId: string;
+  groupTopic: string;
 }
 
 const HeaderContainer: FC<PropsWithChildren> = ({children}) => {
@@ -33,10 +33,10 @@
 export const GroupHeader: FC<GroupHeaderProps> = ({
   peerAddresses,
   onGroupPress,
-  groupId,
+  groupTopic,
 }) => {
   const {goBack} = useTypedNavigation();
-  const groupDisplayName = useGroupName(peerAddresses, groupId);
+  const {groupName} = useGroupName(groupTopic);
 
   return (
     <HeaderContainer>
@@ -56,12 +56,12 @@
             typography="text-lg/heavy"
             numberOfLines={1}
             textAlign={'center'}>
-            {groupDisplayName}
+            {groupName}
           </Text>
         </VStack>
         <Pressable onPress={onGroupPress}>
           <GroupAvatarStack
             style={{paddingRight: 30}}
             addresses={peerAddresses}
           />
         </Pressable>

src/components/GroupListItem.tsx

@@ -21,7 +21,7 @@
   const topic = group?.topic;
   const {data: addresses} = useGroupParticipantsQuery(topic);
   const {navigate} = useTypedNavigation();
-  const groupName = useGroupName(addresses ?? [], topic);
+  const {groupName} = useGroupName(topic);
   const {data: messages, isLoading, isError} = useFirstGroupMessageQuery(topic);
   const firstMessage = messages?.[0];
 
@@ -57,7 +57,7 @@
       <HStack space={[2, 3]} alignItems={'center'} w={'100%'} padding={'16px'}>
         <Box marginRight={'30px'}>
           <GroupAvatarStack
             style={{paddingRight: 10}}
             addresses={addresses ?? []}
           />
         </Box>
@@ -78,7 +78,7 @@
           <Text
             alignSelf={'flex-start'}
             typography="text-xs/regular"
             style={{textAlignVertical: 'top'}}>
             {getMessageTimeDisplay(lastMessageTime)}
           </Text>
         )}

src/components/modals/GroupInfoModal.tsx

@@ -5,10 +5,9 @@
 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';
+import {useGroupName} from '../../hooks/useGroupName';
 import {translate} from '../../i18n';
-import {mmkvStorage} from '../../services/mmkvStorage';
 import {colors} from '../../theme/colors';
 import {AvatarWithFallback} from '../AvatarWithFallback';
 import {Button} from '../common/Button';
@@ -41,7 +40,7 @@
           {displayName}
         </Text>
         <AvatarWithFallback
           style={{marginLeft: 10}}
           size={40}
           address={address}
           avatarUri={avatarUrl}
@@ -85,7 +84,6 @@
   group,
   address: currentAddress,
 }) => {
-  const {client} = useClient();
   const [editing, setEditing] = useState(false);
   const [groupName, setGroupName] = useState('');
   const onRemovePress = useCallback(
@@ -103,19 +101,18 @@
     },
     [group, hide],
   );
+  const {groupName: currentGroupName, updateGroupName} = useGroupName(
+    group?.topic ?? '',
+  );
 
   const onBlur = useCallback(() => {
     if (!groupName) {
       return;
     }
-    mmkvStorage.saveGroupName(
-      client?.address ?? '',
-      group?.topic ?? '',
-      groupName,
-    );
+    updateGroupName(groupName);
     setEditing(false);
     setGroupName('');
-  }, [client?.address, group?.topic, groupName]);
+  }, [groupName, updateGroupName]);
 
   return (
     <Modal onBackgroundPress={hide} isOpen={shown}>
@@ -140,19 +137,14 @@
         ) : (
           <HStack w={'100%'} alignItems={'center'} justifyContent={'center'}>
             <Text typography="text-xl/bold" textAlign={'center'}>
-              {(!!group &&
-                mmkvStorage.getGroupName(
-                  client?.address ?? '',
-                  group?.topic,
-                )) ??
-                translate('group')}
+              {currentGroupName ?? translate('group')}
             </Text>
             <Pressable onPress={() => setEditing(true)} alignSelf={'flex-end'}>
               <Icon
                 name={'pencil-square'}
                 type={'mini'}
                 color={colors.actionPrimary}
                 style={{marginLeft: 8}}
               />
             </Pressable>
           </HStack>

src/hooks/useGroupName.ts

@@ -1,17 +1,14 @@
-import {useMemo} from 'react';
-import {mmkvStorage} from '../services/mmkvStorage';
-import {formatAddress} from '../utils/formatAddress';
-import {useClient} from './useClient';
+import {useGroupNameMutation} from '../mutations/useGroupNameMutation';
+import {useGroupNameQuery} from '../queries/useGroupNameQuery';
 
-export const useGroupName = (addresses: string[], groupId: string) => {
-  const {client} = useClient();
-  const data = useMemo(() => {
-    const groupDisplayName = addresses.map(formatAddress).join(', ');
-    return groupDisplayName;
-  }, [addresses]);
-  const savedGroupName = mmkvStorage.getGroupName(
-    client?.address ?? '',
-    groupId,
-  );
-  return savedGroupName ?? data;
+export const useGroupName = (groupTopic: string) => {
+  const {data: groupName} = useGroupNameQuery(groupTopic ?? '');
+  const {mutateAsync} = useGroupNameMutation(groupTopic ?? '');
+
+  return {
+    groupName,
+    updateGroupName: async (newGroupName: string) => {
+      await mutateAsync(newGroupName);
+    },
+  };
 };

src/mutations/MutationKeys.ts

@@ -0,0 +1,3 @@
+export const MutationKeys = {
+  GroupName: 'GroupName',
+};

src/mutations/useGroupNameMutation.ts

@@ -0,0 +1,23 @@
+import {useMutation} from '@tanstack/react-query';
+import {useGroup} from '../hooks/useGroup';
+import {QueryKeys} from '../queries/QueryKeys';
+import {queryClient} from '../services/queryClient';
+import {MutationKeys} from './MutationKeys';
+
+export interface GroupNameQueryOptions {
+  limit?: number;
+}
+
+export const useGroupNameMutation = (topic: string) => {
+  const {data: group} = useGroup(topic);
+
+  return useMutation({
+    mutationKey: [MutationKeys.GroupName, topic],
+    mutationFn: async (newGroupName: string) => {
+      return group?.updateGroupName(newGroupName);
+    },
+    onSuccess: (_, newGroupName) => {
+      queryClient.setQueryData([QueryKeys.GroupName, topic], newGroupName);
+    },
+  });
+};

src/queries/QueryKeys.ts

@@ -6,6 +6,7 @@ export enum QueryKeys {
   Groups = 'groups',
   GroupParticipants = 'group_participants',
   GroupMessages = 'group_messages',
+  GroupName = 'group_name',
   FirstGroupMessage = 'first_group_messages',
   FramesClient = 'frames_client',
   Frame = 'frame',

src/queries/useGroupNameQuery.ts

@@ -0,0 +1,22 @@
+import {useQuery} from '@tanstack/react-query';
+import {useGroup} from '../hooks/useGroup';
+import {QueryKeys} from './QueryKeys';
+
+export interface GroupNameQueryOptions {
+  limit?: number;
+}
+
+export const useGroupNameQuery = (topic: string) => {
+  const {data: group} = useGroup(topic);
+
+  return useQuery<string | undefined, unknown>({
+    queryKey: [QueryKeys.GroupName, topic],
+    queryFn: async () => {
+      if (!group) {
+        return undefined;
+      }
+      return group.groupName();
+    },
+    enabled: !!group,
+  });
+};

src/screens/GroupScreen.tsx

@@ -187,7 +187,7 @@ export const GroupScreen = () => {
         }}>
         <Box backgroundColor={colors.backgroundPrimary} paddingBottom={10}>
           <GroupHeader
-            groupId={group?.topic ?? ''}
+            groupTopic={group?.topic ?? ''}
             peerAddresses={addresses ?? []}
             onGroupPress={() => setShowGroupModal(true)}
           />

src/screens/NewConversationScreen.tsx

@@ -88,7 +88,7 @@ export const NewConversationScreen = () => {
           <GroupHeader
             peerAddresses={addresses}
             onGroupPress={() => {}}
-            groupId="new_convo"
+            groupTopic="new_convo"
           />
         ) : (
           <ConversationHeader

src/services/mmkvStorage.ts

@@ -23,7 +23,6 @@ enum MMKVKeys {
   IMAGE_CACHE = 'IMAGE_CACHE',
 
   // Groups
-  GROUP_NAME = 'GROUP_NAME',
   GROUP_ID_PUSH_SUBSCRIPTION = 'GROUP_ID_PUSH_SUBSCRIPTION',
   GROUP_PARTICIPANTS = 'GROUP_PARTICIPANTS',
   GROUP_CONSENT = 'GROUP_CONSENT',
@@ -243,26 +242,6 @@ class MMKVStorage {
 
   // #endregion
 
-  // #region Group Name
-
-  private getGroupNameKey = (address: string, topic: string) => {
-    return `${MMKVKeys.GROUP_NAME}_${address}_${topic}`;
-  };
-
-  saveGroupName = (address: string, topic: string, groupName: string) => {
-    return this.storage.set(this.getGroupNameKey(address, topic), groupName);
-  };
-
-  getGroupName = (address: string, topic: string) => {
-    return this.storage.getString(this.getGroupNameKey(address, topic));
-  };
-
-  clearGroupName = (address: string, topic: string) => {
-    return this.storage.delete(this.getGroupNameKey(address, topic));
-  };
-
-  //#endregion Group Name
-
   //#region Group Id Push Subscription
   private getGroupIdPushSubscriptionKey = (topic: string) => {
     return `${MMKVKeys.GROUP_ID_PUSH_SUBSCRIPTION}_${topic}`;