@@ -345,11 +353,11 @@ export const AnnouncementDiscussion = ({
{isFocusedParent && (
@@ -361,13 +369,13 @@ export const AnnouncementDiscussion = ({
// Unfocus the editor
}}
style={{
- marginTop: 'auto',
alignSelf: 'center',
+ background: 'red',
cursor: isSending ? 'default' : 'pointer',
flexShrink: 0,
- padding: isMobile && '5px',
- fontSize: isMobile && '14px',
- background: 'red',
+ fontSize: '14px',
+ marginTop: 'auto',
+ padding: '5px',
}}
>
{` Close`}
@@ -379,25 +387,25 @@ export const AnnouncementDiscussion = ({
publishComment();
}}
style={{
- marginTop: 'auto',
alignSelf: 'center',
+ background: theme.palette.background.default,
cursor: isSending ? 'default' : 'pointer',
- background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
- padding: isMobile && '5px',
- fontSize: isMobile && '14px',
+ fontSize: '14px',
+ marginTop: 'auto',
+ padding: '5px',
}}
>
{isSending && (
-
-
-
- {message?.name?.charAt(0)}
-
-
-
-
+
+ {message?.name?.charAt(0)}
+
+
+
- {message?.name}
-
-
- {!messageData?.decryptedData && (
-
-
- )}
- {messageData?.decryptedData?.message && (
- <>
- {messageData?.type === "notification" ? (
-
+
+ {message?.name}
+
+
+ {!messageData?.decryptedData && (
+
+
+ )}
+ {messageData?.decryptedData?.message && (
+ <>
+ {messageData?.type === 'notification' ? (
+
- {formatTimestamp(message.created)}
+
+
+ {formatTimestamp(message.created)}
+
+
-
- {!disableComment && (
- setSelectedAnnouncement(message)}>
-
-
- {`${commentLength > 1 ? `${commentLength} comments` : `${commentLength} comment`}`}
- ) : (
- Leave comment
- )}
-
+ {!disableComment && (
+ setSelectedAnnouncement(message)}
+ >
+
+ {`${commentLength > 1 ? `${commentLength} comments` : `${commentLength} comment`}`}
+ ) : (
+
+ Leave comment
+
+ )}
+
+
-
- )}
-
+ )}
);
};
diff --git a/src/components/Chat/AnnouncementList.tsx b/src/components/Chat/AnnouncementList.tsx
index efaf1fa..9c32cc1 100644
--- a/src/components/Chat/AnnouncementList.tsx
+++ b/src/components/Chat/AnnouncementList.tsx
@@ -1,10 +1,5 @@
-import React, { useCallback, useState, useEffect, useRef } from 'react';
-import {
- List,
- AutoSizer,
- CellMeasurerCache,
- CellMeasurer,
-} from 'react-virtualized';
+import { useState, useEffect, useRef } from 'react';
+import { CellMeasurerCache } from 'react-virtualized';
import { AnnouncementItem } from './AnnouncementItem';
import { Box } from '@mui/material';
import { CustomButton } from '../../styles/App-styles';
@@ -37,12 +32,12 @@ export const AnnouncementList = ({
return (
@@ -57,11 +52,11 @@ export const AnnouncementList = ({
*/}
{showLoadMore && (
diff --git a/src/components/Chat/ChatContainer.tsx b/src/components/Chat/ChatContainer.tsx
index 399e5a4..2823b83 100644
--- a/src/components/Chat/ChatContainer.tsx
+++ b/src/components/Chat/ChatContainer.tsx
@@ -1,16 +1,14 @@
-import React, { useState } from "react";
-import InfiniteScroll from "react-infinite-scroller";
import {
MainContainer,
ChatContainer,
MessageList,
Message,
MessageInput,
- Avatar
-} from "@chatscope/chat-ui-kit-react";
-import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
+ Avatar,
+} from '@chatscope/chat-ui-kit-react';
+import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
-export const ChatContainerComp = ({messages}) => {
+export const ChatContainerComp = ({ messages }) => {
// const [messages, setMessages] = useState([
// { id: 1, text: "Hello! How are you?", sender: "Joe"},
// { id: 2, text: "I'm good, thank you!", sender: "Me" }
@@ -26,31 +24,31 @@ export const ChatContainerComp = ({messages}) => {
// };
return (
-
+
-
- {messages.map((msg) => (
-
- {msg.direction === "incoming" &&
- ))}
-
-
+
+ {messages.map((msg) => (
+
+ {msg.direction === 'incoming' && (
+
+ ))}
+
+
);
};
-
-
diff --git a/src/components/Chat/ChatDirect.tsx b/src/components/Chat/ChatDirect.tsx
index 1af3f8e..49d7f94 100644
--- a/src/components/Chat/ChatDirect.tsx
+++ b/src/components/Chat/ChatDirect.tsx
@@ -7,13 +7,12 @@ import React, {
useState,
} from 'react';
-import { objectToBase64 } from '../../qdn/encryption/group-encryption';
import { ChatList } from './ChatList';
import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
import Tiptap from './TipTap';
import { CustomButton } from '../../styles/App-styles';
import CircularProgress from '@mui/material/CircularProgress';
-import { Box, ButtonBase, Input, Typography } from '@mui/material';
+import { Box, ButtonBase, Input, Typography, useTheme } from '@mui/material';
import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
import { getNameInfo } from '../Group/Group';
import { Spacer } from '../../common/Spacer';
@@ -36,7 +35,7 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ShortUniqueId from 'short-unique-id';
import { ReturnIcon } from '../../assets/Icons/ReturnIcon';
import { ExitIcon } from '../../assets/Icons/ExitIcon';
-import { MessageItem, ReplyPreview } from './MessageItem';
+import { ReplyPreview } from './MessageItem';
const uid = new ShortUniqueId({ length: 5 });
@@ -52,6 +51,7 @@ export const ChatDirect = ({
close,
setMobileViewModeKeepOpen,
}) => {
+ const theme = useTheme();
const { queueChats, addToQueue, processWithNewMessages } = useMessageQueue();
const [isFocusedParent, setIsFocusedParent] = useState(false);
const [onEditMessage, setOnEditMessage] = useState(null);
@@ -87,7 +87,9 @@ export const ChatDirect = ({
const publicKey = await getPublicKey(address);
if (publicKeyOfRecipientRef.current !== selectedDirect?.address) return;
setPublicKeyOfRecipient(publicKey);
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
};
const tempMessages = useMemo(() => {
@@ -167,6 +169,7 @@ export const ChatDirect = ({
text: item.message,
unread: item?.sender === myAddress ? false : true,
}));
+
setMessages((prev) => [...prev, ...formatted]);
setChatReferences((prev) => {
const organizedChatReferences = { ...prev };
@@ -183,7 +186,9 @@ export const ChatDirect = ({
{}),
edit: item,
};
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
});
return organizedChatReferences;
});
@@ -214,7 +219,9 @@ export const ChatDirect = ({
{}),
edit: item,
};
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
});
return organizedChatReferences;
});
@@ -227,7 +234,9 @@ export const ChatDirect = ({
rej(error.message || 'An error occurred');
});
});
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
};
const forceCloseWebSocket = () => {
@@ -368,7 +377,6 @@ export const ChatDirect = ({
senderName: myName,
});
setNewChat(null);
-
window
.sendMessage('addTimestampEnterChat', {
timestamp: Date.now(),
@@ -396,7 +404,6 @@ export const ChatDirect = ({
});
} catch (error) {
throw new Error(error);
- } finally {
}
};
const clearEditorContent = () => {
@@ -537,39 +544,39 @@ export const ChatDirect = ({
return (
{!isMobile && (
Close Direct Chat
@@ -579,26 +586,26 @@ export const ChatDirect = ({
{isMobile && (
@@ -623,10 +630,10 @@ export const ChatDirect = ({
{
@@ -192,7 +189,9 @@ export const ChatGroup = ({
handleSecretKeyCreationInProgress();
return;
}
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
});
};
@@ -578,7 +577,9 @@ export const ChatGroup = ({
rej(error.message || 'An error occurred');
});
});
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
};
const forceCloseWebSocket = () => {
@@ -621,7 +622,9 @@ export const ChatGroup = ({
middletierFunc(JSON.parse(e.data), selectedGroup);
setIsLoading(false);
}
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
};
socketRef.current.onclose = () => {
clearTimeout(groupSocketTimeoutRef.current);
@@ -700,7 +703,9 @@ export const ChatGroup = ({
rej(error.message || 'An error occurred');
});
});
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
};
const sendChatGroup = async ({
@@ -991,16 +996,18 @@ export const ChatGroup = ({
setIsOpenQManager(true);
}, []);
+ const theme = useTheme();
+
return (
{replyMessage && (
@@ -735,7 +740,6 @@ export const ChatDirect = ({
onClick={() => {
setReplyMessage(null);
setOnEditMessage(null);
-
clearEditorContent();
}}
>
@@ -756,9 +760,9 @@ export const ChatDirect = ({
{isSending && (
+
{replyMessage && (
@@ -1078,9 +1083,9 @@ export const ChatGroup = ({
{onEditMessage && (
@@ -1113,9 +1118,9 @@ export const ChatGroup = ({
{isSending && (
Q-Manager
@@ -1241,12 +1246,14 @@ export const ChatGroup = ({
)}
{/* {
const parentRef = useRef();
const [messages, setMessages] = useState(initialMessages);
@@ -42,33 +34,32 @@ export const ChatList = ({
// Initialize the virtualizer
const rowVirtualizer = useVirtualizer({
count: messages.length,
- getItemKey: (index) => messages[index]?.tempSignature || messages[index].signature,
+ getItemKey: (index) =>
+ messages[index]?.tempSignature || messages[index].signature,
getScrollElement: () => parentRef?.current,
estimateSize: useCallback(() => 80, []), // Provide an estimated height of items, adjust this as needed
overscan: 10, // Number of items to render outside the visible area to improve smoothness
});
- const isAtBottom = useMemo(()=> {
+ const isAtBottom = useMemo(() => {
if (parentRef.current && rowVirtualizer?.isScrolling !== undefined) {
const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
- const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed
- return atBottom
- }
+ const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed
+ return atBottom;
+ }
- return false
-
- }, [rowVirtualizer?.isScrolling])
+ return false;
+ }, [rowVirtualizer?.isScrolling]);
useEffect(() => {
if (!parentRef.current || rowVirtualizer?.isScrolling === undefined) return;
- if(isAtBottom){
+ if (isAtBottom) {
if (scrollingIntervalRef.current) {
clearTimeout(scrollingIntervalRef.current);
}
setShowScrollDownButton(false);
return;
- } else
- if (rowVirtualizer?.isScrolling) {
+ } else if (rowVirtualizer?.isScrolling) {
if (scrollingIntervalRef.current) {
clearTimeout(scrollingIntervalRef.current);
}
@@ -108,7 +99,13 @@ export const ChatList = ({
setTimeout(() => {
const hasUnreadMessages = totalMessages.some(
- (msg) => msg.unread && !msg?.chatReference && !msg?.isTemp && (!msg?.chatReference && msg?.timestamp > lastSeenUnreadMessageTimestamp.current || 0)
+ (msg) =>
+ msg.unread &&
+ !msg?.chatReference &&
+ !msg?.isTemp &&
+ ((!msg?.chatReference &&
+ msg?.timestamp > lastSeenUnreadMessageTimestamp.current) ||
+ 0)
);
if (parentRef.current) {
const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
@@ -136,9 +133,9 @@ export const ChatList = ({
const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1;
if (rowVirtualizer) {
if (divideIndex) {
- rowVirtualizer.scrollToIndex(divideIndex, { align: "start" });
+ rowVirtualizer.scrollToIndex(divideIndex, { align: 'start' });
} else {
- rowVirtualizer.scrollToIndex(index, { align: "end" });
+ rowVirtualizer.scrollToIndex(index, { align: 'end' });
}
}
handleMessageSeen();
@@ -152,7 +149,7 @@ export const ChatList = ({
}))
);
setShowScrollButton(false);
- lastSeenUnreadMessageTimestamp.current = Date.now()
+ lastSeenUnreadMessageTimestamp.current = Date.now();
}, []);
const sentNewMessageGroupFunc = useCallback(() => {
@@ -166,9 +163,9 @@ export const ChatList = ({
}, [messages]);
useEffect(() => {
- subscribeToEvent("sent-new-message-group", sentNewMessageGroupFunc);
+ subscribeToEvent('sent-new-message-group', sentNewMessageGroupFunc);
return () => {
- unsubscribeFromEvent("sent-new-message-group", sentNewMessageGroupFunc);
+ unsubscribeFromEvent('sent-new-message-group', sentNewMessageGroupFunc);
};
}, [sentNewMessageGroupFunc]);
@@ -181,21 +178,24 @@ export const ChatList = ({
const goToMessage = useCallback((idx) => {
rowVirtualizer.scrollToIndex(idx);
}, []);
+
+ const theme = useTheme();
+
return (
@@ -377,17 +390,17 @@ export const ChatList = ({
{enableMentions && (hasSecretKey || isPrivate === false) && (
{
return convert(htmlString, {
wordwrap: false, // Disable word wrapping
})?.toLowerCase();
};
+
const cache = new CellMeasurerCache({
fixedWidth: true,
defaultHeight: 50,
});
-export const ChatOptions = ({ messages : untransformedMessages, goToMessage, members, myName, selectedGroup, openQManager, isPrivate }) => {
- const [mode, setMode] = useState("default");
- const [searchValue, setSearchValue] = useState("");
+export const ChatOptions = ({
+ messages: untransformedMessages,
+ goToMessage,
+ members,
+ myName,
+ selectedGroup,
+ openQManager,
+ isPrivate,
+}) => {
+ const [mode, setMode] = useState('default');
+ const [searchValue, setSearchValue] = useState('');
const [selectedMember, setSelectedMember] = useState(0);
-
+ const theme = useTheme();
const parentRef = useRef();
const parentRefMentions = useRef();
- const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null)
- const [debouncedValue, setDebouncedValue] = useState(""); // Debounced value
- const messages = useMemo(()=> {
- return untransformedMessages?.map((item)=> {
- if(item?.messageText){
- let transformedMessage = item?.messageText
+ const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null);
+ const [debouncedValue, setDebouncedValue] = useState(''); // Debounced value
+ const messages = useMemo(() => {
+ return untransformedMessages?.map((item) => {
+ if (item?.messageText) {
+ let transformedMessage = item?.messageText;
try {
- transformedMessage = generateHTML(item?.messageText, [
- StarterKit,
- Underline,
- Highlight,
- Mention
- ])
- return {
- ...item,
- messageText: transformedMessage
- }
+ transformedMessage = generateHTML(item?.messageText, [
+ StarterKit,
+ Underline,
+ Highlight,
+ Mention,
+ ]);
+ return {
+ ...item,
+ messageText: transformedMessage,
+ };
} catch (error) {
// error
}
- } else return item
- })
- }, [untransformedMessages])
+ } else return item;
+ });
+ }, [untransformedMessages]);
+
const getTimestampMention = async () => {
try {
return new Promise((res, rej) => {
- window.sendMessage("getTimestampMention")
- .then((response) => {
- if (!response?.error) {
- if(response && selectedGroup && response[selectedGroup]){
- setLastMentionTimestamp(response[selectedGroup])
-
-
-
-
-
- }
-
- res(response);
- return;
- }
- rej(response.error);
- })
- .catch((error) => {
- rej(error.message || "An error occurred");
- });
-
+ window
+ .sendMessage('getTimestampMention')
+ .then((response) => {
+ if (!response?.error) {
+ if (response && selectedGroup && response[selectedGroup]) {
+ setLastMentionTimestamp(response[selectedGroup]);
+ }
+ res(response);
+ return;
+ }
+ rej(response.error);
+ })
+ .catch((error) => {
+ rej(error.message || 'An error occurred');
+ });
});
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
};
- useEffect(()=> {
- if(mode === 'mentions' && selectedGroup){
- window.sendMessage("addTimestampMention", {
- timestamp: Date.now(),
- groupId: selectedGroup
- }).then((res)=> {
- getTimestampMention()
- }).catch((error) => {
- console.error("Failed to add timestamp:", error.message || "An error occurred");
+ useEffect(() => {
+ if (mode === 'mentions' && selectedGroup) {
+ window
+ .sendMessage('addTimestampMention', {
+ timestamp: Date.now(),
+ groupId: selectedGroup,
+ })
+ .then((res) => {
+ getTimestampMention();
+ })
+ .catch((error) => {
+ console.error(
+ 'Failed to add timestamp:',
+ error.message || 'An error occurred'
+ );
});
}
- }, [mode, selectedGroup])
+ }, [mode, selectedGroup]);
- useEffect(()=> {
- getTimestampMention()
- }, [])
+ useEffect(() => {
+ getTimestampMention();
+ }, []);
// Debounce logic
useEffect(() => {
@@ -151,32 +159,39 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
.filter(
(message) =>
message?.senderName === selectedMember &&
- extractTextFromHTML(isPrivate ? message?.messageText : message?.decryptedData?.message)?.includes(
- debouncedValue.toLowerCase()
- )
+ extractTextFromHTML(
+ isPrivate ? message?.messageText : message?.decryptedData?.message
+ )?.includes(debouncedValue.toLowerCase())
)
?.sort((a, b) => b?.timestamp - a?.timestamp);
}
return messages
.filter((message) =>
- extractTextFromHTML(isPrivate === false ? message?.messageText : message?.decryptedData?.message)?.includes(debouncedValue.toLowerCase())
+ extractTextFromHTML(
+ isPrivate === false
+ ? message?.messageText
+ : message?.decryptedData?.message
+ )?.includes(debouncedValue.toLowerCase())
)
?.sort((a, b) => b?.timestamp - a?.timestamp);
}, [debouncedValue, messages, selectedMember, isPrivate]);
const mentionList = useMemo(() => {
- if(!messages || messages.length === 0 || !myName) return []
- if(isPrivate === false){
+ if (!messages || messages.length === 0 || !myName) return [];
+ if (isPrivate === false) {
return messages
- .filter((message) =>
- extractTextFromHTML(message?.messageText)?.includes(`@${myName?.toLowerCase()}`)
- )
- ?.sort((a, b) => b?.timestamp - a?.timestamp);
-
+ .filter((message) =>
+ extractTextFromHTML(message?.messageText)?.includes(
+ `@${myName?.toLowerCase()}`
+ )
+ )
+ ?.sort((a, b) => b?.timestamp - a?.timestamp);
}
return messages
.filter((message) =>
- extractTextFromHTML(message?.decryptedData?.message)?.includes(`@${myName?.toLowerCase()}`)
+ extractTextFromHTML(message?.decryptedData?.message)?.includes(
+ `@${myName?.toLowerCase()}`
+ )
)
?.sort((a, b) => b?.timestamp - a?.timestamp);
}, [messages, myName, isPrivate]);
@@ -203,60 +218,54 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
overscan: 10, // Number of items to render outside the visible area to improve smoothness
});
-
-
- if (mode === "mentions") {
+ if (mode === 'mentions') {
return (
{
- setMode("default");
+ setMode('default');
}}
sx={{
- cursor: "pointer",
- color: "white",
+ cursor: 'pointer',
+ color: theme.palette.text.primary,
}}
/>
-
-
-
{mentionList?.length === 0 && (
No results
@@ -264,72 +273,77 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
)}
@@ -340,47 +354,46 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
);
}
- if (mode === "search") {
+ if (mode === 'search') {
return (
{
- setMode("default");
+ setMode('default');
}}
sx={{
- cursor: "pointer",
- color: "white",
+ cursor: 'pointer',
+ color: theme.palette.text.primary,
}}
/>
@@ -392,8 +405,8 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
sx={{ ml: 1, flex: 1 }}
placeholder="Search chat text"
inputProps={{
- "aria-label": "Search for apps",
- fontSize: "16px",
+ 'aria-label': 'Search for apps',
+ fontSize: '16px',
fontWeight: 400,
}}
/>
@@ -402,7 +415,7 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
{searchValue && (
{
- setSearchValue("");
+ setSearchValue('');
}}
>
@@ -411,52 +424,51 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
-
- {!!selectedMember && (
- {
- setSelectedMember(0);
- }}
sx={{
- cursor: "pointer",
- color: "white",
+ alignItems: 'center',
+ display: 'flex',
+ justifyContent: 'space-between',
+ padding: '10px',
}}
- />
- )}
-
-
-
+ >
+
+ {!!selectedMember && (
+ {
+ setSelectedMember(0);
+ }}
+ sx={{
+ cursor: 'pointer',
+ color: theme.palette.text.primary,
+ }}
+ />
+ )}
+
+
{debouncedValue && searchedList?.length === 0 && (
No results
@@ -464,79 +476,81 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
)}
- {
- setMode("search")
- }}>
+ {
+ setMode('search');
+ }}
+ >
SEARCH}
+ title={
+
+ SEARCH
+
+ }
placement="left"
arrow
- sx={{ fontSize: "24" }}
+ sx={{ fontSize: '24' }}
slotProps={{
tooltip: {
sx: {
- color: "#ffffff",
- backgroundColor: "#444444",
+ color: theme.palette.text.primary,
+ backgroundColor: theme.palette.background.default,
},
},
arrow: {
sx: {
- color: "#444444",
+ color: theme.palette.text.secondary,
},
},
}}
@@ -598,157 +624,188 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
- {
- setMode("default")
- setSearchValue('')
- setSelectedMember(0)
- openQManager()
- }}>
+ {
+ setMode('default');
+ setSearchValue('');
+ setSelectedMember(0);
+ openQManager();
+ }}
+ >
Q-MANAGER}
+ title={
+
+ Q-MANAGER
+
+ }
placement="left"
arrow
- sx={{ fontSize: "24" }}
+ sx={{ fontSize: '24' }}
slotProps={{
tooltip: {
sx: {
- color: "#ffffff",
- backgroundColor: "#444444",
+ color: theme.palette.text.primary,
+ backgroundColor: theme.palette.background.default,
},
},
arrow: {
sx: {
- color: "#444444",
+ color: theme.palette.text.secondary,
},
},
}}
>
-
-
- {
- setMode("mentions")
- setSearchValue('')
- setSelectedMember(0)
- }}>
- MENTIONED}
- placement="left"
- arrow
- sx={{ fontSize: "24" }}
- slotProps={{
- tooltip: {
- sx: {
- color: "#ffffff",
- backgroundColor: "#444444",
- },
- },
- arrow: {
- sx: {
- color: "#444444",
- },
- },
+
+ {
+ setMode('mentions');
+ setSearchValue('');
+ setSelectedMember(0);
}}
>
- 0 && (!lastMentionTimestamp || lastMentionTimestamp < mentionList[0]?.timestamp) ? 'var(--unread)' : 'white'
- }} />
-
-
-
+
+ MENTIONED
+
+ }
+ placement="left"
+ arrow
+ sx={{ fontSize: '24' }}
+ slotProps={{
+ tooltip: {
+ sx: {
+ color: theme.palette.text.primary,
+ backgroundColor: theme.palette.background.default,
+ },
+ },
+ arrow: {
+ sx: {
+ color: theme.palette.text.secondary,
+ },
+ },
+ }}
+ >
+ 0 &&
+ (!lastMentionTimestamp ||
+ lastMentionTimestamp < mentionList[0]?.timestamp)
+ ? 'var(--unread)'
+ : 'white',
+ }}
+ />
+
+
-
-
);
};
-
-const ShowMessage = ({message, goToMessage, messages})=> {
+const ShowMessage = ({ message, goToMessage, messages }) => {
+ const theme = useTheme();
return (
-
-
-
-
- {message?.senderName?.charAt(0)}
-
-
- {message?.senderName}
-
-
-
- {formatTimestamp(message.timestamp)}
- {
- const findMsgIndex = messages.findIndex(
- (item) =>
- item?.signature === message?.signature
- );
- if (findMsgIndex !== -1) {
- goToMessage(findMsgIndex);
- }
- }}
- >
- {message?.messageText && (
- "
- }
- />
- )}
-
-
-
- )
-}
\ No newline at end of file
+
+
+
+
+ {message?.senderName?.charAt(0)}
+
+
+ {message?.senderName}
+
+
+
+
+
+ {formatTimestamp(message.timestamp)}
+
+ {
+ const findMsgIndex = messages.findIndex(
+ (item) => item?.signature === message?.signature
+ );
+ if (findMsgIndex !== -1) {
+ goToMessage(findMsgIndex);
+ }
+ }}
+ >
+ {message?.messageText && (
+ '}
+ />
+ )}
+
+
+ );
+};
diff --git a/src/components/Chat/CreateCommonSecret.tsx b/src/components/Chat/CreateCommonSecret.tsx
index 4c9f1d4..6c4fcfa 100644
--- a/src/components/Chat/CreateCommonSecret.tsx
+++ b/src/components/Chat/CreateCommonSecret.tsx
@@ -1,35 +1,56 @@
-import { Box, Button, Typography } from '@mui/material'
-import React, { useContext } from 'react'
+import React, { useContext } from 'react';
+import { Box, Button, Typography, useTheme } from '@mui/material';
import { CustomizedSnackbars } from '../Snackbar/Snackbar';
import { LoadingButton } from '@mui/lab';
-import { MyContext, getArbitraryEndpointReact, getBaseApiReact, pauseAllQueues } from '../../App';
+import {
+ MyContext,
+ getArbitraryEndpointReact,
+ getBaseApiReact,
+ pauseAllQueues,
+} from '../../App';
import { getFee } from '../../background';
-import { decryptResource, getGroupAdmins, validateSecretKey } from '../Group/Group';
+import {
+ decryptResource,
+ getGroupAdmins,
+ validateSecretKey,
+} from '../Group/Group';
import { base64ToUint8Array } from '../../qdn/encryption/group-encryption';
import { uint8ArrayToObject } from '../../backgroundFunctions/encryption';
-export const CreateCommonSecret = ({groupId, secretKey, isOwner, myAddress, secretKeyDetails, userInfo, noSecretKey, setHideCommonKeyPopup, setIsForceShowCreationKeyPopup, isForceShowCreationKeyPopup}) => {
+export const CreateCommonSecret = ({
+ groupId,
+ secretKey,
+ isOwner,
+ myAddress,
+ secretKeyDetails,
+ userInfo,
+ noSecretKey,
+ setHideCommonKeyPopup,
+ setIsForceShowCreationKeyPopup,
+ isForceShowCreationKeyPopup,
+}) => {
const { show, setTxList } = useContext(MyContext);
const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null);
- const [isLoading, setIsLoading] = React.useState(false)
+ const [isLoading, setIsLoading] = React.useState(false);
+
+ const theme = useTheme();
const getPublishesFromAdmins = async (admins: string[]) => {
// const validApi = await findUsableApi();
- const queryString = admins.map((name) => `name=${name}`).join("&");
+ const queryString = admins.map((name) => `name=${name}`).join('&');
const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT_PRIVATE&identifier=symmetric-qchat-group-${
groupId
}&exactmatchnames=true&limit=0&reverse=true&${queryString}&prefix=true`;
const response = await fetch(url);
- if(!response.ok){
- throw new Error('network error')
+ if (!response.ok) {
+ throw new Error('network error');
}
const adminData = await response.json();
-
+
const filterId = adminData.filter(
- (data: any) =>
- data.identifier === `symmetric-qchat-group-${groupId}`
+ (data: any) => data.identifier === `symmetric-qchat-group-${groupId}`
);
if (filterId?.length === 0) {
return false;
@@ -38,149 +59,182 @@ export const CreateCommonSecret = ({groupId, secretKey, isOwner, myAddress, sec
// Get the most recent date for both a and b
const dateA = a.updated ? new Date(a.updated) : new Date(a.created);
const dateB = b.updated ? new Date(b.updated) : new Date(b.created);
-
+
// Sort by most recent
return dateB.getTime() - dateA.getTime();
});
-
+
return sortedData[0];
};
- const getSecretKey = async (loadingGroupParam?: boolean, secretKeyToPublish?: boolean) => {
+
+ const getSecretKey = async (
+ loadingGroupParam?: boolean,
+ secretKeyToPublish?: boolean
+ ) => {
try {
- pauseAllQueues()
-
-
-
- const {names} = await getGroupAdmins(groupId);
- if(!names.length){
- throw new Error('Network error')
+ pauseAllQueues();
+
+ const { names } = await getGroupAdmins(groupId);
+ if (!names.length) {
+ throw new Error('Network error');
}
const publish = await getPublishesFromAdmins(names);
-
-
+
if (publish === false) {
-
return false;
}
-
+
const res = await fetch(
`${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${publish.name}/${
publish.identifier
}?encoding=base64&rebuild=true`
);
const data = await res.text();
-
+
const decryptedKey: any = await decryptResource(data);
-
+
const dataint8Array = base64ToUint8Array(decryptedKey.data);
const decryptedKeyToObject = uint8ArrayToObject(dataint8Array);
-
+
if (!validateSecretKey(decryptedKeyToObject))
- throw new Error("SecretKey is not valid");
-
+ throw new Error('SecretKey is not valid');
+
if (decryptedKeyToObject) {
-
return decryptedKeyToObject;
- } else {
}
-
} catch (error) {
-
-
- } finally {
+ console.log(error);
}
};
- const createCommonSecret = async ()=> {
- try {
- const fee = await getFee('ARBITRARY')
- await show({
- message: "Would you like to perform an ARBITRARY transaction?" ,
- publishFee: fee.fee + ' QORT'
- })
- setIsLoading(true)
+ const createCommonSecret = async () => {
+ try {
+ const fee = await getFee('ARBITRARY');
+ await show({
+ message: 'Would you like to perform an ARBITRARY transaction?',
+ publishFee: fee.fee + ' QORT',
+ });
+ setIsLoading(true);
- const secretKey2 = await getSecretKey()
- if((!secretKey2 && secretKey2 !== false)) throw new Error('invalid secret key')
- if (secretKey2 && !validateSecretKey(secretKey2)) throw new Error('invalid secret key')
+ const secretKey2 = await getSecretKey();
+ if (!secretKey2 && secretKey2 !== false)
+ throw new Error('invalid secret key');
+ if (secretKey2 && !validateSecretKey(secretKey2))
+ throw new Error('invalid secret key');
- const secretKeyToSend = !secretKey2 ? null : secretKey2
-
-
- window.sendMessage("encryptAndPublishSymmetricKeyGroupChat", {
- groupId: groupId,
- previousData: secretKeyToSend,
- })
- .then((response) => {
- if (!response?.error) {
- setInfoSnack({
- type: "success",
- message: "Successfully re-encrypted secret key. It may take a couple of minutes for the changes to propagate. Refresh the group in 5 mins.",
- });
- setOpenSnack(true);
- setTxList((prev) => [
- {
- ...response,
- type: 'created-common-secret',
- label: `Published secret key for group ${groupId}: awaiting confirmation`,
- labelDone: `Published secret key for group ${groupId}: success!`,
- done: false,
- groupId,
- },
- ...prev,
- ]);
- }
- setIsLoading(false);
- setTimeout(() => {
- setIsForceShowCreationKeyPopup(false)
- }, 1000);
- })
- .catch((error) => {
- console.error("Failed to encrypt and publish symmetric key for group chat:", error.message || "An error occurred");
- setIsLoading(false);
+ const secretKeyToSend = !secretKey2 ? null : secretKey2;
+
+ window
+ .sendMessage('encryptAndPublishSymmetricKeyGroupChat', {
+ groupId: groupId,
+ previousData: secretKeyToSend,
+ })
+ .then((response) => {
+ if (!response?.error) {
+ setInfoSnack({
+ type: 'success',
+ message:
+ 'Successfully re-encrypted secret key. It may take a couple of minutes for the changes to propagate. Refresh the group in 5 mins.',
});
-
- } catch (error) {
-
- }
+ setOpenSnack(true);
+ setTxList((prev) => [
+ {
+ ...response,
+ type: 'created-common-secret',
+ label: `Published secret key for group ${groupId}: awaiting confirmation`,
+ labelDone: `Published secret key for group ${groupId}: success!`,
+ done: false,
+ groupId,
+ },
+ ...prev,
+ ]);
+ }
+ setIsLoading(false);
+ setTimeout(() => {
+ setIsForceShowCreationKeyPopup(false);
+ }, 1000);
+ })
+ .catch((error) => {
+ console.error(
+ 'Failed to encrypt and publish symmetric key for group chat:',
+ error.message || 'An error occurred'
+ );
+ setIsLoading(false);
+ });
+ } catch (error) {
+ console.log(error);
}
-
+ };
return (
-
- Re-encrypt key
- {noSecretKey ? (
-
- There is no group secret key. Be the first admin to publish one!
-
- ) : isOwner && secretKeyDetails && userInfo?.name && userInfo.name !== secretKeyDetails?.name ? (
-
- The latest group secret key was published by a non-owner. As the owner of the group please re-encrypt the key as a safeguard
-
- ): isForceShowCreationKeyPopup ? null : (
-
- The group member list has changed. Please re-encrypt the secret key.
-
- )}
-
-
+ flexDirection: 'column',
+ gap: '25px',
+ maxWidth: '350px',
+ padding: '25px',
+ }}
+ >
+
+ Re-encrypt key
+
+
+ {noSecretKey ? (
+
+
+ There is no group secret key. Be the first admin to publish one!
+
+
+ ) : isOwner &&
+ secretKeyDetails &&
+ userInfo?.name &&
+ userInfo.name !== secretKeyDetails?.name ? (
+
+
+ The latest group secret key was published by a non-owner. As the
+ owner of the group please re-encrypt the key as a safeguard
+
+
+ ) : isForceShowCreationKeyPopup ? null : (
+
+
+ The group member list has changed. Please re-encrypt the secret key.
+
+
+ )}
+
+
+
-
-
- )
-}
+ );
+};
diff --git a/src/components/Chat/GroupAnnouncements.tsx b/src/components/Chat/GroupAnnouncements.tsx
index 98dd48b..4221af7 100644
--- a/src/components/Chat/GroupAnnouncements.tsx
+++ b/src/components/Chat/GroupAnnouncements.tsx
@@ -5,31 +5,22 @@ import React, {
useRef,
useState,
} from 'react';
-import { CreateCommonSecret } from './CreateCommonSecret';
-import { reusableGet } from '../../qdn/publish/pubish';
import { uint8ArrayToObject } from '../../backgroundFunctions/encryption';
import {
base64ToUint8Array,
objectToBase64,
} from '../../qdn/encryption/group-encryption';
-import { ChatContainerComp } from './ChatContainer';
-import { ChatList } from './ChatList';
import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
import Tiptap from './TipTap';
-import {
- AuthenticatedContainerInnerTop,
- CustomButton,
-} from '../../styles/App-styles';
+import { CustomButton } from '../../styles/App-styles';
import CircularProgress from '@mui/material/CircularProgress';
-import { getBaseApi, getFee } from '../../background';
+import { getFee } from '../../background';
import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, useTheme } from '@mui/material';
import { Spacer } from '../../common/Spacer';
import ShortUniqueId from 'short-unique-id';
import { AnnouncementList } from './AnnouncementList';
-const uid = new ShortUniqueId({ length: 8 });
import CampaignIcon from '@mui/icons-material/Campaign';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { AnnouncementDiscussion } from './AnnouncementDiscussion';
import {
MyContext,
@@ -42,9 +33,11 @@ import {
import { RequestQueueWithPromise } from '../../utils/queue/queue';
import { CustomizedSnackbars } from '../Snackbar/Snackbar';
import { addDataPublishesFunc, getDataPublishesFunc } from '../Group/Group';
-import { getRootHeight } from '../../utils/mobile/mobileUtils';
+
+const uid = new ShortUniqueId({ length: 8 });
export const requestQueueCommentCount = new RequestQueueWithPromise(3);
+
export const requestQueuePublishedAccouncements = new RequestQueueWithPromise(
3
);
@@ -106,7 +99,9 @@ export const decryptPublishes = async (encryptedMessages: any[], secretKey) => {
rej(error.message || 'An error occurred');
});
});
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
};
export const handleUnencryptedPublishes = (publishes) => {
let publishesData = [];
@@ -117,10 +112,13 @@ export const handleUnencryptedPublishes = (publishes) => {
if (decodedData) {
publishesData.push({ decryptedData: decodedData });
}
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
});
return publishesData;
};
+
export const GroupAnnouncements = ({
selectedGroup,
secretKey,
@@ -236,7 +234,9 @@ export const GroupAnnouncements = ({
rej(error.message || 'An error occurred');
});
});
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
};
const publishAnc = async ({ encryptedData, identifier }: any) => {
@@ -258,6 +258,7 @@ export const GroupAnnouncements = ({
});
});
};
+
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
@@ -286,17 +287,21 @@ export const GroupAnnouncements = ({
});
setTempPublishedList(tempData);
}
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
};
const publishAnnouncement = async () => {
try {
pauseAllQueues();
const fee = await getFee('ARBITRARY');
+
await show({
message: 'Would you like to perform a ARBITRARY transaction?',
publishFee: fee.fee + ' QORT',
});
+
if (isSending) return;
if (editorRef.current) {
const htmlContent = editorRef.current.getHTML();
@@ -379,8 +384,7 @@ export const GroupAnnouncements = ({
);
}
} catch (error) {
- } finally {
- // dispatch(setIsLoadingGlobal(false))
+ console.log(error);
}
},
[secretKey]
@@ -422,11 +426,15 @@ export const GroupAnnouncements = ({
isPrivate
);
}
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
};
const interval = useRef(null);
+ const theme = useTheme();
+
const checkNewMessages = React.useCallback(async () => {
try {
const identifier = `grp-${selectedGroup}-anc-`;
@@ -449,7 +457,9 @@ export const GroupAnnouncements = ({
},
isPrivate
);
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
}
setAnnouncements(responseData);
return;
@@ -467,11 +477,13 @@ export const GroupAnnouncements = ({
{ name: data.name, identifier: data.identifier },
isPrivate
);
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
}
setAnnouncements((prev) => [...newArray, ...prev]);
} catch (error) {
- } finally {
+ console.log(error);
}
}, [announcements, secretKey, selectedGroup]);
@@ -523,10 +535,10 @@ export const GroupAnnouncements = ({
: 'calc(100vh - 70px)',
display: 'flex',
flexDirection: 'column',
- width: '100%',
- visibility: hide && 'hidden',
- position: hide && 'fixed',
left: hide && '-1000px',
+ position: hide && 'fixed',
+ visibility: hide && 'hidden',
+ width: '100%',
}}
>
{isFocusedParent && (
@@ -678,43 +688,46 @@ export const GroupAnnouncements = ({
// Unfocus the editor
}}
style={{
- marginTop: 'auto',
alignSelf: 'center',
- cursor: isSending ? 'default' : 'pointer',
background: 'var(--danger)',
+ cursor: isSending ? 'default' : 'pointer',
flexShrink: 0,
- padding: isMobile && '5px',
- fontSize: isMobile && '14px',
+ fontSize: '14px',
+ marginTop: 'auto',
+ padding: '5px',
}}
>
{` Close`}
)}
+
{
if (isSending) return;
publishAnnouncement();
}}
style={{
- marginTop: 'auto',
alignSelf: 'center',
+ background: isSending
+ ? theme.palette.background.default
+ : theme.palette.background.paper,
cursor: isSending ? 'default' : 'pointer',
- background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
- padding: isMobile && '5px',
- fontSize: isMobile && '14px',
+ fontSize: '14px',
+ marginTop: 'auto',
+ padding: '5px',
}}
>
{isSending && (
);
};
diff --git a/src/components/Chat/MentionList.tsx b/src/components/Chat/MentionList.tsx
index 85f6890..06cea5c 100644
--- a/src/components/Chat/MentionList.tsx
+++ b/src/components/Chat/MentionList.tsx
@@ -1,69 +1,68 @@
-import React, {
- forwardRef, useEffect, useImperativeHandle,
- useState,
- } from 'react'
-
- export default forwardRef((props, ref) => {
- const [selectedIndex, setSelectedIndex] = useState(0)
-
- const selectItem = index => {
- const item = props.items[index]
-
- if (item) {
- props.command(item)
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+
+export default forwardRef((props, ref) => {
+ const [selectedIndex, setSelectedIndex] = useState(0);
+
+ const selectItem = (index) => {
+ const item = props.items[index];
+
+ if (item) {
+ props.command(item);
+ }
+ };
+
+ const upHandler = () => {
+ setSelectedIndex(
+ (selectedIndex + props.items.length - 1) % props.items.length
+ );
+ };
+
+ const downHandler = () => {
+ setSelectedIndex((selectedIndex + 1) % props.items.length);
+ };
+
+ const enterHandler = () => {
+ selectItem(selectedIndex);
+ };
+
+ useEffect(() => setSelectedIndex(0), [props.items]);
+
+ useImperativeHandle(ref, () => ({
+ onKeyDown: ({ event }) => {
+ if (event.key === 'ArrowUp') {
+ upHandler();
+ return true;
}
- }
-
- const upHandler = () => {
- setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length)
- }
-
- const downHandler = () => {
- setSelectedIndex((selectedIndex + 1) % props.items.length)
- }
-
- const enterHandler = () => {
- selectItem(selectedIndex)
- }
-
- useEffect(() => setSelectedIndex(0), [props.items])
-
- useImperativeHandle(ref, () => ({
- onKeyDown: ({ event }) => {
- if (event.key === 'ArrowUp') {
- upHandler()
- return true
- }
-
- if (event.key === 'ArrowDown') {
- downHandler()
- return true
- }
-
- if (event.key === 'Enter') {
- enterHandler()
- return true
- }
-
- return false
- },
- }))
-
- return (
- ]*data-url="qortal:\/\/use-embed\/[^"]*"[^>]*>.*?<\/span>/g, '');
- }, [htmlContent])
+ }).replace(
+ /]*data-url="qortal:\/\/use-embed\/[^"]*"[^>]*>.*?<\/span>/g,
+ ''
+ );
+ }, [htmlContent]);
const handleClick = async (e) => {
e.preventDefault();
@@ -98,7 +144,7 @@ export const MessageDisplay = ({ htmlContent, isReply }) => {
const target = e.target;
if (target.tagName === 'A') {
const href = target.getAttribute('href');
- if(window?.electronAPI){
+ if (window?.electronAPI) {
window.electronAPI.openExternal(href);
} else {
window.open(href, '_system');
@@ -106,32 +152,32 @@ export const MessageDisplay = ({ htmlContent, isReply }) => {
} else if (target.getAttribute('data-url')) {
const url = target.getAttribute('data-url');
- let copyUrl = url
+ let copyUrl = url;
- try {
- copyUrl = copyUrl.replace(/^(qortal:\/\/)/, '')
- if (copyUrl.startsWith('use-')) {
- // Handle the new 'use' format
- const parts = copyUrl.split('/')
- const type = parts[0].split('-')[1] // e.g., 'group' from 'use-group'
- parts.shift()
- const action = parts.length > 0 ? parts[0].split('-')[1] : null // e.g., 'invite' from 'action-invite'
- parts.shift()
- const idPrefix = parts.length > 0 ? parts[0].split('-')[0] : null // e.g., 'groupid' from 'groupid-321'
- const id = parts.length > 0 ? parts[0].split('-')[1] : null // e.g., '321' from 'groupid-321'
- if(action === 'join'){
- executeEvent("globalActionJoinGroup", { groupId: id});
- return
+ try {
+ copyUrl = copyUrl.replace(/^(qortal:\/\/)/, '');
+ if (copyUrl.startsWith('use-')) {
+ // Handle the new 'use' format
+ const parts = copyUrl.split('/');
+ const type = parts[0].split('-')[1]; // e.g., 'group' from 'use-group'
+ parts.shift();
+ const action = parts.length > 0 ? parts[0].split('-')[1] : null; // e.g., 'invite' from 'action-invite'
+ parts.shift();
+ const idPrefix = parts.length > 0 ? parts[0].split('-')[0] : null; // e.g., 'groupid' from 'groupid-321'
+ const id = parts.length > 0 ? parts[0].split('-')[1] : null; // e.g., '321' from 'groupid-321'
+ if (action === 'join') {
+ executeEvent('globalActionJoinGroup', { groupId: id });
+ return;
+ }
}
+ } catch (error) {
+ //error
}
- } catch (error) {
- //error
- }
const res = extractComponents(url);
if (res) {
const { service, name, identifier, path } = res;
- executeEvent("addTab", { data: { service, name, identifier, path } });
- executeEvent("open-apps-mode", { });
+ executeEvent('addTab', { data: { service, name, identifier, path } });
+ executeEvent('open-apps-mode', {});
}
}
};
@@ -141,19 +187,24 @@ export const MessageDisplay = ({ htmlContent, isReply }) => {
let embedData = null;
if (embedLink) {
- embedData = embedLink[0]
+ embedData = embedLink[0];
}
return (
- <>
- {embedLink && (
-
- )}
-
-
+
+ {embedLink && }
+
+
);
};
diff --git a/src/components/Chat/MessageItem.tsx b/src/components/Chat/MessageItem.tsx
index 4d9019c..a40fca8 100644
--- a/src/components/Chat/MessageItem.tsx
+++ b/src/components/Chat/MessageItem.tsx
@@ -1,573 +1,653 @@
-import { Message } from "@chatscope/chat-ui-kit-react";
-import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { useInView } from "react-intersection-observer";
-import { MessageDisplay } from "./MessageDisplay";
-import { Avatar, Box, Button, ButtonBase, List, ListItem, ListItemText, Popover, Tooltip, Typography } from "@mui/material";
-import { formatTimestamp } from "../../utils/time";
-import { getBaseApi } from "../../background";
-import { MyContext, getBaseApiReact } from "../../App";
-import { generateHTML } from "@tiptap/react";
-import Highlight from "@tiptap/extension-highlight";
-import Mention from "@tiptap/extension-mention";
-import StarterKit from "@tiptap/starter-kit";
-import Underline from "@tiptap/extension-underline";
-import { executeEvent } from "../../utils/events";
-import { WrapperUserAction } from "../WrapperUserAction";
-import ReplyIcon from "@mui/icons-material/Reply";
-import { Spacer } from "../../common/Spacer";
-import { ReactionPicker } from "../ReactionPicker";
+import React, {
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import { useInView } from 'react-intersection-observer';
+import { MessageDisplay } from './MessageDisplay';
+import {
+ Avatar,
+ Box,
+ Button,
+ ButtonBase,
+ List,
+ ListItem,
+ ListItemText,
+ Popover,
+ Tooltip,
+ Typography,
+ useTheme,
+} from '@mui/material';
+import { formatTimestamp } from '../../utils/time';
+import { MyContext, getBaseApiReact } from '../../App';
+import { generateHTML } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import Mention from '@tiptap/extension-mention';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import { WrapperUserAction } from '../WrapperUserAction';
+import ReplyIcon from '@mui/icons-material/Reply';
+import { Spacer } from '../../common/Spacer';
+import { ReactionPicker } from '../ReactionPicker';
import KeyOffIcon from '@mui/icons-material/KeyOff';
import EditIcon from '@mui/icons-material/Edit';
import TextStyle from '@tiptap/extension-text-style';
-import { addressInfoKeySelector } from "../../atoms/global";
-import { useRecoilValue } from "recoil";
-import level0Img from "../../assets/badges/level-0.png"
-import level1Img from "../../assets/badges/level-1.png"
-import level2Img from "../../assets/badges/level-2.png"
-import level3Img from "../../assets/badges/level-3.png"
-import level4Img from "../../assets/badges/level-4.png"
-import level5Img from "../../assets/badges/level-5.png"
-import level6Img from "../../assets/badges/level-6.png"
-import level7Img from "../../assets/badges/level-7.png"
-import level8Img from "../../assets/badges/level-8.png"
-import level9Img from "../../assets/badges/level-9.png"
-import level10Img from "../../assets/badges/level-10.png"
+import level0Img from '../../assets/badges/level-0.png';
+import level1Img from '../../assets/badges/level-1.png';
+import level2Img from '../../assets/badges/level-2.png';
+import level3Img from '../../assets/badges/level-3.png';
+import level4Img from '../../assets/badges/level-4.png';
+import level5Img from '../../assets/badges/level-5.png';
+import level6Img from '../../assets/badges/level-6.png';
+import level7Img from '../../assets/badges/level-7.png';
+import level8Img from '../../assets/badges/level-8.png';
+import level9Img from '../../assets/badges/level-9.png';
+import level10Img from '../../assets/badges/level-10.png';
-const getBadgeImg = (level)=> {
- switch(level?.toString()){
-
- case '0': return level0Img
- case '1': return level1Img
- case '2': return level2Img
- case '3': return level3Img
- case '4': return level4Img
- case '5': return level5Img
- case '6': return level6Img
- case '7': return level7Img
- case '8': return level8Img
- case '9': return level9Img
- case '10': return level10Img
- default: return level0Img
+const getBadgeImg = (level) => {
+ switch (level?.toString()) {
+ case '0':
+ return level0Img;
+ case '1':
+ return level1Img;
+ case '2':
+ return level2Img;
+ case '3':
+ return level3Img;
+ case '4':
+ return level4Img;
+ case '5':
+ return level5Img;
+ case '6':
+ return level6Img;
+ case '7':
+ return level7Img;
+ case '8':
+ return level8Img;
+ case '9':
+ return level9Img;
+ case '10':
+ return level10Img;
+ default:
+ return level0Img;
}
-}
-export const MessageItem = React.memo(({
- message,
- onSeen,
- isLast,
- isTemp,
- myAddress,
- onReply,
- isShowingAsReply,
- reply,
- replyIndex,
- scrollToItem,
- handleReaction,
- reactions,
- isUpdating,
- lastSignature,
- onEdit,
- isPrivate
-}) => {
+};
-const {getIndividualUserInfo} = useContext(MyContext)
- const [anchorEl, setAnchorEl] = useState(null);
- const [selectedReaction, setSelectedReaction] = useState(null);
- const [userInfo, setUserInfo] = useState(null)
+export const MessageItem = React.memo(
+ ({
+ message,
+ onSeen,
+ isLast,
+ isTemp,
+ myAddress,
+ onReply,
+ isShowingAsReply,
+ reply,
+ replyIndex,
+ scrollToItem,
+ handleReaction,
+ reactions,
+ isUpdating,
+ lastSignature,
+ onEdit,
+ isPrivate,
+ }) => {
+ const { getIndividualUserInfo } = useContext(MyContext);
+ const [anchorEl, setAnchorEl] = useState(null);
+ const [selectedReaction, setSelectedReaction] = useState(null);
+ const [userInfo, setUserInfo] = useState(null);
-useEffect(()=> {
- const getInfo = async ()=> {
- if(!message?.sender) return
- try {
- const res = await getIndividualUserInfo(message?.sender)
- if(!res) return null
- setUserInfo(res)
- } catch (error) {
- //
- }
- }
+ useEffect(() => {
+ const getInfo = async () => {
+ if (!message?.sender) return;
+ try {
+ const res = await getIndividualUserInfo(message?.sender);
+ if (!res) return null;
+ setUserInfo(res);
+ } catch (error) {
+ //
+ }
+ };
- getInfo()
-}, [message?.sender, getIndividualUserInfo])
+ getInfo();
+ }, [message?.sender, getIndividualUserInfo]);
-const htmlText = useMemo(()=> {
-
- if(message?.messageText){
- return generateHTML(message?.messageText, [
- StarterKit,
- Underline,
- Highlight,
- Mention,
- TextStyle
- ])
- }
-
-}, [message?.editTimestamp])
+ const htmlText = useMemo(() => {
+ if (message?.messageText) {
+ return generateHTML(message?.messageText, [
+ StarterKit,
+ Underline,
+ Highlight,
+ Mention,
+ TextStyle,
+ ]);
+ }
+ }, [message?.editTimestamp]);
+ const htmlReply = useMemo(() => {
+ if (reply?.messageText) {
+ return generateHTML(reply?.messageText, [
+ StarterKit,
+ Underline,
+ Highlight,
+ Mention,
+ TextStyle,
+ ]);
+ }
+ }, [reply?.editTimestamp]);
+ const userAvatarUrl = useMemo(() => {
+ return message?.senderName
+ ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${
+ message?.senderName
+ }/qortal_avatar?async=true`
+ : '';
+ }, []);
-const htmlReply = useMemo(()=> {
-
- if(reply?.messageText){
- return generateHTML(reply?.messageText, [
- StarterKit,
- Underline,
- Highlight,
- Mention,
- TextStyle
- ])
- }
-
-}, [reply?.editTimestamp])
+ const onSeenFunc = useCallback(() => {
+ onSeen(message.id);
+ }, [message?.id]);
-const userAvatarUrl = useMemo(()=> {
- return message?.senderName ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${
- message?.senderName
- }/qortal_avatar?async=true` : ''
-}, [])
+ const theme = useTheme();
-const onSeenFunc = useCallback(()=> {
- onSeen(message.id);
-}, [message?.id])
+ return (
+ <>
+ {message?.divide && (
+
-
-
-
-
- );
-});
+
+
+
+
+ {message?.senderName || message?.sender}
+
+
+
+ {message?.sender === myAddress &&
+ (!message?.isNotEncrypted || isPrivate === false) && (
+ {
+ onEdit(message);
+ }}
+ >
+
+ )}
+ {!isShowingAsReply && (
+ {
+ onReply(message);
+ }}
+ >
+
+ )}
+ {!isShowingAsReply && handleReaction && (
+ {
+ if (
+ reactions &&
+ reactions[val] &&
+ reactions[val]?.find(
+ (item) => item?.sender === myAddress
+ )
+ ) {
+ handleReaction(val, message, false);
+ } else {
+ handleReaction(val, message, true);
+ }
+ }}
+ />
+ )}
+
+
+ {reply && (
+ <>
+ {
+ scrollToItem(replyIndex);
+ }}
+ >
+
+
+ Replied to {reply?.senderName || reply?.senderAddress}
+
+ {reply?.messageText && (
+
+
+
+ )}
+ {htmlText &&
+
+ {reactions &&
+ Object.keys(reactions).map((reaction) => {
+ const numberOfReactions = reactions[reaction]?.length;
+ // const myReaction = reactions
+ if (numberOfReactions === 0) return null;
+ return (
+ {
+ event.stopPropagation(); // Prevent event bubbling
+ setAnchorEl(event.currentTarget);
+ setSelectedReaction(reaction);
+ }}
+ >
+
+ {' '}
+ {numberOfReactions}
+
+ )}
+
+ );
+ })}
+
+
+ {selectedReaction && (
+ {
+ setAnchorEl(null);
+ setSelectedReaction(null);
+ }}
+ anchorOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}
+ transformOrigin={{
+ vertical: 'bottom',
+ horizontal: 'center',
+ }}
+ PaperProps={{
+ // TODO: deprecated
+ style: {
+ backgroundColor: theme.palette.background.default,
+ color: theme.palette.text.primary,
+ },
+ }}
+ >
+
+
+ People who reacted with {selectedReaction}
+
+
+
+
+ )}
+
+ {message?.isNotEncrypted && isPrivate && (
+
+ {message?.status === 'failed-permanent'
+ ? 'Failed to update'
+ : 'Updating...'}
+
+ ) : isTemp ? (
+
+ {message?.status === 'failed-permanent'
+ ? 'Failed to send'
+ : 'Sending...'}
+
+ ) : (
+ <>
+ {message?.isEdit && (
+
+ Edited
+
+ )}
+
+ {formatTimestamp(message.timestamp)}
+
+
+ )}
+
+
+
+
+
+
+ );
+ }
+);
+
+export const ReplyPreview = ({ message, isEdit = false }) => {
+ const theme = useTheme();
return (
+
+ {isEdit ? (
+
-
- {isEdit ? (
- Editing Message
- ) : (
- Replied to {message?.senderName || message?.senderAddress}
- )}
-
- {message?.messageText && (
-
-
-
- )
-}
+ Editing Message
+
+ ) : (
+
+ Replied to {message?.senderName || message?.senderAddress}
+
+ )}
-const MessageWragger = ({lastMessage, onSeen, isLast, children})=> {
+ {message?.messageText && (
+
+
+ );
+};
+
+const MessageWragger = ({ lastMessage, onSeen, isLast, children }) => {
+ if (lastMessage) {
return (
- {children}
- )
+
+ {children}
+
+ );
}
- return children
-}
+ return children;
+};
-const WatchComponent = ({onSeen, isLast, children})=> {
+const WatchComponent = ({ onSeen, isLast, children }) => {
const { ref, inView } = useInView({
threshold: 0.7, // Fully visible
triggerOnce: true, // Only trigger once when it becomes visible
@@ -577,20 +657,22 @@ const WatchComponent = ({onSeen, isLast, children})=> {
useEffect(() => {
if (inView && isLast && onSeen) {
-
- setTimeout(() => {
- onSeen();
+ setTimeout(() => {
+ onSeen();
}, 100);
-
}
}, [inView, isLast, onSeen]);
- return
-
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const index = virtualRow.index;
let message = messages[index] || null; // Safeguard against undefined
@@ -231,7 +230,7 @@ export const ChatList = ({
let reply = null;
let reactions = null;
let isUpdating = false;
-
+
try {
// Safeguard for message existence
if (message) {
@@ -239,16 +238,19 @@ export const ChatList = ({
replyIndex = messages.findIndex(
(msg) => msg?.signature === message?.repliedTo
);
-
+
if (message?.repliedTo && replyIndex !== -1) {
reply = { ...(messages[replyIndex] || {}) };
if (chatReferences?.[reply?.signature]?.edit) {
- reply.decryptedData = chatReferences[reply?.signature]?.edit;
- reply.text = chatReferences[reply?.signature]?.edit?.message;
- reply.editTimestamp = chatReferences[reply?.signature]?.edit?.timestamp
+ reply.decryptedData =
+ chatReferences[reply?.signature]?.edit;
+ reply.text =
+ chatReferences[reply?.signature]?.edit?.message;
+ reply.editTimestamp =
+ chatReferences[reply?.signature]?.edit?.timestamp;
}
}
-
+
// GroupDirectId logic
if (message?.message && message?.groupDirectId) {
replyIndex = messages.findIndex(
@@ -264,24 +266,34 @@ export const ChatList = ({
status: message?.status,
};
}
-
+
// Check for reactions and edits
if (chatReferences?.[message.signature]) {
- reactions = chatReferences[message.signature]?.reactions || null;
-
- if (chatReferences[message.signature]?.edit?.message && message?.text) {
- message.text = chatReferences[message.signature]?.edit?.message;
- message.isEdit = true
- message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp
+ reactions =
+ chatReferences[message.signature]?.reactions || null;
+
+ if (
+ chatReferences[message.signature]?.edit?.message &&
+ message?.text
+ ) {
+ message.text =
+ chatReferences[message.signature]?.edit?.message;
+ message.isEdit = true;
+ message.editTimestamp =
+ chatReferences[message.signature]?.edit?.timestamp;
}
- if (chatReferences[message.signature]?.edit?.messageText && message?.messageText) {
- message.messageText = chatReferences[message.signature]?.edit?.messageText;
- message.isEdit = true
- message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp
+ if (
+ chatReferences[message.signature]?.edit?.messageText &&
+ message?.messageText
+ ) {
+ message.messageText =
+ chatReferences[message.signature]?.edit?.messageText;
+ message.isEdit = true;
+ message.editTimestamp =
+ chatReferences[message.signature]?.edit?.timestamp;
}
-
}
-
+
// Check if message is updating
if (
tempChatReferences?.some(
@@ -292,34 +304,37 @@ export const ChatList = ({
}
}
} catch (error) {
- console.error("Error processing message:", error, { index, message });
+ console.error('Error processing message:', error, {
+ index,
+ message,
+ });
// Gracefully handle the error by providing fallback data
message = null;
reply = null;
reactions = null;
}
- // Render fallback if message is null
+ // Render fallback if message is null
if (!message) {
- return (
-
- Error loading message.
-
- );
- }
+ return (
+
+ Error loading message.
+
+ );
+ }
return (
-
Error loading content: Invalid Data
}
>
-
+
);
})}
-
- {rowVirtualizerMentions.getVirtualItems().map((virtualRow) => {
- const index = virtualRow.index;
- let message = mentionList[index];
- return (
-
-
- );
- })}
+ {rowVirtualizerMentions
+ .getVirtualItems()
+ .map((virtualRow) => {
+ const index = virtualRow.index;
+ let message = mentionList[index];
+ return (
+
+
+ );
+ })}
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const index = virtualRow.index;
let message = searchedList[index];
return (
-
@@ -551,46 +565,58 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
return (
-
- Error loading content: Invalid Data
-
- }
- >
-
+ Error loading content: Invalid Data
+
+ }
+ >
+
-
);
})}
{!isMobile && (
)}
-
+
{!isLoading && combinedListTempAndReal?.length === 0 && (
-
+ style={{
+ display: 'flex',
+ flexDirection: 'column',
+ height: 'calc(100vh - 70px)',
+ left: hide && '-1000px',
+ opacity: hide ? 0 : 1,
+ position: hide ? 'fixed' : 'relative',
+ visibility: hide && 'hidden',
+ width: '100%',
+ }}
+ >
+
- {props.items.length
- ? props.items.map((item, index) => (
-
- ))
- :
- )
- })
-
\ No newline at end of file
+
+ if (event.key === 'ArrowDown') {
+ downHandler();
+ return true;
+ }
+
+ if (event.key === 'Enter') {
+ enterHandler();
+ return true;
+ }
+
+ return false;
+ },
+ }));
+
+ return (
+ No result
- }
-
+ {props.items.length ? (
+ props.items.map((item, index) => (
+
+ ))
+ ) : (
+
+ );
+});
diff --git a/src/components/Chat/MessageDisplay.tsx b/src/components/Chat/MessageDisplay.tsx
index 52d0d93..2bf3d6f 100644
--- a/src/components/Chat/MessageDisplay.tsx
+++ b/src/components/Chat/MessageDisplay.tsx
@@ -1,28 +1,29 @@
-import React, { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
import DOMPurify from 'dompurify';
-import './styles.css';
+import './chat.css';
import { executeEvent } from '../../utils/events';
import { Embed } from '../Embeds/Embed';
+import { Box, useTheme } from '@mui/material';
export const extractComponents = (url) => {
- if (!url || !url.startsWith("qortal://")) {
+ if (!url || !url.startsWith('qortal://')) {
return null;
}
// Skip links starting with "qortal://use-"
- if (url.startsWith("qortal://use-")) {
+ if (url.startsWith('qortal://use-')) {
return null;
}
- url = url.replace(/^(qortal\:\/\/)/, "");
- if (url.includes("/")) {
- let parts = url.split("/");
+ url = url.replace(/^(qortal\:\/\/)/, '');
+ if (url.includes('/')) {
+ let parts = url.split('/');
const service = parts[0].toUpperCase();
parts.shift();
const name = parts[0];
parts.shift();
let identifier;
- const path = parts.join("/");
+ const path = parts.join('/');
return { service, name, identifier, path };
}
@@ -64,8 +65,7 @@ function processText(input) {
}
const linkify = (text) => {
- if (!text) return ""; // Return an empty string if text is null or undefined
-
+ if (!text) return ''; // Return an empty string if text is null or undefined
let textFormatted = text;
const urlPattern = /(\bhttps?:\/\/[^\s<]+|\bwww\.[^\s<]+)/g;
textFormatted = text.replace(urlPattern, (url) => {
@@ -75,22 +75,68 @@ const linkify = (text) => {
return processText(textFormatted);
};
-
export const MessageDisplay = ({ htmlContent, isReply }) => {
+ const theme = useTheme();
-
- const sanitizedContent = useMemo(()=> {
+ const sanitizedContent = useMemo(() => {
return DOMPurify.sanitize(linkify(htmlContent), {
ALLOWED_TAGS: [
- 'a', 'b', 'i', 'em', 'strong', 'p', 'br', 'div', 'span', 'img',
- 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'code', 'pre', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 's', 'hr'
+ 'a',
+ 'b',
+ 'i',
+ 'em',
+ 'strong',
+ 'p',
+ 'br',
+ 'div',
+ 'span',
+ 'img',
+ 'ul',
+ 'ol',
+ 'li',
+ 'h1',
+ 'h2',
+ 'h3',
+ 'h4',
+ 'h5',
+ 'h6',
+ 'blockquote',
+ 'code',
+ 'pre',
+ 'table',
+ 'thead',
+ 'tbody',
+ 'tr',
+ 'th',
+ 'td',
+ 's',
+ 'hr',
],
ALLOWED_ATTR: [
- 'href', 'target', 'rel', 'class', 'src', 'alt', 'title',
- 'width', 'height', 'style', 'align', 'valign', 'colspan', 'rowspan', 'border', 'cellpadding', 'cellspacing', 'data-url'
+ 'href',
+ 'target',
+ 'rel',
+ 'class',
+ 'src',
+ 'alt',
+ 'title',
+ 'width',
+ 'height',
+ 'style',
+ 'align',
+ 'valign',
+ 'colspan',
+ 'rowspan',
+ 'border',
+ 'cellpadding',
+ 'cellspacing',
+ 'data-url',
],
- }).replace(/No result
+ )}
+
+ Unread messages below
+
+ )}
-
- return (
- <>
- {message?.divide && (
-
- Unread messages below
-
- )}
-
-
- {isShowingAsReply ? (
-
-
-
-
- {message?.senderName?.charAt(0)}
-
-
-
-
-
-
-
- })
-
-
- )}
-
-
-
-
-
- {message?.senderName || message?.sender}
-
-
-
-
- {message?.sender === myAddress && (!message?.isNotEncrypted || isPrivate === false) && (
- {
- onEdit(message);
- }}
- >
-
- )}
- {!isShowingAsReply && (
- {
- onReply(message);
- }}
- >
-
- )}
- {!isShowingAsReply && handleReaction && (
- {
-
- if(reactions && reactions[val] && reactions[val]?.find((item)=> item?.sender === myAddress)){
- handleReaction(val, message, false)
- } else {
- handleReaction(val, message, true)
- }
-
- }} />
- )}
-
-
- {reply && (
- <>
- {
- scrollToItem(replyIndex)
-
-
+ gap: '7px',
+ opacity: isTemp || isUpdating ? 0.5 : 1,
+ padding: '10px',
+ width: '95%',
}}
+ id={message?.signature}
>
-
- Replied to {reply?.senderName || reply?.senderAddress}
- {reply?.messageText && (
-
-
-
- )}
- {htmlText && (
-
-
- {reactions && Object.keys(reactions).map((reaction)=> {
- const numberOfReactions = reactions[reaction]?.length
- // const myReaction = reactions
- if(numberOfReactions === 0) return null
- return (
- {
- event.stopPropagation(); // Prevent event bubbling
- setAnchorEl(event.currentTarget);
- setSelectedReaction(reaction);
- }}>
- {' '} {numberOfReactions}
- )}
-
- )
- })}
-
- {selectedReaction && (
- {
- setAnchorEl(null);
- setSelectedReaction(null);
- }}
- anchorOrigin={{
- vertical: "top",
- horizontal: "center",
- }}
- transformOrigin={{
- vertical: "bottom",
- horizontal: "center",
- }}
- PaperProps={{
- style: {
- backgroundColor: "#232428",
- color: "white",
- },
- }}
- >
-
-
- People who reacted with {selectedReaction}
-
-
+ {message?.senderName?.charAt(0)}
+
+
+
+
+
-
- )}
-
- {message?.isNotEncrypted && isPrivate && (
-
- {message?.status === 'failed-permanent' ? 'Failed to update' : 'Updating...'}
-
- ) : isTemp ? (
-
- {message?.status === 'failed-permanent' ? 'Failed to send' : 'Sending...'}
-
- ) : (
- <>
- {message?.isEdit && (
-
- Edited
-
- )}
-
- {formatTimestamp(message.timestamp)}
-
-
- )}
-
-
-
-
-
- {reaction}
{numberOfReactions > 1 && (
- -
- {reactions[selectedReaction]?.map((reactionItem) => (
-
+ {reaction}
+
{' '}
+ {numberOfReactions > 1 && (
+ -
+ {reactions[selectedReaction]?.map((reactionItem) => (
+
- {children}
-
-
-}
\ No newline at end of file
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/components/Chat/ResizableImage.tsx b/src/components/Chat/ResizableImage.tsx
index 8c29292..881c1d7 100644
--- a/src/components/Chat/ResizableImage.tsx
+++ b/src/components/Chat/ResizableImage.tsx
@@ -1,8 +1,10 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
import { NodeViewWrapper } from '@tiptap/react';
+import { useTheme } from '@mui/material';
const ResizableImage = ({ node, updateAttributes, selected }) => {
const imgRef = useRef(null);
+ const theme = useTheme();
const startResizing = (e) => {
e.preventDefault();
@@ -40,18 +42,23 @@ const ResizableImage = ({ node, updateAttributes, selected }) => {
src={node.attrs.src}
alt={node.attrs.alt || ''}
title={node.attrs.title || ''}
- style={{ width: node.attrs.width || 'auto', display: 'block', margin: '0 auto' }}
+ style={{
+ width: node.attrs.width || 'auto',
+ display: 'block',
+ margin: '0 auto',
+ }}
draggable={false} // Prevent image dragging
/>
+
{
+
+const MenuBar = ({
+ setEditorRef,
+ isChat,
+ isDisabledEditorEnter,
+ setIsDisabledEditorEnter,
+}) => {
const { editor } = useCurrentEditor();
const fileInputRef = useRef(null);
+ const theme = useTheme();
if (!editor) {
return null;
@@ -67,15 +68,15 @@ const MenuBar = ({ setEditorRef, isChat, isDisabledEditorEnter, setIsDisabledEdi
new Compressor(file, {
quality: 0.6,
maxWidth: 1200,
- mimeType: "image/webp",
+ mimeType: 'image/webp',
success(result) {
- compressedFile = new File([result], "image.webp", {
- type: "image/webp",
+ compressedFile = new File([result], 'image.webp', {
+ type: 'image/webp',
});
resolve();
},
error(err) {
- console.error("Image compression error:", err);
+ console.error('Image compression error:', err);
},
});
});
@@ -87,9 +88,9 @@ const MenuBar = ({ setEditorRef, isChat, isDisabledEditorEnter, setIsDisabledEdi
editor
.chain()
.focus()
- .setImage({ src: url, style: "width: auto" })
+ .setImage({ src: url, style: 'width: auto' })
.run();
- fileInputRef.current.value = "";
+ fileInputRef.current.value = '';
};
reader.readAsDataURL(compressedFile);
}
@@ -102,7 +103,7 @@ const MenuBar = ({ setEditorRef, isChat, isDisabledEditorEnter, setIsDisabledEdi
const handlePaste = (event) => {
const items = event.clipboardData.items;
for (const item of items) {
- if (item.type.startsWith("image/")) {
+ if (item.type.startsWith('image/')) {
const file = item.getAsFile();
if (file) {
event.preventDefault(); // Prevent the default paste behavior
@@ -114,24 +115,29 @@ const MenuBar = ({ setEditorRef, isChat, isDisabledEditorEnter, setIsDisabledEdi
useEffect(() => {
if (editor) {
- editor.view.dom.addEventListener("paste", handlePaste);
+ editor.view.dom.addEventListener('paste', handlePaste);
return () => {
- editor.view.dom.removeEventListener("paste", handlePaste);
+ editor.view.dom.removeEventListener('paste', handlePaste);
};
}
}, [editor]);
return (
-
+
editor.chain().focus().toggleBold().run()}
disabled={!editor.can().chain().focus().toggleBold().run()}
sx={{
- color: editor.isActive("bold") ? "white" : "gray",
- padding: isMobile ? "5px" : "revert",
+ color: editor.isActive('bold')
+ ? theme.palette.text.primary
+ : theme.palette.text.secondary,
+ padding: isMobile ? '5px' : 'revert',
}}
>
editor.chain().focus().toggleBulletList().run()}
sx={{
- color: editor.isActive("bulletList") ? "white" : "gray",
- padding: isMobile ? "5px" : "revert",
+ color: editor.isActive('bulletList')
+ ? theme.palette.text.primary
+ : theme.palette.text.secondary,
+ padding: isMobile ? '5px' : 'revert',
}}
>
editor.chain().focus().toggleOrderedList().run()}
sx={{
- color: editor.isActive("orderedList") ? "white" : "gray",
- padding: isMobile ? "5px" : "revert",
+ color: editor.isActive('orderedList')
+ ? theme.palette.text.primary
+ : theme.palette.text.secondary,
+ padding: isMobile ? '5px' : 'revert',
}}
>
editor.chain().focus().toggleCodeBlock().run()}
sx={{
- color: editor.isActive("codeBlock") ? "white" : "gray",
- padding: isMobile ? "5px" : "revert",
+ color: editor.isActive('codeBlock')
+ ? theme.palette.text.primary
+ : theme.palette.text.secondary,
+ padding: isMobile ? '5px' : 'revert',
}}
>
editor.chain().focus().toggleBlockquote().run()}
sx={{
- color: editor.isActive("blockquote") ? "white" : "gray",
- padding: isMobile ? "5px" : "revert",
+ color: editor.isActive('blockquote')
+ ? theme.palette.text.primary
+ : theme.palette.text.secondary,
+ padding: isMobile ? '5px' : 'revert',
}}
>
editor.chain().focus().setHorizontalRule().run()}
disabled={!editor.can().chain().focus().setHorizontalRule().run()}
- sx={{ color: "gray", padding: isMobile ? "5px" : "revert" }}
+ sx={{ color: 'gray', padding: isMobile ? '5px' : 'revert' }}
>
@@ -229,8 +249,10 @@ const MenuBar = ({ setEditorRef, isChat, isDisabledEditorEnter, setIsDisabledEdi
editor.chain().focus().toggleHeading({ level: 1 }).run()
}
sx={{
- color: editor.isActive("heading", { level: 1 }) ? "white" : "gray",
- padding: isMobile ? "5px" : "revert",
+ color: editor.isActive('heading', { level: 1 })
+ ? theme.palette.text.primary
+ : theme.palette.text.secondary,
+ padding: isMobile ? '5px' : 'revert',
}}
>
editor.chain().focus().undo().run()}
disabled={!editor.can().chain().focus().undo().run()}
- sx={{ color: "gray", padding: isMobile ? "5px" : "revert" }}
+ sx={{ color: 'gray', padding: isMobile ? '5px' : 'revert' }}
>
editor.chain().focus().redo().run()}
disabled={!editor.can().chain().focus().redo().run()}
- sx={{ color: "gray" }}
+ sx={{ color: 'gray' }}
>
{isChat && (
{
- setIsDisabledEditorEnter(!isDisabledEditorEnter)
- }}
- >
-
- disable enter
-
-
+ sx={{
+ display: 'flex',
+ alignItems: 'center',
+ marginLeft: '5px',
+ cursor: 'pointer',
+ }}
+ onClick={() => {
+ setIsDisabledEditorEnter(!isDisabledEditorEnter);
+ }}
+ >
+
+ disable enter
+
+
)}
{!isChat && (
<>
handleImageUpload(event.target.files[0])}
accept="image/*"
/>
@@ -322,7 +346,7 @@ const extensions = [
},
}),
Placeholder.configure({
- placeholder: "Start typing here...",
+ placeholder: 'Start typing here...',
}),
ImageResize,
];
@@ -340,12 +364,13 @@ export default ({
overrideMobile,
customEditorHeight,
membersWithNames,
- enableMentions
+ enableMentions,
}) => {
- const [isDisabledEditorEnter, setIsDisabledEditorEnter] = useRecoilState(isDisabledEditorEnterAtom)
-
+ const [isDisabledEditorEnter, setIsDisabledEditorEnter] = useRecoilState(
+ isDisabledEditorEnterAtom
+ );
const extensionsFiltered = isChat
- ? extensions.filter((item) => item?.name !== "image")
+ ? extensions.filter((item) => item?.name !== 'image')
: extensions;
const editorRef = useRef(null);
const setEditorRefFunc = (editorInstance) => {
@@ -359,20 +384,14 @@ export default ({
// { id: 3, label: 'Charlie' },
// ];
-
-
- const users = useMemo(()=> {
- return (membersWithNames || [])?.map((item)=> {
+ const users = useMemo(() => {
+ return (membersWithNames || [])?.map((item) => {
return {
id: item,
- label: item
- }
- })
- }, [membersWithNames])
-
-
-
-
+ label: item,
+ };
+ });
+ }, [membersWithNames]);
const usersRef = useRef([]);
useEffect(() => {
@@ -386,13 +405,13 @@ export default ({
const handleBlur = () => {
const htmlContent = editorRef.current.getHTML();
- if (!htmlContent?.trim() || htmlContent?.trim() === "") {
+ if (!htmlContent?.trim() || htmlContent?.trim() === '') {
// Set focus state based on content
}
};
- const additionalExtensions = useMemo(()=> {
- if(!enableMentions) return []
+ const additionalExtensions = useMemo(() => {
+ if (!enableMentions) return [];
return [
Mention.configure({
HTMLAttributes: {
@@ -409,122 +428,129 @@ export default ({
let popup; // Reference to the Tippy.js instance
let component;
- return {
- onStart: props => {
- component = new ReactRenderer(MentionList, {
- props,
- editor: props.editor,
- })
-
- if (!props.clientRect) {
- return
- }
-
- popup = tippy('body', {
- getReferenceClientRect: props.clientRect,
- appendTo: () => document.body,
- content: component.element,
- showOnCreate: true,
- interactive: true,
- trigger: 'manual',
- placement: 'bottom-start',
- })
- },
-
- onUpdate(props) {
- component.updateProps(props)
-
- if (!props.clientRect) {
- return
- }
-
- popup[0].setProps({
- getReferenceClientRect: props.clientRect,
- })
- },
-
- onKeyDown(props) {
- if (props.event.key === 'Escape') {
- popup[0].hide()
-
- return true
- }
-
- return component.ref?.onKeyDown(props)
- },
-
- onExit() {
- popup[0].destroy()
- component.destroy()
- },
- }
+ return {
+ onStart: (props) => {
+ component = new ReactRenderer(MentionList, {
+ props,
+ editor: props.editor,
+ });
+
+ if (!props.clientRect) {
+ return;
+ }
+
+ popup = tippy('body', {
+ getReferenceClientRect: props.clientRect,
+ appendTo: () => document.body,
+ content: component.element,
+ showOnCreate: true,
+ interactive: true,
+ trigger: 'manual',
+ placement: 'bottom-start',
+ });
+ },
+
+ onUpdate(props) {
+ component.updateProps(props);
+
+ if (!props.clientRect) {
+ return;
+ }
+
+ popup[0].setProps({
+ getReferenceClientRect: props.clientRect,
+ });
+ },
+
+ onKeyDown(props) {
+ if (props.event.key === 'Escape') {
+ popup[0].hide();
+
+ return true;
+ }
+
+ return component.ref?.onKeyDown(props);
+ },
+
+ onExit() {
+ popup[0].destroy();
+ component.destroy();
+ },
+ };
},
},
- })
- ]
- }, [enableMentions])
+ }),
+ ];
+ }, [enableMentions]);
- const handleSetIsDisabledEditorEnter = useCallback((val)=> {
- setIsDisabledEditorEnter(val)
+ const handleSetIsDisabledEditorEnter = useCallback((val) => {
+ setIsDisabledEditorEnter(val);
localStorage.setItem('settings-disable-editor-enter', JSON.stringify(val));
-
- }, [])
-
+ }, []);
return (
-
{children}
{label}
@@ -68,18 +68,20 @@ export const DesktopFooter = ({
const [isEnabledDevMode, setIsEnabledDevMode] =
useRecoilState(enabledDevModeAtom);
+ const theme = useTheme();
+
if (hide) return;
return (
+
+
+
{
goToHome();
@@ -51,10 +61,13 @@ export const DesktopSideBar = ({
+
{
setDesktopViewMode('apps');
@@ -63,17 +76,22 @@ export const DesktopSideBar = ({
}}
>
+
{
setDesktopViewMode('chat');
@@ -98,24 +116,7 @@ export const DesktopSideBar = ({
/>
- {/* {
- setDesktopSideView("groups");
- toggleSideViewGroups()
- }}
- >
- */}
+
{
-
+export const DrawerComponent = ({ open, setOpen, children }) => {
const toggleDrawer = (newOpen: boolean) => () => {
setOpen(newOpen);
};
-
return (
-
-
- {children}
-
+
+ {children}
+
);
-}
+};
diff --git a/src/components/Drawer/DrawerUserLookup.tsx b/src/components/Drawer/DrawerUserLookup.tsx
index f64e096..9f8427a 100644
--- a/src/components/Drawer/DrawerUserLookup.tsx
+++ b/src/components/Drawer/DrawerUserLookup.tsx
@@ -1,22 +1,26 @@
-import * as React from 'react';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
-export const DrawerUserLookup = ({open, setOpen, children}) => {
-
+export const DrawerUserLookup = ({ open, setOpen, children }) => {
const toggleDrawer = (newOpen: boolean) => () => {
setOpen(newOpen);
};
-
return (
{
+ if (poll?.info?.owner) {
+ getName(poll.info.owner);
+ }
+ }, [poll?.info?.owner]);
+
+ return (
+
+
-
- POLL embed
+
+
+
+ POLL embed
-
-
+
+ {external && (
-
- {external && (
-
-
- )}
-
+ )}
-
+
+
-
+
+
+ {!isOpen && !errorMsg && (
+ <>
+
- Created by {ownerName || poll?.info?.owner}
-
-
-
- {!isOpen && !errorMsg && (
- <>
-
- {" "}
-
- )}
- {errorMsg && (
-
- {" "}
-
- {errorMsg}
- {" "}
-
- )}
-
-
-
-
+ )}
+ {errorMsg && (
+
+ >
+ {' '}
- Options
-
- setSelectedOption(e.target.value)}
- >
- {poll?.info?.pollOptions?.map((option, index) => (
-
-
-
- {' '}
+
+ )}
+
+
+
+
+
+ Options
+
+ setSelectedOption(e.target.value)}
+ >
+ {poll?.info?.pollOptions?.map((option, index) => (
+
+
+
+
+ {' '}
+ {`${poll?.votes?.totalVotes} ${
+ poll?.votes?.totalVotes === 1 ? ' vote' : ' votes'
+ }`}
+
+
+
+ item?.voterPublicKey === userInfo?.publicKey
+ )
+ ? 'visible'
+ : 'hidden',
+ }}
+ >
+ You've already voted.
+
+
+ Is processing transaction, please wait...
+
+ )}
+ {
+ setShowResults((prev) => !prev);
+ }}
+ >
+ {showResults ? 'hide ' : 'show '} results
+
+
+ {showResults &&
+
+ );
+};
+
+const PollResults = ({ votes }) => {
+ const maxVotes = Math.max(
+ ...votes?.voteCounts?.map((option) => option.voteCount)
+ );
+ const options = votes?.voteCounts;
+ return (
+
+ {options
+ .sort((a, b) => b.voteCount - a.voteCount) // Sort options by votes (highest first)
+ .map((option, index) => (
+
+
+
- {" "}
- {`${poll?.votes?.totalVotes} ${
- poll?.votes?.totalVotes === 1 ? " vote" : " votes"
- }`}
+ {`${index + 1}. ${option.optionName}`}
+
+
+ {option.voteCount} votes
-
- item?.voterPublicKey === userInfo?.publicKey
- )
- ? "visible"
- : "hidden",
+ mt: 1,
+ height: 10,
+ backgroundColor: '#e0e0e0',
+ borderRadius: 5,
+ overflow: 'hidden',
}}
>
- You've already voted.
-
-
- Is processing transaction, please wait...
-
- )}
- {
- setShowResults((prev) => !prev);
- }}
- >
- {showResults ? "hide " : "show "} results
-
-
- {showResults &&
- {options
- .sort((a, b) => b.voteCount - a.voteCount) // Sort options by votes (highest first)
- .map((option, index) => (
-
-
-
- {`${index + 1}. ${option.optionName}`}
-
-
- {option.voteCount} votes
-
-
-
+ />
- ))}
-
- );
- };
\ No newline at end of file
+
+ ))}
+
+ );
+};
diff --git a/src/components/Group/AddGroup.tsx b/src/components/Group/AddGroup.tsx
index 1cf86fe..5be818b 100644
--- a/src/components/Group/AddGroup.tsx
+++ b/src/components/Group/AddGroup.tsx
@@ -1,19 +1,15 @@
-import * as React from "react";
-import Button from "@mui/material/Button";
-import Dialog from "@mui/material/Dialog";
-import ListItemText from "@mui/material/ListItemText";
-import ListItemButton from "@mui/material/ListItemButton";
-import List from "@mui/material/List";
-import Divider from "@mui/material/Divider";
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
-import CloseIcon from "@mui/icons-material/Close";
-import ExpandLess from "@mui/icons-material/ExpandLess";
-import ExpandMore from "@mui/icons-material/ExpandMore";
-import Slide from "@mui/material/Slide";
-import { TransitionProps } from "@mui/material/transitions";
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import CloseIcon from '@mui/icons-material/Close';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import Slide from '@mui/material/Slide';
+import { TransitionProps } from '@mui/material/transitions';
import {
Box,
Collapse,
@@ -24,23 +20,23 @@ import {
Tab,
Tabs,
styled,
-} from "@mui/material";
-import { AddGroupList } from "./AddGroupList";
-import { UserListOfInvites } from "./UserListOfInvites";
-import { CustomizedSnackbars } from "../Snackbar/Snackbar";
-import { getFee } from "../../background";
-import { MyContext, isMobile } from "../../App";
-import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
+ useTheme,
+} from '@mui/material';
+import { AddGroupList } from './AddGroupList';
+import { UserListOfInvites } from './UserListOfInvites';
+import { CustomizedSnackbars } from '../Snackbar/Snackbar';
+import { getFee } from '../../background';
+import { MyContext, isMobile } from '../../App';
+import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
-export const Label = styled("label")(
- ({ theme }) => `
+export const Label = styled('label')`
+ display: block;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px;
- display: block;
- margin-bottom: 4px;
font-weight: 400;
- `
-);
+ margin-bottom: 4px;
+`;
+
const Transition = React.forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement;
@@ -51,17 +47,15 @@ const Transition = React.forwardRef(function Transition(
});
export const AddGroup = ({ address, open, setOpen }) => {
- const {show, setTxList} = React.useContext(MyContext)
-
- const [tab, setTab] = React.useState("create");
+ const { show, setTxList } = React.useContext(MyContext);
+ const [tab, setTab] = React.useState('create');
const [openAdvance, setOpenAdvance] = React.useState(false);
-
- const [name, setName] = React.useState("");
- const [description, setDescription] = React.useState("");
- const [groupType, setGroupType] = React.useState("1");
- const [approvalThreshold, setApprovalThreshold] = React.useState("40");
- const [minBlock, setMinBlock] = React.useState("5");
- const [maxBlock, setMaxBlock] = React.useState("21600");
+ const [name, setName] = React.useState('');
+ const [description, setDescription] = React.useState('');
+ const [groupType, setGroupType] = React.useState('1');
+ const [approvalThreshold, setApprovalThreshold] = React.useState('40');
+ const [minBlock, setMinBlock] = React.useState('5');
+ const [maxBlock, setMaxBlock] = React.useState('21600');
const [value, setValue] = React.useState(0);
const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null);
@@ -69,6 +63,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue);
};
+
const handleClose = () => {
setOpen(false);
};
@@ -89,58 +84,59 @@ export const AddGroup = ({ address, open, setOpen }) => {
setMaxBlock(event.target.value as string);
};
-
+ const theme = useTheme();
const handleCreateGroup = async () => {
try {
- if(!name) throw new Error('Please provide a name')
- if(!description) throw new Error('Please provide a description')
+ if (!name) throw new Error('Please provide a name');
+ if (!description) throw new Error('Please provide a description');
- const fee = await getFee('CREATE_GROUP')
+ const fee = await getFee('CREATE_GROUP');
await show({
- message: "Would you like to perform an CREATE_GROUP transaction?" ,
- publishFee: fee.fee + ' QORT'
- })
+ message: 'Would you like to perform an CREATE_GROUP transaction?',
+ publishFee: fee.fee + ' QORT',
+ });
- await new Promise((res, rej) => {
- window.sendMessage("createGroup", {
- groupName: name,
- groupDescription: description,
- groupType: +groupType,
- groupApprovalThreshold: +approvalThreshold,
- minBlock: +minBlock,
- maxBlock: +maxBlock,
- })
- .then((response) => {
- if (!response?.error) {
- setInfoSnack({
- type: "success",
- message: "Successfully created group. It may take a couple of minutes for the changes to propagate",
- });
- setOpenSnack(true);
- setTxList((prev) => [
- {
- ...response,
- type: 'created-group',
- label: `Created group ${name}: awaiting confirmation`,
- labelDone: `Created group ${name}: success!`,
- done: false,
- },
- ...prev,
- ]);
- res(response);
- return;
- }
- rej({ message: response.error });
- })
- .catch((error) => {
- rej({ message: error.message || "An error occurred" });
- });
-
+ await new Promise((res, rej) => {
+ window
+ .sendMessage('createGroup', {
+ groupName: name,
+ groupDescription: description,
+ groupType: +groupType,
+ groupApprovalThreshold: +approvalThreshold,
+ minBlock: +minBlock,
+ maxBlock: +maxBlock,
+ })
+ .then((response) => {
+ if (!response?.error) {
+ setInfoSnack({
+ type: 'success',
+ message:
+ 'Successfully created group. It may take a couple of minutes for the changes to propagate',
+ });
+ setOpenSnack(true);
+ setTxList((prev) => [
+ {
+ ...response,
+ type: 'created-group',
+ label: `Created group ${name}: awaiting confirmation`,
+ labelDone: `Created group ${name}: success!`,
+ done: false,
+ },
+ ...prev,
+ ]);
+ res(response);
+ return;
+ }
+ rej({ message: response.error });
+ })
+ .catch((error) => {
+ rej({ message: error.message || 'An error occurred' });
+ });
});
} catch (error) {
setInfoSnack({
- type: "error",
+ type: 'error',
message: error?.message,
});
setOpenSnack(true);
@@ -166,20 +162,22 @@ export const AddGroup = ({ address, open, setOpen }) => {
function a11yProps(index: number) {
return {
id: `simple-tab-${index}`,
- "aria-controls": `simple-tabpanel-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
};
}
-
- const openGroupInvitesRequestFunc = ()=> {
- setValue(2)
- }
+ const openGroupInvitesRequestFunc = () => {
+ setValue(2);
+ };
React.useEffect(() => {
- subscribeToEvent("openGroupInvitesRequest", openGroupInvitesRequestFunc);
+ subscribeToEvent('openGroupInvitesRequest', openGroupInvitesRequestFunc);
return () => {
- unsubscribeFromEvent("openGroupInvitesRequest", openGroupInvitesRequestFunc);
+ unsubscribeFromEvent(
+ 'openGroupInvitesRequest',
+ openGroupInvitesRequestFunc
+ );
};
}, []);
@@ -191,17 +189,22 @@ export const AddGroup = ({ address, open, setOpen }) => {
onClose={handleClose}
TransitionComponent={Transition}
>
-
+
-
- Group Mgmt
+
+ Group Management
@@ -213,275 +216,292 @@ export const AddGroup = ({ address, open, setOpen }) => {
-
-
-
+
+
+
-
+
{value === 0 && (
-
-
- setName(e.target.value)}
- />
-
-
-
-
- setDescription(e.target.value)}
- />
-
-
-
-
-
- setOpenAdvance((prev) => !prev)}
- >
- Advanced options
-
- {openAdvance ?
-
-
+
+ setName(e.target.value)}
+ />
+
+
+
+
+ setDescription(e.target.value)}
+ />
+
+
+
setOpenAdvance((prev) => !prev)}
>
-
-
+ Advanced options
+
+ {openAdvance ?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+ Create Group
+
-
-
-
-
)}
{value === 1 && (
-
-
+
-
)}
-
- {value === 2 && (
-
-
- )}
-
+ {value === 2 && (
+
+
+ )}
-
Join {group?.groupName}
{group?.isOpen === false &&
- "This is a closed/private group, so you will need to wait until an admin accepts your request"}
+ 'This is a closed/private group, so you will need to wait until an admin accepts your request'}
{
onClick={(event) => handlePopoverOpen(event, index)}
>
{group?.isOpen === false && (
- {
};
return (
-
+
{
/>
- 
+
);
diff --git a/src/components/Desktop/DesktopFooter.tsx b/src/components/Desktop/DesktopFooter.tsx
index 3bcaad5..ebfbc6f 100644
--- a/src/components/Desktop/DesktopFooter.tsx
+++ b/src/components/Desktop/DesktopFooter.tsx
@@ -22,27 +22,27 @@ export const IconWrapper = ({
return (
{
- editor.on('focus', handleFocus); // Ensure focus is updated
- editor.on('blur', handleBlur); // Ensure blur is updated
- }}
- editorProps={{
- attributes: {
- class: "tiptap-prosemirror",
- style:
- isMobile ?
- `overflow: auto; min-height: ${
- customEditorHeight ? "200px" : "0px"
- }; max-height:calc(100svh - ${customEditorHeight || "140px"})`: `overflow: auto; max-height: 250px`,
- },
- handleKeyDown(view, event) {
- if (!disableEnter && !isDisabledEditorEnter && event.key === "Enter") {
- if (event.shiftKey) {
- view.dispatch(
- view.state.tr.replaceSelectionWith(
- view.state.schema.nodes.hardBreak.create()
- )
- );
- return true;
- } else {
- if (typeof onEnter === "function") {
- onEnter();
+ >
+
-
);
};
diff --git a/src/components/Chat/styles.css b/src/components/Chat/chat.css
similarity index 66%
rename from src/components/Chat/styles.css
rename to src/components/Chat/chat.css
index 3c7c570..d563d85 100644
--- a/src/components/Chat/styles.css
+++ b/src/components/Chat/chat.css
@@ -1,6 +1,6 @@
.tiptap {
margin-top: 0;
- color: white; /* Set default font color to white */
+ color: var(--text-primary);
width: 100%;
}
@@ -26,7 +26,7 @@
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
- color: white; /* Ensure heading font color is white */
+ color: var(--text-primary);
}
.tiptap h1,
@@ -55,18 +55,18 @@
/* Code and preformatted text styles */
.tiptap code {
- background-color: #27282c; /* Set code background color to #27282c */
+ background-color: var(--background-default);
border-radius: 0.4rem;
- color: white; /* Ensure inline code text color is white */
+ color: var(--text-primary);
font-size: 0.85rem;
padding: 0.25em 0.3em;
text-wrap: pretty;
}
.tiptap pre {
- background: #27282c; /* Set code block background color to #27282c */
+ background: var(--background-default);
border-radius: 0.5rem;
- color: white; /* Ensure code block text color is white */
+ color: var(--text-primary);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
@@ -86,7 +86,7 @@
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
- color: white; /* Ensure blockquote text color is white */
+ color: var(--text-primary);
text-wrap: pretty;
}
@@ -102,49 +102,49 @@
.tiptap p {
font-size: 16px;
- color: white; /* Ensure paragraph text color is white */
+ color: var(--text-primary);
margin: 0px;
}
- .tiptap p.is-editor-empty:first-child::before {
- color: #adb5bd;
- content: attr(data-placeholder);
- float: left;
- height: 0;
- pointer-events: none;
- }
- .tiptap p:empty::before {
- content: '';
- display: inline-block;
- }
+.tiptap p.is-editor-empty:first-child::before {
+ color: var(--text-primary);
+ content: attr(data-placeholder);
+ float: left;
+ height: 0;
+ pointer-events: none;
+}
+
+.tiptap p:empty::before {
+ content: '';
+ display: inline-block;
+}
.tiptap a {
- color: cadetblue
+ color: cadetblue;
}
.tiptap img {
display: block;
- max-width: 100%;
+ max-width: 100%;
}
.isReply p {
font-size: 12px !important;
}
-.tiptap [data-type="mention"] {
+.tiptap [data-type='mention'] {
box-decoration-break: clone;
- color: lightblue;
+ color: var(--text-secondary);
padding: 0.1rem 0.3rem;
}
-
.unread-divider {
+ border-bottom: 1px solid var(--text-primary);
+ border-radius: 2px;
+ color: var(--text-primary);
+ display: flex;
+ justify-content: center;
width: 90%;
- color: white;
- border-bottom: 1px solid white;
- display: flex;
- justify-content: center;
- border-radius: 2px;
}
.mention-item {
@@ -169,11 +169,10 @@
font-size: 16px;
width: 100%;
border: none;
- color: white;
- cursor: pointer;
+ color: var(--text-primary);
&:hover,
&:hover.is-selected {
- background-color: gray;
+ background-color: var(--background-default);
}
}
-}
\ No newline at end of file
+}
diff --git a/src/components/CoreSyncStatus.tsx b/src/components/CoreSyncStatus.tsx
index e0e4692..585b2e0 100644
--- a/src/components/CoreSyncStatus.tsx
+++ b/src/components/CoreSyncStatus.tsx
@@ -73,6 +73,7 @@ export const CoreSyncStatus = () => {
let imagePath = syncingImg;
let message = `Synchronizing`;
+
if (isMintingPossible && !isUsingGateway) {
imagePath = syncedMintingImg;
message = `${isSynchronizing ? 'Synchronizing' : 'Synchronized'} ${'(Minting)'}`;
@@ -101,15 +102,17 @@ export const CoreSyncStatus = () => {
Core Information
@@ -134,7 +137,6 @@ export const CoreSyncStatus = () => { {isUsingGateway?.toString()} -
-
-
-
- {children}
-
+
+
+ {children}
+
);
-}
+};
diff --git a/src/components/Embeds/Embed.tsx b/src/components/Embeds/Embed.tsx
index 65b2cef..bef39c6 100644
--- a/src/components/Embeds/Embed.tsx
+++ b/src/components/Embeds/Embed.tsx
@@ -1,42 +1,46 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { getBaseApiReact } from "../../App";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { getBaseApiReact } from '../../App';
+import { CustomizedSnackbars } from '../Snackbar/Snackbar';
-import { CustomizedSnackbars } from "../Snackbar/Snackbar";
+import { extractComponents } from '../Chat/MessageDisplay';
+import { executeEvent } from '../../utils/events';
-import { extractComponents } from "../Chat/MessageDisplay";
-import { executeEvent } from "../../utils/events";
-
-import { base64ToBlobUrl } from "../../utils/fileReading";
-import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import { blobControllerAtom, blobKeySelector, resourceKeySelector, selectedGroupIdAtom } from "../../atoms/global";
-import { parseQortalLink } from "./embed-utils";
-import { PollCard } from "./PollEmbed";
-import { ImageCard } from "./ImageEmbed";
-import { AttachmentCard } from "./AttachmentEmbed";
-import { decodeIfEncoded } from "../../utils/decode";
+import { base64ToBlobUrl } from '../../utils/fileReading';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import {
+ blobControllerAtom,
+ blobKeySelector,
+ resourceKeySelector,
+ selectedGroupIdAtom,
+} from '../../atoms/global';
+import { parseQortalLink } from './embed-utils';
+import { PollCard } from './PollEmbed';
+import { ImageCard } from './ImageEmbed';
+import { AttachmentCard } from './AttachmentEmbed';
+import { decodeIfEncoded } from '../../utils/decode';
const getPoll = async (name) => {
const pollName = name;
const url = `${getBaseApiReact()}/polls/${pollName}`;
const response = await fetch(url, {
- method: "GET",
+ method: 'GET',
headers: {
- "Content-Type": "application/json",
+ 'Content-Type': 'application/json',
},
});
const responseData = await response.json();
- if (responseData?.message?.includes("POLL_NO_EXISTS")) {
- throw new Error("POLL_NO_EXISTS");
+ if (responseData?.message?.includes('POLL_NO_EXISTS')) {
+ throw new Error('POLL_NO_EXISTS');
} else if (responseData?.pollName) {
const urlVotes = `${getBaseApiReact()}/polls/votes/${pollName}`;
const responseVotes = await fetch(urlVotes, {
- method: "GET",
+ method: 'GET',
headers: {
- "Content-Type": "application/json",
+ 'Content-Type': 'application/json',
},
});
@@ -49,56 +53,64 @@ const getPoll = async (name) => {
};
export const Embed = ({ embedLink }) => {
- const [errorMsg, setErrorMsg] = useState("");
+ const [errorMsg, setErrorMsg] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [poll, setPoll] = useState(null);
- const [type, setType] = useState("");
+ const [type, setType] = useState('');
const hasFetched = useRef(false);
const [openSnack, setOpenSnack] = useState(false);
const [infoSnack, setInfoSnack] = useState(null);
const [external, setExternal] = useState(null);
- const [imageUrl, setImageUrl] = useState("");
+ const [imageUrl, setImageUrl] = useState('');
const [parsedData, setParsedData] = useState(null);
const setBlobs = useSetRecoilState(blobControllerAtom);
- const [selectedGroupId] = useRecoilState(selectedGroupIdAtom)
- const resourceData = useMemo(()=> {
+ const [selectedGroupId] = useRecoilState(selectedGroupIdAtom);
+ const resourceData = useMemo(() => {
const parsedDataOnTheFly = parseQortalLink(embedLink);
- if(parsedDataOnTheFly?.service && parsedDataOnTheFly?.name && parsedDataOnTheFly?.identifier){
+ if (
+ parsedDataOnTheFly?.service &&
+ parsedDataOnTheFly?.name &&
+ parsedDataOnTheFly?.identifier
+ ) {
return {
- service : parsedDataOnTheFly?.service,
+ service: parsedDataOnTheFly?.service,
name: parsedDataOnTheFly?.name,
identifier: parsedDataOnTheFly?.identifier,
- fileName: parsedDataOnTheFly?.fileName ? decodeURIComponent(parsedDataOnTheFly?.fileName) : null,
- mimeType: parsedDataOnTheFly?.mimeType ? decodeURIComponent(parsedDataOnTheFly?.mimeType) : null,
- key: parsedDataOnTheFly?.key ? decodeURIComponent(parsedDataOnTheFly?.key) : null,
- }
+ fileName: parsedDataOnTheFly?.fileName
+ ? decodeURIComponent(parsedDataOnTheFly?.fileName)
+ : null,
+ mimeType: parsedDataOnTheFly?.mimeType
+ ? decodeURIComponent(parsedDataOnTheFly?.mimeType)
+ : null,
+ key: parsedDataOnTheFly?.key
+ ? decodeURIComponent(parsedDataOnTheFly?.key)
+ : null,
+ };
} else {
- return null
+ return null;
}
- }, [embedLink])
+ }, [embedLink]);
- const keyIdentifier = useMemo(()=> {
-
- if(resourceData){
- return `${resourceData.service}-${resourceData.name}-${resourceData.identifier}`
+ const keyIdentifier = useMemo(() => {
+ if (resourceData) {
+ return `${resourceData.service}-${resourceData.name}-${resourceData.identifier}`;
} else {
- return undefined
+ return undefined;
}
- }, [resourceData])
+ }, [resourceData]);
const blobUrl = useRecoilValue(blobKeySelector(keyIdentifier));
const handlePoll = async (parsedData) => {
try {
setIsLoading(true);
- setErrorMsg("");
- setType("POLL");
+ setErrorMsg('');
+ setType('POLL');
if (!parsedData?.name)
- throw new Error("Invalid poll embed link. Missing name.");
+ throw new Error('Invalid poll embed link. Missing name.');
const pollRes = await getPoll(parsedData.name);
setPoll(pollRes);
-
} catch (error) {
- setErrorMsg(error?.message || "Invalid embed link");
+ setErrorMsg(error?.message || 'Invalid embed link');
} finally {
setIsLoading(false);
}
@@ -106,8 +118,8 @@ export const Embed = ({ embedLink }) => {
const getImage = async ({ identifier, name, service }, key, parsedData) => {
try {
- if(blobUrl?.blobUrl){
- return blobUrl?.blobUrl
+ if (blobUrl?.blobUrl) {
+ return blobUrl?.blobUrl;
}
let numberOfTries = 0;
let imageFinalUrl = null;
@@ -116,76 +128,76 @@ export const Embed = ({ embedLink }) => {
const urlStatus = `${getBaseApiReact()}/arbitrary/resource/status/${service}/${name}/${identifier}?build=true`;
const responseStatus = await fetch(urlStatus, {
- method: "GET",
+ method: 'GET',
headers: {
- "Content-Type": "application/json",
+ 'Content-Type': 'application/json',
},
});
const responseData = await responseStatus.json();
- if (responseData?.status === "READY") {
+ if (responseData?.status === 'READY') {
if (parsedData?.encryptionType) {
const urlData = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}?encoding=base64`;
const responseData = await fetch(urlData, {
- method: "GET",
+ method: 'GET',
headers: {
- "Content-Type": "application/json",
+ 'Content-Type': 'application/json',
},
});
const data = await responseData.text();
if (data) {
- let decryptedData
+ let decryptedData;
try {
- if(key && encryptionType === 'private'){
+ if (key && encryptionType === 'private') {
decryptedData = await window.sendMessage(
- "DECRYPT_DATA_WITH_SHARING_KEY",
-
- {
- encryptedData: data,
+ 'DECRYPT_DATA_WITH_SHARING_KEY',
+
+ {
+ encryptedData: data,
key: decodeURIComponent(key),
- }
-
+ }
);
}
- if(encryptionType === 'group'){
-
+ if (encryptionType === 'group') {
decryptedData = await window.sendMessage(
- "DECRYPT_QORTAL_GROUP_DATA",
-
- {
- data64: data,
- groupId: selectedGroupId,
- }
-
- );
+ 'DECRYPT_QORTAL_GROUP_DATA',
- }
+ {
+ data64: data,
+ groupId: selectedGroupId,
+ }
+ );
+ }
} catch (error) {
- throw new Error('Unable to decrypt')
+ throw new Error('Unable to decrypt');
}
-
- if (!decryptedData || decryptedData?.error) throw new Error("Could not decrypt data");
- imageFinalUrl = base64ToBlobUrl(decryptedData, parsedData?.mimeType ? decodeURIComponent(parsedData?.mimeType) : undefined)
- setBlobs((prev=> {
+
+ if (!decryptedData || decryptedData?.error)
+ throw new Error('Could not decrypt data');
+ imageFinalUrl = base64ToBlobUrl(
+ decryptedData,
+ parsedData?.mimeType
+ ? decodeURIComponent(parsedData?.mimeType)
+ : undefined
+ );
+ setBlobs((prev) => {
return {
...prev,
[`${service}-${name}-${identifier}`]: {
blobUrl: imageFinalUrl,
- timestamp: Date.now()
- }
- }
- }))
+ timestamp: Date.now(),
+ },
+ };
+ });
} else {
- throw new Error('No data for image')
+ throw new Error('No data for image');
}
-
} else {
- imageFinalUrl = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}?async=true`;
-
- // If parsedData is used here, it must be defined somewhere
-
- }
+ imageFinalUrl = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}?async=true`;
+
+ // If parsedData is used here, it must be defined somewhere
+ }
}
};
@@ -203,18 +215,19 @@ export const Embed = ({ embedLink }) => {
}
if (imageFinalUrl) {
-
return imageFinalUrl;
} else {
setErrorMsg(
- "Unable to download IMAGE. Please try again later by clicking the refresh button"
+ 'Unable to download IMAGE. Please try again later by clicking the refresh button'
);
return null;
}
} catch (error) {
- console.error("Error fetching image:", error);
+ console.error('Error fetching image:', error);
setErrorMsg(
- error?.error || error?.message || "An unexpected error occurred while trying to download the image"
+ error?.error ||
+ error?.message ||
+ 'An unexpected error occurred while trying to download the image'
);
return null;
}
@@ -223,25 +236,27 @@ export const Embed = ({ embedLink }) => {
const handleImage = async (parsedData) => {
try {
setIsLoading(true);
- setErrorMsg("");
+ setErrorMsg('');
if (!parsedData?.name || !parsedData?.service || !parsedData?.identifier)
- throw new Error("Invalid image embed link. Missing param.");
- let image = await getImage({
- name: parsedData.name,
- service: parsedData.service,
- identifier: parsedData?.identifier,
- }, parsedData?.key, parsedData);
-
- setImageUrl(image);
+ throw new Error('Invalid image embed link. Missing param.');
+ let image = await getImage(
+ {
+ name: parsedData.name,
+ service: parsedData.service,
+ identifier: parsedData?.identifier,
+ },
+ parsedData?.key,
+ parsedData
+ );
+ setImageUrl(image);
} catch (error) {
- setErrorMsg(error?.message || "Invalid embed link");
+ setErrorMsg(error?.message || 'Invalid embed link');
} finally {
setIsLoading(false);
}
};
-
const handleLink = () => {
try {
const parsedData = parseQortalLink(embedLink);
@@ -254,28 +269,26 @@ export const Embed = ({ embedLink }) => {
setExternal(res);
}
}
- } catch (error) {
-
- }
+ } catch (error) {}
switch (type) {
- case "POLL":
+ case 'POLL':
{
handlePoll(parsedData);
}
break;
- case "IMAGE":
- setType("IMAGE");
+ case 'IMAGE':
+ setType('IMAGE');
+
+ break;
+ case 'ATTACHMENT':
+ setType('ATTACHMENT');
break;
- case "ATTACHMENT":
- setType("ATTACHMENT");
-
- break;
default:
break;
}
} catch (error) {
- setErrorMsg(error?.message || "Invalid embed link");
+ setErrorMsg(error?.message || 'Invalid embed link');
}
};
@@ -284,13 +297,13 @@ export const Embed = ({ embedLink }) => {
const parsedData = parseQortalLink(embedLink);
handleImage(parsedData);
} catch (error) {
- setErrorMsg(error?.message || "Invalid embed link");
+ setErrorMsg(error?.message || 'Invalid embed link');
}
};
const openExternal = () => {
- executeEvent("addTab", { data: external });
- executeEvent("open-apps-mode", {});
+ executeEvent('addTab', { data: external });
+ executeEvent('open-apps-mode', {});
};
useEffect(() => {
@@ -299,8 +312,6 @@ export const Embed = ({ embedLink }) => {
hasFetched.current = true;
}, [embedLink]);
-
-
const resourceDetails = useRecoilValue(resourceKeySelector(keyIdentifier));
const { parsedType, encryptionType } = useMemo(() => {
@@ -312,15 +323,17 @@ export const Embed = ({ embedLink }) => {
parsedType = parsedDataOnTheFly.type;
}
if (parsedDataOnTheFly?.encryptionType) {
- encryptionType = parsedDataOnTheFly?.encryptionType
+ encryptionType = parsedDataOnTheFly?.encryptionType;
}
- } catch (error) {}
+ } catch (error) {
+ console.log(error);
+ }
return { parsedType, encryptionType };
}, [embedLink]);
return (
- {parsedType === "POLL" && (
+ {parsedType === 'POLL' && (
{
errorMsg={errorMsg}
/>
)}
- {parsedType === "IMAGE" && (
+ {parsedType === 'IMAGE' && (
{
)}
{parsedType === 'ATTACHMENT' && (
{
);
};
-
-
-
-
-
-
-
-
diff --git a/src/components/Embeds/PollEmbed.tsx b/src/components/Embeds/PollEmbed.tsx
index 3da02c3..65e5983 100644
--- a/src/components/Embeds/PollEmbed.tsx
+++ b/src/components/Embeds/PollEmbed.tsx
@@ -1,5 +1,5 @@
-import React, { useContext, useEffect, useState } from "react";
-import { MyContext } from "../../App";
+import React, { useContext, useEffect, useState } from 'react';
+import { MyContext } from '../../App';
import {
Card,
CardContent,
@@ -12,384 +12,389 @@ import {
Box,
ButtonBase,
Divider,
-
-} from "@mui/material";
-import { getNameInfo } from "../Group/Group";
-import PollIcon from "@mui/icons-material/Poll";
-import { getFee } from "../../background";
-import RefreshIcon from "@mui/icons-material/Refresh";
-import { Spacer } from "../../common/Spacer";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import { CustomLoader } from "../../common/CustomLoader";
-
+} from '@mui/material';
+import { getNameInfo } from '../Group/Group';
+import PollIcon from '@mui/icons-material/Poll';
+import { getFee } from '../../background';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import { Spacer } from '../../common/Spacer';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { CustomLoader } from '../../common/CustomLoader';
export const PollCard = ({
- poll,
- setInfoSnack,
- setOpenSnack,
- refresh,
- openExternal,
- external,
- isLoadingParent,
- errorMsg,
- }) => {
- const [selectedOption, setSelectedOption] = useState("");
- const [ownerName, setOwnerName] = useState("");
- const [showResults, setShowResults] = useState(false);
- const [isOpen, setIsOpen] = useState(false);
- const { show, userInfo } = useContext(MyContext);
- const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
- const handleVote = async () => {
- const fee = await getFee("VOTE_ON_POLL");
-
- await show({
- message: `Do you accept this VOTE_ON_POLL transaction? POLLS are public!`,
- publishFee: fee.fee + " QORT",
- });
- setIsLoadingSubmit(true);
-
- window
- .sendMessage(
- "voteOnPoll",
- {
- pollName: poll?.info?.pollName,
- optionIndex: +selectedOption,
- },
- 60000
- )
- .then((response) => {
- setIsLoadingSubmit(false);
- if (response.error) {
- setInfoSnack({
- type: "error",
- message: response?.error || "Unable to vote.",
- });
- setOpenSnack(true);
- return;
- } else {
- setInfoSnack({
- type: "success",
- message:
- "Successfully voted. Please wait a couple minutes for the network to propogate the changes.",
- });
- setOpenSnack(true);
- }
- })
- .catch((error) => {
- setIsLoadingSubmit(false);
+ poll,
+ setInfoSnack,
+ setOpenSnack,
+ refresh,
+ openExternal,
+ external,
+ isLoadingParent,
+ errorMsg,
+}) => {
+ const [selectedOption, setSelectedOption] = useState('');
+ const [ownerName, setOwnerName] = useState('');
+ const [showResults, setShowResults] = useState(false);
+ const [isOpen, setIsOpen] = useState(false);
+ const { show, userInfo } = useContext(MyContext);
+ const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
+ const handleVote = async () => {
+ const fee = await getFee('VOTE_ON_POLL');
+
+ await show({
+ message: `Do you accept this VOTE_ON_POLL transaction? POLLS are public!`,
+ publishFee: fee.fee + ' QORT',
+ });
+ setIsLoadingSubmit(true);
+
+ window
+ .sendMessage(
+ 'voteOnPoll',
+ {
+ pollName: poll?.info?.pollName,
+ optionIndex: +selectedOption,
+ },
+ 60000
+ )
+ .then((response) => {
+ setIsLoadingSubmit(false);
+ if (response.error) {
setInfoSnack({
- type: "error",
- message: error?.message || "Unable to vote.",
+ type: 'error',
+ message: response?.error || 'Unable to vote.',
+ });
+ setOpenSnack(true);
+ return;
+ } else {
+ setInfoSnack({
+ type: 'success',
+ message:
+ 'Successfully voted. Please wait a couple minutes for the network to propogate the changes.',
});
setOpenSnack(true);
- });
- };
-
- const getName = async (owner) => {
- try {
- const res = await getNameInfo(owner);
- if (res) {
- setOwnerName(res);
}
- } catch (error) {}
- };
-
- useEffect(() => {
- if (poll?.info?.owner) {
- getName(poll.info.owner);
+ })
+ .catch((error) => {
+ setIsLoadingSubmit(false);
+ setInfoSnack({
+ type: 'error',
+ message: error?.message || 'Unable to vote.',
+ });
+ setOpenSnack(true);
+ });
+ };
+
+ const getName = async (owner) => {
+ try {
+ const res = await getNameInfo(owner);
+ if (res) {
+ setOwnerName(res);
}
- }, [poll?.info?.owner]);
-
- return (
- Groups list
diff --git a/src/components/Group/BlockedUsersModal.tsx b/src/components/Group/BlockedUsersModal.tsx
index 24b3f01..b2d58e7 100644
--- a/src/components/Group/BlockedUsersModal.tsx
+++ b/src/components/Group/BlockedUsersModal.tsx
@@ -8,64 +8,78 @@ import {
DialogTitle,
TextField,
Typography,
-} from "@mui/material";
-import React, { useContext, useEffect, useState } from "react";
-import { getBaseApiReact, MyContext } from "../../App";
-import { Spacer } from "../../common/Spacer";
-import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
-import { validateAddress } from "../../utils/validateAddress";
-import { getNameInfo, requestQueueMemberNames } from "./Group";
-import { useModal } from "../../common/useModal";
-import { useRecoilState } from "recoil";
-import { isOpenBlockedModalAtom } from "../../atoms/global";
+ useTheme,
+} from '@mui/material';
+import { useContext, useEffect, useState } from 'react';
+import { getBaseApiReact, MyContext } from '../../App';
+import { Spacer } from '../../common/Spacer';
+import {
+ executeEvent,
+ subscribeToEvent,
+ unsubscribeFromEvent,
+} from '../../utils/events';
+import { validateAddress } from '../../utils/validateAddress';
+import { getNameInfo, requestQueueMemberNames } from './Group';
+import { useModal } from '../../common/useModal';
+import { useRecoilState } from 'recoil';
+import { isOpenBlockedModalAtom } from '../../atoms/global';
import InfoIcon from '@mui/icons-material/Info';
+
export const BlockedUsersModal = () => {
- const [isOpenBlockedModal, setIsOpenBlockedModal] = useRecoilState(isOpenBlockedModalAtom)
+ const theme = useTheme();
+ const [isOpenBlockedModal, setIsOpenBlockedModal] = useRecoilState(
+ isOpenBlockedModalAtom
+ );
const [hasChanged, setHasChanged] = useState(false);
- const [value, setValue] = useState("");
- const [addressesWithNames, setAddressesWithNames] = useState({})
+ const [value, setValue] = useState('');
+ const [addressesWithNames, setAddressesWithNames] = useState({});
const { isShow, onCancel, onOk, show, message } = useModal();
- const { getAllBlockedUsers, removeBlockFromList, addToBlockList, setOpenSnackGlobal, setInfoSnackCustom } =
- useContext(MyContext);
+ const {
+ getAllBlockedUsers,
+ removeBlockFromList,
+ addToBlockList,
+ setOpenSnackGlobal,
+ setInfoSnackCustom,
+ } = useContext(MyContext);
+
const [blockedUsers, setBlockedUsers] = useState({
addresses: {},
names: {},
});
+
const fetchBlockedUsers = () => {
setBlockedUsers(getAllBlockedUsers());
};
useEffect(() => {
- if(!isOpenBlockedModal) return
+ if (!isOpenBlockedModal) return;
fetchBlockedUsers();
}, [isOpenBlockedModal]);
- const getNames = async () => {
+ const getNames = async () => {
// const validApi = await findUsableApi();
- const addresses = Object.keys(blockedUsers?.addresses)
- const addressNames = {}
+ const addresses = Object.keys(blockedUsers?.addresses);
+ const addressNames = {};
-
const getMemNames = addresses.map(async (address) => {
- const name = await requestQueueMemberNames.enqueue(() => {
- return getNameInfo(address);
- });
- if (name) {
- addressNames[address] = name
- }
-
-
+ const name = await requestQueueMemberNames.enqueue(() => {
+ return getNameInfo(address);
+ });
+ if (name) {
+ addressNames[address] = name;
+ }
+
return true;
});
-
+
await Promise.all(getMemNames);
-
- setAddressesWithNames(addressNames)
+
+ setAddressesWithNames(addressNames);
};
const blockUser = async (e, user?: string) => {
try {
- const valUser = user || value
+ const valUser = user || value;
if (!valUser) return;
const isAddress = validateAddress(valUser);
let userName = null;
@@ -80,62 +94,66 @@ export const BlockedUsersModal = () => {
if (!isAddress) {
const response = await fetch(`${getBaseApiReact()}/names/${valUser}`);
const data = await response.json();
- if (!data?.owner) throw new Error("Name does not exist");
+ if (!data?.owner) throw new Error('Name does not exist');
if (data?.owner) {
userAddress = data.owner;
userName = valUser;
}
}
- if(!userName){
+ if (!userName) {
await addToBlockList(userAddress, null);
fetchBlockedUsers();
setHasChanged(true);
- executeEvent('updateChatMessagesWithBlocks', true)
- setValue('')
- return
+ executeEvent('updateChatMessagesWithBlocks', true);
+ setValue('');
+ return;
}
const responseModal = await show({
userName,
userAddress,
});
- if (responseModal === "both") {
+ if (responseModal === 'both') {
await addToBlockList(userAddress, userName);
- } else if (responseModal === "address") {
+ } else if (responseModal === 'address') {
await addToBlockList(userAddress, null);
- } else if (responseModal === "name") {
+ } else if (responseModal === 'name') {
await addToBlockList(null, userName);
}
fetchBlockedUsers();
setHasChanged(true);
- setValue('')
- if(user){
- setIsOpenBlockedModal(false)
+ setValue('');
+ if (user) {
+ setIsOpenBlockedModal(false);
}
- if(responseModal === 'both' || responseModal === 'address'){
- executeEvent('updateChatMessagesWithBlocks', true)
+ if (responseModal === 'both' || responseModal === 'address') {
+ executeEvent('updateChatMessagesWithBlocks', true);
}
} catch (error) {
setOpenSnackGlobal(true);
-
- setInfoSnackCustom({
- type: "error",
- message: error?.message || "Unable to block user",
- });
+ setInfoSnackCustom({
+ type: 'error',
+ message: error?.message || 'Unable to block user',
+ });
}
};
+
const blockUserFromOutsideModalFunc = (e) => {
- const user = e.detail?.user;
- setIsOpenBlockedModal(true)
- blockUser(null, user)
+ const user = e.detail?.user;
+ setIsOpenBlockedModal(true);
+ blockUser(null, user);
+ };
+
+ useEffect(() => {
+ subscribeToEvent('blockUserFromOutside', blockUserFromOutsideModalFunc);
+
+ return () => {
+ unsubscribeFromEvent(
+ 'blockUserFromOutside',
+ blockUserFromOutsideModalFunc
+ );
};
-
- useEffect(() => {
- subscribeToEvent("blockUserFromOutside", blockUserFromOutsideModalFunc);
-
- return () => {
- unsubscribeFromEvent("blockUserFromOutside", blockUserFromOutsideModalFunc);
- };
- }, []);
+ }, []);
+
return (