made use local node easier

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" && (
-        <>
+       <NotAuthenticated getRootProps={getRootProps} getInputProps={getInputProps} setExtstate={setExtstate} setOpenAdvancedSettings={setOpenAdvancedSettings} openAdvancedSettings={openAdvancedSettings}   handleFileChangeApiKey={handleFileChangeApiKey} apiKey={apiKey}  globalApiKey={globalApiKey} setApiKey={setApiKey}  handleSetGlobalApikey={handleSetGlobalApikey}/>
-          <Spacer height="48px" />
-          <div
-            className="image-container"
-            style={{
-              width: "136px",
-              height: "154px",
-            }}
-          >
-            <img src={Logo1} className="base-image" />
-            <img src={Logo1Dark} className="hover-image" />
-          </div>
-          <Spacer height="38px" />
-          <TextP
-            sx={{
-              textAlign: "center",
-              lineHeight: "15px",
-            }}
-          >
-            WELCOME TO <TextItalic>YOUR</TextItalic> <br></br>
-            <TextSpan> QORTAL WALLET</TextSpan>
-          </TextP>
-          <Spacer height="38px" />
-          <Box
-            sx={{
-              display: "flex",
-              gap: "10px",
-              alignItems: "center",
-              marginLeft: "28px",
-            }}
-          >
-            <CustomButton {...getRootProps()}>
-              <input {...getInputProps()} />
-              Authenticate
-            </CustomButton>
-            <Tooltip
-              title="Authenticate by importing your Qortal JSON file"
-              arrow
-            >
-              <img src={Info} />
-            </Tooltip>
-          </Box>
-
-          <Spacer height="6px" />
-          <Box
-            sx={{
-              display: "flex",
-              gap: "10px",
-              alignItems: "center",
-              marginLeft: "28px",
-            }}
-          >
-            <CustomButton
-              onClick={() => {
-                setExtstate("create-wallet");
-              }}
-            >
-              Create account
-            </CustomButton>
-
-            <img
-              src={Info}
-              style={{
-                visibility: "hidden",
-              }}
-            />
-          </Box>
-
-          <>
-            <Spacer height="15px" />
-            <Box
-              sx={{
-                display: "flex",
-                gap: "10px",
-                alignItems: "center",
-                flexDirection: "column",
-              }}
-            >
-              <Typography
-                sx={{
-                  cursor: "pointer",
-                  fontSize: "14px",
-                }}
-                onClick={() => {
-                  setOpenAdvancedSettings(true);
-                }}
-              >
-                Advanced settings
-              </Typography>
-
-              {openAdvancedSettings && (
-                <>
-                  <Box
-                    sx={{
-                      display: "flex",
-                      gap: "10px",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "100%",
-                    }}
-                  >
-                    <Checkbox
-                      edge="start"
-                      checked={useLocalNode}
-                      tabIndex={-1}
-                      disableRipple
-                      onChange={(event) => {
-                        setUseLocalNode(event.target.checked);
-                      }}
-                      disabled={confirmUseOfLocal}
-                      sx={{
-                        "&.Mui-checked": {
-                          color: "white", // Customize the color when checked
-                        },
-                        "& .MuiSvgIcon-root": {
-                          color: "white",
-                        },
-                      }}
-                    />
-
-                    <Typography>Use local node</Typography>
-                  </Box>
-                  {useLocalNode && (
-                    <>
-                      <Button
-                        disabled={confirmUseOfLocal}
-                        variant="contained"
-                        component="label"
-                      >
-                        Select apiKey.txt
-                        <input
-                          type="file"
-                          accept=".txt"
-                          hidden
-                          onChange={handleFileChangeApiKey} // File input handler
-                        />
-                      </Button>
-                      <Spacer height="5px" />
-                      <Typography
-                        sx={{
-                          fontSize: "12px",
-                        }}
-                      >
-                        {apiKey}
-                      </Typography>
-                      <Spacer height="5px" />
-                      <Button
-                        onClick={() => {
-                          const valueToSet = !confirmUseOfLocal;
-                          const payload = valueToSet ? apiKey : null;
-                          chrome?.runtime?.sendMessage(
-                            { action: "setApiKey", payload },
-                            (response) => {
-                              if (response) {
-                                globalApiKey = payload;
-
-                                setConfirmUseOfLocal(valueToSet);
-                                if (!globalApiKey) {
-                                  setUseLocalNode(false);
-                                  setOpenAdvancedSettings(false);
-                                  setApiKey("");
-                                }
-                              }
-                            }
-                          );
-                        }}
-                        variant="contained"
-                        sx={{
-                          color: "white",
-                        }}
-                      >
-                        {!confirmUseOfLocal
-                          ? "Confirm use of local node"
-                          : "Switch back to gateway"}
-                      </Button>
-                    </>
-                  )}
-                </>
-              )}
-            </Box>
-          </>
-        </>
       )}
       {/* {extState !== "not-authenticated" && (
         <button onClick={logoutFunc}>logout</button>

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<boolean | null>(null);
+  const [hasLocalNode, setHasLocalNode] = useState<boolean | null>(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 (
+    <>
+      <Spacer height="48px" />
+      <div
+        className="image-container"
+        style={{
+          width: "136px",
+          height: "154px",
+        }}
+      >
+        <img src={Logo1} className="base-image" />
+        <img src={Logo1Dark} className="hover-image" />
+      </div>
+      <Spacer height="38px" />
+      <TextP
+        sx={{
+          textAlign: "center",
+          lineHeight: "15px",
+        }}
+      >
+        WELCOME TO <TextItalic>YOUR</TextItalic> <br></br>
+        <TextSpan> QORTAL WALLET</TextSpan>
+      </TextP>
+      <Spacer height="38px" />
+      <Box
+        sx={{
+          display: "flex",
+          gap: "10px",
+          alignItems: "center",
+          marginLeft: "28px",
+        }}
+      >
+        <CustomButton {...getRootProps()}>
+          <input {...getInputProps()} />
+          Authenticate
+        </CustomButton>
+        <Tooltip title="Authenticate by importing your Qortal JSON file" arrow>
+          <img src={Info} />
+        </Tooltip>
+      </Box>
+
+      <Spacer height="6px" />
+      <Box
+        sx={{
+          display: "flex",
+          gap: "10px",
+          alignItems: "center",
+          marginLeft: "28px",
+        }}
+      >
+        <CustomButton
+          onClick={() => {
+            setExtstate("create-wallet");
+          }}
+        >
+          Create account
+        </CustomButton>
+
+        <img
+          src={Info}
+          style={{
+            visibility: "hidden",
+          }}
+        />
+      </Box>
+
+      <>
+        <Spacer height="15px" />
+        <Box
+          sx={{
+            display: "flex",
+            gap: "10px",
+            alignItems: "center",
+            flexDirection: "column",
+          }}
+        >
+          <>
+            <Box
+              sx={{
+                display: "flex",
+                gap: "10px",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+              }}
+            >
+              <FormControlLabel
+                control={
+                  <Switch
+                  sx={{
+                    '& .MuiSwitch-switchBase.Mui-checked': {
+                      color: '#5EB049', 
+                    },
+                   
+                  }}
+                    checked={useLocalNode}
+                    onChange={(event) => {
+                      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"
+              />
+            </Box>
+
+            <>
+              <Button variant="contained" component="label">
+                {apiKey ? "Change " : "Import "} apiKey.txt
+                <input
+                  type="file"
+                  accept=".txt"
+                  hidden
+                  onChange={handleFileChangeApiKey} // File input handler
+                />
+              </Button>
+              <Spacer height="5px" />
+
+              <Spacer height="5px" />
+              {apiKey && (
+                <>
+                  <Button
+                    onClick={() => {
+                      const payload = null;
+                      chrome?.runtime?.sendMessage(
+                        { action: "setApiKey", payload },
+                        (response) => {
+                          console.log("setApiKey", response);
+                          if (response) {
+                            globalApiKey = payload;
+                            setApiKey(payload);
+                            if (!globalApiKey) {
+                              setUseLocalNode(false);
+                              setOpenAdvancedSettings(false);
+                              setApiKey("");
+                            }
+                          }
+                        }
+                      );
+                    }}
+                    variant="contained"
+                    sx={{
+                      color: "white",
+                    }}
+                  >
+                    Clear Apikey
+                  </Button>
+                  <Typography
+                    sx={{
+                      fontSize: "12px",
+                    }}
+                  >
+                    {"Apikey : "} {apiKey}
+                  </Typography>
+                </>
+              )}
+            </>
+          </>
+        </Box>
+      </>
+      <CustomizedSnackbars
+        open={openSnack}
+        setOpen={setOpenSnack}
+        info={infoSnack}
+        setInfo={setInfoSnack}
+      />
+    </>
+  );
+};

src/background.ts

@@ -4184,7 +4184,6 @@ chrome?.runtime?.onMessage.addListener((request, sender, sendResponse) => {
                 [
                   "keyPair",
                   "walletInfo",
-                  "apiKey",
                   "active-groups-directs",
                   key1,
                   key2,

src/components/Desktop/DesktopFooter.tsx

@@ -78,7 +78,7 @@ export const DesktopFooter = ({
   desktopViewMode,
   hide,
   setIsOpenSideViewDirects,
-  setisOpenSideViewDirects
+  setIsOpenSideViewGroups
   
 }) => {
   

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);