Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-07-23 04:36:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

add more mobile styles

Browse Source
This commit is contained in:
PhilReact
2024-09-20 03:57:10 +03:00
parent a7ccaf53e0
commit f9c6f4c5fd
32 changed files with 1903 additions and 653 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -269,7 +269,9 @@ export const AnnouncementDiscussion = ({
flexShrink: 0,
}}>
<AuthenticatedContainerInnerTop>
<AuthenticatedContainerInnerTop sx={{
height: '20px'
}}>
<ArrowBackIcon onClick={()=> setSelectedAnnouncement(null)} sx={{
cursor: 'pointer'
}} />

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

@@ -32,6 +32,7 @@ import { MyContext, getArbitraryEndpointReact, getBaseApiReact, isMobile, pauseA
import { RequestQueueWithPromise } from "../../utils/queue/queue";
import { CustomizedSnackbars } from "../Snackbar/Snackbar";
import { addDataPublishesFunc, getDataPublishesFunc } from "../Group/Group";
import { getRootHeight } from "../../utils/mobile/mobileUtils";
export const requestQueueCommentCount = new RequestQueueWithPromise(3)
export const requestQueuePublishedAccouncements = new RequestQueueWithPromise(3)
@@ -489,7 +490,7 @@ export const GroupAnnouncements = ({
return (
<div
style={{
height: isMobile ? '100%' : "100vh",
height: isMobile ? `calc(${getRootHeight()} - 83px` : "100vh",
display: "flex",
flexDirection: "column",
width: "100%",
@@ -508,7 +509,7 @@ export const GroupAnnouncements = ({
return (
<div
style={{
height: isMobile ? '100%' : "100vh",
height: isMobile ? `calc(${getRootHeight()} - 83px` : "100vh",
display: "flex",
flexDirection: "column",
width: "100%",
@@ -524,23 +525,26 @@ export const GroupAnnouncements = ({
flexDirection: "column",
flexShrink: 0,
}}>
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
padding: isMobile ? '8px' : "25px",
fontSize: isMobile ? '16px' : "20px",
gap: '20px',
alignItems: 'center'
}}
>
<CampaignIcon sx={{
fontSize: isMobile ? '16px' : '30px'
}} />
Group Announcements
</Box>
<Spacer height={isMobile ? "10px" : "25px"} />
{!isMobile && (
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
padding: isMobile ? '8px' : "25px",
fontSize: isMobile ? '16px' : "20px",
gap: '20px',
alignItems: 'center'
}}
>
<CampaignIcon sx={{
fontSize: isMobile ? '16px' : '30px'
}} />
Group Announcements
</Box>
)}
<Spacer height={isMobile ? "0px" : "25px"} />
</div>
{!isLoading && combinedListTempAndReal?.length === 0 && (

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

@@ -77,6 +77,11 @@ import { useMessageQueue } from "../../MessageQueueContext";
import { DrawerComponent } from "../Drawer/Drawer";
import { isExtMsg } from "../../background";
import { ContextMenu } from "../ContextMenu";
import { MobileFooter } from "../Mobile/MobileFooter";
import Header from "../Mobile/MobileHeader";
import { Home } from "./Home";
import { GroupMenu } from "./GroupMenu";
import { getRootHeight } from "../../utils/mobile/mobileUtils";
// let touchStartY = 0;
// let disablePullToRefresh = false;
@@ -364,6 +369,7 @@ export const Group = ({
balance,
isOpenDrawerProfile,
setIsOpenDrawerProfile,
logoutFunc
}: GroupProps) => {
const [secretKey, setSecretKey] = useState(null);
const [secretKeyPublishDate, setSecretKeyPublishDate] = useState(null);
@@ -407,6 +413,8 @@ export const Group = ({
const [isLoadingGroupMessage, setIsLoadingGroupMessage] = React.useState('')
const [drawerMode, setDrawerMode] = React.useState("groups");
const [mutedGroups, setMutedGroups] = useState([])
const [mobileViewMode, setMobileViewMode] = useState('home')
const [mobileViewModeKeepOpen, setMobileViewModeKeepOpen] = useState('')
const isFocusedRef = useRef(true);
const selectedGroupRef = useRef(null);
@@ -1266,7 +1274,7 @@ export const Group = ({
setGroupSection("home");
setGroupAnnouncements({});
setDefaultThread(null);
setMobileViewMode('home')
// Reset all useRef values to their initial states
hasInitialized.current = false;
hasInitializedWebsocket.current = false;
@@ -1333,7 +1341,7 @@ export const Group = ({
setTimeout(() => {
setSelectedGroup(findGroup);
setMobileViewMode('group')
getTimestampEnterChat();
isLoadingOpenSectionFromNotification.current = false;
}, 200);
@@ -1378,6 +1386,7 @@ export const Group = ({
});
setTimeout(() => {
setSelectedGroup(findGroup);
setMobileViewMode('group')
getGroupAnnouncements();
}, 200);
@@ -1430,7 +1439,7 @@ export const Group = ({
setTimeout(() => {
setSelectedGroup(findGroup);
setMobileViewMode('group')
getGroupAnnouncements();
}, 200);
}
@@ -1449,6 +1458,12 @@ export const Group = ({
};
const goToHome = async () => {
if(isMobile){
setMobileViewMode('home')
}
if(!isMobile){
}
setGroupSection("default");
clearAllQueues();
await new Promise((res) => {
@@ -1494,6 +1509,17 @@ export const Group = ({
}, 200);
};
const openDrawerGroups = ()=> {
setIsOpenDrawer(true);
setDrawerMode("groups");
}
const goToThreads = ()=> {
setSelectedDirect(null);
setNewChat(false)
setGroupSection("forum")
}
const goToChat = async () => {
setGroupSection("default");
await new Promise((res) => {
@@ -1519,18 +1545,175 @@ export const Group = ({
}
};
const renderDirects = ()=> {
return (
<div
style={{
display: "flex",
width: isMobile ? '100%' : "300px",
flexDirection: "column",
alignItems: "flex-start",
height: isMobile ? `calc(${getRootHeight()} - 30px)` : "100%"
}}
>
<div
style={{
display: "flex",
width: "100%",
flexDirection: "column",
alignItems: "flex-start",
flexGrow: 1,
overflowY: "auto",
// visibility: chatMode === "groups" && "hidden",
// position: chatMode === "groups" && "fixed",
// left: chatMode === "groups" && "-1000px",
}}
>
{directs.map((direct: any) => (
<List sx={{
width: '100%'
}} className="group-list" dense={true}>
<ListItem
// secondaryAction={
// <IconButton edge="end" aria-label="delete">
// <SettingsIcon />
// </IconButton>
// }
onClick={() => {
setSelectedDirect(null);
setNewChat(false);
// setSelectedGroup(null);
setIsOpenDrawer(false);
chrome?.runtime?.sendMessage({
action: "addTimestampEnterChat",
payload: {
timestamp: Date.now(),
groupId: direct.address,
},
});
setTimeout(() => {
setSelectedDirect(direct);
getTimestampEnterChat();
}, 200);
}}
sx={{
display: "flex",
width: "100%",
flexDirection: "column",
cursor: "pointer",
border: "1px #232428 solid",
padding: "2px",
borderRadius: "2px",
background:
direct?.address === selectedDirect?.address && "white",
}}
>
<Box
sx={{
display: "flex",
width: "100%",
alignItems: 'center'
}}
>
<ListItemAvatar>
<Avatar
sx={{
background: "#232428",
color: "white",
}}
alt={direct?.name || direct?.address}
// src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${groupOwner?.name}/qortal_group_avatar_${group.groupId}?async=true`}
>
{(direct?.name || direct?.address)?.charAt(0)}
</Avatar>
</ListItemAvatar>
<ListItemText
primary={direct?.name || direct?.address}
primaryTypographyProps={{
style: {
color:
direct?.address === selectedDirect?.address &&
"black",
textWrap: "wrap",
overflow: "hidden",
},
}} // Change the color of the primary text
secondaryTypographyProps={{
style: {
color:
direct?.address === selectedDirect?.address &&
"black",
},
}}
sx={{
width: "150px",
fontFamily: "Inter",
fontSize: "16px",
}}
/>
{direct?.sender !== myAddress &&
direct?.timestamp &&
((!timestampEnterData[direct?.address] &&
Date.now() - direct?.timestamp <
timeDifferenceForNotificationChats) ||
timestampEnterData[direct?.address] <
direct?.timestamp) && (
<MarkChatUnreadIcon
sx={{
color: "red",
}}
/>
)}
</Box>
</ListItem>
</List>
))}
</div>
<div
style={{
display: "flex",
width: "100%",
justifyContent: "center",
padding: "10px",
}}
>
<CustomButton
onClick={() => {
setNewChat(true);
setSelectedDirect(null);
// setSelectedGroup(null);
setIsOpenDrawer(false);
}}
>
<CreateIcon
sx={{
color: "white",
}}
/>
New Chat
</CustomButton>
</div>
</div>
)
}
const renderGroups = () => {
return (
<div
style={{
display: "flex",
width: "300px",
width: isMobile ? '100%' : "300px",
flexDirection: "column",
alignItems: "flex-start",
height: "100%",
height: isMobile ? 'calc(100% - 30px)' : "100%"
}}
>
<div
{/* <div
style={{
display: "flex",
width: "100%",
@@ -1582,11 +1765,11 @@ export const Group = ({
{chatMode === "directs" ? "Switch to groups" : "Direct msgs"}
</CustomButton>
</div>
<div
</div> */}
{/* <div
style={{
display: "flex",
width: "300px",
width: "100%",
flexDirection: "column",
alignItems: "flex-start",
flexGrow: 1,
@@ -1597,7 +1780,9 @@ export const Group = ({
}}
>
{directs.map((direct: any) => (
<List className="group-list" dense={true}>
<List sx={{
width: '100%'
}} className="group-list" dense={true}>
<ListItem
// secondaryAction={
// <IconButton edge="end" aria-label="delete">
@@ -1693,11 +1878,11 @@ export const Group = ({
</ListItem>
</List>
))}
</div>
</div> */}
<div
style={{
display: "flex",
width: "300px",
width: "100%",
flexDirection: "column",
alignItems: "flex-start",
flexGrow: 1,
@@ -1708,7 +1893,9 @@ export const Group = ({
}}
>
{groups.map((group: any) => (
<List className="group-list" dense={true}>
<List sx={{
width: '100%'
}} className="group-list" dense={true}>
<ListItem
// secondaryAction={
// <IconButton edge="end" aria-label="delete">
@@ -1716,6 +1903,7 @@ export const Group = ({
// </IconButton>
// }
onClick={() => {
setMobileViewMode('group')
clearAllQueues();
setSelectedDirect(null);
setTriedToFetchSecretKey(false);
@@ -1783,6 +1971,7 @@ export const Group = ({
sx={{
display: "flex",
width: "100%",
alignItems: 'center'
}}
>
<ListItemAvatar>
@@ -1887,6 +2076,7 @@ export const Group = ({
</CustomButton>
)}
</div>
</div>
);
};
@@ -1903,12 +2093,13 @@ export const Group = ({
info={infoSnack}
setInfo={setInfoSnack}
/>
<Header setMobileViewModeKeepOpen={setMobileViewModeKeepOpen} isThin={mobileViewMode === 'groups' || mobileViewMode === 'group' || mobileViewModeKeepOpen === 'messaging'} logoutFunc={logoutFunc} goToHome={goToHome} setIsOpenDrawerProfile={setIsOpenDrawerProfile} />
<div
style={{
display: "flex",
width: "100%",
height: isMobile ? "calc(100% - 75px)" : "100%",
height: isMobile ? "100%" : "100%",
flexDirection: "row",
alignItems: "flex-start",
}}
@@ -1924,6 +2115,14 @@ export const Group = ({
open={openAddGroup}
setOpen={setOpenAddGroup}
/>
{mobileViewMode === 'groups' && (
renderGroups()
)}
{mobileViewModeKeepOpen === 'messaging' && (
renderDirects()
)}
{newChat && (
<>
<Box
@@ -1934,7 +2133,8 @@ export const Group = ({
bottom: '0px',
top: '0px',
background: '#27282c',
zIndex: 5
zIndex: 5,
height: isMobile && 'calc(100% - 30px)'
}}
>
<ChatDirect
@@ -1957,12 +2157,17 @@ export const Group = ({
)}
{selectedGroup && (
<>
{mobileViewMode === 'group' && (
<GroupMenu setGroupSection={setGroupSection} groupSection={groupSection}
/>
)}
<Box
sx={{
position: "relative",
flexGrow: 1,
display: "flex",
height: "100%",
height: isMobile ? 'calc(100% - 53px)' : "100%",
}}
>
{triedToFetchSecretKey && (
@@ -2139,7 +2344,8 @@ export const Group = ({
bottom: '0px',
top: '0px',
background: '#27282c',
zIndex: 5
zIndex: 5,
height: isMobile && 'calc(100% - 30px)'
}}
>
@@ -2173,71 +2379,41 @@ export const Group = ({
</Box>
</>
)}
{
{mobileViewMode === 'home' && (
<Home
refreshHomeDataFunc={refreshHomeDataFunc}
myAddress={myAddress}
isLoadingGroups={isLoadingGroups}
balance={balance}
userInfo={userInfo}
groups={groups}
setGroupSection={setGroupSection}
setSelectedGroup={setSelectedGroup}
getTimestampEnterChat={getTimestampEnterChat}
setOpenManageMembers={setOpenManageMembers}
setOpenAddGroup={setOpenAddGroup}
setMobileViewMode={setMobileViewMode}
/>
)}
{/* {
!selectedGroup &&
groupSection === "home" && (
<Box
sx={{
display: "flex",
width: "100%",
flexDirection: "column",
gap: "20px",
height: "100%",
overflow: "auto",
}}
>
<Box
sx={{
display: "flex",
width: "100%",
justifyContent: "flex-start",
}}
>
<Button
variant="outlined"
startIcon={<RefreshIcon />}
onClick={refreshHomeDataFunc}
sx={{
color: "white",
}}
>
Refresh home data
</Button>
</Box>
{!isLoadingGroups && (
<Box
sx={{
display: "flex",
gap: "40px",
flexWrap: "wrap",
justifyContent: "center",
}}
>
<ListOfThreadPostsWatched />
<ThingsToDoInitial
balance={balance}
myAddress={myAddress}
name={userInfo?.name}
hasGroups={groups?.length !== 0}
/>
<GroupJoinRequests
setGroupSection={setGroupSection}
setSelectedGroup={setSelectedGroup}
getTimestampEnterChat={getTimestampEnterChat}
setOpenManageMembers={setOpenManageMembers}
myAddress={myAddress}
groups={groups}
/>
<GroupInvites
setOpenAddGroup={setOpenAddGroup}
myAddress={myAddress}
groups={groups}
/>
</Box>
)}
</Box>
)}
<Home
refreshHomeDataFunc={refreshHomeDataFunc}
myAddress={myAddress}
isLoadingGroups={isLoadingGroups}
balance={balance}
userInfo={userInfo}
groups={groups}
setGroupSection={setGroupSection}
setSelectedGroup={setSelectedGroup}
getTimestampEnterChat={getTimestampEnterChat}
setOpenManageMembers={setOpenManageMembers}
setOpenAddGroup={setOpenAddGroup}
/>
)} */}
</Box>
<AuthenticatedContainerInnerRight
sx={{
@@ -2443,243 +2619,264 @@ export const Group = ({
/>
</div>
<DrawerComponent open={isOpenDrawer} setOpen={setIsOpenDrawer}>
{mobileViewMode === 'home' && !mobileViewModeKeepOpen && (
<>
<div style={{
height: '66px',
width: '100%',
backgroundColor: 'var(--bg-primary)',
borderTopRightRadius: '25px',
borderTopLeftRadius: '25px'
}} />
{/* <DrawerComponent open={isOpenDrawer} setOpen={setIsOpenDrawer}>
{renderGroups()}
</DrawerComponent>
</DrawerComponent> */}
{isMobile && (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
width: "100%",
height: "75px", // Keep the height at 75px
background: "rgba(0, 0, 0, 0.1)",
padding: "0px", // Remove unnecessary padding
}}
>
<Grid
container
spacing={0.5}
sx={{ width: "100%", justifyContent: "space-around" }}
>
{selectedGroup && (
<>
<Grid item xs={4} sx={{
display: 'flex'
}}>
<Button
fullWidth
size="small"
variant="contained"
startIcon={<AnnouncementsIcon />}
sx={{
padding: "4px 6px",
color:
groupSection === "announcement" ? "black" : "white",
backgroundColor: isUnread
? "red"
: groupSection === "announcement"
? "white"
: "black",
"&:hover": {
backgroundColor: isUnread
? "red"
: groupSection === "announcement"
? "white"
: "black",
},
"&:active": {
backgroundColor: isUnread
? "red"
: groupSection === "announcement"
? "white"
: "black",
},
"&:focus": {
backgroundColor: isUnread
? "red"
: groupSection === "announcement"
? "white"
: "black",
},
}}
onClick={goToAnnouncements}
>
ANN
</Button>
</Grid>
<Grid item xs={4} sx={{
display: 'flex'
}}>
<Button
fullWidth
size="small"
variant="contained"
startIcon={<ChatIcon />}
sx={{
padding: "4px 6px",
color: groupSection === "chat" ? "black" : "white",
backgroundColor: isUnreadChat
? "red"
: groupSection === "chat"
? "white"
: "black",
"&:hover": {
backgroundColor: isUnreadChat
? "red"
: groupSection === "chat"
? "white"
: "black", // Same logic for hover
},
"&:active": {
backgroundColor: isUnreadChat
? "red"
: groupSection === "chat"
? "white"
: "black", // Same logic for active
},
"&:focus": {
backgroundColor: isUnreadChat
? "red"
: groupSection === "chat"
? "white"
: "black", // Same logic for focus
},
}}
onClick={goToChat}
>
Chat
</Button>
</Grid>
<Grid item xs={4} sx={{
display: 'flex'
}}>
<Button
fullWidth
size="small"
variant="contained"
startIcon={<ForumIcon />}
sx={{
padding: "4px 6px",
color: groupSection === "forum" ? "black" : "white",
backgroundColor:
groupSection === "forum" ? "white" : "black",
"&:hover": {
backgroundColor: groupSection === "forum" ? "white" : "black", // Hover state
},
"&:active": {
backgroundColor: groupSection === "forum" ? "white" : "black", // Active state
},
"&:focus": {
backgroundColor: groupSection === "forum" ? "white" : "black", // Focus state
},
}}
onClick={() => {
setSelectedDirect(null);
setNewChat(false)
setGroupSection("forum")
} }
>
Forum
</Button>
</Grid>
<Grid item xs={4} sx={{
display: 'flex'
}}>
<Button
fullWidth
size="small"
variant="contained"
startIcon={<GroupIcon />}
sx={{ padding: "4px 6px", backgroundColor: "black", "&:hover": {
backgroundColor: "black", // Hover state
},
"&:active": {
backgroundColor: "black", // Active state
},
"&:focus": {
backgroundColor: "black", // Focus state
}, }}
onClick={() => setOpenManageMembers(true)}
>
Members
</Button>
</Grid>
</>
)}
{/* Second row: Groups, Home, Profile */}
<Grid item xs={4} sx={{
display: 'flex',
}}>
<Button
fullWidth
size="small"
variant="contained"
startIcon={<GroupIcon />}
sx={{
padding: "2px 4px",
backgroundColor:
groupChatHasUnread ||
groupsAnnHasUnread ||
directChatHasUnread
? "red"
: "black",
"&:hover": {
backgroundColor:
groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
? "red"
: "black", // Hover state follows the same logic
},
"&:active": {
backgroundColor:
groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
? "red"
: "black", // Active state follows the same logic
},
"&:focus": {
backgroundColor:
groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
? "red"
: "black", // Focus state follows the same logic
},
}}
onClick={() => {
setIsOpenDrawer(true);
setDrawerMode("groups");
}}
>
{chatMode === "groups" ? "Groups" : "Direct"}
</Button>
</Grid>
<Grid item xs={2} sx={{
display: 'flex',
justifyContent: 'center'
}}>
<IconButton
sx={{ padding: "0", color: "white" }} // Reduce padding for icons
onClick={goToHome}
>
<HomeIcon />
</IconButton>
</Grid>
<Grid item xs={2} sx={{
display: 'flex',
justifyContent: 'center'
}}>
<IconButton
sx={{ padding: "0", color: "white" }} // Reduce padding for icons
onClick={() => setIsOpenDrawerProfile(true)}
>
<PersonIcon />
</IconButton>
</Grid>
</Grid>
</Box>
<MobileFooter selectedGroup={selectedGroup} groupSection={groupSection} isUnread={isUnread} goToAnnouncements={goToAnnouncements} isUnreadChat={isUnreadChat} goToChat={goToChat} goToThreads={goToThreads} setOpenManageMembers={setOpenManageMembers} groupChatHasUnread={groupChatHasUnread} groupsAnnHasUnread={groupsAnnHasUnread} directChatHasUnread={directChatHasUnread} chatMode={chatMode} openDrawerGroups={openDrawerGroups} goToHome={goToHome} setIsOpenDrawerProfile={setIsOpenDrawerProfile}
mobileViewMode={mobileViewMode} setMobileViewMode={setMobileViewMode} setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
/>
)}
</>
)}
</>
);
};
// {isMobile && (
// <Box
// sx={{
// display: "flex",
// alignItems: "center",
// justifyContent: "center",
// flexDirection: "column",
// width: "100%",
// height: "75px", // Keep the height at 75px
// background: "rgba(0, 0, 0, 0.1)",
// padding: "0px", // Remove unnecessary padding
// }}
// >
// <Grid
// container
// spacing={0.5}
// sx={{ width: "100%", justifyContent: "space-around" }}
// >
// {selectedGroup && (
// <>
// <Grid item xs={4} sx={{
// display: 'flex'
// }}>
// <Button
// fullWidth
// size="small"
// variant="contained"
// startIcon={<AnnouncementsIcon />}
// sx={{
// padding: "4px 6px",
// color:
// groupSection === "announcement" ? "black" : "white",
// backgroundColor: isUnread
// ? "red"
// : groupSection === "announcement"
// ? "white"
// : "black",
// "&:hover": {
// backgroundColor: isUnread
// ? "red"
// : groupSection === "announcement"
// ? "white"
// : "black",
// },
// "&:active": {
// backgroundColor: isUnread
// ? "red"
// : groupSection === "announcement"
// ? "white"
// : "black",
// },
// "&:focus": {
// backgroundColor: isUnread
// ? "red"
// : groupSection === "announcement"
// ? "white"
// : "black",
// },
// }}
// onClick={goToAnnouncements}
// >
// ANN
// </Button>
// </Grid>
// <Grid item xs={4} sx={{
// display: 'flex'
// }}>
// <Button
// fullWidth
// size="small"
// variant="contained"
// startIcon={<ChatIcon />}
// sx={{
// padding: "4px 6px",
// color: groupSection === "chat" ? "black" : "white",
// backgroundColor: isUnreadChat
// ? "red"
// : groupSection === "chat"
// ? "white"
// : "black",
// "&:hover": {
// backgroundColor: isUnreadChat
// ? "red"
// : groupSection === "chat"
// ? "white"
// : "black", // Same logic for hover
// },
// "&:active": {
// backgroundColor: isUnreadChat
// ? "red"
// : groupSection === "chat"
// ? "white"
// : "black", // Same logic for active
// },
// "&:focus": {
// backgroundColor: isUnreadChat
// ? "red"
// : groupSection === "chat"
// ? "white"
// : "black", // Same logic for focus
// },
// }}
// onClick={goToChat}
// >
// Chat
// </Button>
// </Grid>
// <Grid item xs={4} sx={{
// display: 'flex'
// }}>
// <Button
// fullWidth
// size="small"
// variant="contained"
// startIcon={<ForumIcon />}
// sx={{
// padding: "4px 6px",
// color: groupSection === "forum" ? "black" : "white",
// backgroundColor:
// groupSection === "forum" ? "white" : "black",
// "&:hover": {
// backgroundColor: groupSection === "forum" ? "white" : "black", // Hover state
// },
// "&:active": {
// backgroundColor: groupSection === "forum" ? "white" : "black", // Active state
// },
// "&:focus": {
// backgroundColor: groupSection === "forum" ? "white" : "black", // Focus state
// },
// }}
// onClick={() => {
// setSelectedDirect(null);
// setNewChat(false)
// setGroupSection("forum")
// } }
// >
// Forum
// </Button>
// </Grid>
// <Grid item xs={4} sx={{
// display: 'flex'
// }}>
// <Button
// fullWidth
// size="small"
// variant="contained"
// startIcon={<GroupIcon />}
// sx={{ padding: "4px 6px", backgroundColor: "black", "&:hover": {
// backgroundColor: "black", // Hover state
// },
// "&:active": {
// backgroundColor: "black", // Active state
// },
// "&:focus": {
// backgroundColor: "black", // Focus state
// }, }}
// onClick={() => setOpenManageMembers(true)}
// >
// Members
// </Button>
// </Grid>
// </>
// )}
// {/* Second row: Groups, Home, Profile */}
// <Grid item xs={4} sx={{
// display: 'flex',
// }}>
// <Button
// fullWidth
// size="small"
// variant="contained"
// startIcon={<GroupIcon />}
// sx={{
// padding: "2px 4px",
// backgroundColor:
// groupChatHasUnread ||
// groupsAnnHasUnread ||
// directChatHasUnread
// ? "red"
// : "black",
// "&:hover": {
// backgroundColor:
// groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
// ? "red"
// : "black", // Hover state follows the same logic
// },
// "&:active": {
// backgroundColor:
// groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
// ? "red"
// : "black", // Active state follows the same logic
// },
// "&:focus": {
// backgroundColor:
// groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
// ? "red"
// : "black", // Focus state follows the same logic
// },
// }}
// onClick={() => {
// setIsOpenDrawer(true);
// setDrawerMode("groups");
// }}
// >
// {chatMode === "groups" ? "Groups" : "Direct"}
// </Button>
// </Grid>
// <Grid item xs={2} sx={{
// display: 'flex',
// justifyContent: 'center'
// }}>
// <IconButton
// sx={{ padding: "0", color: "white" }} // Reduce padding for icons
// onClick={goToHome}
// >
// <HomeIcon />
// </IconButton>
// </Grid>
// <Grid item xs={2} sx={{
// display: 'flex',
// justifyContent: 'center'
// }}>
// <IconButton
// sx={{ padding: "0", color: "white" }} // Reduce padding for icons
// onClick={() => setIsOpenDrawerProfile(true)}
// >
// <PersonIcon />
// </IconButton>
// </Grid>
// </Grid>
// </Box>
// )}

209
src/components/Group/GroupInvites.tsx
View File

@@ -8,7 +8,7 @@ import Checkbox from "@mui/material/Checkbox";
import IconButton from "@mui/material/IconButton";
import CommentIcon from "@mui/icons-material/Comment";
import InfoIcon from "@mui/icons-material/Info";
import GroupAddIcon from '@mui/icons-material/GroupAdd';
import GroupAddIcon from "@mui/icons-material/GroupAdd";
import { executeEvent } from "../../utils/events";
import { Box, Typography } from "@mui/material";
import { Spacer } from "../../common/Spacer";
@@ -17,98 +17,155 @@ import { CustomLoader } from "../../common/CustomLoader";
import { getBaseApiReact } from "../../App";
export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([])
const [loading, setLoading] = React.useState(true)
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState(
[]
);
const [loading, setLoading] = React.useState(true);
const getJoinRequests = async ()=> {
const getJoinRequests = async () => {
try {
setLoading(true)
const response = await fetch(`${getBaseApiReact()}/groups/invites/${myAddress}/?limit=0`);
setLoading(true);
const response = await fetch(
`${getBaseApiReact()}/groups/invites/${myAddress}/?limit=0`
);
const data = await response.json();
const resMoreData = await getGroupNames(data)
const resMoreData = await getGroupNames(data);
setGroupsWithJoinRequests(resMoreData)
setGroupsWithJoinRequests(resMoreData);
} catch (error) {
} finally {
setLoading(false)
setLoading(false);
}
}
};
React.useEffect(() => {
if (myAddress) {
getJoinRequests()
getJoinRequests();
}
}, [myAddress]);
return (
<Box sx={{
width: '360px',
display: 'flex',
flexDirection: 'column',
bgcolor: "background.paper",
padding: '20px'
}}>
<Typography sx={{
fontSize: '14px'
}}>Group Invites</Typography>
<Spacer height="10px" />
{loading && groupsWithJoinRequests.length === 0 && (
<Box sx={{
width: '100%',
display: 'flex',
justifyContent: 'center'
}}>
<CustomLoader />
</Box>
)}
{!loading && groupsWithJoinRequests.length === 0 && (
<Box sx={{
width: '100%',
display: 'flex',
justifyContent: 'center'
}}>
<Typography sx={{
fontSize: '12px'
}}>No invites</Typography>
</Box>
)}
<List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", maxHeight: '300px', overflow: 'auto' }}>
{groupsWithJoinRequests?.map((group)=> {
return (
<ListItem
key={group?.groupId}
onClick={()=> {
setOpenAddGroup(true)
setTimeout(() => {
executeEvent("openGroupInvitesRequest", {});
}, 300);
<Box
sx={{
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Box
sx={{
width: "322px",
display: "flex",
flexDirection: "column",
padding: "0px 20px",
}}
>
<Typography
sx={{
fontSize: "13px",
fontWeight: 600,
}}
disablePadding
secondaryAction={
<IconButton edge="end" aria-label="comments">
<GroupAddIcon
sx={{
color: "white",
}}
/>
</IconButton>
}
>
<ListItemButton disableRipple role={undefined} dense>
<ListItemText primary={`${group?.groupName} has invited you`} />
</ListItemButton>
</ListItem>
)
Hub Invites:
</Typography>
<Spacer height="10px" />
</Box>
})}
</List>
<Box
sx={{
width: "322px",
height: "165px",
display: "flex",
flexDirection: "column",
bgcolor: "background.paper",
padding: "20px",
borderRadius: "19px",
}}
>
{loading && groupsWithJoinRequests.length === 0 && (
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
}}
>
<CustomLoader />
</Box>
)}
{!loading && groupsWithJoinRequests.length === 0 && (
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: 'center',
height: '100%',
}}
>
<Typography
sx={{
fontSize: "11px",
fontWeight: 400,
color: 'rgba(255, 255, 255, 0.2)'
}}
>
Nothing to display
</Typography>
</Box>
)}
<List
sx={{
width: "100%",
maxWidth: 360,
bgcolor: "background.paper",
maxHeight: "300px",
overflow: "auto",
}}
>
{groupsWithJoinRequests?.map((group) => {
return (
<ListItem
sx={{
marginBottom: "20px",
}}
key={group?.groupId}
onClick={() => {
setOpenAddGroup(true);
setTimeout(() => {
executeEvent("openGroupInvitesRequest", {});
}, 300);
}}
disablePadding
secondaryAction={
<IconButton edge="end" aria-label="comments">
<GroupAddIcon
sx={{
color: "white",
fontSize: "18px",
}}
/>
</IconButton>
}
>
<ListItemButton disableRipple role={undefined} dense>
<ListItemText
sx={{
"& .MuiTypography-root": {
fontSize: "13px",
fontWeight: 400,
},
}}
primary={`${group?.groupName} has invited you`}
/>
</ListItemButton>
</ListItem>
);
})}
</List>
</Box>
</Box>
);
};

94
src/components/Group/GroupJoinRequests.tsx
View File

@@ -18,7 +18,7 @@ import { getBaseApi } from "../../background";
import { getBaseApiReact } from "../../App";
export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2)
export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection }) => {
export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode }) => {
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([])
const [loading, setLoading] = React.useState(true)
@@ -95,17 +95,43 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
return (
<Box sx={{
width: '360px',
display: 'flex',
flexDirection: 'column',
bgcolor: "background.paper",
padding: '20px'
<Box sx={{
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: 'center'
}}>
<Typography sx={{
fontSize: '14px'
}}>Join Requests</Typography>
<Spacer height="10px" />
<Box
sx={{
width: "322px",
display: "flex",
flexDirection: "column",
padding: '0px 20px',
}}
>
<Typography
sx={{
fontSize: "13px",
fontWeight: 600,
}}
>
Join Requests:
</Typography>
<Spacer height="10px" />
</Box>
<Box
sx={{
width: "322px",
height: '165px',
display: "flex",
flexDirection: "column",
bgcolor: "background.paper",
padding: "20px",
borderRadius: '19px'
}}
>
{loading && groupsWithJoinRequests.length === 0 && (
<Box sx={{
width: '100%',
@@ -116,15 +142,26 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
</Box>
)}
{!loading && groupsWithJoinRequests.length === 0 && (
<Box sx={{
width: '100%',
display: 'flex',
justifyContent: 'center'
}}>
<Typography sx={{
fontSize: '12px'
}}>No join requests</Typography>
</Box>
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: 'center',
height: '100%',
}}
>
<Typography
sx={{
fontSize: "11px",
fontWeight: 400,
color: 'rgba(255, 255, 255, 0.2)'
}}
>
Nothing to display
</Typography>
</Box>
)}
<List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", maxHeight: '300px', overflow: 'auto' }}>
{groupsWithJoinRequests?.map((group)=> {
@@ -134,6 +171,7 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
key={group?.groupId}
onClick={()=> {
setSelectedGroup(group?.group)
setMobileViewMode('group')
getTimestampEnterChat()
setGroupSection("announcement")
setOpenManageMembers(true)
@@ -142,20 +180,31 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
}, 300);
}}
sx={{
marginBottom: '20px'
}}
disablePadding
secondaryAction={
<IconButton edge="end" aria-label="comments">
<GroupAddIcon
sx={{
color: "white",
fontSize: '18px'
}}
/>
</IconButton>
}
>
<ListItemButton disableRipple role={undefined} dense>
<ListItemButton sx={{
padding: "0px",
}} disableRipple role={undefined} dense>
<ListItemText primary={`${group?.group?.groupName} has ${group?.data?.length} pending join requests.`} />
<ListItemText sx={{
"& .MuiTypography-root": {
fontSize: "13px",
fontWeight: 400,
},
}} primary={`${group?.group?.groupName} has ${group?.data?.length} pending join requests.`} />
</ListItemButton>
</ListItem>
)
@@ -166,5 +215,6 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
</List>
</Box>
</Box>
);
};

200
src/components/Group/GroupMenu.tsx Normal file
View File

@@ -0,0 +1,200 @@
import React, { useState } from "react";
import {
Button,
Menu,
MenuItem,
ListItemIcon,
ListItemText,
Badge,
Box,
} from "@mui/material";
import ForumIcon from "@mui/icons-material/Forum";
import GroupIcon from "@mui/icons-material/Group";
import { ArrowDownIcon } from "../../assets/Icons/ArrowDownIcon";
import { NotificationIcon2 } from "../../assets/Icons/NotificationIcon2";
import { ChatIcon } from "../../assets/Icons/ChatIcon";
import { ThreadsIcon } from "../../assets/Icons/ThreadsIcon";
import { MembersIcon } from "../../assets/Icons/MembersIcon";
export const GroupMenu = ({ setGroupSection, groupSection }) => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
marginTop: '14px',
marginBottom: '14px'
}}
>
<Button
aria-controls={open ? "home-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
variant="contained"
sx={{
backgroundColor: "var(--bg-primary)",
width: "148px",
borderRadius: "5px",
fontSize: "12px",
fontWeight: 600,
color: "#fff",
textTransform: "none",
padding: '5px',
height: '25px'
}}
>
<Box
sx={{
display: "flex",
gap: "6px",
alignItems: "center",
justifyContent: "space-between",
width: '100%'
}}
>
<Box
sx={{
display: "flex",
gap: "6px",
alignItems: "center",
}}
>
{groupSection === "announcement" &&(
<> <NotificationIcon2 /> {" Announcements"}</>
)}
{groupSection === "chat" &&(
<> <ChatIcon /> {" Hub Chats"}</>
)}
{groupSection === "forum" &&(
<> <ThreadsIcon /> {" Threads"}</>
)}
</Box>
<ArrowDownIcon color="white" />
</Box>
</Button>
<Menu
id="home-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "basic-button",
}}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
slotProps={{
paper: {
sx: {
backgroundColor: 'var(--bg-primary)',
color: '#fff',
width: '148px',
borderRadius: '5px'
},
},
}}
sx={{
marginTop: '10px'
}}
>
<MenuItem
onClick={() => {
setGroupSection("chat");
handleClose();
}}
>
<ListItemIcon sx={{
minWidth: '24px !important'
}}>
<ChatIcon sx={{ color: "#fff" }} />
</ListItemIcon>
<ListItemText sx={{
"& .MuiTypography-root": {
fontSize: "12px",
fontWeight: 600,
},
}} primary="Chat" />
</MenuItem>
<MenuItem
onClick={() => {
setGroupSection("announcement");
handleClose();
}}
>
<ListItemIcon sx={{
minWidth: '24px !important'
}}>
<NotificationIcon2 sx={{ color: "#fff" }} />
</ListItemIcon>
<ListItemText sx={{
"& .MuiTypography-root": {
fontSize: "12px",
fontWeight: 600,
},
}} primary="Announcements" />
</MenuItem>
<MenuItem
onClick={() => {
setGroupSection("forum");
handleClose();
}}
>
<ListItemIcon sx={{
minWidth: '24px !important'
}}>
<ThreadsIcon sx={{ color: "#fff" }} />
</ListItemIcon>
<ListItemText sx={{
"& .MuiTypography-root": {
fontSize: "12px",
fontWeight: 600,
},
}} primary="Forum" />
</MenuItem>
<MenuItem
onClick={() => {
// setGroupSection("")
handleClose();
}}
>
<ListItemIcon sx={{
minWidth: '24px !important'
}}>
<MembersIcon sx={{ color: "#fff" }} />
</ListItemIcon>
<ListItemText sx={{
"& .MuiTypography-root": {
fontSize: "12px",
fontWeight: 600,
},
}} primary="Members" />
</MenuItem>
</Menu>
</Box>
);
};

85
src/components/Group/Home.tsx Normal file
View File

@@ -0,0 +1,85 @@
import { Box, Button, Typography } from '@mui/material'
import React from 'react'
import { Spacer } from '../../common/Spacer'
import { ListOfThreadPostsWatched } from './ListOfThreadPostsWatched'
import { ThingsToDoInitial } from './ThingsToDoInitial'
import { GroupJoinRequests } from './GroupJoinRequests'
import { GroupInvites } from './GroupInvites'
import RefreshIcon from "@mui/icons-material/Refresh";
export const Home = ({refreshHomeDataFunc, myAddress, isLoadingGroups, balance, userInfo, groups, setGroupSection, setSelectedGroup, getTimestampEnterChat, setOpenManageMembers, setOpenAddGroup, setMobileViewMode}) => {
return (
<Box
sx={{
display: "flex",
width: "100%",
flexDirection: "column",
height: "100%",
overflow: "auto",
alignItems: "center"
}}
>
<Spacer height="20px" />
<Typography sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 400, fontSize: '24px'}}>
<Spacer height="16px" />
Welcome
</Typography>
<Spacer height="26px" />
{/* <Box
sx={{
display: "flex",
width: "100%",
justifyContent: "flex-start",
}}
>
<Button
variant="outlined"
startIcon={<RefreshIcon />}
onClick={refreshHomeDataFunc}
sx={{
color: "white",
}}
>
Refresh home data
</Button>
</Box> */}
{!isLoadingGroups && (
<Box
sx={{
display: "flex",
gap: "15px",
flexWrap: "wrap",
justifyContent: "center",
}}
>
<ThingsToDoInitial
balance={balance}
myAddress={myAddress}
name={userInfo?.name}
hasGroups={groups?.length !== 0}
/>
<ListOfThreadPostsWatched />
<GroupJoinRequests
setGroupSection={setGroupSection}
setSelectedGroup={setSelectedGroup}
getTimestampEnterChat={getTimestampEnterChat}
setOpenManageMembers={setOpenManageMembers}
myAddress={myAddress}
groups={groups}
setMobileViewMode={setMobileViewMode}
/>
<GroupInvites
setOpenAddGroup={setOpenAddGroup}
myAddress={myAddress}
groups={groups}
setMobileViewMode={setMobileViewMode}
/>
</Box>
)}
<Spacer height="180px" />
</Box>
)
}

212
src/components/Group/ListOfThreadPostsWatched.tsx
View File

@@ -8,131 +8,173 @@ import Checkbox from "@mui/material/Checkbox";
import IconButton from "@mui/material/IconButton";
import CommentIcon from "@mui/icons-material/Comment";
import InfoIcon from "@mui/icons-material/Info";
import GroupAddIcon from '@mui/icons-material/GroupAdd';
import GroupAddIcon from "@mui/icons-material/GroupAdd";
import { executeEvent } from "../../utils/events";
import { Box, Typography } from "@mui/material";
import { Spacer } from "../../common/Spacer";
import { getGroupNames } from "./UserListOfInvites";
import { CustomLoader } from "../../common/CustomLoader";
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityIcon from "@mui/icons-material/Visibility";
export const ListOfThreadPostsWatched = () => {
const [posts, setPosts] = React.useState([])
const [loading, setLoading] = React.useState(true)
const [posts, setPosts] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const getPosts = async ()=> {
const getPosts = async () => {
try {
await new Promise((res, rej) => {
chrome?.runtime?.sendMessage(
{
action: "getThreadActivity",
payload: {
},
payload: {},
},
(response) => {
if (!response?.error) {
if(!response) {
res(null)
return
if (!response) {
res(null);
return;
}
const uniquePosts = response.reduce((acc, current) => {
const x = acc.find(item => item?.thread?.threadId === current?.thread?.threadId);
const x = acc.find(
(item) => item?.thread?.threadId === current?.thread?.threadId
);
if (!x) {
return acc.concat([current]);
} else {
return acc;
}
}, []);
setPosts(uniquePosts)
setPosts(uniquePosts);
res(uniquePosts);
return
return;
}
rej(response.error);
}
);
});
} catch (error) {
} finally {
setLoading(false)
setLoading(false);
}
}
};
React.useEffect(() => {
getPosts()
getPosts();
}, []);
return (
<Box sx={{
width: '360px',
display: 'flex',
flexDirection: 'column',
bgcolor: "background.paper",
padding: '20px'
<Box sx={{
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: 'center'
}}>
<Typography sx={{
fontSize: '14px'
}}>New Thread Posts</Typography>
<Spacer height="10px" />
{loading && posts.length === 0 && (
<Box sx={{
width: '100%',
display: 'flex',
justifyContent: 'center'
}}>
<CustomLoader />
</Box>
)}
{!loading && posts.length === 0 && (
<Box sx={{
width: '100%',
display: 'flex',
justifyContent: 'center'
}}>
<Typography sx={{
fontSize: '12px'
}}>No thread post notifications</Typography>
</Box>
)}
<List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", maxHeight: '300px', overflow: 'auto' }}>
{posts?.map((post)=> {
return (
<ListItem
key={post?.thread?.threadId}
onClick={()=> {
executeEvent("openThreadNewPost", {
data: post
});
}}
disablePadding
secondaryAction={
<IconButton edge="end" aria-label="comments">
<VisibilityIcon
sx={{
color: "red",
}}
/>
</IconButton>
}
>
<ListItemButton disableRipple role={undefined} dense>
<ListItemText primary={`New post in ${post?.thread?.threadData?.title}`} />
</ListItemButton>
</ListItem>
)
<Box
sx={{
width: "322px",
display: "flex",
flexDirection: "column",
padding: '0px 20px',
})}
</List>
}}
>
<Typography
sx={{
fontSize: "13px",
fontWeight: 600,
}}
>
New Thread Posts:
</Typography>
<Spacer height="10px" />
</Box>
<Box
sx={{
width: "322px",
height: '165px',
display: "flex",
flexDirection: "column",
bgcolor: "background.paper",
padding: "20px",
borderRadius: '19px'
}}
>
{loading && posts.length === 0 && (
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
}}
>
<CustomLoader />
</Box>
)}
{!loading && posts.length === 0 && (
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: 'center',
height: '100%',
}}
>
<Typography
sx={{
fontSize: "11px",
fontWeight: 400,
color: 'rgba(255, 255, 255, 0.2)'
}}
>
Nothing to display
</Typography>
</Box>
)}
{posts?.length > 0 && (
<List
sx={{
width: "100%",
maxWidth: 360,
bgcolor: "background.paper",
maxHeight: "300px",
overflow: "auto",
}}
>
{posts?.map((post) => {
return (
<ListItem
key={post?.thread?.threadId}
onClick={() => {
executeEvent("openThreadNewPost", {
data: post,
});
}}
disablePadding
secondaryAction={
<IconButton edge="end" aria-label="comments">
<VisibilityIcon
sx={{
color: "red",
}}
/>
</IconButton>
}
>
<ListItemButton disableRipple role={undefined} dense>
<ListItemText
primary={`New post in ${post?.thread?.threadData?.title}`}
/>
</ListItemButton>
</ListItem>
);
})}
</List>
)}
</Box>
</Box>
);
};

328
src/components/Group/ThingsToDoInitial.tsx
View File

@@ -16,151 +16,219 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
const [checked2, setChecked2] = React.useState(false);
const [checked3, setChecked3] = React.useState(false);
// const getAddressInfo = async (address) => {
// const response = await fetch(getBaseApiReact() + "/addresses/" + address);
// const data = await response.json();
// if (data.error && data.error === 124) {
// setChecked1(false);
// } else if (data.address) {
// setChecked1(true);
// }
// };
// const getAddressInfo = async (address) => {
// const response = await fetch(getBaseApiReact() + "/addresses/" + address);
// const data = await response.json();
// if (data.error && data.error === 124) {
// setChecked1(false);
// } else if (data.address) {
// setChecked1(true);
// }
// };
// const checkInfo = async () => {
// try {
// getAddressInfo(myAddress);
// } catch (error) {}
// };
// const checkInfo = async () => {
// try {
// getAddressInfo(myAddress);
// } catch (error) {}
// };
React.useEffect(() => {
if (balance && +balance >= 6) {
setChecked1(true)
setChecked1(true);
}
}, [balance]);
React.useEffect(()=> {
if(hasGroups) setChecked3(true)
}, [hasGroups])
React.useEffect(() => {
if (hasGroups) setChecked3(true);
}, [hasGroups]);
React.useEffect(()=> {
if(name) setChecked2(true)
}, [name])
React.useEffect(() => {
if (name) setChecked2(true);
}, [name]);
return (
<Box sx={{
width: '360px',
display: 'flex',
flexDirection: 'column',
bgcolor: "background.paper",
padding: '20px'
}}>
<Typography sx={{
fontSize: '14px'
}}>Suggestion: Complete the following</Typography>
<Spacer height="10px" />
<List sx={{ width: "100%", maxWidth: 360 }}>
<ListItem
// secondaryAction={
// <IconButton edge="end" aria-label="comments">
// <InfoIcon
// sx={{
// color: "white",
// }}
// />
// </IconButton>
// }
disablePadding
<Box
sx={{
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Box
sx={{
width: "322px",
display: "flex",
flexDirection: "column",
padding: "0px 20px",
}}
>
<ListItemButton disableRipple role={undefined} dense>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked1}
tabIndex={-1}
disableRipple
disabled={true}
sx={{
"&.Mui-checked": {
color: "white", // Customize the color when checked
},
"& .MuiSvgIcon-root": {
color: "white",
},
}}
/>
</ListItemIcon>
<ListItemText primary={`Have at least 6 QORT in your wallet`} />
</ListItemButton>
</ListItem>
<ListItem
// secondaryAction={
// <IconButton edge="end" aria-label="comments">
// <InfoIcon
// sx={{
// color: "white",
// }}
// />
// </IconButton>
// }
disablePadding
<Typography
sx={{
fontSize: "13px",
fontWeight: 600,
}}
>
Getting Started:
</Typography>
<Spacer height="10px" />
</Box>
<Box
sx={{
width: "322px",
height: "165px",
display: "flex",
flexDirection: "column",
bgcolor: "background.paper",
padding: "20px",
borderRadius: "19px",
}}
>
<ListItemButton disableRipple role={undefined} dense>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked2}
tabIndex={-1}
disableRipple
disabled={true}
<List sx={{ width: "100%", maxWidth: 360 }}>
<ListItem
// secondaryAction={
// <IconButton edge="end" aria-label="comments">
// <InfoIcon
// sx={{
// color: "white",
// }}
// />
// </IconButton>
// }
disablePadding
sx={{
marginBottom: '20px'
}}
>
<ListItemButton
sx={{
"&.Mui-checked": {
color: "white", // Customize the color when checked
},
"& .MuiSvgIcon-root": {
color: "white",
},
padding: "0px",
}}
/>
</ListItemIcon>
<ListItemText primary={`Register a name`} />
</ListItemButton>
</ListItem>
<ListItem
// secondaryAction={
// <IconButton edge="end" aria-label="comments">
// <InfoIcon
// sx={{
// color: "white",
// }}
// />
// </IconButton>
// }
disablePadding
>
<ListItemButton disableRipple role={undefined} dense>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked3}
tabIndex={-1}
disableRipple
disabled={true}
sx={{
"&.Mui-checked": {
color: "white", // Customize the color when checked
},
"& .MuiSvgIcon-root": {
color: "white",
},
}}
/>
</ListItemIcon>
<ListItemText primary={`Join a group`} />
</ListItemButton>
</ListItem>
</List>
role={undefined}
dense
>
<ListItemText
sx={{
"& .MuiTypography-root": {
fontSize: "13px",
fontWeight: 400,
},
}}
primary={`Have at least 6 QORT in your wallet`}
/>
<ListItemIcon
sx={{
justifyContent: "flex-end",
}}
>
<Box
sx={{
height: "18px",
width: "18px",
borderRadius: "50%",
backgroundColor: checked1 ? "rgba(9, 182, 232, 1)" : "transparent",
outline: "1px solid rgba(9, 182, 232, 1)",
}}
/>
{/* <Checkbox
edge="start"
checked={checked1}
tabIndex={-1}
disableRipple
disabled={true}
sx={{
"&.Mui-checked": {
color: "white", // Customize the color when checked
},
"& .MuiSvgIcon-root": {
color: "white",
},
}}
/> */}
</ListItemIcon>
</ListItemButton>
</ListItem>
<ListItem
sx={{
marginBottom: '20px'
}}
// secondaryAction={
// <IconButton edge="end" aria-label="comments">
// <InfoIcon
// sx={{
// color: "white",
// }}
// />
// </IconButton>
// }
disablePadding
>
<ListItemButton sx={{
padding: "0px",
}} disableRipple role={undefined} dense>
<ListItemText sx={{
"& .MuiTypography-root": {
fontSize: "13px",
fontWeight: 400,
},
}} primary={`Register a name`} />
<ListItemIcon sx={{
justifyContent: "flex-end",
}}>
<Box
sx={{
height: "18px",
width: "18px",
borderRadius: "50%",
backgroundColor: checked2 ? "rgba(9, 182, 232, 1)" : "transparent",
outline: "1px solid rgba(9, 182, 232, 1)",
}}
/>
</ListItemIcon>
</ListItemButton>
</ListItem>
<ListItem
// secondaryAction={
// <IconButton edge="end" aria-label="comments">
// <InfoIcon
// sx={{
// color: "white",
// }}
// />
// </IconButton>
// }
disablePadding
>
<ListItemButton sx={{
padding: "0px",
}} disableRipple role={undefined} dense>
<ListItemText sx={{
"& .MuiTypography-root": {
fontSize: "13px",
fontWeight: 400,
},
}} primary={`Join a group hub`} />
<ListItemIcon sx={{
justifyContent: "flex-end",
}}>
<Box
sx={{
height: "18px",
width: "18px",
borderRadius: "50%",
backgroundColor: checked3 ? "rgba(9, 182, 232, 1)" : "transparent",
outline: "1px solid rgba(9, 182, 232, 1)",
}}
/>
</ListItemIcon>
</ListItemButton>
</ListItem>
</List>
</Box>
</Box>
);
};

127
src/components/Mobile/MobileFooter.tsx Normal file
View File

@@ -0,0 +1,127 @@
import * as React from 'react';
import { BottomNavigation, BottomNavigationAction, Typography } from '@mui/material';
import { Home, Groups, Message, ShowChart } from '@mui/icons-material';
import Box from '@mui/material/Box';
import BottomLogo from '../../assets/svgs/BottomLogo5.svg'
import { CustomSvg } from '../../common/CustomSvg';
import { WalletIcon } from '../../assets/Icons/WalletIcon';
import { HubsIcon } from '../../assets/Icons/HubsIcon';
import { TradingIcon } from '../../assets/Icons/TradingIcon';
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
const IconWrapper = ({children, label, color})=> {
return <Box sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: '5px',
flexDirection: 'column'
}}>
{children}
<Typography sx={{
fontFamily: "Inter",
fontSize: "12px",
fontWeight: 500,
color: color
}}>{label}</Typography>
</Box>
}
export const MobileFooter =({
selectedGroup,
groupSection,
isUnread,
goToAnnouncements,
isUnreadChat,
goToChat,
goToThreads,
setOpenManageMembers,
groupChatHasUnread,
groupsAnnHasUnread,
directChatHasUnread,
chatMode,
openDrawerGroups,
goToHome,
setIsOpenDrawerProfile,
mobileViewMode,
setMobileViewMode,
setMobileViewModeKeepOpen
}) => {
const [value, setValue] = React.useState(0);
return (
<Box sx={{
width: '100%',
position: 'fixed',
bottom: 0,
backgroundColor: 'var(--bg-primary)',
display: 'flex',
alignItems: 'center',
height: '67px', // Footer height
zIndex: 1,
borderTopRightRadius: '25px',
borderTopLeftRadius: '25px'
}}>
<BottomNavigation
showLabels
value={value}
onChange={(event, newValue) => setValue(newValue)}
sx={{ backgroundColor: 'transparent', flexGrow: 1 }}
>
<BottomNavigationAction onClick={()=> {
// setMobileViewMode('wallet')
setIsOpenDrawerProfile(true)
}} icon={<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Wallet"><WalletIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 0 ? 'white' : 'gray', padding: '0px 10px' }} />
<BottomNavigationAction onClick={()=> {
setMobileViewMode('groups')
}} icon={<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs"><HubsIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 0 ? 'white' : 'gray', paddingLeft: '10px', paddingRight: '42px' }} />
</BottomNavigation>
{/* Floating Center Button */}
<Box sx={{
position: 'absolute',
bottom: '34px', // Adjusted to float properly based on footer height
left: '50%',
transform: 'translateX(-50%)', // Center horizontally
width: '59px',
height: '59px',
backgroundColor: 'var(--bg-primary)',
borderRadius: '50%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.3)', // Subtle shadow for the floating effect
zIndex: 3,
}}>
<Box sx={{
width: '49px', // Slightly smaller inner circle
height: '49px',
backgroundColor: 'var(--bg-primary)',
borderRadius: '50%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}>
{/* Custom Center Icon */}
<img src={BottomLogo} alt="center-icon" />
</Box>
</Box>
<BottomNavigation
showLabels
value={value}
onChange={(event, newValue) => setValue(newValue)}
sx={{ backgroundColor: 'transparent', flexGrow: 1 }}
>
<BottomNavigationAction onClick={()=> {
setMobileViewModeKeepOpen('messaging')
}} icon={<IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)"><MessagingIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 2 ? 'white' : 'gray', paddingLeft: '55px', paddingRight: '10px' }} />
<BottomNavigationAction onClick={() => {
chrome.tabs.create({ url: "https://www.qort.trade", active: true });
}} icon={<IconWrapper label="Trading" color="rgba(250, 250, 250, 0.5)"><TradingIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 3 ? 'white' : 'gray' , padding: '0px 10px'}} />
</BottomNavigation>
</Box>
);
}

186
src/components/Mobile/MobileHeader.tsx Normal file
View File

@@ -0,0 +1,186 @@
import React from 'react';
import { AppBar, Toolbar, IconButton, Typography, Box, MenuItem, Select, ButtonBase } from '@mui/material';
import { HomeIcon } from '../../assets/Icons/HomeIcon';
import { LogoutIcon } from '../../assets/Icons/LogoutIcon';
import { NotificationIcon } from '../../assets/Icons/NotificationIcon';
import { ArrowDownIcon } from '../../assets/Icons/ArrowDownIcon';
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
const Header = ({
logoutFunc,
goToHome,
setIsOpenDrawerProfile,
isThin,
setMobileViewModeKeepOpen
// selectedGroup,
// onHomeClick,
// onLogoutClick,
// onGroupChange,
// onWalletClick,
// onNotificationClick,
}) => {
if(isThin){
return (
<AppBar position="static" sx={{ backgroundColor: 'background: rgba(0, 0, 0, 0.2)', boxShadow: 'none' }}>
<Toolbar sx={{ justifyContent: 'space-between', padding: '0 16px', height: '30px', minHeight: '30px' }}>
{/* Left Home Icon */}
<Box sx={{
display: 'flex',
alignItems: 'center',
gap: '18px',
width: '75px'
}}>
<IconButton edge="start" color="inherit" aria-label="home"
onClick={()=> {
setMobileViewModeKeepOpen('')
goToHome()
}}
// onClick={onHomeClick}
>
<HomeIcon height={16} width={18} color="rgba(145, 145, 147, 1)" />
</IconButton>
<IconButton edge="start" color="inherit" aria-label="home"
onClick={()=> {
setMobileViewModeKeepOpen()
goToHome()
}}
// onClick={onHomeClick}
>
<NotificationIcon color="rgba(145, 145, 147, 1)" />
</IconButton>
</Box>
{/* Center Title */}
<Typography variant="h6" sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 700, letterSpacing: '2px' , fontSize: '13px'}}>
QORTAL
</Typography>
<Box sx={{
display: 'flex',
alignItems: 'center',
gap: '18px',
width: '75px',
justifyContent: 'flex-end'
}}>
{/* Right Logout Icon */}
<IconButton onClick={()=> {
setMobileViewModeKeepOpen('messaging')
}} edge="end" color="inherit" aria-label="logout"
// onClick={onLogoutClick}
>
<MessagingIcon height={16} width={16} color="rgba(145, 145, 147, 1)" />
</IconButton>
<IconButton onClick={logoutFunc} edge="end" color="inherit" aria-label="logout"
// onClick={onLogoutClick}
>
<LogoutIcon height={16} width={14} color="rgba(145, 145, 147, 1)" />
</IconButton>
</Box>
</Toolbar>
</AppBar>
)
}
return (
<>
{/* Main Header */}
<AppBar position="static" sx={{ backgroundColor: 'var(--bg-primary)', boxShadow: 'none' }}>
<Toolbar sx={{ justifyContent: 'space-between', padding: '0 16px', height: '60px' }}>
{/* Left Home Icon */}
<IconButton edge="start" color="inherit" aria-label="home"
onClick={goToHome}
// onClick={onHomeClick}
>
<HomeIcon color="rgba(145, 145, 147, 1)" />
</IconButton>
{/* Center Title */}
<Typography variant="h6" sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 700, letterSpacing: '2px' , fontSize: '13px'}}>
QORTAL
</Typography>
{/* Right Logout Icon */}
<IconButton onClick={logoutFunc} edge="end" color="inherit" aria-label="logout"
// onClick={onLogoutClick}
>
<LogoutIcon color="rgba(145, 145, 147, 1)" />
</IconButton>
</Toolbar>
</AppBar>
{/* Secondary Section */}
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: 'var(--bg-3)',
padding: '8px 16px',
position: 'relative',
height: '27px'
}}
>
<Box sx={{
display: 'flex',
gap: '10px',
alignItems: 'center',
userSelect: 'none'
}}>
<Typography sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 400, fontSize: '11px'}}>
Palmas
</Typography>
{/*
<ArrowDownIcon /> */}
</Box>
<Box
sx={{
position: 'absolute',
left: '50%',
transform: 'translate(-50%, 50%)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 500,
width: '30px', // Adjust as needed
height: '30px', // Adjust as needed
backgroundColor: '#232428', // Circle background
borderRadius: '50%',
boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.3)', // Optional shadow for the circle
}}
>
<IconButton color="inherit">
<NotificationIcon color="rgba(255, 255, 255, 1)" />
</IconButton>
</Box>
{/* Right Dropdown */}
<ButtonBase onClick={()=> {
setIsOpenDrawerProfile(true)
}}>
<Box sx={{
display: 'flex',
gap: '10px',
alignItems: 'center'
}}>
<Typography sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 400, fontSize: '11px'}}>
View Wallet
</Typography>
<ArrowDownIcon />
</Box>
</ButtonBase>
</Box>
</>
);
};
export default Header;