diff --git a/src/App.tsx b/src/App.tsx index 44d7c5d..b43d357 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -129,7 +129,7 @@ const defaultValues: MyContextInterface = { message: "", }, }; -export let isMobile = false +export let isMobile = true const isMobileDevice = () => { const userAgent = navigator.userAgent || navigator.vendor || window.opera; @@ -1192,7 +1192,7 @@ function App() { const renderProfile = ()=> { return ( - + {isMobile && ( { - chrome.tabs.create({ url: "https://www.qort.trade" }); + chrome.tabs.create({ url: "https://www.qort.trade", active: true }); }} > Get QORT at qort.trade @@ -1367,7 +1367,9 @@ function App() { cursor: "pointer", }} /> - + {!isMobile && ( + <> + { @@ -1378,6 +1380,9 @@ function App() { cursor: "pointer", }} /> + + )} + {authenticatedMode === "qort" && ( { + return ( + + + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/ChatIcon.tsx b/src/assets/Icons/ChatIcon.tsx new file mode 100644 index 0000000..fdc5945 --- /dev/null +++ b/src/assets/Icons/ChatIcon.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export const ChatIcon= ({ color = 'white', height, width }) => { + return ( + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/HomeIcon.tsx b/src/assets/Icons/HomeIcon.tsx new file mode 100644 index 0000000..38f880d --- /dev/null +++ b/src/assets/Icons/HomeIcon.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export const HomeIcon= ({ color, height = 20, width = 23 }) => { + return ( + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/HubsIcon.tsx b/src/assets/Icons/HubsIcon.tsx new file mode 100644 index 0000000..00f6cd4 --- /dev/null +++ b/src/assets/Icons/HubsIcon.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export const HubsIcon= ({ color, height, width }) => { + return ( + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/LogoutIcon.tsx b/src/assets/Icons/LogoutIcon.tsx new file mode 100644 index 0000000..9288de1 --- /dev/null +++ b/src/assets/Icons/LogoutIcon.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export const LogoutIcon= ({ color, height = 20, width = 18}) => { + return ( + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/MembersIcon.tsx b/src/assets/Icons/MembersIcon.tsx new file mode 100644 index 0000000..a37680e --- /dev/null +++ b/src/assets/Icons/MembersIcon.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +export const MembersIcon= ({ color = 'white', height, width }) => { + return ( + + + + + + + + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/MessagingIcon.tsx b/src/assets/Icons/MessagingIcon.tsx new file mode 100644 index 0000000..0de459b --- /dev/null +++ b/src/assets/Icons/MessagingIcon.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +export const MessagingIcon= ({ color, height = 31, width = 31 }) => { + return ( + + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/NotificationIcon.tsx b/src/assets/Icons/NotificationIcon.tsx new file mode 100644 index 0000000..d577954 --- /dev/null +++ b/src/assets/Icons/NotificationIcon.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +export const NotificationIcon= ({ color, height, width }) => { + return ( + + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/NotificationIcon2.tsx b/src/assets/Icons/NotificationIcon2.tsx new file mode 100644 index 0000000..e670888 --- /dev/null +++ b/src/assets/Icons/NotificationIcon2.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +export const NotificationIcon2= ({ color = 'white', height, width }) => { + return ( + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/ThreadsIcon.tsx b/src/assets/Icons/ThreadsIcon.tsx new file mode 100644 index 0000000..7a42763 --- /dev/null +++ b/src/assets/Icons/ThreadsIcon.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +export const ThreadsIcon= ({ color = 'white', height, width }) => { + return ( + + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/TradingIcon.tsx b/src/assets/Icons/TradingIcon.tsx new file mode 100644 index 0000000..2c72300 --- /dev/null +++ b/src/assets/Icons/TradingIcon.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +export const TradingIcon= ({ color, height, width }) => { + return ( + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/WalletIcon.tsx b/src/assets/Icons/WalletIcon.tsx new file mode 100644 index 0000000..ff993d4 --- /dev/null +++ b/src/assets/Icons/WalletIcon.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export const WalletIcon= ({ color, height, width }) => { + return ( + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/svgs/BottomLogo.svg b/src/assets/svgs/BottomLogo.svg new file mode 100644 index 0000000..74848da --- /dev/null +++ b/src/assets/svgs/BottomLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/BottomLogo2.svg b/src/assets/svgs/BottomLogo2.svg new file mode 100644 index 0000000..3a7fcea --- /dev/null +++ b/src/assets/svgs/BottomLogo2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/BottomLogo3.svg b/src/assets/svgs/BottomLogo3.svg new file mode 100644 index 0000000..67a0480 --- /dev/null +++ b/src/assets/svgs/BottomLogo3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/BottomLogo4.svg b/src/assets/svgs/BottomLogo4.svg new file mode 100644 index 0000000..562ff64 --- /dev/null +++ b/src/assets/svgs/BottomLogo4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/BottomLogo5.svg b/src/assets/svgs/BottomLogo5.svg new file mode 100644 index 0000000..89256fe --- /dev/null +++ b/src/assets/svgs/BottomLogo5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/common/CustomSvg.tsx b/src/common/CustomSvg.tsx new file mode 100644 index 0000000..c1d8f09 --- /dev/null +++ b/src/common/CustomSvg.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +export const CustomSvg = ({ src, color = 'black', size = 24 }) => { + return ( + + {src} + + ); + }; + \ No newline at end of file diff --git a/src/components/Chat/AnnouncementDiscussion.tsx b/src/components/Chat/AnnouncementDiscussion.tsx index 923c159..a162c8b 100644 --- a/src/components/Chat/AnnouncementDiscussion.tsx +++ b/src/components/Chat/AnnouncementDiscussion.tsx @@ -269,7 +269,9 @@ export const AnnouncementDiscussion = ({ flexShrink: 0, }}> - + setSelectedAnnouncement(null)} sx={{ cursor: 'pointer' }} /> diff --git a/src/components/Chat/GroupAnnouncements.tsx b/src/components/Chat/GroupAnnouncements.tsx index 4c9e0ce..56b1b4a 100644 --- a/src/components/Chat/GroupAnnouncements.tsx +++ b/src/components/Chat/GroupAnnouncements.tsx @@ -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 (
- - - Group Announcements - - + {!isMobile && ( + + + Group Announcements + + )} + +
{!isLoading && combinedListTempAndReal?.length === 0 && ( diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index 013f74b..8484fea 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -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 ( +
+
+ {directs.map((direct: any) => ( + + + // + // + // } + 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", + }} + > + + + + {(direct?.name || direct?.address)?.charAt(0)} + + + + {direct?.sender !== myAddress && + direct?.timestamp && + ((!timestampEnterData[direct?.address] && + Date.now() - direct?.timestamp < + timeDifferenceForNotificationChats) || + timestampEnterData[direct?.address] < + direct?.timestamp) && ( + + )} + + + + ))} +
+
+ + { + setNewChat(true); + setSelectedDirect(null); + // setSelectedGroup(null); + setIsOpenDrawer(false); + }} + > + + New Chat + + +
+
+ ) + } + const renderGroups = () => { return (
-
-
-
*/} + {/*
{directs.map((direct: any) => ( - + @@ -1693,11 +1878,11 @@ export const Group = ({ ))} -
+
*/}
{groups.map((group: any) => ( - + @@ -1716,6 +1903,7 @@ export const Group = ({ // // } onClick={() => { + setMobileViewMode('group') clearAllQueues(); setSelectedDirect(null); setTriedToFetchSecretKey(false); @@ -1783,6 +1971,7 @@ export const Group = ({ sx={{ display: "flex", width: "100%", + alignItems: 'center' }} > @@ -1887,6 +2076,7 @@ export const Group = ({ )}
+
); }; @@ -1903,12 +2093,13 @@ export const Group = ({ info={infoSnack} setInfo={setInfoSnack} /> - +
+
+ + {mobileViewMode === 'groups' && ( + renderGroups() + )} + +{mobileViewModeKeepOpen === 'messaging' && ( + renderDirects() + )} {newChat && ( <> + {mobileViewMode === 'group' && ( + + )} {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 = ({ )} - { + + {mobileViewMode === 'home' && ( + + )} + {/* { !selectedGroup && groupSection === "home" && ( - - - - - {!isLoadingGroups && ( - - - - - - - - )} - - )} + + + )} */}
- + {mobileViewMode === 'home' && !mobileViewModeKeepOpen && ( + <> +
+ {/* {renderGroups()} - - + */} {isMobile && ( - - - {selectedGroup && ( - <> - - - - - - - - - - - - - - )} - - {/* Second row: Groups, Home, Profile */} - - - - - - - - - - setIsOpenDrawerProfile(true)} - > - - - - - + )} + + )} + + + ); }; + + + +// {isMobile && ( +// +// +// {selectedGroup && ( +// <> +// +// +// +// +// +// +// +// +// +// +// +// +// +// )} + +// {/* Second row: Groups, Home, Profile */} +// +// +// +// +// +// +// +// +// +// setIsOpenDrawerProfile(true)} +// > +// +// +// +// +// +// )} \ No newline at end of file diff --git a/src/components/Group/GroupInvites.tsx b/src/components/Group/GroupInvites.tsx index 06e176d..d451576 100644 --- a/src/components/Group/GroupInvites.tsx +++ b/src/components/Group/GroupInvites.tsx @@ -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 ( - - Group Invites - - {loading && groupsWithJoinRequests.length === 0 && ( - - - - )} - {!loading && groupsWithJoinRequests.length === 0 && ( - - No invites - - )} - - {groupsWithJoinRequests?.map((group)=> { - return ( - { - setOpenAddGroup(true) - setTimeout(() => { - executeEvent("openGroupInvitesRequest", {}); - - }, 300); + + + - - - } > - - - - - - ) + Hub Invites: + + + - })} - - - - + + {loading && groupsWithJoinRequests.length === 0 && ( + + + + )} + {!loading && groupsWithJoinRequests.length === 0 && ( + + + Nothing to display + + + )} + + {groupsWithJoinRequests?.map((group) => { + return ( + { + setOpenAddGroup(true); + setTimeout(() => { + executeEvent("openGroupInvitesRequest", {}); + }, 300); + }} + disablePadding + secondaryAction={ + + + + } + > + + + + + ); + })} + + ); }; diff --git a/src/components/Group/GroupJoinRequests.tsx b/src/components/Group/GroupJoinRequests.tsx index 9430b19..bdbb7d8 100644 --- a/src/components/Group/GroupJoinRequests.tsx +++ b/src/components/Group/GroupJoinRequests.tsx @@ -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 ( - - Join Requests - + + + Join Requests: + + + + + {loading && groupsWithJoinRequests.length === 0 && ( )} {!loading && groupsWithJoinRequests.length === 0 && ( - - No join requests - + + + Nothing to display + + )} {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={ } > - + - + ) @@ -166,5 +215,6 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get + ); }; diff --git a/src/components/Group/GroupMenu.tsx b/src/components/Group/GroupMenu.tsx new file mode 100644 index 0000000..f113bb5 --- /dev/null +++ b/src/components/Group/GroupMenu.tsx @@ -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 ( + + + + { + setGroupSection("chat"); + handleClose(); + }} + > + + + + + + { + setGroupSection("announcement"); + handleClose(); + }} + > + + + + + + { + setGroupSection("forum"); + handleClose(); + }} + > + + + + + + + { + // setGroupSection("") + handleClose(); + }} + > + + + + + + + + + ); +}; diff --git a/src/components/Group/Home.tsx b/src/components/Group/Home.tsx new file mode 100644 index 0000000..7dcc557 --- /dev/null +++ b/src/components/Group/Home.tsx @@ -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 ( + + + + + Welcome + + + + {/* + + */} + {!isLoadingGroups && ( + + + + + + + + + )} + + + ) +} diff --git a/src/components/Group/ListOfThreadPostsWatched.tsx b/src/components/Group/ListOfThreadPostsWatched.tsx index b22be24..3e794b0 100644 --- a/src/components/Group/ListOfThreadPostsWatched.tsx +++ b/src/components/Group/ListOfThreadPostsWatched.tsx @@ -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 ( - - New Thread Posts - - {loading && posts.length === 0 && ( - - - - )} - {!loading && posts.length === 0 && ( - - No thread post notifications - - )} - - {posts?.map((post)=> { - return ( - { - executeEvent("openThreadNewPost", { - data: post - }); - }} - disablePadding - secondaryAction={ - - - - } - > - - - - - - ) + + }} + > + + New Thread Posts: + + + + + + {loading && posts.length === 0 && ( + + + + )} + {!loading && posts.length === 0 && ( + + + Nothing to display + + + )} + {posts?.length > 0 && ( + + {posts?.map((post) => { + return ( + { + executeEvent("openThreadNewPost", { + data: post, + }); + }} + disablePadding + secondaryAction={ + + + + } + > + + + + + ); + })} + + )} + + ); }; diff --git a/src/components/Group/ThingsToDoInitial.tsx b/src/components/Group/ThingsToDoInitial.tsx index 18f75b5..fb8a289 100644 --- a/src/components/Group/ThingsToDoInitial.tsx +++ b/src/components/Group/ThingsToDoInitial.tsx @@ -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 ( - - Suggestion: Complete the following - - - - // - // - // } - disablePadding + + - - - - - - - - - // - // - // } - disablePadding + + Getting Started: + + + + + - - - + + // + // + // } + disablePadding + sx={{ + marginBottom: '20px' + }} + > + - - - - - - // - // - // } - disablePadding - > - - - - - - - - + role={undefined} + dense + > + + + + {/* */} + + + + + // + // + // } + disablePadding + > + + + + + + + + + + // + // + // } + disablePadding + > + + + + + + + + + + ); }; diff --git a/src/components/Mobile/MobileFooter.tsx b/src/components/Mobile/MobileFooter.tsx new file mode 100644 index 0000000..1f025f4 --- /dev/null +++ b/src/components/Mobile/MobileFooter.tsx @@ -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 + {children} + {label} + +} + +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 ( + + setValue(newValue)} + sx={{ backgroundColor: 'transparent', flexGrow: 1 }} + > + { + // setMobileViewMode('wallet') + setIsOpenDrawerProfile(true) + }} icon={} sx={{ color: value === 0 ? 'white' : 'gray', padding: '0px 10px' }} /> + { + setMobileViewMode('groups') + }} icon={} sx={{ color: value === 0 ? 'white' : 'gray', paddingLeft: '10px', paddingRight: '42px' }} /> + + + + {/* Floating Center Button */} + + + {/* Custom Center Icon */} + center-icon + + + + setValue(newValue)} + sx={{ backgroundColor: 'transparent', flexGrow: 1 }} + > + { + setMobileViewModeKeepOpen('messaging') + }} icon={} sx={{ color: value === 2 ? 'white' : 'gray', paddingLeft: '55px', paddingRight: '10px' }} /> + { + chrome.tabs.create({ url: "https://www.qort.trade", active: true }); + }} icon={} sx={{ color: value === 3 ? 'white' : 'gray' , padding: '0px 10px'}} /> + + + ); + } \ No newline at end of file diff --git a/src/components/Mobile/MobileHeader.tsx b/src/components/Mobile/MobileHeader.tsx new file mode 100644 index 0000000..da9d07e --- /dev/null +++ b/src/components/Mobile/MobileHeader.tsx @@ -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 ( + + + {/* Left Home Icon */} + + { + setMobileViewModeKeepOpen('') + goToHome() +}} + // onClick={onHomeClick} + > + + + { + setMobileViewModeKeepOpen() + goToHome() +}} + // onClick={onHomeClick} + > + + + + + + {/* Center Title */} + + QORTAL + + + {/* Right Logout Icon */} + + { + setMobileViewModeKeepOpen('messaging') + }} edge="end" color="inherit" aria-label="logout" + +// onClick={onLogoutClick} +> + + + + + + + + + ) + } + return ( + <> + {/* Main Header */} + + + {/* Left Home Icon */} + + + + + {/* Center Title */} + + QORTAL + + + {/* Right Logout Icon */} + + + + + + + {/* Secondary Section */} + + + + + Palmas + +{/* + */} + + + + + + + + + + + {/* Right Dropdown */} + { + setIsOpenDrawerProfile(true) + }}> + + + View Wallet + + + + + + + + ); +}; + +export default Header; diff --git a/src/index.css b/src/index.css index 956f995..68a7ee3 100644 --- a/src/index.css +++ b/src/index.css @@ -29,6 +29,10 @@ --color-instance-popover-bg: #222222; --Mail-Background: rgba(49, 51, 56, 1); --new-message-text: black; + + --bg-primary : rgba(31, 32, 35, 1); + --bg-2: #27282c; + --bg-3: rgba(0, 0, 0, 0.1); } body { diff --git a/src/utils/mobile/mobileUtils.ts b/src/utils/mobile/mobileUtils.ts new file mode 100644 index 0000000..144c8c1 --- /dev/null +++ b/src/utils/mobile/mobileUtils.ts @@ -0,0 +1,5 @@ + +export const getRootHeight = ()=> { + + return document?.getElementById('root')?.style?.height || '100%' +} \ No newline at end of file