From 4f343178bc18b65ece147b8371313b7285e0c7ab Mon Sep 17 00:00:00 2001 From: PhilReact Date: Wed, 23 Oct 2024 17:52:30 +0300 Subject: [PATCH] made use local node easier --- src/App.tsx | 198 +-------------- src/ExtStates/NotAuthenticated.tsx | 301 +++++++++++++++++++++++ src/background.ts | 1 - src/components/Desktop/DesktopFooter.tsx | 2 +- src/components/Group/Group.tsx | 15 +- 5 files changed, 321 insertions(+), 196 deletions(-) create mode 100644 src/ExtStates/NotAuthenticated.tsx diff --git a/src/App.tsx b/src/App.tsx index b459070..8072bc9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -103,6 +103,7 @@ import { useQortalGetSaveSettings } from "./useQortalGetSaveSettings"; import { useRecoilState, useResetRecoilState } from "recoil"; import { canSaveSettingToQdnAtom, fullScreenAtom, hasSettingsChangedAtom, oldPinnedAppsAtom, settingsLocalLastUpdatedAtom, settingsQDNLastUpdatedAtom, sortablePinnedAppsAtom } from "./atoms/global"; import { useAppFullScreen } from "./useAppFullscreen"; +import { NotAuthenticated } from "./ExtStates/NotAuthenticated"; type extStates = | "not-authenticated" @@ -329,8 +330,6 @@ function App() { const [openSnack, setOpenSnack] = useState(false); const [hasLocalNode, setHasLocalNode] = useState(false); const [openAdvancedSettings, setOpenAdvancedSettings] = useState(false); - const [useLocalNode, setUseLocalNode] = useState(false); - const [confirmUseOfLocal, setConfirmUseOfLocal] = useState(false); const [isOpenDrawerProfile, setIsOpenDrawerProfile] = useState(false); const [apiKey, setApiKey] = useState(""); const [isOpenSendQort, setIsOpenSendQort] = useState(false); @@ -397,13 +396,16 @@ function App() { window.visualViewport?.removeEventListener("resize", resetHeight); }; }, []); + const handleSetGlobalApikey = (key)=> { + globalApiKey = key; + } useEffect(() => { chrome?.runtime?.sendMessage({ action: "getApiKey" }, (response) => { + console.log('goingggg', response) if (response) { - globalApiKey = response; + console.log('response', response) + handleSetGlobalApikey(response) setApiKey(response); - setUseLocalNode(true); - setConfirmUseOfLocal(true); setOpenAdvancedSettings(true); } }); @@ -1065,9 +1067,6 @@ function App() { setWalletToBeDownloadedPasswordConfirm(""); setWalletToBeDownloadedError(""); setSendqortState(null); - globalApiKey = null; - setApiKey(""); - setUseLocalNode(false); setHasLocalNode(false); setOpenAdvancedSettings(false); setConfirmUseOfLocal(false); @@ -1564,188 +1563,7 @@ function App() { > {extState === "not-authenticated" && ( - <> - -
- - -
- - - WELCOME TO YOUR

- QORTAL WALLET - - - - - - Authenticate - - - - - - - - - { - setExtstate("create-wallet"); - }} - > - Create account - - - - - - <> - - - { - setOpenAdvancedSettings(true); - }} - > - Advanced settings - - - {openAdvancedSettings && ( - <> - - { - setUseLocalNode(event.target.checked); - }} - disabled={confirmUseOfLocal} - sx={{ - "&.Mui-checked": { - color: "white", // Customize the color when checked - }, - "& .MuiSvgIcon-root": { - color: "white", - }, - }} - /> - - Use local node - - {useLocalNode && ( - <> - - - - {apiKey} - - - - - )} - - )} - - - + )} {/* {extState !== "not-authenticated" && ( diff --git a/src/ExtStates/NotAuthenticated.tsx b/src/ExtStates/NotAuthenticated.tsx new file mode 100644 index 0000000..c60a97f --- /dev/null +++ b/src/ExtStates/NotAuthenticated.tsx @@ -0,0 +1,301 @@ +import React, { useCallback, useEffect, useState } from "react"; +import { Spacer } from "../common/Spacer"; +import { CustomButton, TextItalic, TextP, TextSpan } from "../App-styles"; +import { + Box, + Button, + Checkbox, + FormControlLabel, + Switch, + Tooltip, + Typography, +} from "@mui/material"; +import Logo1 from "../assets/svgs/Logo1.svg"; +import Logo1Dark from "../assets/svgs/Logo1Dark.svg"; +import Info from "../assets/svgs/Info.svg"; +import { CustomizedSnackbars } from "../components/Snackbar/Snackbar"; + +export const NotAuthenticated = ({ + getRootProps, + getInputProps, + setExtstate, + setOpenAdvancedSettings, + openAdvancedSettings, + handleFileChangeApiKey, + apiKey, + setApiKey, + globalApiKey, + handleSetGlobalApikey, +}) => { + console.log("apiKey", apiKey); + const [isValidApiKey, setIsValidApiKey] = useState(null); + const [hasLocalNode, setHasLocalNode] = useState(null); + const [useLocalNode, setUseLocalNode] = useState(false); + const [openSnack, setOpenSnack] = React.useState(false); + const [infoSnack, setInfoSnack] = React.useState(null); + + const checkIfUserHasLocalNode = useCallback(async () => { + try { + const url = `http://127.0.0.1:12391/admin/status`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const data = await response.json(); + if (data?.syncPercent) { + setHasLocalNode(true); + } + } catch (error) {} + }, []); + + useEffect(() => { + checkIfUserHasLocalNode(); + }, []); + + const validateApiKey = useCallback(async (key) => { + try { + const url = `http://127.0.0.1:12391/admin/apikey/test`; + const response = await fetch(url, { + method: "GET", + headers: { + accept: "text/plain", + "X-API-KEY": key, // Include the API key here + }, + }); + + // Assuming the response is in plain text and will be 'true' or 'false' + const data = await response.text(); + console.log("data", data); + if (data === "true") { + const payload = key; + chrome?.runtime?.sendMessage( + { action: "setApiKey", payload }, + (response) => { + console.log("setApiKey", response); + if (response) { + handleSetGlobalApikey(payload); + setIsValidApiKey(true); + setUseLocalNode(true); + } + } + ); + } else { + setIsValidApiKey(false); + setUseLocalNode(false); + setInfoSnack({ + type: "error", + message: "Select a valid apikey", + }); + setOpenSnack(true); + } + } catch (error) { + setIsValidApiKey(false); + setUseLocalNode(false); + setInfoSnack({ + type: "error", + message: "Select a valid apikey", + }); + console.error("Error validating API key:", error); + } + }, []); + + useEffect(() => { + if (apiKey) { + validateApiKey(apiKey); + } + }, [apiKey]); + + return ( + <> + +
+ + +
+ + + WELCOME TO YOUR

+ QORTAL WALLET + + + + + + Authenticate + + + + + + + + + { + setExtstate("create-wallet"); + }} + > + Create account + + + + + + <> + + + <> + + { + if (event.target.checked) { + validateApiKey(apiKey); + } else { + setUseLocalNode(false); + const payload = null; + chrome?.runtime?.sendMessage( + { action: "setApiKey", payload }, + (response) => { + console.log("setApiKey", response); + if (response) { + globalApiKey = payload; + setApiKey(payload); + handleSetGlobalApikey(payload); + if (!globalApiKey) { + setUseLocalNode(false); + setOpenAdvancedSettings(false); + setApiKey(""); + handleSetGlobalApikey(payload); + } + } + } + ); + } + }} + disabled={false} + defaultChecked + /> + } + label="Use Local Node" + /> + + + <> + + + + + {apiKey && ( + <> + + + {"Apikey : "} {apiKey} + + + )} + + + + + + + ); +}; diff --git a/src/background.ts b/src/background.ts index e2d7b2b..b4780bd 100644 --- a/src/background.ts +++ b/src/background.ts @@ -4184,7 +4184,6 @@ chrome?.runtime?.onMessage.addListener((request, sender, sendResponse) => { [ "keyPair", "walletInfo", - "apiKey", "active-groups-directs", key1, key2, diff --git a/src/components/Desktop/DesktopFooter.tsx b/src/components/Desktop/DesktopFooter.tsx index 5bad0a5..f1cf754 100644 --- a/src/components/Desktop/DesktopFooter.tsx +++ b/src/components/Desktop/DesktopFooter.tsx @@ -78,7 +78,7 @@ export const DesktopFooter = ({ desktopViewMode, hide, setIsOpenSideViewDirects, - setisOpenSideViewDirects + setIsOpenSideViewGroups }) => { diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index 75d336f..405c0ac 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -1107,6 +1107,7 @@ export const Group = ({ if (findDirect) { if(!isMobile){ setDesktopSideView("directs"); + setDesktopViewMode('home') } else { setMobileViewModeKeepOpen("messaging"); } @@ -1144,6 +1145,7 @@ export const Group = ({ if (findDirect) { if(!isMobile){ setDesktopSideView("directs"); + setDesktopViewMode('home') } else { setMobileViewModeKeepOpen("messaging"); } @@ -1167,6 +1169,7 @@ export const Group = ({ } else { if(!isMobile){ setDesktopSideView("directs"); + setDesktopViewMode('home') } else { setMobileViewModeKeepOpen("messaging"); } @@ -1333,7 +1336,8 @@ export const Group = ({ setTimeout(() => { setSelectedGroup(findGroup); setMobileViewMode("group"); - setDesktopSideView('home') + setDesktopSideView('groups') + setDesktopViewMode('home') getTimestampEnterChat(); isLoadingOpenSectionFromNotification.current = false; }, 200); @@ -1381,7 +1385,8 @@ export const Group = ({ setTimeout(() => { setSelectedGroup(findGroup); setMobileViewMode("group"); - setDesktopSideView('home') + setDesktopSideView('groups') + setDesktopViewMode('home') getGroupAnnouncements(); }, 200); } @@ -1436,7 +1441,8 @@ export const Group = ({ setTimeout(() => { setSelectedGroup(findGroup); setMobileViewMode("group"); - setDesktopSideView('home') + setDesktopSideView('groups') + setDesktopViewMode('home') getGroupAnnouncements(); }, 200); } @@ -1962,7 +1968,8 @@ export const Group = ({ // } onClick={() => { setMobileViewMode("group"); - setDesktopSideView('home') + setDesktopSideView('groups') + setDesktopViewMode('home') initiatedGetMembers.current = false; clearAllQueues(); setSelectedDirect(null);