mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-04-24 20:07:51 +00:00
popover for payment and message - users avatar
This commit is contained in:
parent
93fba38de3
commit
bf27a4f566
81
src/App.tsx
81
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" && (
|
||||
<>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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%',
|
||||
|
||||
@ -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>
|
||||
|
||||
);
|
||||
|
||||
@ -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={{
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -126,6 +126,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages }) => {
|
||||
message={message}
|
||||
onSeen={handleMessageSeen}
|
||||
isTemp={!!message?.isTemp}
|
||||
myAddress={myAddress}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
@ -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])} />
|
||||
)}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -30,9 +30,9 @@ import MarkUnreadChatAltIcon from "@mui/icons-material/MarkUnreadChatAlt";
|
||||
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
|
||||
import CreateIcon from "@mui/icons-material/Create";
|
||||
import RefreshIcon from "@mui/icons-material/Refresh";
|
||||
import AnnouncementsIcon from '@mui/icons-material/Notifications';
|
||||
import GroupIcon from '@mui/icons-material/Group';
|
||||
import PersonIcon from '@mui/icons-material/Person';
|
||||
import AnnouncementsIcon from "@mui/icons-material/Notifications";
|
||||
import GroupIcon from "@mui/icons-material/Group";
|
||||
import PersonIcon from "@mui/icons-material/Person";
|
||||
import {
|
||||
AuthenticatedContainerInnerRight,
|
||||
CustomButton,
|
||||
@ -56,7 +56,7 @@ import { LoadingButton } from "@mui/lab";
|
||||
import { LoadingSnackbar } from "../Snackbar/LoadingSnackbar";
|
||||
import { GroupAnnouncements } from "../Chat/GroupAnnouncements";
|
||||
import HomeIcon from "@mui/icons-material/Home";
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
|
||||
import { ThingsToDoInitial } from "./ThingsToDoInitial";
|
||||
import { GroupJoinRequests } from "./GroupJoinRequests";
|
||||
@ -96,7 +96,6 @@ import { isExtMsg } from "../../background";
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
interface GroupProps {
|
||||
myAddress: string;
|
||||
isFocused: boolean;
|
||||
@ -223,8 +222,8 @@ export const getGroupAdimns = async (groupNumber: number) => {
|
||||
);
|
||||
const groupData = await response.json();
|
||||
let members: any = [];
|
||||
let membersAddresses = []
|
||||
let both = []
|
||||
let membersAddresses = [];
|
||||
let both = [];
|
||||
// if (groupData && Array.isArray(groupData?.members)) {
|
||||
// for (const member of groupData.members) {
|
||||
// if (member.member) {
|
||||
@ -243,9 +242,9 @@ export const getGroupAdimns = async (groupNumber: number) => {
|
||||
});
|
||||
if (name) {
|
||||
members.push(name);
|
||||
both.push({name, address: member.member})
|
||||
both.push({ name, address: member.member });
|
||||
}
|
||||
membersAddresses.push(member.member)
|
||||
membersAddresses.push(member.member);
|
||||
}
|
||||
|
||||
return true;
|
||||
@ -314,7 +313,8 @@ export const Group = ({
|
||||
isMain,
|
||||
userInfo,
|
||||
balance,
|
||||
isOpenDrawerProfile, setIsOpenDrawerProfile
|
||||
isOpenDrawerProfile,
|
||||
setIsOpenDrawerProfile,
|
||||
}: GroupProps) => {
|
||||
const [secretKey, setSecretKey] = useState(null);
|
||||
const [secretKeyPublishDate, setSecretKeyPublishDate] = useState(null);
|
||||
@ -355,7 +355,7 @@ export const Group = ({
|
||||
const [defaultThread, setDefaultThread] = React.useState(null);
|
||||
const [isOpenDrawer, setIsOpenDrawer] = React.useState(false);
|
||||
|
||||
const [drawerMode, setDrawerMode] = React.useState('groups');
|
||||
const [drawerMode, setDrawerMode] = React.useState("groups");
|
||||
const isFocusedRef = useRef(true);
|
||||
const selectedGroupRef = useRef(null);
|
||||
const selectedDirectRef = useRef(null);
|
||||
@ -410,21 +410,20 @@ export const Group = ({
|
||||
{
|
||||
action: "getGroupDataSingle",
|
||||
payload: {
|
||||
groupId
|
||||
}
|
||||
groupId,
|
||||
},
|
||||
},
|
||||
(response) => {
|
||||
if (!response?.error) {
|
||||
|
||||
res(response);
|
||||
return
|
||||
return;
|
||||
}
|
||||
rej(response.error);
|
||||
}
|
||||
);
|
||||
});
|
||||
} catch (error) {
|
||||
return {}
|
||||
return {};
|
||||
}
|
||||
};
|
||||
const refreshHomeDataFunc = () => {
|
||||
@ -526,11 +525,12 @@ export const Group = ({
|
||||
let hasUnread = false;
|
||||
groups.forEach((group) => {
|
||||
if (
|
||||
group?.data && isExtMsg(group?.data) && group?.sender !== myAddress &&
|
||||
group?.data &&
|
||||
isExtMsg(group?.data) &&
|
||||
group?.sender !== myAddress &&
|
||||
group?.timestamp &&
|
||||
((!timestampEnterData[group?.groupId] &&
|
||||
Date.now() - group?.timestamp <
|
||||
timeDifferenceForNotificationChats) ||
|
||||
Date.now() - group?.timestamp < timeDifferenceForNotificationChats) ||
|
||||
timestampEnterData[group?.groupId] < group?.timestamp)
|
||||
) {
|
||||
hasUnread = true;
|
||||
@ -599,15 +599,17 @@ export const Group = ({
|
||||
try {
|
||||
// setGroupDataLastSet(null)
|
||||
pauseAllQueues();
|
||||
let dataFromStorage
|
||||
let publishFromStorage
|
||||
let adminsFromStorage
|
||||
const groupData = await getGroupDataSingle(selectedGroup?.groupId)
|
||||
if(groupData?.secretKeyData && Date.now() - groupData?.timestampLastSet < 3600000 ){
|
||||
|
||||
dataFromStorage = groupData.secretKeyData
|
||||
publishFromStorage = groupData.secretKeyResource
|
||||
adminsFromStorage = groupData.admins
|
||||
let dataFromStorage;
|
||||
let publishFromStorage;
|
||||
let adminsFromStorage;
|
||||
const groupData = await getGroupDataSingle(selectedGroup?.groupId);
|
||||
if (
|
||||
groupData?.secretKeyData &&
|
||||
Date.now() - groupData?.timestampLastSet < 3600000
|
||||
) {
|
||||
dataFromStorage = groupData.secretKeyData;
|
||||
publishFromStorage = groupData.secretKeyResource;
|
||||
adminsFromStorage = groupData.admins;
|
||||
// setGroupDataLastSet(groupData.timestampLastSet)
|
||||
}
|
||||
|
||||
@ -629,13 +631,15 @@ export const Group = ({
|
||||
}
|
||||
const prevGroupId = selectedGroupRef.current.groupId;
|
||||
// const validApi = await findUsableApi();
|
||||
const {names, addresses, both} = adminsFromStorage || await getGroupAdimns(selectedGroup?.groupId);
|
||||
const { names, addresses, both } =
|
||||
adminsFromStorage || (await getGroupAdimns(selectedGroup?.groupId));
|
||||
setAdmins(addresses);
|
||||
setAdminsWithNames(both)
|
||||
setAdminsWithNames(both);
|
||||
if (!names.length) {
|
||||
throw new Error("Network error");
|
||||
}
|
||||
const publish = publishFromStorage || await getPublishesFromAdmins(names);
|
||||
const publish =
|
||||
publishFromStorage || (await getPublishesFromAdmins(names));
|
||||
|
||||
if (prevGroupId !== selectedGroupRef.current.groupId) {
|
||||
if (settimeoutForRefetchSecretKey.current) {
|
||||
@ -651,9 +655,9 @@ export const Group = ({
|
||||
return false;
|
||||
}
|
||||
setSecretKeyPublishDate(publish?.updated || publish?.created);
|
||||
let data
|
||||
let data;
|
||||
if (dataFromStorage) {
|
||||
data = dataFromStorage
|
||||
data = dataFromStorage;
|
||||
} else {
|
||||
const res = await fetch(
|
||||
`${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${publish.name}/${
|
||||
@ -663,7 +667,6 @@ export const Group = ({
|
||||
data = await res.text();
|
||||
}
|
||||
|
||||
|
||||
const decryptedKey: any = await decryptResource(data);
|
||||
|
||||
const dataint8Array = base64ToUint8Array(decryptedKey.data);
|
||||
@ -675,17 +678,15 @@ export const Group = ({
|
||||
setSecretKey(decryptedKeyToObject);
|
||||
lastFetchedSecretKey.current = Date.now();
|
||||
setMemberCountFromSecretKeyData(decryptedKey.count);
|
||||
chrome?.runtime?.sendMessage(
|
||||
{
|
||||
chrome?.runtime?.sendMessage({
|
||||
action: "setGroupData",
|
||||
payload: {
|
||||
groupId: selectedGroup?.groupId,
|
||||
secretKeyData: data,
|
||||
secretKeyResource: publish,
|
||||
admins: {names, addresses, both}
|
||||
admins: { names, addresses, both },
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
if (decryptedKeyToObject) {
|
||||
setTriedToFetchSecretKey(true);
|
||||
setFirstSecretKeyInCreation(false);
|
||||
@ -915,12 +916,16 @@ export const Group = ({
|
||||
} catch (error) {}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!initiatedGetMembers.current && selectedGroup?.groupId && secretKey && admins.includes(myAddress)) {
|
||||
|
||||
console.log('goung through', admins)
|
||||
if (
|
||||
!initiatedGetMembers.current &&
|
||||
selectedGroup?.groupId &&
|
||||
secretKey &&
|
||||
admins.includes(myAddress)
|
||||
) {
|
||||
console.log("goung through", admins);
|
||||
// getAdmins(selectedGroup?.groupId);
|
||||
getMembers(selectedGroup?.groupId);
|
||||
initiatedGetMembers.current = true
|
||||
initiatedGetMembers.current = true;
|
||||
}
|
||||
}, [selectedGroup?.groupId, secretKey, myAddress, admins]);
|
||||
|
||||
@ -998,7 +1003,7 @@ export const Group = ({
|
||||
.filter((group) => group?.sender !== myAddress)
|
||||
.find((gr) => gr?.groupId === selectedGroup?.groupId);
|
||||
if (!findGroup) return false;
|
||||
if(!findGroup?.data || !isExtMsg(findGroup?.data)) return false
|
||||
if (!findGroup?.data || !isExtMsg(findGroup?.data)) return false;
|
||||
return (
|
||||
findGroup?.timestamp &&
|
||||
((!timestampEnterData[selectedGroup?.groupId] &&
|
||||
@ -1030,7 +1035,7 @@ export const Group = ({
|
||||
if (findDirect) {
|
||||
setChatMode("directs");
|
||||
setSelectedDirect(null);
|
||||
setSelectedGroup(null);
|
||||
// setSelectedGroup(null);
|
||||
|
||||
setNewChat(false);
|
||||
|
||||
@ -1052,6 +1057,52 @@ export const Group = ({
|
||||
}
|
||||
};
|
||||
|
||||
const openDirectChatFromInternal = (e) => {
|
||||
const directAddress = e.detail?.address;
|
||||
const name = e.detail?.name
|
||||
const findDirect = directs?.find(
|
||||
(direct) => direct?.address === directAddress || direct?.name === name
|
||||
);
|
||||
|
||||
if (findDirect) {
|
||||
setChatMode("directs");
|
||||
setSelectedDirect(null);
|
||||
// setSelectedGroup(null);
|
||||
|
||||
setNewChat(false);
|
||||
|
||||
chrome?.runtime?.sendMessage({
|
||||
action: "addTimestampEnterChat",
|
||||
payload: {
|
||||
timestamp: Date.now(),
|
||||
groupId: findDirect.address,
|
||||
},
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
setSelectedDirect(findDirect);
|
||||
getTimestampEnterChat();
|
||||
}, 200);
|
||||
|
||||
} else {
|
||||
setChatMode('directs')
|
||||
setNewChat(true);
|
||||
setTimeout(() => {
|
||||
executeEvent("setDirectToValueNewChat", {
|
||||
directToValue: name || directAddress
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
subscribeToEvent("openDirectMessageInternal", openDirectChatFromInternal);
|
||||
|
||||
return () => {
|
||||
unsubscribeFromEvent("openDirectMessageInternal", openDirectChatFromInternal);
|
||||
};
|
||||
}, [directs, selectedDirect]);
|
||||
|
||||
useEffect(() => {
|
||||
subscribeToEvent("openDirectMessage", openDirectChatFromNotification);
|
||||
|
||||
@ -1106,7 +1157,7 @@ export const Group = ({
|
||||
isLoadingOpenSectionFromNotification.current = false;
|
||||
setupGroupWebsocketInterval.current = null;
|
||||
settimeoutForRefetchSecretKey.current = null;
|
||||
initiatedGetMembers.current = false
|
||||
initiatedGetMembers.current = false;
|
||||
};
|
||||
|
||||
const logoutEventFunc = () => {
|
||||
@ -1297,7 +1348,7 @@ export const Group = ({
|
||||
setMemberCountFromSecretKeyData(null);
|
||||
setTriedToFetchSecretKey(false);
|
||||
setFirstSecretKeyInCreation(false);
|
||||
}
|
||||
};
|
||||
|
||||
const goToAnnouncements = async () => {
|
||||
setGroupSection("default");
|
||||
@ -1317,7 +1368,7 @@ export const Group = ({
|
||||
setTimeout(() => {
|
||||
getGroupAnnouncements();
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
|
||||
const goToChat = async () => {
|
||||
setGroupSection("default");
|
||||
@ -1340,7 +1391,7 @@ export const Group = ({
|
||||
getTimestampEnterChat();
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const renderGroups = () => {
|
||||
return (
|
||||
@ -1360,30 +1411,37 @@ export const Group = ({
|
||||
justifyContent: "center",
|
||||
gap: "20px",
|
||||
padding: "10px",
|
||||
flexDirection: 'column'
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{isMobile && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end'
|
||||
}}><CloseIcon onClick={()=> {
|
||||
setIsOpenDrawer(false)
|
||||
}} sx={{
|
||||
cursor: 'pointer',
|
||||
color: 'white'
|
||||
}} /></Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<CloseIcon
|
||||
onClick={() => {
|
||||
setIsOpenDrawer(false);
|
||||
}}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
color: "white",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
setChatMode((prev) =>
|
||||
prev === "directs" ? "groups" : "directs"
|
||||
);
|
||||
setNewChat(false);
|
||||
setSelectedDirect(null);
|
||||
setSelectedGroup(null);
|
||||
setGroupSection("default");
|
||||
// setNewChat(false);
|
||||
// setSelectedDirect(null);
|
||||
// setSelectedGroup(null);
|
||||
// setGroupSection("default");
|
||||
}}
|
||||
>
|
||||
{chatMode === "groups" && (
|
||||
@ -1422,8 +1480,8 @@ export const Group = ({
|
||||
onClick={() => {
|
||||
setSelectedDirect(null);
|
||||
setNewChat(false);
|
||||
setSelectedGroup(null);
|
||||
setIsOpenDrawer(false)
|
||||
// setSelectedGroup(null);
|
||||
setIsOpenDrawer(false);
|
||||
chrome?.runtime?.sendMessage({
|
||||
action: "addTimestampEnterChat",
|
||||
payload: {
|
||||
@ -1548,14 +1606,13 @@ export const Group = ({
|
||||
setFirstSecretKeyInCreation(false);
|
||||
// setGroupSection("announcement");
|
||||
setGroupSection("chat");
|
||||
setIsOpenDrawer(false)
|
||||
setIsOpenDrawer(false);
|
||||
setTimeout(() => {
|
||||
setSelectedGroup(group);
|
||||
|
||||
// getTimestampEnterChat();
|
||||
}, 200);
|
||||
|
||||
|
||||
chrome?.runtime?.sendMessage({
|
||||
action: "addTimestampEnterChat",
|
||||
payload: {
|
||||
@ -1568,7 +1625,6 @@ export const Group = ({
|
||||
getTimestampEnterChat();
|
||||
}, 200);
|
||||
|
||||
|
||||
// if (groupSectionRef.current === "announcement") {
|
||||
// chrome?.runtime?.sendMessage({
|
||||
// action: "addGroupNotificationTimestamp",
|
||||
@ -1618,15 +1674,13 @@ export const Group = ({
|
||||
primaryTypographyProps={{
|
||||
style: {
|
||||
color:
|
||||
group?.groupId === selectedGroup?.groupId &&
|
||||
"black",
|
||||
group?.groupId === selectedGroup?.groupId && "black",
|
||||
},
|
||||
}} // Change the color of the primary text
|
||||
secondaryTypographyProps={{
|
||||
style: {
|
||||
color:
|
||||
group?.groupId === selectedGroup?.groupId &&
|
||||
"black",
|
||||
group?.groupId === selectedGroup?.groupId && "black",
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
@ -1644,7 +1698,9 @@ export const Group = ({
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{group?.data && isExtMsg(group?.data) && group?.sender !== myAddress &&
|
||||
{group?.data &&
|
||||
isExtMsg(group?.data) &&
|
||||
group?.sender !== myAddress &&
|
||||
group?.timestamp &&
|
||||
((!timestampEnterData[group?.groupId] &&
|
||||
Date.now() - group?.timestamp <
|
||||
@ -1689,8 +1745,8 @@ export const Group = ({
|
||||
onClick={() => {
|
||||
setNewChat(true);
|
||||
setSelectedDirect(null);
|
||||
setSelectedGroup(null);
|
||||
setIsOpenDrawer(false)
|
||||
// setSelectedGroup(null);
|
||||
setIsOpenDrawer(false);
|
||||
}}
|
||||
>
|
||||
<CreateIcon
|
||||
@ -1703,8 +1759,8 @@ export const Group = ({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -1729,6 +1785,11 @@ export const Group = ({
|
||||
}}
|
||||
>
|
||||
{!isMobile && renderGroups()}
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'relative'
|
||||
}}>
|
||||
<AddGroup
|
||||
address={myAddress}
|
||||
open={openAddGroup}
|
||||
@ -1736,6 +1797,17 @@ export const Group = ({
|
||||
/>
|
||||
{newChat && (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: '0px',
|
||||
right: '0px',
|
||||
bottom: '0px',
|
||||
top: '0px',
|
||||
background: '#27282c',
|
||||
zIndex: 5
|
||||
}}
|
||||
>
|
||||
<ChatDirect
|
||||
myAddress={myAddress}
|
||||
myName={userInfo?.name}
|
||||
@ -1745,10 +1817,16 @@ export const Group = ({
|
||||
setNewChat={setNewChat}
|
||||
getTimestampEnterChat={getTimestampEnterChat}
|
||||
balance={balance}
|
||||
close={()=> {
|
||||
setSelectedDirect(null);
|
||||
|
||||
setNewChat(false);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{selectedGroup && !newChat && (
|
||||
{selectedGroup && (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
@ -1923,14 +2001,30 @@ export const Group = ({
|
||||
|
||||
{selectedDirect && !newChat && (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: '0px',
|
||||
right: '0px',
|
||||
bottom: '0px',
|
||||
top: '0px',
|
||||
background: '#27282c',
|
||||
zIndex: 5
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
height: '100%'
|
||||
height: "100%",
|
||||
|
||||
}}
|
||||
>
|
||||
|
||||
<ChatDirect
|
||||
myAddress={myAddress}
|
||||
isNewChat={newChat}
|
||||
@ -1939,13 +2033,18 @@ export const Group = ({
|
||||
setNewChat={setNewChat}
|
||||
getTimestampEnterChat={getTimestampEnterChat}
|
||||
myName={userInfo?.name}
|
||||
close={()=> {
|
||||
setSelectedDirect(null);
|
||||
|
||||
setNewChat(false);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{!selectedDirect &&
|
||||
{
|
||||
!selectedGroup &&
|
||||
!newChat &&
|
||||
groupSection === "home" && (
|
||||
<Box
|
||||
sx={{
|
||||
@ -1953,8 +2052,8 @@ export const Group = ({
|
||||
width: "100%",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
height: '100%',
|
||||
overflow: 'auto'
|
||||
height: "100%",
|
||||
overflow: "auto",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -1981,9 +2080,11 @@ export const Group = ({
|
||||
display: "flex",
|
||||
gap: "40px",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: 'center'
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<ListOfThreadPostsWatched />
|
||||
|
||||
<ThingsToDoInitial
|
||||
balance={balance}
|
||||
myAddress={myAddress}
|
||||
@ -2003,19 +2104,18 @@ export const Group = ({
|
||||
myAddress={myAddress}
|
||||
groups={groups}
|
||||
/>
|
||||
<ListOfThreadPostsWatched />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<AuthenticatedContainerInnerRight
|
||||
sx={{
|
||||
marginLeft: "auto",
|
||||
width: "135px",
|
||||
minWidth: "135px",
|
||||
padding: "5px",
|
||||
display: isMobile ? 'none' : 'flex'
|
||||
display: isMobile ? "none" : "flex",
|
||||
}}
|
||||
>
|
||||
<Spacer height="20px" />
|
||||
@ -2209,10 +2309,11 @@ export const Group = ({
|
||||
message: "Setting up groups... please wait.",
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
<DrawerComponent open={isOpenDrawer} setOpen={setIsOpenDrawer} >{renderGroups()}</DrawerComponent>
|
||||
|
||||
|
||||
<DrawerComponent open={isOpenDrawer} setOpen={setIsOpenDrawer}>
|
||||
{renderGroups()}
|
||||
</DrawerComponent>
|
||||
|
||||
{isMobile && (
|
||||
<Box
|
||||
@ -2227,7 +2328,11 @@ export const Group = ({
|
||||
padding: "0px", // Remove unnecessary padding
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={0.5} sx={{ width: "100%", justifyContent: "space-around" }}>
|
||||
<Grid
|
||||
container
|
||||
spacing={0.5}
|
||||
sx={{ width: "100%", justifyContent: "space-around" }}
|
||||
>
|
||||
{selectedGroup && (
|
||||
<>
|
||||
<Grid item xs={4}>
|
||||
@ -2236,10 +2341,36 @@ export const Group = ({
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<AnnouncementsIcon />}
|
||||
sx={{ padding: '4px 6px',
|
||||
color: groupSection === 'announcement' ? 'black' : 'white',
|
||||
sx={{
|
||||
padding: "4px 6px",
|
||||
color:
|
||||
groupSection === "announcement" ? "black" : "white",
|
||||
backgroundColor: isUnread
|
||||
? "red" : groupSection === 'announcement' ? 'white' : 'black',
|
||||
? "red"
|
||||
: groupSection === "announcement"
|
||||
? "white"
|
||||
: "black",
|
||||
"&:hover": {
|
||||
backgroundColor: isUnread
|
||||
? "red"
|
||||
: groupSection === "announcement"
|
||||
? "white"
|
||||
: "black",
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: isUnread
|
||||
? "red"
|
||||
: groupSection === "announcement"
|
||||
? "white"
|
||||
: "black",
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: isUnread
|
||||
? "red"
|
||||
: groupSection === "announcement"
|
||||
? "white"
|
||||
: "black",
|
||||
},
|
||||
}}
|
||||
onClick={goToAnnouncements}
|
||||
>
|
||||
@ -2252,10 +2383,36 @@ export const Group = ({
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<ChatIcon />}
|
||||
sx={{ padding: '4px 6px', color: groupSection === 'chat' ? 'black' : 'white',
|
||||
sx={{
|
||||
padding: "4px 6px",
|
||||
color: groupSection === "chat" ? "black" : "white",
|
||||
backgroundColor: isUnreadChat
|
||||
? "red"
|
||||
: groupSection === 'chat' ? 'white' : 'black', }}
|
||||
: groupSection === "chat"
|
||||
? "white"
|
||||
: "black",
|
||||
"&:hover": {
|
||||
backgroundColor: isUnreadChat
|
||||
? "red"
|
||||
: groupSection === "chat"
|
||||
? "white"
|
||||
: "black", // Same logic for hover
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: isUnreadChat
|
||||
? "red"
|
||||
: groupSection === "chat"
|
||||
? "white"
|
||||
: "black", // Same logic for active
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: isUnreadChat
|
||||
? "red"
|
||||
: groupSection === "chat"
|
||||
? "white"
|
||||
: "black", // Same logic for focus
|
||||
},
|
||||
}}
|
||||
onClick={goToChat}
|
||||
>
|
||||
Chat
|
||||
@ -2267,8 +2424,21 @@ export const Group = ({
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<ForumIcon />}
|
||||
sx={{ padding: '4px 6px', color: groupSection === 'forum' ? 'black' : 'white',
|
||||
backgroundColor: groupSection === 'forum' ? 'white' : 'black', }}
|
||||
sx={{
|
||||
padding: "4px 6px",
|
||||
color: groupSection === "forum" ? "black" : "white",
|
||||
backgroundColor:
|
||||
groupSection === "forum" ? "white" : "black",
|
||||
"&:hover": {
|
||||
backgroundColor: groupSection === "forum" ? "white" : "black", // Hover state
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: groupSection === "forum" ? "white" : "black", // Active state
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: groupSection === "forum" ? "white" : "black", // Focus state
|
||||
},
|
||||
}}
|
||||
onClick={() => setGroupSection("forum")}
|
||||
>
|
||||
Forum
|
||||
@ -2280,7 +2450,15 @@ export const Group = ({
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<GroupIcon />}
|
||||
sx={{ padding: '4px 6px', backgroundColor: 'black' }}
|
||||
sx={{ padding: "4px 6px", backgroundColor: "black", "&:hover": {
|
||||
backgroundColor: "black", // Hover state
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: "black", // Active state
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: "black", // Focus state
|
||||
}, }}
|
||||
onClick={() => setOpenManageMembers(true)}
|
||||
>
|
||||
Members
|
||||
@ -2296,7 +2474,33 @@ export const Group = ({
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<GroupIcon />}
|
||||
sx={{ padding: '2px 4px', backgroundColor: groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread ? "red" : 'black' }}
|
||||
sx={{
|
||||
padding: "2px 4px",
|
||||
backgroundColor:
|
||||
groupChatHasUnread ||
|
||||
groupsAnnHasUnread ||
|
||||
directChatHasUnread
|
||||
? "red"
|
||||
: "black",
|
||||
"&:hover": {
|
||||
backgroundColor:
|
||||
groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
|
||||
? "red"
|
||||
: "black", // Hover state follows the same logic
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor:
|
||||
groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
|
||||
? "red"
|
||||
: "black", // Active state follows the same logic
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor:
|
||||
groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
|
||||
? "red"
|
||||
: "black", // Focus state follows the same logic
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsOpenDrawer(true);
|
||||
setDrawerMode("groups");
|
||||
@ -2307,7 +2511,7 @@ export const Group = ({
|
||||
</Grid>
|
||||
<Grid item xs={2}>
|
||||
<IconButton
|
||||
sx={{ padding: '0', color: 'white' }} // Reduce padding for icons
|
||||
sx={{ padding: "0", color: "white" }} // Reduce padding for icons
|
||||
onClick={goToHome}
|
||||
>
|
||||
<HomeIcon />
|
||||
@ -2315,7 +2519,7 @@ export const Group = ({
|
||||
</Grid>
|
||||
<Grid item xs={2}>
|
||||
<IconButton
|
||||
sx={{ padding: '0', color: 'white' }} // Reduce padding for icons
|
||||
sx={{ padding: "0", color: "white" }} // Reduce padding for icons
|
||||
onClick={() => setIsOpenDrawerProfile(true)}
|
||||
>
|
||||
<PersonIcon />
|
||||
@ -2323,10 +2527,7 @@ export const Group = ({
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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} />
|
||||
|
||||
108
src/components/WrapperUserAction.tsx
Normal file
108
src/components/WrapperUserAction.tsx
Normal file
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user