Merge pull request #34 from Qortal/feature/add-group-avatar

Feature/add group avatar

electron/capacitor.config.ts

@@ -1,15 +1,15 @@
-import type { CapacitorConfig } from '@capacitor/cli';
+import type { CapacitorConfig } from "@capacitor/cli";
 
 const config: CapacitorConfig = {
-  appId: 'org.Qortal.Qortal-Hub',
+  appId: "org.Qortal.Qortal-Hub",
-  appName: 'Qortal-Hub',
+  appName: "Qortal-Hub",
-  webDir: 'dist',
+  webDir: "dist",
-  "plugins": {
+  plugins: {
-    "LocalNotifications": {
+    LocalNotifications: {
-      "smallIcon": "qort",
+      smallIcon: "qort",
-      "iconColor": "#09b6e8"
+      iconColor: "#09b6e8",
-    }
+    },
-  }
+  },
 };
 
 export default config;

src/App.tsx

@@ -100,17 +100,22 @@ import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
 import {
   canSaveSettingToQdnAtom,
   enabledDevModeAtom,
+  groupAnnouncementsAtom,
+  groupChatTimestampsAtom,
+  groupsOwnerNamesAtom,
   groupsPropertiesAtom,
   hasSettingsChangedAtom,
   isDisabledEditorEnterAtom,
   isUsingImportExportSettingsAtom,
   lastPaymentSeenTimestampAtom,
   mailsAtom,
+  mutedGroupsAtom,
   oldPinnedAppsAtom,
   qMailLastEnteredTimestampAtom,
   settingsLocalLastUpdatedAtom,
   settingsQDNLastUpdatedAtom,
   sortablePinnedAppsAtom,
+  timestampEnterDataAtom,
 } from './atoms/global';
 import { NotAuthenticated } from './ExtStates/NotAuthenticated';
 import { handleGetFileFromIndexedDB } from './utils/indexedDB';
