popover for payment and message - users avatar

2025-07-23 04:36:52 +00:00 · 2024-09-14 11:42:05 +03:00
parent 93fba38de3
commit bf27a4f566
17 changed files with 1145 additions and 681 deletions
--- a/src/components/Chat/AnnouncementDiscussion.tsx
+++ b/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>
   
--- a/src/components/Chat/AnnouncementItem.tsx
+++ b/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%',
--- a/src/components/Chat/AnnouncementList.tsx
+++ b/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>

        );
--- a/src/components/Chat/ChatDirect.tsx
+++ b/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 zIndex from '@mui/material/styles/zIndex';
+import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';




-
-export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance}) => {
+export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance, close}) => {
  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={{
--- a/src/components/Chat/ChatGroup.tsx
+++ b/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>
--- a/src/components/Chat/ChatList.tsx
+++ b/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>
--- a/src/components/Chat/GroupAnnouncements.tsx
+++ b/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>
 )}
--- a/src/components/Chat/MessageItem.tsx
+++ b/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])} />
        )}