mirror of
https://github.com/Qortal/chrome-extension.git
synced 2025-02-14 11:15:49 +00:00
made use local node easier
This commit is contained in:
parent
bec51a07bb
commit
4f343178bc
198
src/App.tsx
198
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" && (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
</>
|
||||
<NotAuthenticated getRootProps={getRootProps} getInputProps={getInputProps} setExtstate={setExtstate} setOpenAdvancedSettings={setOpenAdvancedSettings} openAdvancedSettings={openAdvancedSettings} handleFileChangeApiKey={handleFileChangeApiKey} apiKey={apiKey} globalApiKey={globalApiKey} setApiKey={setApiKey} handleSetGlobalApikey={handleSetGlobalApikey}/>
|
||||
)}
|
||||
{/* {extState !== "not-authenticated" && (
|
||||
<button onClick={logoutFunc}>logout</button>
|
||||
|
||||
301
src/ExtStates/NotAuthenticated.tsx
Normal file
301
src/ExtStates/NotAuthenticated.tsx
Normal file
@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -4184,7 +4184,6 @@ chrome?.runtime?.onMessage.addListener((request, sender, sendResponse) => {
|
||||
[
|
||||
"keyPair",
|
||||
"walletInfo",
|
||||
"apiKey",
|
||||
"active-groups-directs",
|
||||
key1,
|
||||
key2,
|
||||
|
||||
@ -78,7 +78,7 @@ export const DesktopFooter = ({
|
||||
desktopViewMode,
|
||||
hide,
|
||||
setIsOpenSideViewDirects,
|
||||
setisOpenSideViewDirects
|
||||
setIsOpenSideViewGroups
|
||||
|
||||
}) => {
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user