@@ -477,6 +482,16 @@ function App() {
   const resetLastPaymentSeenTimestampAtom = useResetRecoilState(
     lastPaymentSeenTimestampAtom
   );
+  const resetGroupsOwnerNamesAtom = useResetRecoilState(groupsOwnerNamesAtom);
+  const resetGroupAnnouncementsAtom = useResetRecoilState(
+    groupAnnouncementsAtom
+  );
+  const resetMutedGroupsAtom = useResetRecoilState(mutedGroupsAtom);
+
+  const resetGroupChatTimestampsAtom = useResetRecoilState(
+    groupChatTimestampsAtom
+  );
+  const resetTimestampEnterAtom = useResetRecoilState(timestampEnterDataAtom);
 
   const resetAllRecoil = () => {
     resetAtomSortablePinnedAppsAtom();
@@ -489,6 +504,11 @@ function App() {
     resetAtomMailsAtom();
     resetGroupPropertiesAtom();
     resetLastPaymentSeenTimestampAtom();
+    resetGroupsOwnerNamesAtom();
+    resetGroupAnnouncementsAtom();
+    resetMutedGroupsAtom();
+    resetGroupChatTimestampsAtom();
+    resetTimestampEnterAtom();
   };
 
   const handleSetGlobalApikey = (key) => {

src/atoms/global.ts

@@ -192,8 +192,82 @@ export const groupsPropertiesAtom = atom({
   key: 'groupsPropertiesAtom',
   default: {},
 });
+export const groupsOwnerNamesAtom = atom({
+  key: 'groupsOwnerNamesAtom',
+  default: {},
+});
 
 export const isOpenBlockedModalAtom = atom({
   key: 'isOpenBlockedModalAtom',
   default: false,
 });
+
+export const groupsOwnerNamesSelector = selectorFamily({
+  key: 'groupsOwnerNamesSelector',
+  get:
+    (key) =>
+    ({ get }) => {
+      const data = get(groupsOwnerNamesAtom);
+      return data[key] || null; // Return the value for the key or null if not found
+    },
+});
+
+export const groupAnnouncementsAtom = atom({
+  key: 'groupAnnouncementsAtom',
+  default: {},
+});
+
+export const groupAnnouncementSelector = selectorFamily({
+  key: 'groupAnnouncementSelector',
+  get:
+    (key) =>
+    ({ get }) => {
+      const data = get(groupAnnouncementsAtom);
+      return data[key] || null; // Return the value for the key or null if not found
+    },
+});
+
+export const groupPropertySelector = selectorFamily({
+  key: 'groupPropertySelector',
+  get:
+    (key) =>
+    ({ get }) => {
+      const data = get(groupsPropertiesAtom);
+      return data[key] || null; // Return the value for the key or null if not found
+    },
+});
+
+export const mutedGroupsAtom = atom({
+  key: 'mutedGroupsAtom',
+  default: [],
+});
+
+export const groupChatTimestampsAtom = atom({
+  key: 'groupChatTimestampsAtom',
+  default: {},
+});
+
+export const groupChatTimestampSelector = selectorFamily({
+  key: 'groupChatTimestampSelector',
+  get:
+    (key) =>
+    ({ get }) => {
+      const data = get(groupChatTimestampsAtom);
+      return data[key] || null; // Return the value for the key or null if not found
+    },
+});
+
+export const timestampEnterDataAtom = atom({
+  key: 'timestampEnterDataAtom',
+  default: {},
+});
+
+export const timestampEnterDataSelector = selectorFamily({
+  key: 'timestampEnterDataSelector',
+  get:
+    (key) =>
+    ({ get }) => {
+      const data = get(timestampEnterDataAtom);
+      return data[key] || null; // Return the value for the key or null if not found
+    },
+});

src/components/Chat/AdminSpace.tsx

@@ -15,6 +15,8 @@ export const AdminSpace = ({
   defaultThread,
   setDefaultThread,
   setIsForceShowCreationKeyPopup,
+  balance,
+  isOwner,
 }) => {
   const { rootHeight } = useContext(MyContext);
   const [isMoved, setIsMoved] = useState(false);
@@ -37,6 +39,7 @@ export const AdminSpace = ({
         position: hide ? 'fixed' : 'relative',
         visibility: hide && 'hidden',
         width: '100%',
+        overflow: 'auto',
       }}
     >
       {!isAdmin && (
@@ -56,6 +59,9 @@ export const AdminSpace = ({
           setIsForceShowCreationKeyPopup={setIsForceShowCreationKeyPopup}
           adminsWithNames={adminsWithNames}
           selectedGroup={selectedGroup}
+          balance={balance}
+          userInfo={userInfo}
+          isOwner={isOwner}
         />
       )}
     </div>

src/components/Chat/AdminSpaceInner.tsx

@@ -15,6 +15,7 @@ import { base64ToUint8Array } from '../../qdn/encryption/group-encryption';
 import { uint8ArrayToObject } from '../../backgroundFunctions/encryption';
 import { formatTimestampForum } from '../../utils/time';
 import { Spacer } from '../../common/Spacer';
+import { GroupAvatar } from '../GroupAvatar';
 
 export const getPublishesFromAdminsAdminSpace = async (
   admins: string[],
@@ -53,6 +54,9 @@ export const AdminSpaceInner = ({
   selectedGroup,
   adminsWithNames,
   setIsForceShowCreationKeyPopup,
+  balance,
+  userInfo,
+  isOwner,
 }) => {
   const [adminGroupSecretKey, setAdminGroupSecretKey] = useState(null);
   const [isFetchingAdminGroupSecretKey, setIsFetchingAdminGroupSecretKey] =
@@ -282,6 +286,32 @@ export const AdminSpaceInner = ({
           content encrypted with it.
         </Typography>
       </Box>
+      <Spacer height="25px" />
+      {isOwner && (
+        <Box
+          sx={{
+            border: '1px solid gray',
+            borderRadius: '6px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '20px',
+            maxWidth: '90%',
+            padding: '10px',
+            width: '300px',
+            alignItems: 'center',
+          }}
+        >
+          <Typography>Group Avatar</Typography>
+
+          <GroupAvatar
+            setOpenSnack={setOpenSnackGlobal}
+            setInfoSnack={setInfoSnackCustom}
+            myName={userInfo?.name}
+            balance={balance}
+            groupId={selectedGroup}
+          />
+        </Box>
+      )}
     </Box>
   );
 };

src/components/Chat/MessageItem.tsx

@@ -75,6 +75,21 @@ const getBadgeImg = (level) => {
   }
 };
 
+const UserBadge = React.memo(({ userInfo }) => {
+  return (
+    <Tooltip disableFocusListener title={`level ${userInfo ?? 0}`}>
+      <img
+        style={{
+          visibility: userInfo !== undefined ? 'visible' : 'hidden',
+          width: '30px',
+          height: 'auto',
+        }}
+        src={getBadgeImg(userInfo)}
+      />
+    </Tooltip>
+  );
+});
+
 export const MessageItem = React.memo(
   ({
     message,
@@ -210,16 +225,7 @@ export const MessageItem = React.memo(
                     {message?.senderName?.charAt(0)}
                   </Avatar>
                 </WrapperUserAction>
-                <Tooltip disableFocusListener title={`level ${userInfo ?? 0}`}>
+                <UserBadge userInfo={userInfo} />
-                  <img
-                    style={{
-                      visibility: userInfo !== undefined ? 'visible' : 'hidden',
-                      width: '30px',
-                      height: 'auto',
-                    }}
-                    src={getBadgeImg(userInfo)}
-                  />
-                </Tooltip>
               </Box>
             )}
 

src/components/Chat/TipTap.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { EditorProvider, useCurrentEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { Color } from '@tiptap/extension-color';
@@ -41,7 +41,8 @@ function textMatcher(doc, from) {
   return { start, query };
 }
 
-const MenuBar = ({
+const MenuBar = React.memo(
+  ({
     setEditorRef,
     isChat,
     isDisabledEditorEnter,
@@ -51,16 +52,16 @@ const MenuBar = ({
     const fileInputRef = useRef(null);
     const theme = useTheme();
 
-  if (!editor) {
-    return null;
-  }
-
     useEffect(() => {
       if (editor && setEditorRef) {
         setEditorRef(editor);
       }
     }, [editor, setEditorRef]);
 
+    if (!editor) {
+      return null;
+    }
+
     const handleImageUpload = async (file) => {
       let compressedFile;
       await new Promise<void>((resolve) => {
@@ -329,7 +330,8 @@ const MenuBar = ({
         </div>
       </div>
     );
-};
+  }
+);
 
 const extensions = [
   Color.configure({ types: [TextStyle.name, ListItem.name] }),
@@ -373,10 +375,10 @@ export default ({
     ? extensions.filter((item) => item?.name !== 'image')
     : extensions;
   const editorRef = useRef(null);
-  const setEditorRefFunc = (editorInstance) => {
+  const setEditorRefFunc = useCallback((editorInstance) => {
     editorRef.current = editorInstance;
     setEditorRef(editorInstance);
-  };
+  }, []);
 
   // const users = [
   //   { id: 1, label: 'Alice' },

src/components/ContextMenu.tsx

@@ -10,6 +10,8 @@ import {
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
 import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
 import { executeEvent } from '../utils/events';
+import { useRecoilState } from 'recoil';
+import { mutedGroupsAtom } from '../atoms/global';
 
 const CustomStyledMenu = styled(Menu)(({ theme }) => ({
   '& .MuiPaper-root': {
@@ -28,16 +30,12 @@ const CustomStyledMenu = styled(Menu)(({ theme }) => ({
   },
 }));
 
-export const ContextMenu = ({
+export const ContextMenu = ({ children, groupId, getUserSettings }) => {
-  children,
-  groupId,
-  getUserSettings,
-  mutedGroups,
-}) => {
   const [menuPosition, setMenuPosition] = useState(null);
   const longPressTimeout = useRef(null);
   const preventClick = useRef(false); // Flag to prevent click after long-press or right-click
   const theme = useTheme();
+  const [mutedGroups] = useRecoilState(mutedGroupsAtom);
   const isMuted = useMemo(() => {
     return mutedGroups.includes(groupId);
   }, [mutedGroups, groupId]);

src/components/Group/AddGroup.tsx

@@ -199,6 +199,8 @@ export const AddGroup = ({ address, open, setOpen }) => {
     };
   }, []);
 
+  if (!open) return null;
+
   return (
     <Fragment>
       <Dialog

src/components/Group/Group.tsx

@@ -68,9 +68,14 @@ import { AdminSpace } from '../Chat/AdminSpace';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import {
   addressInfoControllerAtom,
+  groupAnnouncementsAtom,
+  groupChatTimestampsAtom,
+  groupsOwnerNamesAtom,
   groupsPropertiesAtom,
   isOpenBlockedModalAtom,
+  mutedGroupsAtom,
   selectedGroupIdAtom,
+  timestampEnterDataAtom,
 } from '../../atoms/global';
 import { sortArrayByTimestampAndGroupName } from '../../utils/time';
 import PersonOffIcon from '@mui/icons-material/PersonOff';
@@ -79,6 +84,7 @@ import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmail
 import { BlockedUsersModal } from './BlockedUsersModal';
 import { WalletsAppWrapper } from './WalletsAppWrapper';
 import { useTranslation } from 'react-i18next';
+import { GroupList } from './GroupList';
 
 export const getPublishesFromAdmins = async (admins: string[], groupId) => {
   const queryString = admins.map((name) => `name=${name}`).join('&');
@@ -116,7 +122,7 @@ interface GroupProps {
   balance: number;
 }
 
-const timeDifferenceForNotificationChats = 900000;
+export const timeDifferenceForNotificationChats = 900000;
 
 export const requestQueueMemberNames = new RequestQueueWithPromise(5);
 export const requestQueueAdminMemberNames = new RequestQueueWithPromise(5);
@@ -409,7 +415,9 @@ export const Group = ({
   const { setMemberGroups, rootHeight, isRunningPublicNode } =
     useContext(MyContext);
   const lastGroupNotification = useRef<null | number>(null);
-  const [timestampEnterData, setTimestampEnterData] = useState({});
+  const [timestampEnterData, setTimestampEnterData] = useRecoilState(
+    timestampEnterDataAtom
+  );
   const [chatMode, setChatMode] = useState('groups');
   const [newChat, setNewChat] = useState(false);
   const [openSnack, setOpenSnack] = React.useState(false);
@@ -420,7 +428,10 @@ export const Group = ({
   const [firstSecretKeyInCreation, setFirstSecretKeyInCreation] =
     React.useState(false);
   const [groupSection, setGroupSection] = React.useState('home');
-  const [groupAnnouncements, setGroupAnnouncements] = React.useState({});
+  const [groupAnnouncements, setGroupAnnouncements] = useRecoilState(
+    groupAnnouncementsAtom
+  );
+
   const [defaultThread, setDefaultThread] = React.useState(null);
   const [isOpenDrawer, setIsOpenDrawer] = React.useState(false);
   const setIsOpenBlockedUserModal = useSetRecoilState(isOpenBlockedModalAtom);
@@ -428,7 +439,7 @@ export const Group = ({
   const [hideCommonKeyPopup, setHideCommonKeyPopup] = React.useState(false);
   const [isLoadingGroupMessage, setIsLoadingGroupMessage] = React.useState('');
   const [drawerMode, setDrawerMode] = React.useState('groups');
-  const [mutedGroups, setMutedGroups] = useState([]);
+  const setMutedGroups = useSetRecoilState(mutedGroupsAtom);
   const [mobileViewMode, setMobileViewMode] = useState('home');
   const [mobileViewModeKeepOpen, setMobileViewModeKeepOpen] = useState('');
   const isFocusedRef = useRef(true);
@@ -442,17 +453,23 @@ export const Group = ({
   const settimeoutForRefetchSecretKey = useRef(null);
   const { clearStatesMessageQueueProvider } = useMessageQueue();
   const initiatedGetMembers = useRef(false);
-  const [groupChatTimestamps, setGroupChatTimestamps] = React.useState({});
+  const [groupChatTimestamps, setGroupChatTimestamps] = useRecoilState(
+    groupChatTimestampsAtom
+  );
   const [appsMode, setAppsMode] = useState('home');
   const [appsModeDev, setAppsModeDev] = useState('home');
   const [isOpenSideViewDirects, setIsOpenSideViewDirects] = useState(false);
   const [isOpenSideViewGroups, setIsOpenSideViewGroups] = useState(false);
   const [isForceShowCreationKeyPopup, setIsForceShowCreationKeyPopup] =
     useState(false);
+  const groupsOwnerNamesRef = useRef({});
   const { t } = useTranslation(['core', 'group']);
 
   const [groupsProperties, setGroupsProperties] =
     useRecoilState(groupsPropertiesAtom);
+  const [groupsOwnerNames, setGroupsOwnerNames] =
+    useRecoilState(groupsOwnerNamesAtom);
+
   const setUserInfoForLevels = useSetRecoilState(addressInfoControllerAtom);
 
   const isPrivate = useMemo(() => {
@@ -495,7 +512,7 @@ export const Group = ({
     selectedDirectRef.current = selectedDirect;
   }, [selectedDirect]);
 
-  const getUserSettings = async () => {
+  const getUserSettings = useCallback(async () => {
     try {
       return new Promise((res, rej) => {
         window
@@ -517,13 +534,13 @@ export const Group = ({
     } catch (error) {
       console.log('error', error);
     }
-  };
+  }, [setMutedGroups]);
 
   useEffect(() => {
     getUserSettings();
-  }, []);
+  }, [getUserSettings]);
 
-  const getTimestampEnterChat = async () => {
+  const getTimestampEnterChat = useCallback(async () => {
     try {
       return new Promise((res, rej) => {
         window
@@ -543,7 +560,7 @@ export const Group = ({
     } catch (error) {
       console.log(error);
     }
-  };
+  }, []);
 
   const refreshHomeDataFunc = () => {
     setGroupSection('default');
@@ -645,41 +662,45 @@ export const Group = ({
     return hasUnread;
   }, [groupAnnouncements, groups]);
 
-  const getSecretKey = async (
+  const getSecretKey = useCallback(
-    loadingGroupParam?: boolean,
+    async (loadingGroupParam?: boolean, secretKeyToPublish?: boolean) => {
-    secretKeyToPublish?: boolean
-  ) => {
       try {
         setIsLoadingGroupMessage('Locating encryption keys');
         pauseAllQueues();
+
         let dataFromStorage;
         let publishFromStorage;
         let adminsFromStorage;
+
         if (
           secretKeyToPublish &&
           secretKey &&
           lastFetchedSecretKey.current &&
           Date.now() - lastFetchedSecretKey.current < 600000
-      )
+        ) {
           return secretKey;
+        }
+
         if (loadingGroupParam) {
           setIsLoadingGroup(true);
         }
+
         if (selectedGroup?.groupId !== selectedGroupRef.current.groupId) {
           if (settimeoutForRefetchSecretKey.current) {
             clearTimeout(settimeoutForRefetchSecretKey.current);
           }
           return;
         }
+
         const prevGroupId = selectedGroupRef.current.groupId;
-      // const validApi = await findUsableApi();
+
         const { names, addresses, both } =
           adminsFromStorage || (await getGroupAdmins(selectedGroup?.groupId));
         setAdmins(addresses);
         setAdminsWithNames(both);
-      if (!names.length) {
+
-        throw new Error('Network error');
+        if (!names.length) throw new Error('Network error');
-      }
+
         const publish =
           publishFromStorage ||
           (await getPublishesFromAdmins(names, selectedGroup?.groupId));
@@ -690,6 +711,7 @@ export const Group = ({
           }
           return;
         }
+
         if (publish === false) {
           setTriedToFetchSecretKey(true);
           settimeoutForRefetchSecretKey.current = setTimeout(() => {
@@ -697,29 +719,33 @@ export const Group = ({
           }, 120000);
           return false;
         }
+
         setSecretKeyPublishDate(publish?.updated || publish?.created);
+
         let data;
         if (dataFromStorage) {
           data = dataFromStorage;
         } else {
-        // const shouldRebuild = !secretKeyPublishDate || (publish?.update && publish?.updated > secretKeyPublishDate)
           setIsLoadingGroupMessage('Downloading encryption keys');
           const res = await fetch(
-          `${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${publish.name}/${
+            `${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${publish.name}/${publish.identifier}?encoding=base64&rebuild=true`
-            publish.identifier
-          }?encoding=base64&rebuild=true`
           );
           data = await res.text();
         }
+
         const decryptedKey: any = await decryptResource(data);
         const dataint8Array = base64ToUint8Array(decryptedKey.data);
         const decryptedKeyToObject = uint8ArrayToObject(dataint8Array);
-      if (!validateSecretKey(decryptedKeyToObject))
+
+        if (!validateSecretKey(decryptedKeyToObject)) {
           throw new Error('SecretKey is not valid');
+        }
+
         setSecretKeyDetails(publish);
         setSecretKey(decryptedKeyToObject);
         lastFetchedSecretKey.current = Date.now();
         setMemberCountFromSecretKeyData(decryptedKey.count);
+
         window
           .sendMessage('setGroupData', {
             groupId: selectedGroup?.groupId,
@@ -753,7 +779,22 @@ export const Group = ({
         setIsLoadingGroupMessage('');
         resumeAllQueues();
       }
-  };
+    },
+    [
+      secretKey,
+      selectedGroup?.groupId,
+      setIsLoadingGroup,
+      setIsLoadingGroupMessage,
+      setSecretKey,
+      setSecretKeyDetails,
+      setTriedToFetchSecretKey,
+      setFirstSecretKeyInCreation,
+      setMemberCountFromSecretKeyData,
+      setAdmins,
+      setAdminsWithNames,
+      setSecretKeyPublishDate,
+    ]
+  );
 
   const getAdminsForPublic = async (selectedGroup) => {
     try {
@@ -826,6 +867,24 @@ export const Group = ({
     }
   };
 
+  const getOwnerNameForGroup = async (owner: string, groupId: string) => {
+    try {
+      if (!owner) return;
+      if (groupsOwnerNamesRef.current[groupId]) return;
+      const name = await requestQueueMemberNames.enqueue(() => {
+        return getNameInfo(owner);
+      });
+      if (name) {
+        groupsOwnerNamesRef.current[groupId] = name;
+        setGroupsOwnerNames((prev) => {
+          return { ...prev, [groupId]: name };
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   const getGroupsProperties = useCallback(async (address) => {
     try {
       const url = `${getBaseApiReact()}/groups/member/${address}`;
@@ -837,6 +896,9 @@ export const Group = ({
         return result;
       }, {});
       setGroupsProperties(transformToObject);
+      Object.keys(transformToObject).forEach((key) => {
+        getOwnerNameForGroup(transformToObject[key]?.owner || '', key);
+      });
     } catch (error) {
       console.log(error);
     }
@@ -1468,9 +1530,9 @@ export const Group = ({
     };
   }, [groups, selectedGroup]);
 
-  const handleSecretKeyCreationInProgress = () => {
+  const handleSecretKeyCreationInProgress = useCallback(() => {
     setFirstSecretKeyInCreation(true);
-  };
+  }, []);
 
   const goToHome = async () => {
     setDesktopViewMode('home');
@@ -1781,112 +1843,7 @@ export const Group = ({
     );
   };
 
-  const renderGroups = () => {
+  const selectGroupFunc = useCallback((group) => {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          width: '380px',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          height: '100%',
-          background: theme.palette.background.surface,
-          borderRadius: '0px 15px 15px 0px',
-          padding: '0px 2px',
-        }}
-      >
-        <Box
-          sx={{
-            width: '100%',
-            alignItems: 'center',
-            justifyContent: 'center',
-            display: 'flex',
-            gap: '10px',
-          }}
-        >
-          <ButtonBase
-            onClick={() => {
-              setDesktopSideView('groups');
-            }}
-          >
-            <IconWrapper
-              color={
-                groupChatHasUnread || groupsAnnHasUnread
-                  ? theme.palette.other.unread
-                  : desktopSideView === 'groups'
-                    ? theme.palette.text.primary
-                    : theme.palette.text.secondary
-              }
-              label="Groups"
-              selected={desktopSideView === 'groups'}
-              customWidth="75px"
-            >
-              <HubsIcon
-                height={24}
-                color={
-                  groupChatHasUnread || groupsAnnHasUnread
-                    ? theme.palette.other.unread
-                    : desktopSideView === 'groups'
-                      ? theme.palette.text.primary
-                      : theme.palette.text.secondary
-                }
-              />
-            </IconWrapper>
-          </ButtonBase>
-          <ButtonBase
-            onClick={() => {
-              setDesktopSideView('directs');
-            }}
-          >
-            <IconWrapper
-              customWidth="75px"
-              color={
-                directChatHasUnread
-                  ? theme.palette.other.unread
-                  : desktopSideView === 'directs'
-                    ? theme.palette.text.primary
-                    : theme.palette.text.secondary
-              }
-              label="Messaging"
-              selected={desktopSideView === 'directs'}
-            >
-              <MessagingIcon
-                height={24}
-                color={
-                  directChatHasUnread
-                    ? theme.palette.other.unread
-                    : desktopSideView === 'directs'
-                      ? theme.palette.text.primary
-                      : theme.palette.text.secondary
-                }
-              />
-            </IconWrapper>
-          </ButtonBase>
-        </Box>
-
-        <div
-          style={{
-            alignItems: 'flex-start',
-            display: 'flex',
-            flexDirection: 'column',
-            flexGrow: 1,
-            left: chatMode === 'directs' && '-1000px',
-            overflowY: 'auto',
-            position: chatMode === 'directs' && 'fixed',
-            visibility: chatMode === 'directs' && 'hidden',
-            width: '100%',
-          }}
-        >
-          {groups.map((group: any) => (
-            <List
-              sx={{
-                width: '100%',
-              }}
-              className="group-list"
-              dense={true}
-            >
-              <ListItem
-                onClick={() => {
     setMobileViewMode('group');
     setDesktopSideView('groups');
     initiatedGetMembers.current = false;
@@ -1913,200 +1870,7 @@ export const Group = ({
     setTimeout(() => {
       setSelectedGroup(group);
     }, 200);
-                }}
+  }, []);
-                sx={{
-                  display: 'flex',
-                  background:
-                    group?.groupId === selectedGroup?.groupId &&
-                    theme.palette.action.selected,
-                  borderRadius: '2px',
-                  cursor: 'pointer',
-                  flexDirection: 'column',
-                  padding: '2px',
-                  width: '100%',
-                  '&:hover': {
-                    backgroundColor: 'action.hover', // background on hover
-                  },
-                }}
-              >
-                <ContextMenu
-                  mutedGroups={mutedGroups}
-                  getUserSettings={getUserSettings}
-                  groupId={group.groupId}
-                >
-                  <Box
-                    sx={{
-                      alignItems: 'center',
-                      display: 'flex',
-                      width: '100%',
-                    }}
-                  >
-                    <ListItemAvatar>
-                      {groupsProperties[group?.groupId]?.isOpen === false ? (
-                        <Box
-                          sx={{
-                            alignItems: 'center',
-                            background: theme.palette.background.default,
-                            borderRadius: '50%',
-                            display: 'flex',
-                            height: '40px',
-                            justifyContent: 'center',
-                            width: '40px',
-                          }}
-                        >
-                          {/* <Avatar src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
-                    app?.name
-                  }/qortal_avatar?async=true`} /> */}
-                          <LockIcon
-                            sx={{
-                              color: theme.palette.other.positive,
-                            }}
-                          />
-                        </Box>
-                      ) : (
-                        <Box
-                          sx={{
-                            alignItems: 'center',
-                            background: theme.palette.background.default,
-                            borderRadius: '50%',
-                            display: 'flex',
-                            height: '40px',
-                            justifyContent: 'center',
-                            width: '40px',
-                          }}
-                        >
-                          <NoEncryptionGmailerrorredIcon
-                            sx={{
-                              color: theme.palette.other.danger,
-                            }}
-                          />
-                        </Box>
-                      )}
-                    </ListItemAvatar>
-                    <ListItemText
-                      primary={
-                        group.groupId === '0' ? 'General' : group.groupName
-                      }
-                      secondary={
-                        !group?.timestamp
-                          ? 'no messages'
-                          : `last message: ${formatEmailDate(group?.timestamp)}`
-                      }
-                      primaryTypographyProps={{
-                        style: {
-                          color:
-                            group?.groupId === selectedGroup?.groupId &&
-                            theme.palette.text.primary,
-                          fontSize: '16px',
-                        },
-                      }} // Change the color of the primary text
-                      secondaryTypographyProps={{
-                        style: {
-                          color:
-                            group?.groupId === selectedGroup?.groupId &&
-                            theme.palette.text.primary,
-                          fontSize: '12px',
-                        },
-                      }}
-                      sx={{
-                        width: '150px',
-                        fontFamily: 'Inter',
-                        fontSize: '16px',
-                      }}
-                    />
-                    {groupAnnouncements[group?.groupId] &&
-                      !groupAnnouncements[group?.groupId]?.seentimestamp && (
-                        <CampaignIcon
-                          sx={{
-                            color: theme.palette.other.unread,
-                            marginRight: '5px',
-                          }}
-                        />
-                      )}
-                    {group?.data &&
-                      groupChatTimestamps[group?.groupId] &&
-                      group?.sender !== myAddress &&
-                      group?.timestamp &&
-                      ((!timestampEnterData[group?.groupId] &&
-                        Date.now() - group?.timestamp <
-                          timeDifferenceForNotificationChats) ||
-                        timestampEnterData[group?.groupId] <
-                          group?.timestamp) && (
-                        <MarkChatUnreadIcon
-                          sx={{
-                            color: theme.palette.other.unread,
-                          }}
-                        />
-                      )}
-                  </Box>
-                </ContextMenu>
-              </ListItem>
-            </List>
-          ))}
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            gap: '10px',
-            justifyContent: 'center',
-            padding: '10px',
-            width: '100%',
-          }}
-        >
-          {chatMode === 'groups' && (
-            <>
-              <CustomButton
-                onClick={() => {
-                  setOpenAddGroup(true);
-                }}
-              >
-                <AddCircleOutlineIcon
-                  sx={{
-                    color: theme.palette.text.primary,
-                  }}
-                />
-                Group
-              </CustomButton>
-
-              {!isRunningPublicNode && (
-                <CustomButton
-                  onClick={() => {
-                    setIsOpenBlockedUserModal(true);
-                  }}
-                  sx={{
-                    minWidth: 'unset',
-                    padding: '10px',
-                  }}
-                >
-                  <PersonOffIcon
-                    sx={{
-                      color: theme.palette.text.primary,
-                    }}
-                  />
-                </CustomButton>
-              )}
-            </>
-          )}
-          {chatMode === 'directs' && (
-            <CustomButton
-              onClick={() => {
-                setNewChat(true);
-                setSelectedDirect(null);
-                setIsOpenDrawer(false);
-              }}
-            >
-              <CreateIcon
-                sx={{
-                  color: theme.palette.text.primary,
-                }}
-              />
-              New Chat
-            </CustomButton>
-          )}
-        </div>
-      </div>
-    );
-  };
 
   return (
     <>
@@ -2151,9 +1915,24 @@ export const Group = ({
           />
         )}
 
-        {desktopViewMode === 'chat' &&
+        {desktopViewMode === 'chat' && desktopSideView !== 'directs' && (
-          desktopSideView !== 'directs' &&
+          <GroupList
-          renderGroups()}
+            selectGroupFunc={selectGroupFunc}
+            setDesktopSideView={setDesktopSideView}
+            groupChatHasUnread={groupChatHasUnread}
+            groupsAnnHasUnread={groupsAnnHasUnread}
+            desktopSideView={desktopSideView}
+            directChatHasUnread={directChatHasUnread}
+            chatMode={chatMode}
+            groups={groups}
+            selectedGroup={selectedGroup}
+            getUserSettings={getUserSettings}
+            setOpenAddGroup={setOpenAddGroup}
+            isRunningPublicNode={isRunningPublicNode}
+            setIsOpenBlockedUserModal={setIsOpenBlockedUserModal}
+            myAddress={myAddress}
+          />
+        )}
 
         {desktopViewMode === 'chat' &&
           desktopSideView === 'directs' &&
@@ -2293,7 +2072,7 @@ export const Group = ({
                   isPrivate={isPrivate}
                   setSecretKey={setSecretKey}
                   handleNewEncryptionNotification={setNewEncryptionNotification}
-                  hide={groupSection !== 'chat' || selectedDirect || newChat}
+                  hide={groupSection !== 'chat' || !!selectedDirect || newChat}
                   hideView={!(desktopViewMode === 'chat' && selectedGroup)}
                   handleSecretKeyCreationInProgress={
                     handleSecretKeyCreationInProgress
@@ -2431,10 +2210,12 @@ export const Group = ({
                       }
                       adminsWithNames={adminsWithNames}
                       selectedGroup={selectedGroup?.groupId}
+                      isOwner={groupOwner?.owner === myAddress}
                       myAddress={myAddress}
                       userInfo={userInfo}
                       hide={groupSection !== 'adminSpace'}
                       isAdmin={admins.includes(myAddress)}
+                      balance={balance}
                     />
                   )}
                 </>

src/components/Group/GroupList.tsx

@@ -0,0 +1,348 @@
+import {
+  Avatar,
+  Box,
+  ButtonBase,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  useTheme,
+} from '@mui/material';
+import React, { useCallback } from 'react';
+import { IconWrapper } from '../Desktop/DesktopFooter';
+import { HubsIcon } from '../../assets/Icons/HubsIcon';
+import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
+import { ContextMenu } from '../ContextMenu';
+import { getBaseApiReact } from '../../App';
+import { formatEmailDate } from './QMailMessages';
+import CampaignIcon from '@mui/icons-material/Campaign';
+import MarkChatUnreadIcon from '@mui/icons-material/MarkChatUnread';
+import LockIcon from '@mui/icons-material/Lock';
+import { CustomButton } from '../../styles/App-styles';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import PersonOffIcon from '@mui/icons-material/PersonOff';
+import {
+  groupAnnouncementSelector,
+  groupChatTimestampSelector,
+  groupPropertySelector,
+  groupsOwnerNamesSelector,
+  timestampEnterDataSelector,
+} from '../../atoms/global';
+import { useRecoilValue } from 'recoil';
+import { timeDifferenceForNotificationChats } from './Group';
+
+export const GroupList = ({
+  selectGroupFunc,
+  setDesktopSideView,
+  groupChatHasUnread,
+  groupsAnnHasUnread,
+  desktopSideView,
+  directChatHasUnread,
+  chatMode,
+  groups,
+  selectedGroup,
+  getUserSettings,
+  setOpenAddGroup,
+  isRunningPublicNode,
+  setIsOpenBlockedUserModal,
+  myAddress,
+}) => {
+  const theme = useTheme();
+  return (
+    <div
+      style={{
+        display: 'flex',
+        width: '380px',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        height: '100%',
+        background: theme.palette.background.surface,
+        borderRadius: '0px 15px 15px 0px',
+        padding: '0px 2px',
+      }}
+    >
+      <Box
+        sx={{
+          width: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          display: 'flex',
+          gap: '10px',
+        }}
+      >
+        <ButtonBase
+          onClick={() => {
+            setDesktopSideView('groups');
+          }}
+        >
+          <IconWrapper
+            color={
+              groupChatHasUnread || groupsAnnHasUnread
+                ? theme.palette.other.unread
+                : desktopSideView === 'groups'
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
+            }
+            label="Groups"
+            selected={desktopSideView === 'groups'}
+            customWidth="75px"
+          >
+            <HubsIcon
+              height={24}
+              color={
+                groupChatHasUnread || groupsAnnHasUnread
+                  ? theme.palette.other.unread
+                  : desktopSideView === 'groups'
+                    ? theme.palette.text.primary
+                    : theme.palette.text.secondary
+              }
+            />
+          </IconWrapper>
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setDesktopSideView('directs');
+          }}
+        >
+          <IconWrapper
+            customWidth="75px"
+            color={
+              directChatHasUnread
+                ? theme.palette.other.unread
+                : desktopSideView === 'directs'
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
+            }
+            label="Messaging"
+            selected={desktopSideView === 'directs'}
+          >
+            <MessagingIcon
+              height={24}
+              color={
+                directChatHasUnread
+                  ? theme.palette.other.unread
+                  : desktopSideView === 'directs'
+                    ? theme.palette.text.primary
+                    : theme.palette.text.secondary
+              }
+            />
+          </IconWrapper>
+        </ButtonBase>
+      </Box>
+
+      <div
+        style={{
+          alignItems: 'flex-start',
+          display: 'flex',
+          flexDirection: 'column',
+          flexGrow: 1,
+          left: chatMode === 'directs' && '-1000px',
+          overflowY: 'auto',
+          position: chatMode === 'directs' && 'fixed',
+          visibility: chatMode === 'directs' && 'hidden',
+          width: '100%',
+        }}
+      >
+        <List
+          sx={{
+            width: '100%',
+          }}
+          className="group-list"
+          dense={false}
+        >
+          {groups.map((group: any) => (
+            <GroupItem
+              selectGroupFunc={selectGroupFunc}
+              key={group.groupId}
+              group={group}
+              selectedGroup={selectedGroup}
+              getUserSettings={getUserSettings}
+              myAddress={myAddress}
+            />
+          ))}
+        </List>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          gap: '10px',
+          justifyContent: 'center',
+          padding: '10px',
+          width: '100%',
+        }}
+      >
+        <>
+          <CustomButton
+            onClick={() => {
+              setOpenAddGroup(true);
+            }}
+          >
+            <AddCircleOutlineIcon
+              sx={{
+                color: theme.palette.text.primary,
+              }}
+            />
+            Group
+          </CustomButton>
+
+          {!isRunningPublicNode && (
+            <CustomButton
+              onClick={() => {
+                setIsOpenBlockedUserModal(true);
+              }}
+              sx={{
+                minWidth: 'unset',
+                padding: '10px',
+              }}
+            >
+              <PersonOffIcon
+                sx={{
+                  color: theme.palette.text.primary,
+                }}
+              />
+            </CustomButton>
+          )}
+        </>
+      </div>
+    </div>
+  );
+};
+
+const GroupItem = React.memo(
+  ({ selectGroupFunc, group, selectedGroup, getUserSettings, myAddress }) => {
+    const theme = useTheme();
+    const ownerName = useRecoilValue(groupsOwnerNamesSelector(group?.groupId));
+    const announcement = useRecoilValue(
+      groupAnnouncementSelector(group?.groupId)
+    );
+    const groupProperty = useRecoilValue(groupPropertySelector(group?.groupId));
+    const groupChatTimestamp = useRecoilValue(
+      groupChatTimestampSelector(group?.groupId)
+    );
+    const timestampEnterData = useRecoilValue(
+      timestampEnterDataSelector(group?.groupId)
+    );
+    const selectGroupHandler = useCallback(() => {
+      selectGroupFunc(group);
+    }, [group, selectGroupFunc]);
+
+    return (
+      <ListItem
+        onClick={selectGroupHandler}
+        sx={{
+          display: 'flex',
+          background:
+            group?.groupId === selectedGroup?.groupId &&
+            theme.palette.action.selected,
+          borderRadius: '2px',
+          cursor: 'pointer',
+          flexDirection: 'column',
+          padding: '10px',
+          width: '100%',
+          '&:hover': {
+            backgroundColor: 'action.hover', // background on hover
+          },
+        }}
+      >
+        <ContextMenu getUserSettings={getUserSettings} groupId={group.groupId}>
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              width: '100%',
+            }}
+          >
+            <ListItemAvatar>
+              {ownerName ? (
+                <Avatar
+                  alt={group?.groupName?.charAt(0)}
+                  src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
+                    ownerName
+                  }/qortal_group_avatar_${group?.groupId}?async=true`}
+                >
+                  {group?.groupName?.charAt(0).toUpperCase()}
+                </Avatar>
+              ) : (
+                <Avatar alt={group?.groupName?.charAt(0)}>
+                  {' '}
+                  {group?.groupName?.charAt(0).toUpperCase() || 'G'}
+                </Avatar>
+              )}
+            </ListItemAvatar>
+            <ListItemText
+              primary={group.groupId === '0' ? 'General' : group.groupName}
+              secondary={
+                !group?.timestamp
+                  ? 'no messages'
+                  : `last message: ${formatEmailDate(group?.timestamp)}`
+              }
+              primaryTypographyProps={{
+                style: {
+                  color:
+                    group?.groupId === selectedGroup?.groupId &&
+                    theme.palette.text.primary,
+                  fontSize: '16px',
+                },
+              }} // Change the color of the primary text
+              secondaryTypographyProps={{
+                style: {
+                  color:
+                    group?.groupId === selectedGroup?.groupId &&
+                    theme.palette.text.primary,
+                  fontSize: '12px',
+                },
+              }}
+              sx={{
+                width: '150px',
+                fontFamily: 'Inter',
+                fontSize: '16px',
+              }}
+            />
+            {announcement && !announcement?.seentimestamp && (
+              <CampaignIcon
+                sx={{
+                  color: theme.palette.other.unread,
+                  marginRight: '5px',
+                  marginBottom: 'auto',
+                }}
+              />
+            )}
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '5px',
+                justifyContent: 'flex-start',
+                height: '100%',
+                marginBottom: 'auto',
+              }}
+            >
+              {group?.data &&
+                groupChatTimestamp &&
+                group?.sender !== myAddress &&
+                group?.timestamp &&
+                ((!timestampEnterData &&
+                  Date.now() - group?.timestamp <
+                    timeDifferenceForNotificationChats) ||
+                  timestampEnterData < group?.timestamp) && (
+                  <MarkChatUnreadIcon
+                    sx={{
+                      color: theme.palette.other.unread,
+                    }}
+                  />
+                )}
+              {groupProperty?.isOpen === false && (
+                <LockIcon
+                  sx={{
+                    color: theme.palette.other.positive,
+                    marginBottom: 'auto',
+                  }}
+                />
+              )}
+            </Box>
+          </Box>
+        </ContextMenu>
+      </ListItem>
+    );
+  }
+);

src/components/Group/ListOfGroupPromotions.tsx

@@ -49,7 +49,7 @@ import ErrorBoundary from '../../common/ErrorBoundary';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { getFee } from '../../background';
-export const requestQueuePromos = new RequestQueueWithPromise(20);
+export const requestQueuePromos = new RequestQueueWithPromise(3);
 
 export function utf8ToBase64(inputString: string): string {
   // Encode the string as UTF-8

src/components/GroupAvatar.tsx

@@ -0,0 +1,293 @@
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import Logo2 from '../assets/svgs/Logo2.svg';
+import { MyContext, getArbitraryEndpointReact, getBaseApiReact } from '../App';
+import {
+  Avatar,
+  Box,
+  Button,
+  ButtonBase,
+  Popover,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { Spacer } from '../common/Spacer';
+import ImageUploader from '../common/ImageUploader';
+import { getFee } from '../background';
+import { fileToBase64 } from '../utils/fileReading';
+import { LoadingButton } from '@mui/lab';
+import ErrorIcon from '@mui/icons-material/Error';
+
+export const GroupAvatar = ({
+  myName,
+  balance,
+  setOpenSnack,
+  setInfoSnack,
+  groupId,
+}) => {
+  const [hasAvatar, setHasAvatar] = useState(false);
+  const [avatarFile, setAvatarFile] = useState(null);
+  const [tempAvatar, setTempAvatar] = useState(null);
+  const { show } = useContext(MyContext);
+
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  // Handle child element click to open Popover
+  const handleChildClick = (event) => {
+    event.stopPropagation(); // Prevent parent onClick from firing
+    setAnchorEl(event.currentTarget);
+  };
+
+  // Handle closing the Popover
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  // Determine if the popover is open
+  const open = Boolean(anchorEl);
+  const id = open ? 'avatar-img' : undefined;
+
+  const checkIfAvatarExists = useCallback(async (name, groupId) => {
+    try {
+      const identifier = `qortal_group_avatar_${groupId}`;
+      const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=THUMBNAIL&identifier=${identifier}&limit=1&name=${name}&includemetadata=false&prefix=true`;
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      const responseData = await response.json();
+      if (responseData?.length > 0) {
+        setHasAvatar(true);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }, []);
+  useEffect(() => {
+    if (!myName || !groupId) return;
+    checkIfAvatarExists(myName, groupId);
+  }, [myName, groupId, checkIfAvatarExists]);
+
+  const publishAvatar = async () => {
+    try {
+      if (!groupId) return;
+      const fee = await getFee('ARBITRARY');
+      if (+balance < +fee.fee)
+        throw new Error(`Publishing an Avatar requires ${fee.fee}`);
+      await show({
+        message: 'Would you like to publish an avatar?',
+        publishFee: fee.fee + ' QORT',
+      });
+      setIsLoading(true);
+      const avatarBase64 = await fileToBase64(avatarFile);
+      await new Promise((res, rej) => {
+        window
+          .sendMessage('publishOnQDN', {
+            data: avatarBase64,
+            identifier: `qortal_group_avatar_${groupId}`,
+            service: 'THUMBNAIL',
+          })
+          .then((response) => {
+            if (!response?.error) {
+              res(response);
+              return;
+            }
+            rej(response.error);
+          })
+          .catch((error) => {
+            rej(error.message || 'An error occurred');
+          });
+      });
+      setAvatarFile(null);
+      setTempAvatar(`data:image/webp;base64,${avatarBase64}`);
+      handleClose();
+    } catch (error) {
+      if (error?.message) {
+        setOpenSnack(true);
+        setInfoSnack({
+          type: 'error',
+          message: error?.message,
+        });
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (tempAvatar) {
+    return (
+      <>
+        <Avatar
+          sx={{
+            height: '138px',
+            width: '138px',
+          }}
+          src={tempAvatar}
+          alt={myName}
+        >
+          {myName?.charAt(0)}
+        </Avatar>
+        <ButtonBase onClick={handleChildClick}>
+          <Typography
+            sx={{
+              fontSize: '16px',
+              opacity: 0.5,
+            }}
+          >
+            change avatar
+          </Typography>
+        </ButtonBase>
+        <PopoverComp
+          myName={myName}
+          avatarFile={avatarFile}
+          setAvatarFile={setAvatarFile}
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          handleClose={handleClose}
+          publishAvatar={publishAvatar}
+          isLoading={isLoading}
+        />
+      </>
+    );
+  }
+
+  if (hasAvatar) {
+    return (
+      <>
+        <Avatar
+          sx={{
+            height: '138px',
+            width: '138px',
+          }}
+          src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${myName}/qortal_group_avatar_${groupId}?async=true`}
+          alt={myName}
+        >
+          {myName?.charAt(0)}
+        </Avatar>
+        <ButtonBase onClick={handleChildClick}>
+          <Typography
+            sx={{
+              fontSize: '16px',
+              opacity: 0.5,
+            }}
+          >
+            change avatar
+          </Typography>
+        </ButtonBase>
+        <PopoverComp
+          myName={myName}
+          avatarFile={avatarFile}
+          setAvatarFile={setAvatarFile}
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          handleClose={handleClose}
+          publishAvatar={publishAvatar}
+          isLoading={isLoading}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <img src={Logo2} />
+      <ButtonBase onClick={handleChildClick}>
+        <Typography
+          sx={{
+            fontSize: '16px',
+            opacity: 0.5,
+          }}
+        >
+          set avatar
+        </Typography>
+      </ButtonBase>
+      <PopoverComp
+        myName={myName}
+        avatarFile={avatarFile}
+        setAvatarFile={setAvatarFile}
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        handleClose={handleClose}
+        publishAvatar={publishAvatar}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+const PopoverComp = ({
+  avatarFile,
+  setAvatarFile,
+  id,
+  open,
+  anchorEl,
+  handleClose,
+  publishAvatar,
+  isLoading,
+  myName,
+}) => {
+  const theme = useTheme();
+  return (
+    <Popover
+      id={id}
+      open={open}
+      anchorEl={anchorEl}
+      onClose={handleClose} // Close popover on click outside
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'center',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'center',
+      }}
+    >
+      <Box sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
+        <Typography
+          sx={{
+            fontSize: '12px',
+          }}
+        >
+          (500 KB max. for GIFS){' '}
+        </Typography>
+        <ImageUploader onPick={(file) => setAvatarFile(file)}>
+          <Button variant="contained">Choose Image</Button>
+        </ImageUploader>
+        {avatarFile?.name}
+        <Spacer height="25px" />
+        {!myName && (
+          <Box
+            sx={{
+              display: 'flex',
+              gap: '5px',
+              alignItems: 'center',
+            }}
+          >
+            <ErrorIcon
+              sx={{
+                color: theme.palette.text.primary,
+              }}
+            />
+            <Typography>
+              A registered name is required to set an avatar
+            </Typography>
+          </Box>
+        )}
+
+        <Spacer height="25px" />
+        <LoadingButton
+          loading={isLoading}
+          disabled={!avatarFile || !myName}
+          onClick={publishAvatar}
+          variant="contained"
+        >
+          Publish avatar
+        </LoadingButton>
+      </Box>
+    </Popover>
+  );
+};