mirror of
https://github.com/Qortal/chrome-extension.git
synced 2025-02-11 17:55:49 +00:00
add loader and remove logs
This commit is contained in:
parent
070a6ccbe5
commit
794252ac3b
@ -10,13 +10,12 @@
|
||||
// In your content script
|
||||
document.addEventListener('qortalExtensionRequests', async (event) => {
|
||||
const { type, payload, requestId, timeout } = event.detail; // Capture the requestId
|
||||
console.log({type})
|
||||
|
||||
if (type === 'REQUEST_USER_INFO') {
|
||||
const hostname = window.location.hostname
|
||||
const res = await connection(hostname)
|
||||
console.log('is connected', res)
|
||||
|
||||
if(!res){
|
||||
console.log('thou')
|
||||
document.dispatchEvent(new CustomEvent('qortalExtensionResponses', {
|
||||
detail: { type: "USER_INFO", data: {
|
||||
error: "Not authorized"
|
||||
@ -93,7 +92,6 @@ console.log({type})
|
||||
} else if (type === 'REQUEST_SEND_QORT') {
|
||||
const hostname = window.location.hostname
|
||||
const res = await connection(hostname)
|
||||
console.log('isconnected', res)
|
||||
if(!res){
|
||||
document.dispatchEvent(new CustomEvent('qortalExtensionResponses', {
|
||||
detail: { type: "USER_INFO", data: {
|
||||
|
||||
449
src/App.tsx
449
src/App.tsx
@ -3,10 +3,12 @@ import reactLogo from "./assets/react.svg";
|
||||
import viteLogo from "/vite.svg";
|
||||
import "./App.css";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import { Box, Input, InputLabel, Typography } from "@mui/material";
|
||||
import { Box, Input, InputLabel, Tooltip, Typography } from "@mui/material";
|
||||
import { decryptStoredWallet } from "./utils/decryptWallet";
|
||||
import { CountdownCircleTimer } from "react-countdown-circle-timer";
|
||||
import Logo1 from "./assets/svgs/Logo1.svg";
|
||||
import Logo1Dark from "./assets/svgs/Logo1Dark.svg";
|
||||
|
||||
import Logo2 from "./assets/svgs/Logo2.svg";
|
||||
import Copy from "./assets/svgs/Copy.svg";
|
||||
import { CopyToClipboard } from "react-copy-to-clipboard";
|
||||
@ -14,6 +16,7 @@ import Download from "./assets/svgs/Download.svg";
|
||||
import Logout from "./assets/svgs/Logout.svg";
|
||||
import Return from "./assets/svgs/Return.svg";
|
||||
import Success from "./assets/svgs/Success.svg";
|
||||
import Info from "./assets/svgs/Info.svg";
|
||||
import {
|
||||
createAccount,
|
||||
generateRandomSentence,
|
||||
@ -37,6 +40,7 @@ import {
|
||||
TextSpan,
|
||||
} from "./App-styles";
|
||||
import { Spacer } from "./common/Spacer";
|
||||
import { Loader } from "./components/Loader";
|
||||
|
||||
type extStates =
|
||||
| "not-authenticated"
|
||||
@ -46,7 +50,9 @@ type extStates =
|
||||
| "web-app-request-payment"
|
||||
| "web-app-request-authentication"
|
||||
| "download-wallet"
|
||||
| "create-wallet";
|
||||
| "create-wallet"
|
||||
| "transfer-success-regular"
|
||||
| "transfer-success-request";
|
||||
|
||||
function App() {
|
||||
const [extState, setExtstate] = useState<extStates>("not-authenticated");
|
||||
@ -66,6 +72,8 @@ function App() {
|
||||
const [walletToBeDownloaded, setWalletToBeDownloaded] = useState<any>(null);
|
||||
const [walletToBeDownloadedPassword, setWalletToBeDownloadedPassword] =
|
||||
useState<string>("");
|
||||
const [sendqortState, setSendqortState] = useState<any>(null);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false)
|
||||
const [
|
||||
walletToBeDownloadedPasswordConfirm,
|
||||
setWalletToBeDownloadedPasswordConfirm,
|
||||
@ -97,7 +105,7 @@ function App() {
|
||||
// Read the file as text
|
||||
reader.readAsText(file);
|
||||
});
|
||||
console.log({ fileContents });
|
||||
|
||||
let error: any = null;
|
||||
let pf: any;
|
||||
|
||||
@ -132,52 +140,13 @@ function App() {
|
||||
},
|
||||
});
|
||||
|
||||
// const storeDecryptedWallet = async () => {
|
||||
// const res = await decryptStoredWallet("password", rawWallet);
|
||||
// const wallet2 = new PhraseWallet(res, walletVersion);
|
||||
// setdecryptedWallet(wallet2);
|
||||
// };
|
||||
// const saveWalletFunc = async (password: string) => {
|
||||
// console.log({ decryptedWallet });
|
||||
// let wallet = structuredClone(decryptedWallet);
|
||||
// console.log({ decryptedWallet: decryptedWallet?.generateSaveWalletData });
|
||||
// const qortAddress = decryptedWallet.addresses[0].address;
|
||||
// if (decryptedWallet?.generateSaveWalletData) {
|
||||
// console.log("yes", wallet);
|
||||
// wallet = await decryptedWallet.generateSaveWalletData(
|
||||
// password,
|
||||
// crypto.kdfThreads,
|
||||
// () => {}
|
||||
// );
|
||||
// } else {
|
||||
// console.log("no", wallet);
|
||||
// const res = await decryptStoredWallet(password, wallet);
|
||||
// const wallet2 = new PhraseWallet(res, walletVersion);
|
||||
// console.log({ wallet2 });
|
||||
// wallet = await wallet2.generateSaveWalletData(
|
||||
// password,
|
||||
// crypto.kdfThreads,
|
||||
// () => {}
|
||||
// );
|
||||
// }
|
||||
// setWalletToBeDownloaded({
|
||||
// wallet,
|
||||
// qortAddress,
|
||||
// });
|
||||
// return {
|
||||
// wallet,
|
||||
// qortAddress,
|
||||
// };
|
||||
// };
|
||||
|
||||
|
||||
const saveWalletFunc = async (password: string) => {
|
||||
console.log({ decryptedWallet });
|
||||
let wallet = structuredClone(rawWallet);
|
||||
|
||||
console.log("no", wallet);
|
||||
const res = await decryptStoredWallet(password, wallet);
|
||||
const wallet2 = new PhraseWallet(res, walletVersion);
|
||||
console.log({ wallet2 });
|
||||
wallet = await wallet2.generateSaveWalletData(
|
||||
password,
|
||||
crypto.kdfThreads,
|
||||
@ -210,35 +179,14 @@ function App() {
|
||||
tabs[0].id,
|
||||
{ from: "popup", subject: "anySubject" },
|
||||
function (response) {
|
||||
console.log(response);
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
};
|
||||
const getWalletInfoFunc = async () => {
|
||||
// const res = await getWalletInfo()
|
||||
// console.log({res})
|
||||
chrome.runtime.sendMessage({ action: "getWalletInfo" }, (response) => {
|
||||
if (response) {
|
||||
console.log("Extension installed: ", response);
|
||||
// setIsExtensionInstalled(true);
|
||||
}
|
||||
});
|
||||
};
|
||||
const getValidApiFunc = () => {
|
||||
chrome.runtime.sendMessage({ action: "validApi" }, (response) => {
|
||||
if (response) {
|
||||
}
|
||||
});
|
||||
};
|
||||
const getNameFunc = () => {
|
||||
chrome.runtime.sendMessage({ action: "name" }, (response) => {
|
||||
if (response) {
|
||||
console.log("name", response);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const getBalanceFunc = () => {
|
||||
chrome.runtime.sendMessage({ action: "balance" }, (response) => {
|
||||
if (response && !response?.error) {
|
||||
@ -261,6 +209,7 @@ function App() {
|
||||
setSendPaymentError("Please enter your wallet password");
|
||||
return;
|
||||
}
|
||||
setIsLoading(true)
|
||||
chrome.runtime.sendMessage(
|
||||
{
|
||||
action: "sendCoin",
|
||||
@ -272,28 +221,26 @@ function App() {
|
||||
},
|
||||
(response) => {
|
||||
if (response?.error) {
|
||||
console.log("coin", response);
|
||||
setSendPaymentError(response.error);
|
||||
} else {
|
||||
setSendPaymentSuccess("Payment successfully sent");
|
||||
setExtstate("transfer-success-regular");
|
||||
// setSendPaymentSuccess("Payment successfully sent");
|
||||
}
|
||||
setIsLoading(false)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
console.log({ rawWallet, decryptedWallet });
|
||||
|
||||
const clearAllStates = () => {
|
||||
setRequestConnection(null);
|
||||
setRequestAuthentication(null);
|
||||
};
|
||||
|
||||
const [sendqortState, setSendqortState] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Listen for messages from the background script
|
||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||
console.log({ message });
|
||||
|
||||
// Check if the message is to update the state
|
||||
if (message.action === "UPDATE_STATE_CONFIRM_SEND_QORT") {
|
||||
// Update the component state with the received 'sendqort' state
|
||||
@ -316,7 +263,7 @@ function App() {
|
||||
});
|
||||
}, []);
|
||||
|
||||
console.log({ sendqortState });
|
||||
|
||||
//param = isDecline
|
||||
const confirmPayment = (isDecline: boolean) => {
|
||||
if (isDecline) {
|
||||
@ -345,6 +292,7 @@ function App() {
|
||||
setSendPaymentError("Please enter your wallet password");
|
||||
return;
|
||||
}
|
||||
setIsLoading(true)
|
||||
chrome.runtime.sendMessage(
|
||||
{
|
||||
action: "sendQortConfirmation",
|
||||
@ -357,9 +305,17 @@ function App() {
|
||||
},
|
||||
},
|
||||
(response) => {
|
||||
if (response) {
|
||||
setSendPaymentSuccess("Payment successfully sent");
|
||||
if (response === true) {
|
||||
setExtstate("transfer-success-request");
|
||||
setCountdown(null);
|
||||
// setSendPaymentSuccess("Payment successfully sent");
|
||||
} else {
|
||||
|
||||
setSendPaymentError(
|
||||
response?.error || "Unable to perform payment. Please try again."
|
||||
);
|
||||
}
|
||||
setIsLoading(false)
|
||||
}
|
||||
);
|
||||
};
|
||||
@ -391,12 +347,10 @@ function App() {
|
||||
try {
|
||||
chrome.runtime.sendMessage({ action: "getWalletInfo" }, (response) => {
|
||||
if (response && response?.walletInfo) {
|
||||
console.log("Extension installed: ", response);
|
||||
setRawWallet(response?.walletInfo);
|
||||
setExtstate("authenticated");
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {}
|
||||
}, []);
|
||||
|
||||
@ -405,7 +359,6 @@ function App() {
|
||||
try {
|
||||
chrome.runtime.sendMessage({ action: "userInfo" }, (response) => {
|
||||
if (response && !response.error) {
|
||||
console.log("Extension installed: ", response);
|
||||
setUserInfo(response);
|
||||
}
|
||||
});
|
||||
@ -418,7 +371,6 @@ function App() {
|
||||
console.log("exit");
|
||||
};
|
||||
}, []);
|
||||
console.log({ userInfo });
|
||||
|
||||
const confirmPasswordToDownload = async () => {
|
||||
try {
|
||||
@ -427,9 +379,18 @@ function App() {
|
||||
setSendPaymentError("Please enter your password");
|
||||
return;
|
||||
}
|
||||
setIsLoading(true)
|
||||
await new Promise<void>((res)=> {
|
||||
setTimeout(()=> {
|
||||
res()
|
||||
}, 250)
|
||||
})
|
||||
const res = await saveWalletFunc(walletToBeDownloadedPassword);
|
||||
} catch (error: any) {
|
||||
setWalletToBeDownloadedError(error?.message);
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -441,6 +402,7 @@ function App() {
|
||||
);
|
||||
} catch (error: any) {
|
||||
setWalletToBeDownloadedError(error?.message);
|
||||
} finally {
|
||||
}
|
||||
};
|
||||
|
||||
@ -460,8 +422,13 @@ function App() {
|
||||
setWalletToBeDownloadedError("Password fields do not match!");
|
||||
return;
|
||||
}
|
||||
setIsLoading(true)
|
||||
await new Promise<void>((res)=> {
|
||||
setTimeout(()=> {
|
||||
res()
|
||||
}, 250)
|
||||
})
|
||||
const res = await createAccount();
|
||||
console.log("new account", res);
|
||||
const wallet = await res.generateSaveWalletData(
|
||||
walletToBeDownloadedPassword,
|
||||
crypto.kdfThreads,
|
||||
@ -475,6 +442,9 @@ function App() {
|
||||
});
|
||||
} catch (error: any) {
|
||||
setWalletToBeDownloadedError(error?.message);
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -482,7 +452,7 @@ function App() {
|
||||
try {
|
||||
chrome.runtime.sendMessage({ action: "logout" }, (response) => {
|
||||
if (response) {
|
||||
window.close();
|
||||
resetAllStates();
|
||||
}
|
||||
});
|
||||
} catch (error) {}
|
||||
@ -499,12 +469,41 @@ function App() {
|
||||
setWalletToBeDownloadedPassword("");
|
||||
setExtstate("authenticated");
|
||||
};
|
||||
|
||||
const resetAllStates = () => {
|
||||
setExtstate("not-authenticated");
|
||||
setBackupjson(null);
|
||||
setRawWallet(null);
|
||||
setdecryptedWallet(null);
|
||||
setRequestConnection(null);
|
||||
setRequestAuthentication(null);
|
||||
setUserInfo(null);
|
||||
setBalance(null);
|
||||
setPaymentTo("");
|
||||
setPaymentAmount(0);
|
||||
setPaymentPassword("");
|
||||
setSendPaymentError("");
|
||||
setSendPaymentSuccess("");
|
||||
setCountdown(null);
|
||||
setWalletToBeDownloaded(null);
|
||||
setWalletToBeDownloadedPassword("");
|
||||
setWalletToBeDownloadedPasswordConfirm("");
|
||||
setWalletToBeDownloadedError("");
|
||||
setSendqortState(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<AppContainer>
|
||||
{extState === "not-authenticated" && (
|
||||
<>
|
||||
<Spacer height="48px" />
|
||||
<img src={Logo1} />
|
||||
<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={{
|
||||
@ -516,18 +515,50 @@ function App() {
|
||||
<TextSpan> QORTAL WALLET</TextSpan>
|
||||
</TextP>
|
||||
<Spacer height="38px" />
|
||||
<CustomButton {...getRootProps()}>
|
||||
<input {...getInputProps()} />
|
||||
Authenticate
|
||||
</CustomButton>
|
||||
<Spacer height="6px" />
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
setExtstate("create-wallet");
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
marginLeft: "28px",
|
||||
}}
|
||||
>
|
||||
Create account
|
||||
</CustomButton>
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
{/* {extState !== "not-authenticated" && (
|
||||
@ -556,16 +587,19 @@ function App() {
|
||||
</AddressBox>
|
||||
</CopyToClipboard>
|
||||
<Spacer height="10px" />
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{balance?.toFixed(2)} QORT
|
||||
</TextP>
|
||||
{balance && (
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{balance?.toFixed(2)} QORT
|
||||
</TextP>
|
||||
)}
|
||||
|
||||
{/* <p>balance: {balance}</p> */}
|
||||
<Spacer height="55px" />
|
||||
|
||||
@ -692,7 +726,7 @@ function App() {
|
||||
/>
|
||||
<Spacer height="6px" />
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
Confirm wallet password
|
||||
Confirm Wallet Password
|
||||
</CustomLabel>
|
||||
<Spacer height="5px" />
|
||||
<CustomInput
|
||||
@ -717,9 +751,9 @@ function App() {
|
||||
)}
|
||||
{extState === "web-app-request-payment" && (
|
||||
<>
|
||||
<Spacer height="100px" />
|
||||
<Spacer height="100px" />
|
||||
|
||||
<TextP
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "15px",
|
||||
@ -734,24 +768,26 @@ function App() {
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "15px",
|
||||
fontSize: '10px'
|
||||
fontSize: "10px",
|
||||
}}
|
||||
>{sendqortState?.description}</TextP>
|
||||
>
|
||||
{sendqortState?.description}
|
||||
</TextP>
|
||||
<Spacer height="15px" />
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{sendqortState?.amount} QORT
|
||||
</TextP>
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{sendqortState?.amount} QORT
|
||||
</TextP>
|
||||
<Spacer height="29px" />
|
||||
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
Confirm wallet password
|
||||
Confirm Wallet Password
|
||||
</CustomLabel>
|
||||
<Spacer height="5px" />
|
||||
<CustomInput
|
||||
@ -760,8 +796,8 @@ function App() {
|
||||
value={paymentPassword}
|
||||
onChange={(e) => setPaymentPassword(e.target.value)}
|
||||
/>
|
||||
<Spacer height="29px" />
|
||||
<Box
|
||||
<Spacer height="29px" />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
@ -786,13 +822,18 @@ function App() {
|
||||
</CustomButton>
|
||||
</Box>
|
||||
<Typography color="errror">{sendPaymentError}</Typography>
|
||||
|
||||
</>
|
||||
)}
|
||||
{extState === "web-app-request-connection" && (
|
||||
<>
|
||||
<Spacer height="48px" />
|
||||
<img src={Logo1} />
|
||||
<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={{
|
||||
@ -846,7 +887,13 @@ function App() {
|
||||
{extState === "web-app-request-authentication" && (
|
||||
<>
|
||||
<Spacer height="48px" />
|
||||
<img src={Logo1} />
|
||||
<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={{
|
||||
@ -883,15 +930,59 @@ function App() {
|
||||
)}
|
||||
{extState === "download-wallet" && (
|
||||
<>
|
||||
<div>
|
||||
{rawWallet?.address0 && <p>Welcome {rawWallet?.address0}</p>}
|
||||
<Spacer height="22px" />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "flex-start",
|
||||
paddingLeft: "22px",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={returnToMain}
|
||||
src={Return}
|
||||
/>
|
||||
</Box>
|
||||
<Spacer height="10px" />
|
||||
<div className="image-container" style={{
|
||||
width: '136px',
|
||||
height: '154px'
|
||||
}}>
|
||||
<img src={Logo1} className="base-image" />
|
||||
<img src={Logo1Dark} className="hover-image" />
|
||||
</div>
|
||||
<Spacer height="35px" />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
}}
|
||||
>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "start",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Download Wallet
|
||||
</TextP>
|
||||
</Box>
|
||||
<Spacer height="35px" />
|
||||
{!walletToBeDownloaded && (
|
||||
<>
|
||||
<InputLabel htmlFor="standard-adornment-password">
|
||||
Confirm wallet password
|
||||
</InputLabel>
|
||||
<Input
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
Confirm Wallet Password
|
||||
</CustomLabel>
|
||||
<Spacer height="5px" />
|
||||
<CustomInput
|
||||
type="password"
|
||||
id="standard-adornment-password"
|
||||
value={walletToBeDownloadedPassword}
|
||||
@ -899,9 +990,10 @@ function App() {
|
||||
setWalletToBeDownloadedPassword(e.target.value)
|
||||
}
|
||||
/>
|
||||
<button onClick={confirmPasswordToDownload}>
|
||||
<Spacer height="20px" />
|
||||
<CustomButton onClick={confirmPasswordToDownload}>
|
||||
Confirm password
|
||||
</button>
|
||||
</CustomButton>
|
||||
<Typography color="errror">
|
||||
{walletToBeDownloadedError}
|
||||
</Typography>
|
||||
@ -910,7 +1002,9 @@ function App() {
|
||||
|
||||
{walletToBeDownloaded && (
|
||||
<>
|
||||
<button onClick={saveFileToDiskFunc}>Download wallet</button>
|
||||
<CustomButton onClick={saveFileToDiskFunc}>
|
||||
Download wallet
|
||||
</CustomButton>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
@ -919,8 +1013,34 @@ function App() {
|
||||
<>
|
||||
{!walletToBeDownloaded && (
|
||||
<>
|
||||
<Spacer height="48px" />
|
||||
<img src={Logo1} />
|
||||
<Spacer height="22px" />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "flex-start",
|
||||
paddingLeft: "22px",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={()=> {
|
||||
setExtstate("not-authenticated")
|
||||
}}
|
||||
src={Return}
|
||||
/>
|
||||
</Box>
|
||||
<Spacer height="15px" />
|
||||
<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={{
|
||||
@ -932,7 +1052,7 @@ function App() {
|
||||
</TextP>
|
||||
<Spacer height="14px" />
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
Wallet password
|
||||
Wallet Password
|
||||
</CustomLabel>
|
||||
<Spacer height="5px" />
|
||||
<CustomInput
|
||||
@ -945,7 +1065,7 @@ function App() {
|
||||
/>
|
||||
<Spacer height="6px" />
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
Confirm wallet password
|
||||
Confirm Wallet Password
|
||||
</CustomLabel>
|
||||
<Spacer height="5px" />
|
||||
<CustomInput
|
||||
@ -981,16 +1101,64 @@ function App() {
|
||||
Congrats, you’re all set up!
|
||||
</TextP>
|
||||
<Spacer height="100px" />
|
||||
<CustomButton onClick={()=> {
|
||||
saveFileToDiskFunc()
|
||||
returnToMain()
|
||||
}}>
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
saveFileToDiskFunc();
|
||||
returnToMain();
|
||||
}}
|
||||
>
|
||||
Backup Account
|
||||
</CustomButton>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{extState === "transfer-success-regular" && (
|
||||
<>
|
||||
<Spacer height="48px" />
|
||||
<img src={Success} />
|
||||
<Spacer height="45px" />
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "15px",
|
||||
}}
|
||||
>
|
||||
The transfer was succesful!
|
||||
</TextP>
|
||||
<Spacer height="100px" />
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
returnToMain();
|
||||
}}
|
||||
>
|
||||
Continue
|
||||
</CustomButton>
|
||||
</>
|
||||
)}
|
||||
{extState === "transfer-success-request" && (
|
||||
<>
|
||||
<Spacer height="48px" />
|
||||
<img src={Success} />
|
||||
<Spacer height="45px" />
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "15px",
|
||||
}}
|
||||
>
|
||||
The transfer was succesful!
|
||||
</TextP>
|
||||
<Spacer height="100px" />
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
window.close();
|
||||
}}
|
||||
>
|
||||
Continue
|
||||
</CustomButton>
|
||||
</>
|
||||
)}
|
||||
{countdown && (
|
||||
<Box
|
||||
style={{
|
||||
@ -1015,6 +1183,7 @@ function App() {
|
||||
</CountdownCircleTimer>
|
||||
</Box>
|
||||
)}
|
||||
{isLoading && <Loader />}
|
||||
</AppContainer>
|
||||
);
|
||||
}
|
||||
|
||||
9
src/assets/svgs/Logo1Dark.svg
Normal file
9
src/assets/svgs/Logo1Dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 821 KiB |
@ -55,12 +55,9 @@ async function findUsableApi() {
|
||||
async function getNameInfo() {
|
||||
const wallet = await getSaveWallet();
|
||||
const address = wallet.address0;
|
||||
console.log({ address });
|
||||
const validApi = await findUsableApi();
|
||||
const response = await fetch(validApi + "/names/address/" + address);
|
||||
console.log({ response });
|
||||
const nameData = await response.json();
|
||||
console.log({ nameData });
|
||||
if (nameData?.length > 0) {
|
||||
return nameData[0].name;
|
||||
} else {
|
||||
@ -92,7 +89,6 @@ async function getSaveWallet() {
|
||||
}
|
||||
|
||||
async function getUserInfo() {
|
||||
console.log("entered");
|
||||
const wallet = await getSaveWallet();
|
||||
const address = wallet.address0;
|
||||
const addressInfo = await getAddressInfo(address);
|
||||
@ -111,7 +107,6 @@ async function connection(hostname) {
|
||||
async function getBalanceInfo() {
|
||||
const wallet = await getSaveWallet();
|
||||
const address = wallet.address0;
|
||||
console.log({ address });
|
||||
const validApi = await findUsableApi();
|
||||
const response = await fetch(validApi + "/addresses/balance/" + address);
|
||||
|
||||
@ -140,7 +135,6 @@ const processTransactionVersion2 = async (body: any, validApi: string) => {
|
||||
const transaction = async ({ type, params, apiVersion, keyPair }: any, validApi) => {
|
||||
|
||||
const tx = createTransaction(type, keyPair, params);
|
||||
console.log({ tx });
|
||||
let res;
|
||||
|
||||
if (apiVersion && apiVersion === 2) {
|
||||
@ -161,20 +155,7 @@ const makeTransactionRequest = async (
|
||||
keyPair,
|
||||
validApi
|
||||
) => {
|
||||
// let recipientName = await getName(receiver)
|
||||
// let myTxnrequest = await parentEpml.request('transaction', {
|
||||
// type: 2,
|
||||
// nonce: 0,
|
||||
// params: {
|
||||
// recipient: receiver,
|
||||
// recipientName: recipientName,
|
||||
// amount: amount,
|
||||
// lastReference: lastRef,
|
||||
// fee: fee
|
||||
// },
|
||||
// apiVersion: 2
|
||||
// })
|
||||
console.log({ receiver, lastRef, amount, fee });
|
||||
|
||||
const myTxnrequest = await transaction({
|
||||
nonce: 0,
|
||||
type: 2,
|
||||
@ -244,9 +225,7 @@ async function sendCoin({ password, amount, receiver }) {
|
||||
const wallet2 = new PhraseWallet(response, walletVersion);
|
||||
|
||||
const lastRef = await getLastRef();
|
||||
console.log({ lastRef });
|
||||
const fee = await sendQortFee();
|
||||
console.log({ fee });
|
||||
const validApi = await findUsableApi();
|
||||
|
||||
const res = await makeTransactionRequest(
|
||||
@ -257,7 +236,6 @@ async function sendCoin({ password, amount, receiver }) {
|
||||
wallet2._addresses[0].keyPair,
|
||||
validApi
|
||||
);
|
||||
console.log({ res });
|
||||
return {res, validApi};
|
||||
} catch (error) {
|
||||
console.log({ error });
|
||||
@ -266,7 +244,6 @@ async function sendCoin({ password, amount, receiver }) {
|
||||
}
|
||||
|
||||
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
console.log({ request });
|
||||
if (request) {
|
||||
switch (request.action) {
|
||||
case "version":
|
||||
@ -305,7 +282,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
getNameInfo()
|
||||
.then((name) => {
|
||||
sendResponse(name);
|
||||
console.log("name:", name);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error.message);
|
||||
@ -315,7 +291,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
getUserInfo()
|
||||
.then((name) => {
|
||||
sendResponse(name);
|
||||
console.log("name:", name);
|
||||
})
|
||||
.catch((error) => {
|
||||
sendResponse({ error: "User not authenticated" });
|
||||
@ -354,15 +329,11 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
})
|
||||
.catch((error) => {
|
||||
const popupUrl = chrome.runtime.getURL("index.html");
|
||||
console.log({ popupUrl });
|
||||
|
||||
chrome.windows.getAll(
|
||||
{ populate: true, windowTypes: ["popup"] },
|
||||
(windows) => {
|
||||
console.log({ windows });
|
||||
windows.forEach((win) => {
|
||||
win.tabs.forEach((tab) => console.log("url", tab.url)); // Attempt to log URLs directly
|
||||
});
|
||||
|
||||
// Attempt to find an existing popup window that has a tab with the correct URL
|
||||
const existingPopup = windows.find(
|
||||
(w) =>
|
||||
@ -371,7 +342,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
(tab) => tab.url && tab.url.startsWith(popupUrl)
|
||||
)
|
||||
);
|
||||
console.log({ existingPopup });
|
||||
if (existingPopup) {
|
||||
// If the popup exists but is minimized or not focused, focus it
|
||||
chrome.windows.update(existingPopup.id, {
|
||||
@ -461,20 +431,15 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
const { hostname } = request.payload;
|
||||
connection(hostname)
|
||||
.then((isConnected) => {
|
||||
console.log({ isConnected });
|
||||
if (Object.keys(isConnected)?.length > 0 && isConnected[hostname]) {
|
||||
sendResponse(true);
|
||||
} else {
|
||||
const popupUrl = chrome.runtime.getURL("index.html");
|
||||
console.log({ popupUrl });
|
||||
|
||||
chrome.windows.getAll(
|
||||
{ populate: true, windowTypes: ["popup"] },
|
||||
(windows) => {
|
||||
console.log({ windows });
|
||||
windows.forEach((win) => {
|
||||
win.tabs.forEach((tab) => console.log("url", tab.url)); // Attempt to log URLs directly
|
||||
});
|
||||
|
||||
// Attempt to find an existing popup window that has a tab with the correct URL
|
||||
const existingPopup = windows.find(
|
||||
(w) =>
|
||||
@ -483,7 +448,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
(tab) => tab.url && tab.url.startsWith(popupUrl)
|
||||
)
|
||||
);
|
||||
console.log({ existingPopup });
|
||||
if (existingPopup) {
|
||||
// If the popup exists but is minimized or not focused, focus it
|
||||
chrome.windows.update(existingPopup.id, {
|
||||
@ -547,22 +511,17 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
{
|
||||
const { amount, hostname, address, description } = request.payload;
|
||||
const popupUrl = chrome.runtime.getURL("index.html");
|
||||
console.log({ popupUrl });
|
||||
|
||||
chrome.windows.getAll(
|
||||
{ populate: true, windowTypes: ["popup"] },
|
||||
(windows) => {
|
||||
console.log({ windows });
|
||||
windows.forEach((win) => {
|
||||
win.tabs.forEach((tab) => console.log("url", tab.url)); // Attempt to log URLs directly
|
||||
});
|
||||
|
||||
// Attempt to find an existing popup window that has a tab with the correct URL
|
||||
const existingPopup = windows.find(
|
||||
(w) =>
|
||||
w.tabs &&
|
||||
w.tabs.some((tab) => tab.url && tab.url.startsWith(popupUrl))
|
||||
);
|
||||
console.log({ existingPopup });
|
||||
if (existingPopup) {
|
||||
// If the popup exists but is minimized or not focused, focus it
|
||||
chrome.windows.update(existingPopup.id, {
|
||||
@ -626,7 +585,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
case "responseToConnectionRequest":
|
||||
{
|
||||
const { hostname, isOkay } = request.payload;
|
||||
console.log({ hostname, isOkay });
|
||||
const interactionId3 = request.payload.interactionId;
|
||||
if (!isOkay) {
|
||||
const originalSendResponse = pendingResponses.get(interactionId3);
|
||||
@ -665,20 +623,19 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
sendResponse(true);
|
||||
// Use the sendResponse callback to respond to the original message
|
||||
originalSendResponse(res);
|
||||
chrome.runtime.sendMessage({
|
||||
action: "closePopup",
|
||||
});
|
||||
// chrome.runtime.sendMessage({
|
||||
// action: "closePopup",
|
||||
// });
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error.message);
|
||||
sendResponse(false);
|
||||
sendResponse({ error: error.message });
|
||||
originalSendResponse({ error: error.message });
|
||||
});
|
||||
|
||||
// Remove the callback from the Map as it's no longer needed
|
||||
pendingResponses.delete(interactionId2);
|
||||
}
|
||||
console.log({ password, amount, receiver });
|
||||
|
||||
break;
|
||||
case "logout" : {
|
||||
@ -700,59 +657,20 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
}
|
||||
return true;
|
||||
});
|
||||
// chrome.runtime.onMessageExternal.addListener(function (
|
||||
// request,
|
||||
// sender,
|
||||
// sendResponse
|
||||
// ) {
|
||||
// console.log({ request });
|
||||
// if (request) {
|
||||
// switch (request.action) {
|
||||
// case "version":
|
||||
// // Example: respond with the version
|
||||
// sendResponse({ version: "1.0" });
|
||||
// break;
|
||||
// case "storeWalletInfo":
|
||||
// chrome.storage.local.set({ walletInfo: request.wallet }, () => {
|
||||
// if (chrome.runtime.lastError) {
|
||||
// sendResponse({ error: chrome.runtime.lastError.message });
|
||||
// } else {
|
||||
// sendResponse({ result: "Data saved successfully" });
|
||||
// }
|
||||
// });
|
||||
// break;
|
||||
// case "getWalletInfo":
|
||||
// chrome.storage.local.get(["walletInfo"], (result) => {
|
||||
// if (chrome.runtime.lastError) {
|
||||
// sendResponse({ error: chrome.runtime.lastError.message });
|
||||
// } else if (result.walletInfo) {
|
||||
// sendResponse({ walletInfo: result.walletInfo });
|
||||
// } else {
|
||||
// sendResponse({ error: "No wallet info found" });
|
||||
// }
|
||||
// });
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// return true; // This is crucial for asynchronous sendResponse
|
||||
// });
|
||||
|
||||
|
||||
chrome.action.onClicked.addListener((tab) => {
|
||||
const popupUrl = chrome.runtime.getURL("index.html");
|
||||
chrome.windows.getAll(
|
||||
{ populate: true, windowTypes: ["popup"] },
|
||||
(windows) => {
|
||||
console.log({ windows });
|
||||
windows.forEach((win) => {
|
||||
win.tabs.forEach((tab) => console.log("url", tab.url)); // Attempt to log URLs directly
|
||||
});
|
||||
|
||||
// Attempt to find an existing popup window that has a tab with the correct URL
|
||||
const existingPopup = windows.find(
|
||||
(w) =>
|
||||
w.tabs &&
|
||||
w.tabs.some((tab) => tab.url && tab.url.startsWith(popupUrl))
|
||||
);
|
||||
console.log({ existingPopup });
|
||||
if (existingPopup) {
|
||||
// If the popup exists but is minimized or not focused, focus it
|
||||
chrome.windows.update(existingPopup.id, {
|
||||
|
||||
23
src/components/Loader.tsx
Normal file
23
src/components/Loader.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import React from 'react'
|
||||
import { Box, CircularProgress } from "@mui/material";
|
||||
|
||||
export const Loader = () => {
|
||||
return (
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'fixed',
|
||||
top: '0px',
|
||||
left:'0px',
|
||||
right: '0px',
|
||||
bottom: '0px',
|
||||
zIndex: 2,
|
||||
background: 'rgba(0, 0, 0, 0.4)'
|
||||
}}>
|
||||
<CircularProgress color="success" size={25} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@ -16,7 +16,6 @@ const stringtoUTF8Array = (message)=> {
|
||||
}
|
||||
|
||||
const stringToUTF8Array=(message)=> {
|
||||
console.log({message})
|
||||
if (typeof message !== 'string') return message; // Assuming you still want to pass through non-string inputs unchanged
|
||||
const encoder = new TextEncoder(); // TextEncoder defaults to UTF-8
|
||||
return encoder.encode(message);
|
||||
@ -27,14 +26,7 @@ const computekdf = async (req)=> {
|
||||
const sha512Hash = new Sha512().process(combinedBytes).finish().result
|
||||
const sha512HashBase64 = bytesToBase64(sha512Hash)
|
||||
const result = bcrypt.hashSync(sha512HashBase64.substring(0, 72), staticBcryptSalt)
|
||||
if(nonce === 0){
|
||||
console.log({salt, key, nonce, staticSalt, staticBcryptSalt})
|
||||
console.log({combinedBytes})
|
||||
console.log({sha512Hash})
|
||||
console.log({sha512HashBase64})
|
||||
console.log({result})
|
||||
|
||||
}
|
||||
|
||||
return { key, nonce, result }
|
||||
}
|
||||
|
||||
@ -53,12 +45,10 @@ export const doInitWorkers = (numberOfWorkers) => {
|
||||
}
|
||||
|
||||
export const kdf = async (seed, salt, threads) => {
|
||||
console.log({seed, salt, threads})
|
||||
const workers = threads
|
||||
const salt2 = new Uint8Array(salt)
|
||||
|
||||
salt = new Uint8Array(salt)
|
||||
console.log({salt, salt2})
|
||||
const seedParts = await Promise.all(workers.map((worker, index) => {
|
||||
const nonce = index
|
||||
return computekdf({
|
||||
@ -68,7 +58,6 @@ export const kdf = async (seed, salt, threads) => {
|
||||
staticSalt: crypto.staticSalt,
|
||||
staticBcryptSalt: crypto.staticBcryptSalt
|
||||
}).then(data => {
|
||||
console.log({data})
|
||||
let jsonData
|
||||
try {
|
||||
jsonData = JSON.parse(data)
|
||||
@ -81,7 +70,6 @@ export const kdf = async (seed, salt, threads) => {
|
||||
return data.result
|
||||
})
|
||||
}))
|
||||
console.log({seedParts})
|
||||
const result = new Sha512().process(stringtoUTF8Array(crypto.staticSalt + seedParts.reduce((a, c) => a + c))).finish().result
|
||||
return result
|
||||
}
|
||||
|
||||
@ -29,4 +29,27 @@
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: opacity 0.5s ease; /* Optional: adds a fade effect */
|
||||
}
|
||||
|
||||
.image-container .hover-image {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.image-container:hover .hover-image {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-container:hover .base-image {
|
||||
opacity: 0;
|
||||
}
|
||||
@ -13,11 +13,9 @@ export const decryptStoredWallet = async (password, wallet) => {
|
||||
const salt = Base58.decode(wallet.salt)
|
||||
|
||||
const key = await kdf(password, salt, threads)
|
||||
console.log('key2', key)
|
||||
const encryptionKey = key.slice(0, 32)
|
||||
const macKey = key.slice(32, 63)
|
||||
const mac = new HmacSha512(macKey).process(encryptedSeedBytes).finish().result
|
||||
console.log(Base58.encode(mac), wallet.mac)
|
||||
if (Base58.encode(mac) !== wallet.mac) {
|
||||
throw new Error("Incorrect password")
|
||||
}
|
||||
|
||||
@ -85,7 +85,6 @@ export const createAccount = async()=> {
|
||||
|
||||
export const saveFileToDisk= async(data, qortAddress) => {
|
||||
try {
|
||||
console.log({data, qortAddress})
|
||||
const dataString = JSON.stringify(data)
|
||||
const blob = new Blob([dataString], { type: 'text/plain;charset=utf-8' })
|
||||
const fileName = "qortal_backup_" + qortAddress + ".json"
|
||||
|
||||
@ -7,7 +7,6 @@ import { doInitWorkers, kdf } from '../../deps/kdf.js'
|
||||
import { crypto as cryptoVals } from '../../constants/decryptWallet.js'
|
||||
|
||||
const getRandomValues = crypto ? crypto.getRandomValues.bind(crypto) : msCrypto.getRandomValues.bind(msCrypto)
|
||||
console.log({getRandomValues})
|
||||
export const generateSaveWalletData = async (wallet, password, kdfThreads) => {
|
||||
const threads = doInitWorkers(cryptoVals.kdfThreads)
|
||||
|
||||
|
||||
@ -22,7 +22,6 @@ const utils = {
|
||||
appendBuffer (buffer1, buffer2) {
|
||||
buffer1 = new Uint8Array(buffer1)
|
||||
buffer2 = new Uint8Array(buffer2)
|
||||
console.log('buffer1.byteLength ', buffer1.byteLength , buffer2.byteLength)
|
||||
const tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength)
|
||||
tmp.set(buffer1, 0)
|
||||
tmp.set(buffer2, buffer1.byteLength)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user