Qortal/qortal-mobile
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-mobile.git synced 2025-03-15 04:12:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

popover for payment and message - users avatar

Browse Source
This commit is contained in:
PhilReact 2024-09-14 11:42:05 +03:00
parent 93fba38de3
commit bf27a4f566
17 changed files with 1145 additions and 681 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/App.tsx
View File

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

27
src/background.ts
View File

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

48
src/components/Chat/AnnouncementDiscussion.tsx
View File

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

7
src/components/Chat/AnnouncementItem.tsx
View File

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

5
src/components/Chat/AnnouncementList.tsx
View File

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

84
src/components/Chat/ChatDirect.tsx
View File

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

43
src/components/Chat/ChatGroup.tsx
View File

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

1
src/components/Chat/ChatList.tsx
View File

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

49
src/components/Chat/GroupAnnouncements.tsx
View File

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

9
src/components/Chat/MessageItem.tsx
View File

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

5
src/components/Group/Forum/GroupMail.tsx
View File

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

9
src/components/Group/Forum/ShowMessageWithoutModal.tsx
View File

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

2
src/components/Group/Forum/Thread.tsx
View File

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

1333
src/components/Group/Group.tsx
View File

File diff suppressed because it is too large Load Diff

2
src/components/Loader.tsx
View File

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

108
src/components/WrapperUserAction.tsx Normal file
View File

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

13
src/index.css
View File

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