add loader and remove logs

public/content-script.js

@@ -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: {

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) {
+        if (response === true) {
-          setSendPaymentSuccess("Payment successfully sent");
+          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,11 +515,35 @@ function App() {
             <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");
@@ -528,6 +551,14 @@ function App() {
             >
               Create account
             </CustomButton>
+
+            <img
+              src={Info}
+              style={{
+                visibility: "hidden",
+              }}
+            />
+          </Box>
         </>
       )}
       {/* {extState !== "not-authenticated" && (
@@ -556,6 +587,7 @@ function App() {
               </AddressBox>
             </CopyToClipboard>
             <Spacer height="10px" />
+            {balance && (
                <TextP
                sx={{
                  textAlign: "center",
@@ -566,6 +598,8 @@ function App() {
              >
                {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
@@ -734,9 +768,11 @@ function App() {
             sx={{
               textAlign: "center",
               lineHeight: "15px",
-              fontSize: '10px'
+              fontSize: "10px",
             }}
-          >{sendqortState?.description}</TextP>
+          >
+            {sendqortState?.description}
+          </TextP>
           <Spacer height="15px" />
           <TextP
             sx={{
@@ -751,7 +787,7 @@ function App() {
           <Spacer height="29px" />
 
           <CustomLabel htmlFor="standard-adornment-password">
-            Confirm wallet password
+            Confirm Wallet Password
           </CustomLabel>
           <Spacer height="5px" />
           <CustomInput
@@ -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>
+          <Spacer height="22px" />
-            {rawWallet?.address0 && <p>Welcome {rawWallet?.address0}</p>}
+          <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">
+              <CustomLabel htmlFor="standard-adornment-password">
-                Confirm wallet password
+                Confirm Wallet Password
-              </InputLabel>
+              </CustomLabel>
-              <Input
+              <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" />
+            <Spacer height="22px" />
-              <img src={Logo1} />
+          <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={()=> {
+              <CustomButton
-                saveFileToDiskFunc()
+                onClick={() => {
-                returnToMain()
+                  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>
   );
 }

src/background.ts

@@ -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({
+              // chrome.runtime.sendMessage({
-                action: "closePopup",
+              //   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, {

src/components/Loader.tsx

@@ -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>
+  )
+}

src/deps/kdf.ts

@@ -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
 }

src/index.css

@@ -30,3 +30,26 @@
 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;
+}

src/utils/decryptWallet.ts

@@ -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")
 	}

src/utils/generateWallet/generateWallet.ts

@@ -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"

src/utils/generateWallet/storeWallet.ts

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

src/utils/utils.ts

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