ltc section

2 months ago · a743be7c0b
6 changed files with 256 additions and 155 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "@emotion/react": "^11.11.4",
        "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^5.16.4",
        "@mui/material": "^5.15.14",
        "@testing-library/jest-dom": "^6.4.6",
        "@testing-library/user-event": "^14.5.2",
@ -1221,6 +1222,31 @@
        "url": "https://opencollective.com/mui-org"
      }
    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.4.tgz",
+      "integrity": "sha512-j9/CWctv6TH6Dou2uR2EH7UOgu79CW/YcozxCYVLJ7l03pCsiOlJ5sBArnWJxJ+nGkFwyL/1d1k8JEPMDR125A==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@mui/material": {
      "version": "5.15.14",
      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.14.tgz",
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.16.4",
    "@mui/material": "^5.15.14",
    "@testing-library/jest-dom": "^6.4.6",
    "@testing-library/user-event": "^14.5.2",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -3,14 +3,16 @@ import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
 import "./App.css";
 import { useDropzone } from "react-dropzone";
-import { Box, Input, InputLabel, Tooltip, Typography } from "@mui/material";
+import { Box, CircularProgress, 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 RefreshIcon from '@mui/icons-material/Refresh';
 import Logo2 from "./assets/svgs/Logo2.svg";
 import Copy from "./assets/svgs/Copy.svg";
+import ltcLogo from './assets/ltc.png';
+import qortLogo from './assets/qort.png'
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import Download from "./assets/svgs/Download.svg";
 import Logout from "./assets/svgs/Logout.svg";
@ -63,13 +65,16 @@ function App() {
  const [extState, setExtstate] = useState<extStates>("not-authenticated");
  const [backupjson, setBackupjson] = useState<any>(null);
  const [rawWallet, setRawWallet] = useState<any>(null);
+  const [ltcBalanceLoading, setLtcBalanceLoading] = useState<boolean>(false);
+  const [qortBalanceLoading, setQortBalanceLoading] = useState<boolean>(false)
  const [decryptedWallet, setdecryptedWallet] = useState<any>(null);
  const [requestConnection, setRequestConnection] = useState<any>(null);
  const [requestBuyOrder, setRequestBuyOrder] = useState<any>(null);
-
+  const [authenticatedMode, setAuthenticatedMode] = useState('qort')
  const [requestAuthentication, setRequestAuthentication] = useState<any>(null);
  const [userInfo, setUserInfo] = useState<any>(null);
  const [balance, setBalance] = useState<any>(null);
+  const [ltcBalance, setLtcBalance] = useState<any>(null)
  const [paymentTo, setPaymentTo] = useState<string>("");
  const [paymentAmount, setPaymentAmount] = useState<number>(0);
  const [paymentPassword, setPaymentPassword] = useState<string>("");
@ -92,8 +97,8 @@ function App() {
  const [walletToBeDecryptedError, setWalletToBeDecryptedError] =
    useState<string>("");
  const holdRefExtState = useRef<extStates>("not-authenticated")
-  useEffect(()=> {
-    if(extState){
+  useEffect(() => {
+    if (extState) {
      holdRefExtState.current = extState
    }
  }, [extState])
@ -129,7 +134,7 @@ function App() {
      try {
        if (typeof fileContents !== "string") return;
        pf = JSON.parse(fileContents);
-      } catch (e) {}
+      } catch (e) { }

      try {
        const requiredFields = [
@ -167,7 +172,7 @@ function App() {
    wallet = await wallet2.generateSaveWalletData(
      password,
      crypto.kdfThreads,
-      () => {}
+      () => { }
    );

    setWalletToBeDownloaded({
@ -205,10 +210,21 @@ function App() {


  const getBalanceFunc = () => {
+    setQortBalanceLoading(true)
    chrome.runtime.sendMessage({ action: "balance" }, (response) => {
      if (response && !response?.error) {
        setBalance(response);
      }
+      setQortBalanceLoading(false)
+    });
+  };
+  const getLtcBalanceFunc = () => {
+    setLtcBalanceLoading(true)
+    chrome.runtime.sendMessage({ action: "ltcBalance" }, (response) => {
+      if (response && !response?.error) {
+        setLtcBalance(response);
+      }
+      setLtcBalanceLoading(false)
    });
  };
  const sendCoinFunc = () => {
@ -409,11 +425,11 @@ function App() {
      chrome.runtime.sendMessage({ action: "getWalletInfo" }, (response) => {
        if (response && response?.walletInfo) {
          setRawWallet(response?.walletInfo);
-          if(holdRefExtState.current === 'web-app-request-payment' || holdRefExtState.current === 'web-app-request-connection' || holdRefExtState.current === 'web-app-request-buy-order') return
+          if (holdRefExtState.current === 'web-app-request-payment' || holdRefExtState.current === 'web-app-request-connection' || holdRefExtState.current === 'web-app-request-buy-order') return
          setExtstate("authenticated");
        }
      });
-    } catch (error) {} finally {
+    } catch (error) { } finally {
      setIsLoading(false)
    }
  }, []);
@ -427,7 +443,8 @@ function App() {
        }
      });
      getBalanceFunc();
-    } catch (error) {}
+      getLtcBalanceFunc()
+    } catch (error) { }
  }, [address]);

  useEffect(() => {
@ -444,8 +461,8 @@ function App() {
        return;
      }
      setIsLoading(true)
-      await new Promise<void>((res)=> {
-        setTimeout(()=> {
+      await new Promise<void>((res) => {
+        setTimeout(() => {
          res()
        }, 250)
      })
@ -487,8 +504,8 @@ function App() {
        return;
      }
      setIsLoading(true)
-      await new Promise<void>((res)=> {
-        setTimeout(()=> {
+      await new Promise<void>((res) => {
+        setTimeout(() => {
          res()
        }, 250)
      })
@ -496,12 +513,14 @@ function App() {
      const wallet = await res.generateSaveWalletData(
        walletToBeDownloadedPassword,
        crypto.kdfThreads,
-        () => {}
+        () => { }
      );
-      chrome.runtime.sendMessage({ action: "decryptWallet", payload: {
+      chrome.runtime.sendMessage({
+        action: "decryptWallet", payload: {
          password: walletToBeDownloadedPassword,
          wallet
-      } }, (response) => {
+        }
+      }, (response) => {
        if (response && !response?.error) {
          setRawWallet(wallet);
          setWalletToBeDownloaded({
@ -515,7 +534,7 @@ function App() {
            }
          });
          getBalanceFunc();
-        } else if(response?.error){
+        } else if (response?.error) {
          setIsLoading(false)
          setWalletToBeDecryptedError(response.error)
        }
@ -536,7 +555,7 @@ function App() {
          resetAllStates();
        }
      });
-    } catch (error) {}
+    } catch (error) { }
  };

  const returnToMain = () => {
@ -561,6 +580,7 @@ function App() {
    setRequestAuthentication(null);
    setUserInfo(null);
    setBalance(null);
+    setLtcBalance(null)
    setPaymentTo("");
    setPaymentAmount(0);
    setPaymentPassword("");
@ -574,19 +594,21 @@ function App() {
    setSendqortState(null);
  };

-  const authenticateWallet = async()=> {
+  const authenticateWallet = async () => {
    try {
      setIsLoading(true)
      setWalletToBeDecryptedError('')
-      await new Promise<void>((res)=> {
-        setTimeout(()=> {
+      await new Promise<void>((res) => {
+        setTimeout(() => {
          res()
        }, 250)
      })
-      chrome.runtime.sendMessage({ action: "decryptWallet", payload: {
+      chrome.runtime.sendMessage({
+        action: "decryptWallet", payload: {
          password: authenticatePassword,
          wallet: rawWallet
-      } }, (response) => {
+        }
+      }, (response) => {
        if (response && !response?.error) {
          setAuthenticatePassword("");
          setExtstate("authenticated");
@ -598,7 +620,7 @@ function App() {
            }
          });
          getBalanceFunc();
-        } else if(response?.error){
+        } else if (response?.error) {
          setIsLoading(false)
          setWalletToBeDecryptedError(response.error)
        }
@ -684,6 +706,47 @@ function App() {
        <AuthenticatedContainer>
          <AuthenticatedContainerInnerLeft>
            <Spacer height="48px" />
+
+            {authenticatedMode === 'ltc' ? (
+              <>
+                <img src={ltcLogo} />
+                <Spacer height="32px" />
+                <CopyToClipboard text={rawWallet?.ltcAddress}>
+                  <AddressBox>
+                    {rawWallet?.ltcAddress?.slice(0, 6)}...
+                    {rawWallet?.ltcAddress?.slice(-4)} <img src={Copy} />
+                  </AddressBox>
+                </CopyToClipboard>
+                <Spacer height="10px" />
+                {ltcBalanceLoading && <CircularProgress color="success" size={16} />}
+                {ltcBalance && !ltcBalanceLoading && (
+                  <Box sx={{
+                    gap: '10px',
+                    display: 'flex',
+                    alignItems: 'center'
+                  }}>
+                    <TextP
+                      sx={{
+                        textAlign: "center",
+                        lineHeight: "24px",
+                        fontSize: "20px",
+                        fontWeight: 700,
+                      }}
+                    >
+                      {ltcBalance?.toFixed(5)} LTC
+                    </TextP>
+                    <RefreshIcon onClick={getLtcBalanceFunc} sx={{
+                      fontSize: '16px',
+                      color: 'white',
+                      cursor: 'pointer'
+                    }} />
+                  </Box>
+
+                )}
+
+              </>
+            ) : (
+              <>
                <img src={Logo2} />
                <Spacer height="32px" />
                <TextP
@ -703,6 +766,7 @@ function App() {
                  </AddressBox>
                </CopyToClipboard>
                <Spacer height="10px" />
+                {qortBalanceLoading && <CircularProgress color="success" size={16} />}
                {balance && (
                  <TextP
                    sx={{
@ -716,16 +780,7 @@ function App() {
                  </TextP>
                )}

-            {/* <p>balance: {balance}</p> */}
                <Spacer height="55px" />
-
-            {/* <CustomButton
-            onClick={() => {
-              setExtstate("download-wallet");
-            }}
-          >
-            Download Wallet
-          </CustomButton> */}
                <CustomButton
                  onClick={() => {
                    setExtstate("send-qort");
@ -733,6 +788,9 @@ function App() {
                >
                  Transfer QORT
                </CustomButton>
+              </>
+            )}
+
          </AuthenticatedContainerInnerLeft>
          <AuthenticatedContainerInnerRight>
            <Spacer height="20px" />
@ -753,6 +811,25 @@ function App() {
                cursor: "pointer",
              }}
            />
+            <Spacer height="20px" />
+            {authenticatedMode === 'qort' && (
+              <img onClick={() => {
+                setAuthenticatedMode('ltc')
+              }} src={ltcLogo} style={{
+                cursor: "pointer",
+                width: '20px',
+                height: 'auto'
+              }} />
+            )}
+            {authenticatedMode === 'ltc' && (
+              <img onClick={() => {
+                setAuthenticatedMode('qort')
+              }} src={qortLogo} style={{
+                cursor: "pointer",
+                width: '20px',
+                height: 'auto'
+              }} />
+            )}
          </AuthenticatedContainerInnerRight>
        </AuthenticatedContainer>
      )}
@ -1143,7 +1220,7 @@ function App() {
              style={{
                cursor: "pointer",
              }}
-              onClick={()=> {
+              onClick={() => {
                setRawWallet(null);
                setExtstate("not-authenticated");
              }}
@ -1304,7 +1381,7 @@ function App() {
                  style={{
                    cursor: "pointer",
                  }}
-              onClick={()=> {
+                  onClick={() => {
                    setExtstate("not-authenticated")
                  }}
                  src={Return}
--- a/src/assets/ltc.png
+++ b/src/assets/ltc.png
--- a/src/assets/qort.png
+++ b/src/assets/qort.png
--- a/src/background.ts
+++ b/src/background.ts
@ -113,7 +113,6 @@ async function connection(hostname) {

 async function getTradeInfo(qortalAtAddress) {
  const response = await fetch(buyTradeNodeBaseUrl + "/crosschain/trade/" + qortalAtAddress);
-  console.log({})
  if (!response?.ok) throw new Error("Cannot crosschain trade information");
  const data = await response.json();
  return data;
@ -283,7 +282,7 @@ async function decryptWallet({ password, wallet, walletVersion }) {
    const keyPair = wallet2._addresses[0].keyPair;
    const ltcPrivateKey = wallet2._addresses[0].ltcWallet.derivedMasterPrivateKey
    const ltcPublicKey = wallet2._addresses[0].ltcWallet.derivedMasterPublicKey
-
+    const ltcAddress = wallet2._addresses[0].ltcWallet.address
    const toSave = {
      privateKey: Base58.encode(keyPair.privateKey),
      publicKey: Base58.encode(keyPair.publicKey),
@ -302,7 +301,8 @@ async function decryptWallet({ password, wallet, walletVersion }) {
    });
    const newWallet = {
      ...wallet,
-      publicKey: Base58.encode(keyPair.publicKey)
+      publicKey: Base58.encode(keyPair.publicKey),
+      ltcAddress: ltcAddress
    }
    await new Promise((resolve, reject) => {
      chrome.storage.local.set({ walletInfo: newWallet }, () => {
@ -322,7 +322,6 @@ async function decryptWallet({ password, wallet, walletVersion }) {
 }

 async function signChatFunc(chatBytesArray, chatNonce, validApi, keyPair) {
-  console.log({ chatBytesArray, chatNonce, validApi, keyPair })
  let response
  try {
    const signedChatBytes = signChat(
@ -569,7 +568,6 @@ async function fetchMessagesForBuyOrders(apiCall, signature, senderPublicKey) {
        const response = await fetch(apiCall);
        let data = await response.json();
        data = data.filter((item) => !triedChatMessage.includes(item.signature))
-        console.log({data})
        if (data && data.length > 0) {
          const encodedMessageObj = data[0]
          const resKeyPair = await getKeyPair()
@ -583,7 +581,6 @@ async function fetchMessagesForBuyOrders(apiCall, signature, senderPublicKey) {

          const decodedMessage = decryptChatMessage(encodedMessageObj.data, keyPair.privateKey, senderPublicKey, encodedMessageObj.reference)
          const parsedMessage = JSON.parse(decodedMessage)
-          console.log({parsedMessage})
          if (parsedMessage?.extra?.chatRequestSignature === signature) {
            resolve(parsedMessage);
          } else {