popover for payment and message - users avatar

src/App.tsx

@@ -82,7 +82,7 @@ import {
   groupApiSocket,
   groupApiSocketLocal,
 } from "./background";
-import { executeEvent } from "./utils/events";
+import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "./utils/events";
 import { requestQueueCommentCount, requestQueuePublishedAccouncements } from "./components/Chat/GroupAnnouncements";
 import { requestQueueGroupJoinRequests } from "./components/Group/GroupJoinRequests";
 import { DrawerComponent } from "./components/Drawer/Drawer";
@@ -293,7 +293,8 @@ function App() {
   const [confirmUseOfLocal, setConfirmUseOfLocal] = useState(false);
   const [isOpenDrawerProfile, setIsOpenDrawerProfile] = useState(false);
   const [apiKey, setApiKey] = useState("");
-
+  const [isOpenSendQort, setIsOpenSendQort] = useState(false)
+  const [isOpenSendQortSuccess, setIsOpenSendQortSuccess] = useState(false)
   useEffect(() => {
     if(!isMobile) return
     // Function to set the height of the app to the viewport height
@@ -519,7 +520,9 @@ function App() {
         if (response?.error) {
           setSendPaymentError(response.error);
         } else {
-          setExtstate("transfer-success-regular");
+          setIsOpenSendQort(false)
+          setIsOpenSendQortSuccess(true)
+          // setExtstate("transfer-success-regular");
           // setSendPaymentSuccess("Payment successfully sent");
         }
         setIsLoading(false);
@@ -901,6 +904,8 @@ function App() {
     setWalletToBeDownloaded(null);
     setWalletToBeDownloadedPassword("");
     setExtstate("authenticated");
+    setIsOpenSendQort(false)
+    setIsOpenSendQortSuccess(false)
   };
 
   const resetAllStates = () => {
@@ -1026,6 +1031,17 @@ function App() {
     // Handler for when the window gains focus
     const handleFocus = () => {
       setIsFocused(true);
+      if(isMobile){
+        chrome?.runtime?.sendMessage(
+          {
+            action: "clearAllNotifications",
+            payload: {
+            
+            },
+          }
+        );
+      }
+      
       console.log("Webview is focused");
     };
 
@@ -1043,6 +1059,16 @@ function App() {
     const handleVisibilityChange = () => {
       if (document.visibilityState === "visible") {
         setIsFocused(true);
+        if(isMobile){
+          chrome?.runtime?.sendMessage(
+            {
+              action: "clearAllNotifications",
+              payload: {
+              
+              },
+            }
+          );
+        }
         console.log("Webview is visible");
       } else {
         setIsFocused(false);
@@ -1060,6 +1086,22 @@ function App() {
     };
   }, []);
 
+
+  const openPaymentInternal = (e) => {
+    const directAddress = e.detail?.address;
+    const name = e.detail?.name
+    setIsOpenSendQort(true)
+    setPaymentTo(name || directAddress)
+  };
+
+  useEffect(() => {
+    subscribeToEvent("openPaymentInternal", openPaymentInternal);
+
+    return () => {
+      unsubscribeFromEvent("openPaymentInternal", openPaymentInternal);
+    };
+  }, []);
+
   const registerName = async () => {
     try {
       if (!userInfo?.address) throw new Error("Your address was not found");
@@ -1262,7 +1304,8 @@ function App() {
           <Spacer height="20px" />
           <CustomButton
             onClick={() => {
-              setExtstate("send-qort");
+              setIsOpenSendQort(true)
+              // setExtstate("send-qort");
               setIsOpenDrawerProfile(false)
             }}
           >
@@ -1584,8 +1627,17 @@ function App() {
          
         </MyContext.Provider>
       )}
-      {extState === "send-qort" && isMainWindow && (
+      {isOpenSendQort && isMainWindow && (
-        <>
+         <Box sx={{
+          width: '100%',
+          height: '100%',
+          position: 'fixed',
+          background: '#27282c',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          zIndex: 6
+        }}>
           <Spacer height="22px" />
           <Box
             sx={{
@@ -1691,7 +1743,7 @@ function App() {
           >
             Send
           </CustomButton>
-        </>
+        </Box>
       )}
       {extState === "web-app-request-buy-order" && !isMainWindow && (
         <>
@@ -2225,8 +2277,17 @@ function App() {
           )}
         </>
       )}
-      {extState === "transfer-success-regular" && (
+      {isOpenSendQortSuccess && (
-        <>
+        <Box sx={{
+          width: '100%',
+          height: '100%',
+          position: 'fixed',
+          background: '#27282c',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          zIndex: 6
+        }}>
           <Spacer height="48px" />
           <img src={Success} />
           <Spacer height="45px" />
@@ -2246,7 +2307,7 @@ function App() {
           >
             Continue
           </CustomButton>
-        </>
+        </Box>
       )}
       {extState === "transfer-success-request" && (
         <>

src/background.ts

@@ -202,7 +202,7 @@ export function isExtMsg(data){
   } catch (error) {
     isMsgFromExtensionGroup = false
   }
-console.log('isMsgFromExtensionGroup', isMsgFromExtensionGroup)
+
   return isMsgFromExtensionGroup
 }
 
@@ -264,7 +264,7 @@ if (!oldestLatestTimestamp || oldChat?.timestamp > oldestLatestTimestamp?.timest
 }
 });
 
-  console.log('newestLatestTimestamp', newestLatestTimestamp)
+  
   if(checkDifference(newestLatestTimestamp.timestamp) && !oldestLatestTimestamp ||  (newestLatestTimestamp && newestLatestTimestamp?.timestamp > oldestLatestTimestamp?.timestamp)){
         const notificationId = 'chat_notification_' + Date.now() + '_type=direct' + `_from=${newestLatestTimestamp.address}`;
         chrome.notifications.create(notificationId, {
@@ -460,7 +460,7 @@ const handleNotification = async (groups)=> {
     if(checkDifference(newestLatestTimestamp.timestamp) && !oldestLatestTimestamp ||  (newestLatestTimestamp && newestLatestTimestamp?.timestamp > oldestLatestTimestamp?.timestamp)){
       if (!lastGroupNotification || ((Date.now() - lastGroupNotification) >= 120000)) {
         if(!newestLatestTimestamp?.data || !isExtMsg(newestLatestTimestamp?.data)) return
-        console.log('newestLatestTimestamp', newestLatestTimestamp)
+       
         const notificationId = 'chat_notification_' + Date.now() + '_type=group' + `_from=${newestLatestTimestamp.groupId}`;
    
         chrome.notifications.create(notificationId, {
@@ -859,6 +859,13 @@ async function getSaveWallet() {
   }
 }
 
+async function clearAllNotifications(){
+  const notifications = await chrome.notifications.getAll();
+  for (const notificationId of Object.keys(notifications)) {
+    await chrome.notifications.clear(notificationId);
+  }
+}
+
 async function getUserInfo() {
   const wallet = await getSaveWallet();
   const address = wallet.address0;
@@ -1502,7 +1509,7 @@ async function decryptDirectFunc({ messages, involvingAddress }) {
     publicKey: uint8PublicKey,
   };
   for (const message of messages) {
-    console.log('messagedep', message)
+ 
     try {
       const decodedMessage = decryptChatMessage(
         message.data,
@@ -2905,6 +2912,18 @@ chrome?.runtime?.onMessage.addListener((request, sender, sendResponse) => {
           });
         break;
       }
+      case "clearAllNotifications": {
+
+      ;
+      clearAllNotifications()
+          .then((res) => {
+            
+          })
+          .catch((error) => {
+            
+          });
+        break;
+      }
       case "setGroupData": {
 
         const { groupId,

src/components/Chat/AnnouncementDiscussion.tsx

@@ -283,6 +283,7 @@ export const AnnouncementDiscussion = ({
         disableComment
         showLoadMore={comments.length > 0 && comments.length % 20 === 0}
         loadMore={loadMore}
+        myName={myName}
         
       />
       <div
@@ -331,6 +332,29 @@ export const AnnouncementDiscussion = ({
         flexShrink: 0,
         position: 'relative',
       }}>
+          {isFocusedParent && (
+               <CustomButton
+               onClick={()=> {
+                 if(isSending) return
+                 setIsFocusedParent(false)
+                 clearEditorContent()
+                 // Unfocus the editor
+               }}
+               style={{
+                 marginTop: 'auto',
+                 alignSelf: 'center',
+                 cursor: isSending ? 'default' : 'pointer',
+                 flexShrink: 0,
+                 padding: isMobile && '5px',
+                 fontSize: isMobile && '14px',
+                 background: 'red',
+               }}
+             >
+               
+               {` Close`}
+             </CustomButton>
+           
+            )}
         <CustomButton
           onClick={() => {
             if (isSending) return;
@@ -361,29 +385,7 @@ export const AnnouncementDiscussion = ({
           )}
           {` Publish Comment`}
         </CustomButton>
-        {isFocusedParent && (
+      
-               <CustomButton
-               onClick={()=> {
-                 if(isSending) return
-                 setIsFocusedParent(false)
-                 clearEditorContent()
-                 // Unfocus the editor
-               }}
-               style={{
-                 marginTop: 'auto',
-                 alignSelf: 'center',
-                 cursor: isSending ? 'default' : 'pointer',
-                 background: isSending && 'rgba(0, 0, 0, 0.8)',
-                 flexShrink: 0,
-                 padding: isMobile && '5px',
-                 fontSize: isMobile && '14px',
-               }}
-             >
-               
-               {` Close`}
-             </CustomButton>
-           
-            )}
               </Box>
       </div>
    

src/components/Chat/AnnouncementItem.tsx

@@ -10,7 +10,8 @@ import { getBaseApi } from "../../background";
 import { requestQueueCommentCount } from "./GroupAnnouncements";
 import { CustomLoader } from "../../common/CustomLoader";
 import { getBaseApiReact } from "../../App";
-export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement, disableComment }) => {
+import { WrapperUserAction } from "../WrapperUserAction";
+export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement, disableComment, myName }) => {
 
   const [commentLength, setCommentLength] = useState(0)
   const getNumberOfComments = React.useCallback(
@@ -63,6 +64,7 @@ export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement
          width: '100%',
          wordBreak: 'break-word'
       }}>
+        <WrapperUserAction disabled={myName === message?.name} address={undefined} name={message?.name}>
          <Avatar
       sx={{
         backgroundColor: '#27282c',
@@ -73,6 +75,7 @@ export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement
       >
         {message?.name?.charAt(0)}
       </Avatar>
+      </WrapperUserAction>
       <Box
         sx={{
           display: "flex",
@@ -81,6 +84,7 @@ export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement
           width: '100%'
         }}
       >
+        <WrapperUserAction disabled={myName === message?.name} address={undefined} name={message?.name}>
         <Typography
           sx={{
             fontWight: 600,
@@ -90,6 +94,7 @@ export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement
         >
           {message?.name}
         </Typography>
+        </WrapperUserAction>
         {!messageData?.decryptedData && (
           <Box sx={{
             width: '100%',

src/components/Chat/AnnouncementList.tsx

@@ -20,7 +20,8 @@ export const AnnouncementList = ({
   setSelectedAnnouncement,
   disableComment,
   showLoadMore,
-  loadMore
+  loadMore,
+  myName
 }) => {
  
   const listRef = useRef();
@@ -63,7 +64,7 @@ export const AnnouncementList = ({
                 alignItems: "center",
               }}
             >
-              <AnnouncementItem disableComment={disableComment} setSelectedAnnouncement={setSelectedAnnouncement} message={message} messageData={messageData} />
+              <AnnouncementItem myName={myName} disableComment={disableComment} setSelectedAnnouncement={setSelectedAnnouncement} message={message} messageData={messageData} />
             </div>
 
         );

src/components/Chat/ChatDirect.tsx

@@ -6,7 +6,7 @@ import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
 import Tiptap from './TipTap'
 import { CustomButton } from '../../App-styles'
 import CircularProgress from '@mui/material/CircularProgress';
-import { Box, Input } from '@mui/material';
+import { Box, Input, Typography } from '@mui/material';
 import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
 import { getNameInfo } from '../Group/Group';
 import { Spacer } from '../../common/Spacer';
@@ -14,14 +14,13 @@ import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from '../../App';
 import { getPublicKey } from '../../background';
 import { useMessageQueue } from '../../MessageQueueContext';
-import { executeEvent } from '../../utils/events';
+import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
-import zIndex from '@mui/material/styles/zIndex';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
 
 
 
-
+export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance, close}) => {
-export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance}) => {
   const { queueChats, addToQueue, } = useMessageQueue();
     const [isFocusedParent, setIsFocusedParent] = useState(false);
 
@@ -187,7 +186,16 @@ export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDi
       };
     };
 
-
+    const setDirectChatValueFunc = async (e)=> {
+      setDirectToValue(e.detail.directToValue)
+    }
+    useEffect(() => {
+      subscribeToEvent("setDirectToValueNewChat", setDirectChatValueFunc);
+  
+      return () => {
+        unsubscribeFromEvent("setDirectToValueNewChat", setDirectChatValueFunc);
+      };
+    }, []);
   
     useEffect(() => {
       if (hasInitializedWebsocket.current || isNewChat) return;
@@ -327,6 +335,27 @@ console.log('isFocusedParent', isFocusedParent)
       flexDirection: 'column',
       width: '100%'
     }}>
+        <Box onClick={close} sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '5px',
+              cursor: 'pointer',
+              padding: '4px 6px',
+              width: 'fit-content',
+              borderRadius: '3px',
+              background: 'rgb(35, 36, 40)',
+              margin: '10px 0px',
+              alignSelf: 'center'
+            }}>
+              <ArrowBackIcon sx={{
+                color: 'white',
+                fontSize: isMobile ? '20px' : '20px'
+              }}/>
+              <Typography sx={{
+                color: 'white',
+                fontSize: isMobile ? '14px' : '14px'
+              }}>Close Direct Chat</Typography>
+            </Box>
       {isNewChat && (
         <>
         <Spacer height="30px" />
@@ -375,6 +404,28 @@ console.log('isFocusedParent', isFocusedParent)
         flexShrink: 0,
         position: 'relative',
       }}>
+         {isFocusedParent && (
+               <CustomButton
+               onClick={()=> {
+                 if(isSending) return
+                 setIsFocusedParent(false)
+                 clearEditorContent()
+                 // Unfocus the editor
+               }}
+               style={{
+                 marginTop: 'auto',
+                 alignSelf: 'center',
+                 cursor: isSending ? 'default' : 'pointer',
+                 background: 'red',
+                 flexShrink: 0,
+                 padding: isMobile && '5px'
+               }}
+             >
+               
+               {` Close`}
+             </CustomButton>
+           
+            )}
       <CustomButton
               onClick={()=> {
                 if(isSending) return
@@ -404,28 +455,7 @@ console.log('isFocusedParent', isFocusedParent)
               )}
               {` Send`}
             </CustomButton>
-            {isFocusedParent && (
-               <CustomButton
-               onClick={()=> {
-                 if(isSending) return
-                 setIsFocusedParent(false)
-                 clearEditorContent()
-                 // Unfocus the editor
-               }}
-               style={{
-                 marginTop: 'auto',
-                 alignSelf: 'center',
-                 cursor: isSending ? 'default' : 'pointer',
-                 background: isSending && 'rgba(0, 0, 0, 0.8)',
-                 flexShrink: 0,
-                 padding: isMobile && '5px'
-               }}
-             >
-               
-               {` Close`}
-             </CustomButton>
            
-            )}
               </Box>
       </div>
       <LoadingSnackbar open={isLoading} info={{

src/components/Chat/ChatGroup.tsx

@@ -395,6 +395,28 @@ const clearEditorContent = () => {
         flexShrink: 0,
         position: 'relative',
       }}>
+         {isFocusedParent && (
+               <CustomButton
+               onClick={()=> {
+                 if(isSending) return
+                 setIsFocusedParent(false)
+                 clearEditorContent()
+                 // Unfocus the editor
+               }}
+               style={{
+                 marginTop: 'auto',
+                 alignSelf: 'center',
+                 cursor: isSending ? 'default' : 'pointer',
+                 background: 'red',
+                 flexShrink: 0,
+                 padding: isMobile && '5px'
+               }}
+             >
+               
+               {` Close`}
+             </CustomButton>
+           
+            )}
       <CustomButton
               onClick={()=> {
                 if(isSending) return
@@ -425,28 +447,7 @@ const clearEditorContent = () => {
               )}
               {` Send`}
             </CustomButton>
-            {isFocusedParent && (
-               <CustomButton
-               onClick={()=> {
-                 if(isSending) return
-                 setIsFocusedParent(false)
-                 clearEditorContent()
-                 // Unfocus the editor
-               }}
-               style={{
-                 marginTop: 'auto',
-                 alignSelf: 'center',
-                 cursor: isSending ? 'default' : 'pointer',
-                 background: isSending && 'rgba(0, 0, 0, 0.8)',
-                 flexShrink: 0,
-                 padding: isMobile && '5px'
-               }}
-             >
-               
-               {` Close`}
-             </CustomButton>
            
-            )}
               </Box>
       {/* <button onClick={sendMessage}>send</button> */}
       </div>

src/components/Chat/ChatList.tsx

@@ -126,6 +126,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages }) => {
                 message={message}
                 onSeen={handleMessageSeen}
                 isTemp={!!message?.isTemp}
+                myAddress={myAddress}
               />
             </div>
           </div>

src/components/Chat/GroupAnnouncements.tsx

@@ -301,6 +301,7 @@ export const GroupAnnouncements = ({
       }
       // send chat message
     } catch (error) {
+      if(!error) return 
       setInfoSnack({
         type: "error",
         message: error,
@@ -542,6 +543,7 @@ export const GroupAnnouncements = ({
         disableComment={false}
         showLoadMore={announcements.length > 0 && announcements.length % 20 === 0}
         loadMore={loadMore}
+        myName={myName}
       />
       
     
@@ -591,6 +593,29 @@ export const GroupAnnouncements = ({
         flexShrink: 0,
         position: 'relative',
       }}>
+         {isFocusedParent && (
+               <CustomButton
+               onClick={()=> {
+                 if(isSending) return
+                 setIsFocusedParent(false)
+                 clearEditorContent()
+                 // Unfocus the editor
+               }}
+               style={{
+                 marginTop: 'auto',
+                 alignSelf: 'center',
+                 cursor: isSending ? 'default' : 'pointer',
+                 background: 'red',
+                 flexShrink: 0,
+                 padding: isMobile && '5px',
+                 fontSize: isMobile && '14px',
+               }}
+             >
+               
+               {` Close`}
+             </CustomButton>
+           
+            )}
    <CustomButton
      onClick={() => {
        if (isSending) return;
@@ -622,29 +647,7 @@ export const GroupAnnouncements = ({
      )}
      {` Publish Announcement`}
    </CustomButton>
-   {isFocusedParent && (
+  
-               <CustomButton
-               onClick={()=> {
-                 if(isSending) return
-                 setIsFocusedParent(false)
-                 clearEditorContent()
-                 // Unfocus the editor
-               }}
-               style={{
-                 marginTop: 'auto',
-                 alignSelf: 'center',
-                 cursor: isSending ? 'default' : 'pointer',
-                 background: isSending && 'rgba(0, 0, 0, 0.8)',
-                 flexShrink: 0,
-                 padding: isMobile && '5px',
-                 fontSize: isMobile && '14px',
-               }}
-             >
-               
-               {` Close`}
-             </CustomButton>
-           
-            )}
               </Box>
  </div>
 )}

src/components/Chat/MessageItem.tsx

@@ -10,7 +10,9 @@ import { generateHTML } from "@tiptap/react";
 import Highlight from '@tiptap/extension-highlight'
 import StarterKit from '@tiptap/starter-kit'
 import Underline from '@tiptap/extension-underline'
-export const MessageItem = ({ message, onSeen, isLast, isTemp }) => {
+import { executeEvent } from "../../utils/events";
+import { WrapperUserAction } from "../WrapperUserAction";
+export const MessageItem = ({ message, onSeen, isLast, isTemp, myAddress }) => {
 
   const { ref, inView } = useInView({
     threshold: 0.7, // Fully visible
@@ -36,6 +38,7 @@ export const MessageItem = ({ message, onSeen, isLast, isTemp }) => {
         opacity: isTemp ? 0.5 : 1
       }}
     >
+      <WrapperUserAction disabled={myAddress === message?.sender} address={message?.sender} name={message?.senderName}>
       <Avatar
       sx={{
         backgroundColor: '#27282c',
@@ -46,6 +49,7 @@ export const MessageItem = ({ message, onSeen, isLast, isTemp }) => {
       >
         {message?.senderName?.charAt(0)}
       </Avatar>
+      </WrapperUserAction>
       <Box
         sx={{
           display: "flex",
@@ -54,15 +58,18 @@ export const MessageItem = ({ message, onSeen, isLast, isTemp }) => {
           width: '100%'
         }}
       >
+        <WrapperUserAction disabled={myAddress === message?.sender} address={message?.sender} name={message?.senderName}>
         <Typography
           sx={{
             fontWight: 600,
             fontFamily: "Inter",
             color: "cadetBlue",
           }}
+          
         >
           {message?.senderName || message?.sender}
         </Typography>
+        </WrapperUserAction>
         {message?.messageText && (
           <MessageDisplay htmlContent={generateHTML(message?.messageText, [StarterKit, Underline, Highlight])} />
         )}

src/components/Group/Forum/GroupMail.tsx

@@ -54,6 +54,7 @@ import { LoadingSnackbar } from "../../Snackbar/LoadingSnackbar";
 import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "../../../utils/events";
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { getBaseApiReact } from "../../../App";
+import { WrapperUserAction } from "../../WrapperUserAction";
 const filterOptions = ["Recently active", "Newest", "Oldest"];
 
 export const threadIdentifier = "DOCUMENT";
@@ -672,6 +673,7 @@ export const GroupMail = ({
                   }
                 }}
               >
+                 
                 <Avatar
                   sx={{
                     height: "50px",
@@ -682,11 +684,14 @@ export const GroupMail = ({
                 >
                   {thread?.threadData?.name?.charAt(0)}
                 </Avatar>
+               
                 <ThreadInfoColumn>
+               
                   <ThreadInfoColumnNameP>
                     <ThreadInfoColumnbyP>by </ThreadInfoColumnbyP>
                     {thread?.threadData?.name}
                   </ThreadInfoColumnNameP>
+             
                   <ThreadInfoColumnTime>
                     {formatTimestamp(thread?.threadData?.createdAt)}
                   </ThreadInfoColumnTime>

src/components/Group/Forum/ShowMessageWithoutModal.tsx

@@ -19,8 +19,9 @@ import ReadOnlySlate from "./ReadOnlySlate";
 import { MessageDisplay } from "../../Chat/MessageDisplay";
 import { getBaseApi } from "../../../background";
 import { getBaseApiReact } from "../../../App";
+import { WrapperUserAction } from "../../WrapperUserAction";
 
-export const ShowMessage = ({ message, openNewPostWithQuote }: any) => {
+export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
   const [expandAttachments, setExpandAttachments] = useState<boolean>(false);
 
   let cleanHTML = "";
@@ -53,13 +54,17 @@ export const ShowMessage = ({ message, openNewPostWithQuote }: any) => {
 
           }}
         >
-          
+         <WrapperUserAction disabled={myName === message?.name} address={undefined} name={message?.name}>
            <Avatar  sx={{
                   height: '50px',
                   width: '50px'
                  }} src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${message?.name}/qortal_avatar?async=true`} alt={message?.name}>{message?.name?.charAt(0)}</Avatar>
+                  </WrapperUserAction>
           <ThreadInfoColumn>
+          
+         <WrapperUserAction disabled={myName === message?.name} address={undefined} name={message?.name}>
             <ThreadInfoColumnNameP>{message?.name}</ThreadInfoColumnNameP>
+            </WrapperUserAction>
             <ThreadInfoColumnTime>
               {formatTimestampForum(message?.created)}
             </ThreadInfoColumnTime>

src/components/Group/Forum/Thread.tsx

@@ -531,6 +531,7 @@ export const Thread = ({
                   key={message?.identifier}
                   message={fullMessage}
                   openNewPostWithQuote={openNewPostWithQuote}
+                  myName={userInfo?.name}
                 />
               );
             } else if(message?.tempData){
@@ -539,6 +540,7 @@ export const Thread = ({
                   key={message?.identifier}
                   message={message?.tempData}
                   openNewPostWithQuote={openNewPostWithQuote}
+                  myName={userInfo?.name}
                 />
               );
             }

src/components/Loader.tsx

@@ -14,7 +14,7 @@ export const Loader = () => {
         left:'0px',
         right: '0px',
         bottom: '0px',
-        zIndex: 2,
+        zIndex: 10,
         background: 'rgba(0, 0, 0, 0.4)'
     }}>
          <CircularProgress color="success" size={25} />

src/components/WrapperUserAction.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { Popover, Button, Box } from '@mui/material';
+import { executeEvent } from '../utils/events';
+
+export const WrapperUserAction = ({ children, address, name, disabled }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  // 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 ? address || name : undefined;
+
+  if(disabled){
+    return children
+  }
+
+  return (
+    <>
+      <Box
+        onClick={handleChildClick} // Open popover on click
+        sx={{
+          display: 'inline-flex', // Keep inline behavior
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
+          padding: 0,
+          width: 'fit-content', // Limit width to content size
+          height: 'fit-content', // Limit height to content size
+          alignSelf: 'flex-start', // Prevent stretching to parent height
+          maxWidth: '100%', // Optional: Limit the width to avoid overflow
+          maxHeight: '100%', // Prevent flex shrink behavior in a flex container
+        }}
+      >
+        {/* Render the child without altering dimensions */}
+        {children}
+      </Box>
+
+      {/* Popover */}
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose} // Close popover on click outside
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+        componentsProps={{
+          paper: {
+            onClick: (event) => event.stopPropagation(), // Stop propagation inside popover
+          },
+        }}
+      >
+        <Box sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
+          {/* Option 1: Message */}
+          <Button
+            variant="text"
+            onClick={() => {
+              executeEvent('openDirectMessageInternal', {
+                address,
+                name,
+              });
+              handleClose();
+              console.log('Message clicked');
+            }}
+            sx={{
+                color: 'white'
+            }}
+          >
+            Message
+          </Button>
+
+          {/* Option 2: Send QORT */}
+          <Button
+            variant="text"
+            onClick={() => {
+            executeEvent('openPaymentInternal', {
+                    address,
+                    name,
+            });
+              handleClose();
+              console.log('Send QORT clicked');
+            }}
+            sx={{
+                color: 'white'
+            }}
+          >
+            Send QORT
+          </Button>
+        </Box>
+      </Popover>
+    </>
+  );
+};

src/index.css

@@ -78,6 +78,19 @@ body {
   border: 4px solid transparent;
 }
 
+/* Mobile-specific scrollbar styles */
+@media only screen and (max-width: 600px) {
+  ::-webkit-scrollbar {
+    width: 8px; /* Narrower scrollbar width on mobile */
+    height: 6px; /* Narrower scrollbar height on mobile */
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px; /* Adjust the radius for a narrower thumb */
+    border: 2px solid transparent; /* Narrower thumb border */
+  }
+}
+
 .group-list::-webkit-scrollbar-thumb:hover {
   background-color: whitesmoke;
 }