diff --git a/src/App.tsx b/src/App.tsx index 420b198..5ffe85d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1215,9 +1215,10 @@ function App() { return ( {isMobile && ( @@ -1239,162 +1240,166 @@ function App() { /> )} + {desktopViewMode !== "apps" && desktopViewMode !== "dev" && desktopViewMode !== "chat" && ( + + - - - - {authenticatedMode === "ltc" ? ( - <> - - - - - {rawWallet?.ltcAddress?.slice(0, 6)}... - {rawWallet?.ltcAddress?.slice(-4)} - - - - {ltcBalanceLoading && ( - - )} - {!isNaN(+ltcBalance) && !ltcBalanceLoading && ( - - - {ltcBalance} LTC - - - - )} - - - ) : ( - <> - - + {authenticatedMode === "ltc" ? ( + <> + + + + + {rawWallet?.ltcAddress?.slice(0, 6)}... + {rawWallet?.ltcAddress?.slice(-4)} + + + + {ltcBalanceLoading && ( + + )} + {!isNaN(+ltcBalance) && !ltcBalanceLoading && ( + - {userInfo?.name} + {ltcBalance} LTC - - - - {rawWallet?.address0?.slice(0, 6)}... - {rawWallet?.address0?.slice(-4)} - - - - {qortBalanceLoading && ( - - )} - {!qortBalanceLoading && balance >= 0 && ( - - - {balance?.toFixed(2)} QORT - - - - )} - - - {userInfo && !userInfo?.name && ( - { - setOpenRegisterName(true); - }} - > - REGISTER NAME - - )} - - { - setIsOpenSendQort(true); - // setExtstate("send-qort"); - setIsOpenDrawerProfile(false); + - Transfer QORT - - - + /> + )} + + + ) : ( + <> + + { - window.electronAPI.openExternal("https://www.qort.trade"); + fontSize: "20px", }} > - Get QORT at qort.trade + {userInfo?.name} - + + + + {rawWallet?.address0?.slice(0, 6)}... + {rawWallet?.address0?.slice(-4)} + + + + {qortBalanceLoading && ( + + )} + {!qortBalanceLoading && balance >= 0 && ( + + + {balance?.toFixed(2)} QORT + + + + )} + + + {userInfo && !userInfo?.name && ( + { + setOpenRegisterName(true); + }} + > + REGISTER NAME + + )} + + { + setIsOpenSendQort(true); + // setExtstate("send-qort"); + setIsOpenDrawerProfile(false); + }} + > + Transfer QORT + + + + )} + { + window.electronAPI.openExternal("https://www.qort.trade"); + }} + > + Get QORT at qort.trade + + + )} + + {extState === "not-authenticated" && ( @@ -1534,7 +1539,7 @@ function App() { desktopViewMode={desktopViewMode} setDesktopViewMode={setDesktopViewMode} /> - {!isMobile && desktopViewMode !== "apps" && desktopViewMode !== "dev" && renderProfile()} + {!isMobile && renderProfile()} { + return ( + + + + + + + + + + + + ); +}; diff --git a/src/components/AddressQRCode.tsx b/src/components/AddressQRCode.tsx index cac111d..77fa252 100644 --- a/src/components/AddressQRCode.tsx +++ b/src/components/AddressQRCode.tsx @@ -1,36 +1,72 @@ - -import React from 'react'; -import QRCode from 'react-qr-code'; -import { TextP } from '../App-styles'; -import { Box } from '@mui/material'; +import React, { useState } from "react"; +import QRCode from "react-qr-code"; +import { TextP } from "../App-styles"; +import { Box, Typography } from "@mui/material"; export const AddressQRCode = ({ targetAddress }) => { + const [open, setOpen] = useState(false); return ( - - - Your address - - + + { + setOpen((prev)=> !prev); + }} + > + {open ? 'Hide QR code' :'See QR code'} + + + {open && ( + + + + Your address + + + + + )} ); }; diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx index c66adca..b6a188e 100644 --- a/src/components/Apps/AppsDesktop.tsx +++ b/src/components/Apps/AppsDesktop.tsx @@ -21,10 +21,15 @@ import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; import { Save } from "../Save/Save"; import { HubsIcon } from "../../assets/Icons/HubsIcon"; import { CoreSyncStatus } from "../CoreSyncStatus"; +import { IconWrapper } from "../Desktop/DesktopFooter"; +import AppIcon from "../../assets/svgs/AppIcon.svg"; +import { useRecoilState } from "recoil"; +import { enabledDevModeAtom } from "../../atoms/global"; +import { AppsIcon } from "../../assets/Icons/AppsIcon"; const uid = new ShortUniqueId({ length: 8 }); -export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects}) => { +export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, isApps, desktopViewMode}) => { const [availableQapps, setAvailableQapps] = useState([]); const [selectedAppInfo, setSelectedAppInfo] = useState(null); const [selectedCategory, setSelectedCategory] = useState(null) @@ -33,6 +38,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop const [isNewTabWindow, setIsNewTabWindow] = useState(false); const [categories, setCategories] = useState([]) const iframeRefs = useRef({}); + const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom) const myApp = useMemo(()=> { return availableQapps.find((app)=> app.name === myName && app.service === 'APP') @@ -317,11 +323,46 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop { + setDesktopViewMode('apps') + }} + > + + + + + { + setDesktopViewMode('chat') + }} + > + + + + + {/* { setDesktopSideView("directs"); toggleSideViewDirects() @@ -357,10 +398,23 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop } /> - + */} - - + {isEnabledDevMode && ( + { + setDesktopViewMode('dev') + }} + > + + + + + )} {mode !== 'home' && ( diff --git a/src/components/Apps/AppsDevMode.tsx b/src/components/Apps/AppsDevMode.tsx index 13b24aa..e5ea771 100644 --- a/src/components/Apps/AppsDevMode.tsx +++ b/src/components/Apps/AppsDevMode.tsx @@ -22,10 +22,12 @@ import { Save } from "../Save/Save"; import { HubsIcon } from "../../assets/Icons/HubsIcon"; import { AppsDevModeNavBar } from "./AppsDevModeNavBar"; import { CoreSyncStatus } from "../CoreSyncStatus"; +import { AppsIcon } from "../../assets/Icons/AppsIcon"; +import { IconWrapper } from "../Desktop/DesktopFooter"; const uid = new ShortUniqueId({ length: 8 }); -export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects}) => { +export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, desktopViewMode, isApps}) => { const [availableQapps, setAvailableQapps] = useState([]); const [selectedAppInfo, setSelectedAppInfo] = useState(null); const [selectedCategory, setSelectedCategory] = useState(null) @@ -208,49 +210,59 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop { - setDesktopSideView("directs"); - toggleSideViewDirects() + setDesktopViewMode('apps') }} > - + + + + + { + setDesktopViewMode('chat') + }} + > + - - - { - setDesktopSideView("groups"); - toggleSideViewGroups() - }} - > - - + - + { + setDesktopViewMode('dev') + }} + > + + + + {mode !== 'home' && ( diff --git a/src/components/Desktop/DesktopFooter.tsx b/src/components/Desktop/DesktopFooter.tsx index 9e3491a..faac91b 100644 --- a/src/components/Desktop/DesktopFooter.tsx +++ b/src/components/Desktop/DesktopFooter.tsx @@ -20,7 +20,7 @@ import { Save } from "../Save/Save"; import { useRecoilState } from "recoil"; import { enabledDevModeAtom } from "../../atoms/global"; -export const IconWrapper = ({ children, label, color, selected, disableWidth }) => { +export const IconWrapper = ({ children, label, color, selected, disableWidth, customWidth }) => { return ( { +const IconWrapper = ({ children, label, color, selected, selectColor, customHeight }) => { return ( { alignItems: "center", gap: "5px", flexDirection: "column", - height: "65px", - width: "65px", + height: customHeight ? customHeight : "65px", + width: customHeight ? customHeight : "65px", borderRadius: "50%", backgroundColor: selected ? selectColor || "rgba(28, 29, 32, 1)" : "transparent", }} @@ -111,7 +111,7 @@ export const DesktopHeader = ({ alignItems: "center", }} > - { goToHome(); }} @@ -170,15 +170,15 @@ export const DesktopHeader = ({ } /> - - */} + {/* + /> */} { goToAnnouncements() @@ -189,6 +189,7 @@ export const DesktopHeader = ({ label="ANN" selected={isAnnouncement} selectColor="#09b6e8" + customHeight="55px" > { + const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom) + + return ( + + { + goToHome(); + + }} + > + + + + + { + setDesktopViewMode('apps') + // setIsOpenSideViewDirects(false) + // setIsOpenSideViewGroups(false) + }} + > + + + + + { + setDesktopViewMode('chat') + }} + > + + + + + {/* { + setDesktopSideView("groups"); + toggleSideViewGroups() + }} + > + + + */} + + {/* */} + {isEnabledDevMode && ( + { + setDesktopViewMode('dev') + }} + > + + + + + )} + + ) +} diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index d4aa742..552b251 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -86,12 +86,15 @@ import { getRootHeight } from "../../utils/mobile/mobileUtils"; import { ReturnIcon } from "../../assets/Icons/ReturnIcon"; import { ExitIcon } from "../../assets/Icons/ExitIcon"; import { HomeDesktop } from "./HomeDesktop"; -import { DesktopFooter } from "../Desktop/DesktopFooter"; +import { DesktopFooter, IconWrapper } from "../Desktop/DesktopFooter"; import { DesktopHeader } from "../Desktop/DesktopHeader"; import { Apps } from "../Apps/Apps"; import { AppsNavBar } from "../Apps/AppsNavBar"; import { AppsDesktop } from "../Apps/AppsDesktop"; import { AppsDevMode } from "../Apps/AppsDevMode"; +import { DesktopSideBar } from "../DesktopSideBar"; +import { HubsIcon } from "../../assets/Icons/HubsIcon"; +import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; // let touchStartY = 0; // let disablePullToRefresh = false; @@ -1282,6 +1285,9 @@ export const Group = ({ setupGroupWebsocketInterval.current = null; settimeoutForRefetchSecretKey.current = null; initiatedGetMembers.current = false; + if(!isMobile){ + setDesktopViewMode('home') + } }; const logoutEventFunc = () => { @@ -1368,6 +1374,9 @@ export const Group = ({ setTriedToFetchSecretKey(false); setFirstSecretKeyInCreation(false); setGroupSection("chat"); + if(!isMobile){ + setDesktopViewMode('chat') + } window.sendMessage("addTimestampEnterChat", { timestamp: Date.now(), @@ -1381,10 +1390,9 @@ export const Group = ({ setSelectedGroup(findGroup); setMobileViewMode("group"); setDesktopSideView('groups') - setDesktopViewMode('home') getTimestampEnterChat(); isLoadingOpenSectionFromNotification.current = false; - }, 200); + }, 350); } else { isLoadingOpenSectionFromNotification.current = false; } @@ -1419,6 +1427,9 @@ export const Group = ({ setTriedToFetchSecretKey(false); setFirstSecretKeyInCreation(false); setGroupSection("announcement"); + if(!isMobile){ + setDesktopViewMode('chat') + } window.sendMessage("addGroupNotificationTimestamp", { timestamp: Date.now(), groupId: findGroup.groupId, @@ -1430,9 +1441,8 @@ export const Group = ({ setSelectedGroup(findGroup); setMobileViewMode("group"); setDesktopSideView('groups') - setDesktopViewMode('home') getGroupAnnouncements(); - }, 200); + }, 350); } }; @@ -1481,14 +1491,15 @@ export const Group = ({ setFirstSecretKeyInCreation(false); setGroupSection("forum"); setDefaultThread(data); - + if(!isMobile){ + setDesktopViewMode('chat') + } setTimeout(() => { setSelectedGroup(findGroup); setMobileViewMode("group"); setDesktopSideView('groups') - setDesktopViewMode('home') getGroupAnnouncements(); - }, 200); + }, 350); } }; @@ -1512,31 +1523,31 @@ export const Group = ({ } setDesktopViewMode('home') - setGroupSection("default"); - clearAllQueues(); + // setGroupSection("default"); + // clearAllQueues(); await new Promise((res) => { setTimeout(() => { res(null); }, 200); }); - setGroupSection("home"); - setSelectedGroup(null); - setNewChat(false); - setSelectedDirect(null); - setSecretKey(null); - setGroupOwner(null) - lastFetchedSecretKey.current = null; - initiatedGetMembers.current = false; - setSecretKeyPublishDate(null); - setAdmins([]); - setSecretKeyDetails(null); - setAdminsWithNames([]); - setMembers([]); - setMemberCountFromSecretKeyData(null); - setTriedToFetchSecretKey(false); - setFirstSecretKeyInCreation(false); - setIsOpenSideViewDirects(false) - setIsOpenSideViewGroups(false) + // setGroupSection("home"); + // setSelectedGroup(null); + // setNewChat(false); + // setSelectedDirect(null); + // setSecretKey(null); + // setGroupOwner(null) + // lastFetchedSecretKey.current = null; + // initiatedGetMembers.current = false; + // setSecretKeyPublishDate(null); + // setAdmins([]); + // setSecretKeyDetails(null); + // setAdminsWithNames([]); + // setMembers([]); + // setMemberCountFromSecretKeyData(null); + // setTriedToFetchSecretKey(false); + // setFirstSecretKeyInCreation(false); + // setIsOpenSideViewDirects(false) + // setIsOpenSideViewGroups(false) }; const goToAnnouncements = async () => { @@ -1612,6 +1623,67 @@ export const Group = ({ borderRadius: !isMobile && '0px 15px 15px 0px' }} > + {!isMobile && ( + + { + setDesktopSideView("groups"); + }} + > + + + + + { + setDesktopSideView("directs"); + }} + > + + + + + + )} + {isMobile && ( - + {!isMobile && ( + + { + setDesktopSideView("groups"); + }} + > + + + + + { + setDesktopSideView("directs"); + }} + > + + + + + + )} +
{ setMobileViewMode("group"); setDesktopSideView('groups') - setDesktopViewMode('home') initiatedGetMembers.current = false; clearAllQueues(); setSelectedDirect(null); @@ -2067,8 +2198,14 @@ export const Group = ({ alignItems: "flex-start", }} > - {!isMobile && ((desktopSideView === 'groups' && desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewGroups) && renderGroups()} - {!isMobile && ((desktopSideView === 'directs' && desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewDirects) && renderDirects()} + {!isMobile && ((desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewGroups) && ( + + )} + + {!isMobile && desktopViewMode === 'chat' && desktopSideView !== 'directs' && renderGroups()} + {!isMobile && desktopViewMode === 'chat' && desktopSideView === 'directs' && renderDirects()} )} - {selectedGroup && mobileViewMode !== 'groups' && ( - <> - {!isMobile && selectedGroup && ( + {desktopViewMode === 'chat' && !selectedGroup && ( + + + No group selected + + + )} + {mobileViewMode !== 'groups' && ( +
+ {!isMobile && ( )} - +
)} {selectedDirect && !newChat && ( @@ -2501,7 +2666,7 @@ export const Group = ({ )} - {!isMobile && groupSection === "home" && ( + {/* {!isMobile && groupSection === "home" && ( - )} + )} */} {isMobile && mobileViewMode === "home" && ( )} {isMobile && ( @@ -2559,17 +2725,16 @@ export const Group = ({ {!isMobile && ( + groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} isApps={desktopViewMode === 'apps'} desktopViewMode={desktopViewMode} /> )} {!isMobile && ( + groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} desktopViewMode={desktopViewMode} isApps={desktopViewMode === 'apps'} /> )} - {!isMobile && !selectedGroup && - groupSection === "home" && desktopViewMode !== "apps" && desktopViewMode !== "dev" && ( + {!isMobile && desktopViewMode === 'home' && ( )} + diff --git a/src/components/Group/GroupJoinRequests.tsx b/src/components/Group/GroupJoinRequests.tsx index 47fcb31..320e4ab 100644 --- a/src/components/Group/GroupJoinRequests.tsx +++ b/src/components/Group/GroupJoinRequests.tsx @@ -18,7 +18,7 @@ import { getBaseApi } from "../../background"; import { MyContext, getBaseApiReact, isMobile } from "../../App"; export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2) -export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode }) => { +export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode, setDesktopViewMode }) => { const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([]) const [loading, setLoading] = React.useState(true) const {txList, setTxList} = React.useContext(MyContext) @@ -179,6 +179,9 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get getTimestampEnterChat() setGroupSection("announcement") setOpenManageMembers(true) + if(!isMobile){ + setDesktopViewMode('chat') + } setTimeout(() => { executeEvent("openGroupJoinRequest", {}); diff --git a/src/components/Group/Home.tsx b/src/components/Group/Home.tsx index 1324528..a8c804c 100644 --- a/src/components/Group/Home.tsx +++ b/src/components/Group/Home.tsx @@ -20,6 +20,7 @@ export const Home = ({ setOpenManageMembers, setOpenAddGroup, setMobileViewMode, + setDesktopViewMode }) => { return ( { return (