ltc section

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

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

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>("");
@@ -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 = () => {
@@ -427,6 +443,7 @@ function App() {
         }
       });
       getBalanceFunc();
+      getLtcBalanceFunc()
     } catch (error) { }
   }, [address]);
 
@@ -498,10 +515,12 @@ function App() {
         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({
@@ -561,6 +580,7 @@ function App() {
     setRequestAuthentication(null);
     setUserInfo(null);
     setBalance(null);
+    setLtcBalance(null)
     setPaymentTo("");
     setPaymentAmount(0);
     setPaymentPassword("");
@@ -583,10 +603,12 @@ function App() {
           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");
@@ -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>
       )}

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 {