diff --git a/src/assets/Icons/AppsIcon.tsx b/src/assets/Icons/AppsIcon.tsx index 753fe17..d2ad47c 100644 --- a/src/assets/Icons/AppsIcon.tsx +++ b/src/assets/Icons/AppsIcon.tsx @@ -1,6 +1,8 @@ -import React from "react"; +import { useTheme } from "@mui/material"; + +export const AppsIcon = ({ height = 31, width = 31 }) => { + const theme = useTheme(); -export const AppsIcon = ({ color, height = 31, width = 31 }) => { return ( { > ); diff --git a/src/assets/Icons/HomeIcon.tsx b/src/assets/Icons/HomeIcon.tsx index 38f880d..7659119 100644 --- a/src/assets/Icons/HomeIcon.tsx +++ b/src/assets/Icons/HomeIcon.tsx @@ -1,12 +1,20 @@ -import React from 'react'; +import { useTheme } from "@mui/material"; -export const HomeIcon= ({ color, height = 20, width = 23 }) => { - return ( - - - - +export const HomeIcon = ({ height = 20, width = 23 }) => { + const theme = useTheme(); - ); - }; - \ No newline at end of file + return ( + + + + ); +}; diff --git a/src/assets/Icons/MessagingIcon.tsx b/src/assets/Icons/MessagingIcon.tsx index c1e11a6..c14d1d3 100644 --- a/src/assets/Icons/MessagingIcon.tsx +++ b/src/assets/Icons/MessagingIcon.tsx @@ -1,6 +1,10 @@ -import React from "react"; +import { useTheme } from "@mui/material"; export const MessagingIcon = ({ color, height = 31, width = 31 }) => { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary + return ( { > { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary -export const SaveIcon = ({color = '#8F8F91'}) => { return ( - - - - - ) -} + + + + ); +}; diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx index 20a3d54..756a1d9 100644 --- a/src/components/Apps/AppsDesktop.tsx +++ b/src/components/Apps/AppsDesktop.tsx @@ -1,7 +1,13 @@ -import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; +import React, { + useContext, + useEffect, + useMemo, + useRef, + useState, +} from "react"; import { AppsHomeDesktop } from "./AppsHomeDesktop"; import { Spacer } from "../../common/Spacer"; -import { GlobalContext, MyContext, getBaseApiReact } from "../../App"; +import { GlobalContext, getBaseApiReact } from "../../App"; import { AppInfo } from "./AppInfo"; import { executeEvent, @@ -15,47 +21,58 @@ import { AppPublish } from "./AppPublish"; import { AppsLibraryDesktop } from "./AppsLibraryDesktop"; import { AppsCategoryDesktop } from "./AppsCategoryDesktop"; import { AppsNavBarDesktop } from "./AppsNavBarDesktop"; -import { Box, ButtonBase } from "@mui/material"; +import { Box, ButtonBase, useTheme } from "@mui/material"; import { HomeIcon } from "../../assets/Icons/HomeIcon"; 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, setDesktopViewMode, isApps, desktopViewMode}) => { +export const AppsDesktop = ({ + mode, + setMode, + show, + myName, + goToHome, + hasUnreadDirects, + hasUnreadGroups, + setDesktopViewMode, + desktopViewMode, +}) => { const [availableQapps, setAvailableQapps] = useState([]); const [selectedAppInfo, setSelectedAppInfo] = useState(null); - const [selectedCategory, setSelectedCategory] = useState(null) + const [selectedCategory, setSelectedCategory] = useState(null); const [tabs, setTabs] = useState([]); const [selectedTab, setSelectedTab] = useState(null); const [isNewTabWindow, setIsNewTabWindow] = useState(false); - const [categories, setCategories] = useState([]) + const [categories, setCategories] = useState([]); const iframeRefs = useRef({}); - const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom) + const [isEnabledDevMode, setIsEnabledDevMode] = + useRecoilState(enabledDevModeAtom); const { showTutorial } = useContext(GlobalContext); + const theme = useTheme(); - const myApp = useMemo(()=> { - - return availableQapps.find((app)=> app.name === myName && app.service === 'APP') - }, [myName, availableQapps]) - const myWebsite = useMemo(()=> { - - return availableQapps.find((app)=> app.name === myName && app.service === 'WEBSITE') - }, [myName, availableQapps]) + const myApp = useMemo(() => { + return availableQapps.find( + (app) => app.name === myName && app.service === "APP" + ); + }, [myName, availableQapps]); + const myWebsite = useMemo(() => { + return availableQapps.find( + (app) => app.name === myName && app.service === "WEBSITE" + ); + }, [myName, availableQapps]); - useEffect(()=> { - if(show){ - showTutorial('qapps') + useEffect(() => { + if (show) { + showTutorial("qapps"); } - }, [show]) + }, [show]); useEffect(() => { setTimeout(() => { @@ -81,10 +98,10 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }); if (!response?.ok) return; const responseData = await response.json(); - + setCategories(responseData); - } catch (error) { + console.log(error); } finally { // dispatch(setIsLoadingGlobal(false)) } @@ -115,18 +132,19 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }); if (!responseWebsites?.ok) return; const responseDataWebsites = await responseWebsites.json(); - + apps = responseData; websites = responseDataWebsites; const combine = [...apps, ...websites]; setAvailableQapps(combine); } catch (error) { + console.log(error); } finally { // dispatch(setIsLoadingGlobal(false)) } }, []); useEffect(() => { - getCategories() + getCategories(); }, [getCategories]); useEffect(() => { @@ -163,12 +181,13 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop subscribeToEvent("selectedAppInfoCategory", selectedAppInfoCategoryFunc); return () => { - unsubscribeFromEvent("selectedAppInfoCategory", selectedAppInfoCategoryFunc); + unsubscribeFromEvent( + "selectedAppInfoCategory", + selectedAppInfoCategoryFunc + ); }; }, []); - - const selectedCategoryFunc = (e) => { const data = e.detail?.data; setSelectedCategory(data); @@ -183,35 +202,37 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }; }, []); - - - - - const navigateBackFunc = (e) => { - if (['category', 'appInfo-from-category', 'appInfo', 'library', 'publish'].includes(mode)) { + if ( + [ + "category", + "appInfo-from-category", + "appInfo", + "library", + "publish", + ].includes(mode) + ) { // Handle the various modes as needed - if (mode === 'category') { - setMode('library'); + if (mode === "category") { + setMode("library"); setSelectedCategory(null); - } else if (mode === 'appInfo-from-category') { - setMode('category'); - } else if (mode === 'appInfo') { - setMode('library'); - } else if (mode === 'library') { + } else if (mode === "appInfo-from-category") { + setMode("category"); + } else if (mode === "appInfo") { + setMode("library"); + } else if (mode === "library") { if (isNewTabWindow) { - setMode('viewer'); + setMode("viewer"); } else { - setMode('home'); + setMode("home"); } - } else if (mode === 'publish') { - setMode('library'); + } else if (mode === "publish") { + setMode("library"); } - } else if(selectedTab?.tabId) { - executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}) + } else if (selectedTab?.tabId) { + executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}); } }; - useEffect(() => { subscribeToEvent("navigateBack", navigateBackFunc); @@ -234,8 +255,6 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop setIsNewTabWindow(false); }; - - useEffect(() => { subscribeToEvent("addTab", addTabFunc); @@ -245,7 +264,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }, [tabs]); const setSelectedTabFunc = (e) => { const data = e.detail?.data; - if(e.detail?.isDevMode) return + if (e.detail?.isDevMode) return; setSelectedTab(data); setTimeout(() => { @@ -259,7 +278,6 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }, 100); setIsNewTabWindow(false); }; - useEffect(() => { subscribeToEvent("setSelectedTab", setSelectedTabFunc); @@ -299,7 +317,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop const setNewTabWindowFunc = (e) => { setIsNewTabWindow(true); - setSelectedTab(null) + setSelectedTab(null); }; useEffect(() => { @@ -314,70 +332,65 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop - - + { goToHome(); - }} > - - - + + { - setDesktopViewMode('apps') + setDesktopViewMode("apps"); + }} + > + + + + + + { + setDesktopViewMode("chat"); }} > - - - - { - setDesktopViewMode('chat') - }} - > - - + {/* { @@ -416,65 +429,78 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop /> */} - + {isEnabledDevMode && ( - { - setDesktopViewMode('dev') - }} - > - - - - + { + setDesktopViewMode("dev"); + }} + > + + + + )} - {mode !== 'home' && ( - - + {mode !== "home" && ( + )} + - - - {mode === "home" && ( - - - - + + + )} - - - - {mode === "appInfo" && !selectedTab && } - {mode === "appInfo-from-category" && !selectedTab && } - - {mode === "publish" && !selectedTab && } + availableQapps={availableQapps} + setMode={setMode} + myName={myName} + hasPublishApp={!!(myApp || myWebsite)} + categories={categories} + getQapps={getQapps} + /> + + {mode === "appInfo" && !selectedTab && ( + + )} + {mode === "appInfo-from-category" && !selectedTab && ( + + )} + + {mode === "publish" && !selectedTab && ( + + )} {tabs.map((tab) => { if (!iframeRefs.current[tab.tabId]) { iframeRefs.current[tab.tabId] = React.createRef(); } return ( - - - - + + + )} diff --git a/src/components/Desktop/DesktopFooter.tsx b/src/components/Desktop/DesktopFooter.tsx index 6da8f4e..aa2e864 100644 --- a/src/components/Desktop/DesktopFooter.tsx +++ b/src/components/Desktop/DesktopFooter.tsx @@ -1,17 +1,6 @@ -import * as React from "react"; -import { - BottomNavigation, - BottomNavigationAction, - ButtonBase, - Typography, -} from "@mui/material"; -import { Home, Groups, Message, ShowChart } from "@mui/icons-material"; +import { ButtonBase, Typography, useTheme } from "@mui/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"; import AppIcon from "../../assets/svgs/AppIcon.svg"; @@ -20,19 +9,31 @@ import { Save } from "../Save/Save"; import { useRecoilState } from "recoil"; import { enabledDevModeAtom } from "../../atoms/global"; -export const IconWrapper = ({ children, label, color, selected, disableWidth, customWidth }) => { +export const IconWrapper = ({ + children, + label, + color, + selected, + disableWidth, + customWidth, +}) => { + const theme = useTheme(); + return ( {children} @@ -41,7 +42,7 @@ export const IconWrapper = ({ children, label, color, selected, disableWidth, cu fontFamily: "Inter", fontSize: "12px", fontWeight: 500, - color: color, + color: theme.palette.text.primary, }} > {label} @@ -51,24 +52,7 @@ export const IconWrapper = ({ children, label, color, selected, disableWidth, cu }; export const DesktopFooter = ({ - selectedGroup, - groupSection, - isUnread, - goToAnnouncements, - isUnreadChat, - goToChat, - goToThreads, - setOpenManageMembers, - groupChatHasUnread, - groupsAnnHasUnread, - directChatHasUnread, - chatMode, - openDrawerGroups, goToHome, - setIsOpenDrawerProfile, - mobileViewMode, - setMobileViewMode, - setMobileViewModeKeepOpen, hasUnreadGroups, hasUnreadDirects, isHome, @@ -77,15 +61,14 @@ export const DesktopFooter = ({ setDesktopSideView, isApps, setDesktopViewMode, - desktopViewMode, hide, setIsOpenSideViewDirects, - setIsOpenSideViewGroups - + setIsOpenSideViewGroups, }) => { - const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom) + const [isEnabledDevMode, setIsEnabledDevMode] = + useRecoilState(enabledDevModeAtom); - if(hide) return + if (hide) return; return ( - + + { - setDesktopViewMode('apps') - setIsOpenSideViewDirects(false) - setIsOpenSideViewGroups(false) + setDesktopViewMode("apps"); + setIsOpenSideViewDirects(false); + setIsOpenSideViewGroups(false); }} > - - + + + { setDesktopSideView("groups"); }} > - + + { setDesktopSideView("directs"); }} > - + - + {isEnabledDevMode && ( { - setDesktopViewMode('dev') - setIsOpenSideViewDirects(false) - setIsOpenSideViewGroups(false) - }} - > - { + setDesktopViewMode("dev"); + setIsOpenSideViewDirects(false); + setIsOpenSideViewGroups(false); + }} > - - - + + + + )} - ); diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx index 244370e..5c5ec01 100644 --- a/src/components/DesktopSideBar.tsx +++ b/src/components/DesktopSideBar.tsx @@ -1,12 +1,8 @@ -import { Box, ButtonBase } from "@mui/material"; -import React from "react"; +import { Box, ButtonBase, useTheme } from "@mui/material"; import { HomeIcon } from "../assets/Icons/HomeIcon"; 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"; @@ -28,6 +24,8 @@ export const DesktopSideBar = ({ }) => { const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom); + + const theme = useTheme(); return ( + { setDesktopViewMode("chat"); @@ -85,9 +79,7 @@ export const DesktopSideBar = ({ color={ hasUnreadDirects || hasUnreadGroups ? "var(--unread)" - : desktopViewMode === "chat" - ? "white" - : "rgba(250, 250, 250, 0.5)" + : theme.palette.text.primary } label="Chat" disableWidth @@ -97,9 +89,7 @@ export const DesktopSideBar = ({ color={ hasUnreadDirects || hasUnreadGroups ? "var(--unread)" - : desktopViewMode === "chat" - ? "white" - : "rgba(250, 250, 250, 0.5)" + : theme.palette.text.primary } /> @@ -131,16 +121,10 @@ export const DesktopSideBar = ({ }} > diff --git a/src/components/Mobile/MobileHeader.tsx b/src/components/Mobile/MobileHeader.tsx index cd98ba9..1ab74dc 100644 --- a/src/components/Mobile/MobileHeader.tsx +++ b/src/components/Mobile/MobileHeader.tsx @@ -20,7 +20,7 @@ import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; import { MessagingIcon2 } from "../../assets/Icons/MessagingIcon2"; import { HubsIcon } from "../../assets/Icons/HubsIcon"; import { Save } from "../Save/Save"; -import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen'; +import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen"; import { useRecoilState } from "recoil"; import { fullScreenAtom, hasSettingsChangedAtom } from "../../atoms/global"; import { useAppFullScreen } from "../../useAppFullscreen"; @@ -36,12 +36,12 @@ const Header = ({ setMobileViewMode, myName, setSelectedDirect, - setNewChat + setNewChat, }) => { const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); const [fullScreen, setFullScreen] = useRecoilState(fullScreenAtom); - const {exitFullScreen} = useAppFullScreen(setFullScreen) + const { exitFullScreen } = useAppFullScreen(setFullScreen); const handleClick = (event) => { setAnchorEl(event.currentTarget); }; @@ -77,34 +77,39 @@ const Header = ({ }} > { setMobileViewModeKeepOpen(""); goToHome(); }} // onClick={onHomeClick} > - + - - + + {fullScreen && ( - { - exitFullScreen() - setFullScreen(false) - }}> - - + { + exitFullScreen(); + setFullScreen(false); + }} + > + + )} - {/* Center Title */} @@ -135,14 +140,15 @@ const Header = ({ setMobileViewModeKeepOpen("messaging"); }} > - - + - { - setSelectedDirect(null) - setNewChat(false) - setMobileViewMode("groups"); - setMobileViewModeKeepOpen("") - handleClose(); + marginTop: "10px", }} > - - - - - - { - setMobileViewModeKeepOpen("messaging"); + { + setSelectedDirect(null); + setNewChat(false); + setMobileViewMode("groups"); + setMobileViewModeKeepOpen(""); + handleClose(); + }} + > + + + + + + { + setMobileViewModeKeepOpen("messaging"); - handleClose(); - }} - > - - - - - - + handleClose(); + }} + > + + + + + + ); } @@ -255,24 +282,27 @@ const Header = ({ width: "75px", }} > - - - - {fullScreen && ( - { - exitFullScreen() - setFullScreen(false) - }}> - - + + + + {fullScreen && ( + { + exitFullScreen(); + setFullScreen(false); + }} + > + + )} - + {/* Center Title */} - {/* Right Logout Icon */} - - + - - + // onClick={onLogoutClick} + > + + @@ -357,8 +386,14 @@ const Header = ({ boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.3)", // Optional shadow for the circle }} > - - + + @@ -389,6 +424,7 @@ const Header = ({ */} + { setMobileViewMode("groups"); - setMobileViewModeKeepOpen("") + setMobileViewModeKeepOpen(""); handleClose(); }} > - - + + - + + { setMobileViewModeKeepOpen("messaging"); @@ -450,21 +495,32 @@ const Header = ({ handleClose(); }} > - - + + - + - + ); }; diff --git a/src/components/Save/Save.tsx b/src/components/Save/Save.tsx index 0c01315..273da15 100644 --- a/src/components/Save/Save.tsx +++ b/src/components/Save/Save.tsx @@ -22,20 +22,22 @@ import { LoadingButton } from "@mui/lab"; import { saveToLocalStorage } from "../Apps/AppsNavBar"; import { decryptData, encryptData } from "../../qortalRequests/get"; import { saveFileToDiskGeneric } from "../../utils/generateWallet/generateWallet"; -import { base64ToUint8Array, uint8ArrayToObject } from "../../backgroundFunctions/encryption"; - +import { + base64ToUint8Array, + uint8ArrayToObject, +} from "../../backgroundFunctions/encryption"; export const handleImportClick = async () => { - const fileInput = document.createElement('input'); - fileInput.type = 'file'; - fileInput.accept = '.base64,.txt'; + const fileInput = document.createElement("input"); + fileInput.type = "file"; + fileInput.accept = ".base64,.txt"; // Create a promise to handle file selection and reading synchronously return await new Promise((resolve, reject) => { fileInput.onchange = () => { const file = fileInput.files[0]; if (!file) { - reject(new Error('No file selected')); + reject(new Error("No file selected")); return; } @@ -44,7 +46,7 @@ export const handleImportClick = async () => { resolve(e.target.result); // Resolve with the file content }; reader.onerror = () => { - reject(new Error('Error reading file')); + reject(new Error("Error reading file")); }; reader.readAsText(file); // Read the file as text (Base64 string) @@ -53,8 +55,7 @@ export const handleImportClick = async () => { // Trigger the file input dialog fileInput.click(); }); - -} +}; export const Save = ({ isDesktop, disableWidth, myName }) => { const [pinnedApps, setPinnedApps] = useRecoilState(sortablePinnedAppsAtom); @@ -65,7 +66,8 @@ export const Save = ({ isDesktop, disableWidth, myName }) => { settingsLocalLastUpdatedAtom ); const setHasSettingsChangedAtom = useSetRecoilState(hasSettingsChangedAtom); - const [isUsingImportExportSettings, setIsUsingImportExportSettings] = useRecoilState(isUsingImportExportSettingsAtom); + const [isUsingImportExportSettings, setIsUsingImportExportSettings] = + useRecoilState(isUsingImportExportSettingsAtom); const [canSave] = useRecoilState(canSaveSettingToQdnAtom); const [openSnack, setOpenSnack] = useState(false); @@ -104,8 +106,6 @@ export const Save = ({ isDesktop, disableWidth, myName }) => { settingsLocalLastUpdated, ]); - - useEffect(() => { setHasSettingsChangedAtom(hasChanged); }, [hasChanged]); @@ -176,7 +176,7 @@ export const Save = ({ isDesktop, disableWidth, myName }) => { message: "Sucessfully published to QDN", }); setOpenSnack(true); - setAnchorEl(null) + setAnchorEl(null); } } } catch (error) { @@ -197,7 +197,7 @@ export const Save = ({ isDesktop, disableWidth, myName }) => { const revertChanges = () => { setPinnedApps(oldPinnedApps); saveToLocalStorage("ext_saved_settings", "sortablePinnedApps", null); - setAnchorEl(null) + setAnchorEl(null); }; return ( @@ -207,37 +207,22 @@ export const Save = ({ isDesktop, disableWidth, myName }) => { disabled={ // !hasChanged || // !canSave || - isLoading + isLoading // settingsQdnLastUpdated === -100 } > {isDesktop ? ( ) : ( - + )} { > {isUsingImportExportSettings && ( - + { - - + opacity: 1, + }, + }} + > + Use QDN saving + + + )} {!isUsingImportExportSettings && ( - {!myName ? ( - - - You need a registered Qortal name to save your pinned apps to QDN. - - - ) : ( - <> - {hasChanged && ( { fontSize: "14px", }} > - You have unsaved changes to your pinned apps. Save them to QDN. + You need a registered Qortal name to save your pinned apps to + QDN. - - - Save to QDN - - - {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated > 0 && ( - <> + + ) : ( + <> + {hasChanged && ( + - Don't like your current local changes? Would you like to - reset to your saved QDN pinned apps? + You have unsaved changes to your pinned apps. Save them to + QDN. - Revert to QDN + Save to QDN - + + {!isNaN(settingsQdnLastUpdated) && + settingsQdnLastUpdated > 0 && ( + <> + + Don't like your current local changes? Would you + like to reset to your saved QDN pinned apps? + + + + Revert to QDN + + + )} + {!isNaN(settingsQdnLastUpdated) && + settingsQdnLastUpdated === 0 && ( + <> + + Don't like your current local changes? Would you + like to reset to the default pinned apps? + + + + Revert to default + + + )} + )} - {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated === 0 && ( - <> + {!isNaN(settingsQdnLastUpdated) && + settingsQdnLastUpdated === -100 && + isUsingImportExportSettings !== true && ( + + + The app was unable to download your existing QDN-saved + pinned apps. Would you like to overwrite those changes? + + + + Overwrite to QDN + + + )} + {!hasChanged && ( + - Don't like your current local changes? Would you like to - reset to the default pinned apps? + You currently do not have any changes to your pinned apps - - - Revert to default - - + )} - - )} - {!isNaN(settingsQdnLastUpdated) && settingsQdnLastUpdated === -100 && isUsingImportExportSettings !== true && ( - - - The app was unable to download your existing QDN-saved pinned - apps. Would you like to overwrite those changes? - - - - Overwrite to QDN - - - )} - {!hasChanged && ( - - - You currently do not have any changes to your pinned apps - - - - )} )} - )} - + - - { - try { - const fileContent = await handleImportClick(); - const decryptedData = await decryptData({ - encryptedData: fileContent, - }); - const decryptToUnit8ArraySubject = - base64ToUint8Array(decryptedData); - const responseData = uint8ArrayToObject( - decryptToUnit8ArraySubject - ); - if(Array.isArray(responseData)){ - saveToLocalStorage("ext_saved_settings_import_export", "sortablePinnedApps", responseData, { - isUsingImportExport: true - }); - setPinnedApps(responseData) - setOldPinnedApps(responseData) - setIsUsingImportExportSettings(true) - } - - } catch (error) { - console.log("error", error); + { + try { + const fileContent = await handleImportClick(); + const decryptedData = await decryptData({ + encryptedData: fileContent, + }); + const decryptToUnit8ArraySubject = + base64ToUint8Array(decryptedData); + const responseData = uint8ArrayToObject( + decryptToUnit8ArraySubject + ); + if (Array.isArray(responseData)) { + saveToLocalStorage( + "ext_saved_settings_import_export", + "sortablePinnedApps", + responseData, + { + isUsingImportExport: true, } - }}> - - Import - - { - try { - const data64 = await objectToBase64(pinnedApps); - - const encryptedData = await encryptData({ - data64, - }); - const blob = new Blob([encryptedData], { - type: "text/plain", - }); - - const timestamp = new Date() - .toISOString() - .replace(/:/g, "-"); // Safe timestamp for filenames - const filename = `qortal-new-ui-backup-settings-${timestamp}.txt`; - await saveFileToDiskGeneric(blob, filename) - - } catch (error) { - console.log('error', error) - } - }}> - Export + ); + setPinnedApps(responseData); + setOldPinnedApps(responseData); + setIsUsingImportExportSettings(true); + } + } catch (error) { + console.log("error", error); + } + }} + > + Import - - + { + try { + const data64 = await objectToBase64(pinnedApps); + + const encryptedData = await encryptData({ + data64, + }); + const blob = new Blob([encryptedData], { + type: "text/plain", + }); + + const timestamp = new Date().toISOString().replace(/:/g, "-"); // Safe timestamp for filenames + const filename = `qortal-new-ui-backup-settings-${timestamp}.txt`; + await saveFileToDiskGeneric(blob, filename); + } catch (error) { + console.log("error", error); + } + }} + > + Export + + +