Qortal
/
chrome-extension
mirror of https://github.com/Qortal/chrome-extension
3
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

ltc section

feature/buyorders
Phillip Lang Martinez 2 months ago
parent
0399c9d147
commit
a743be7c0b
6 changed files with 256 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      package-lock.json
  2. 1
      package.json
  3. 149
      src/App.tsx
  4. BIN
      src/assets/ltc.png
  5. BIN
      src/assets/qort.png
  6. 9
      src/background.ts

26
package-lock.json generated
Unescape View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.4", "@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0", "@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.16.4",
"@mui/material": "^5.15.14", "@mui/material": "^5.15.14",
"@testing-library/jest-dom": "^6.4.6", "@testing-library/jest-dom": "^6.4.6",
"@testing-library/user-event": "^14.5.2", "@testing-library/user-event": "^14.5.2",
@ -1221,6 +1222,31 @@
"url": "https://opencollective.com/mui-org" "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": { "node_modules/@mui/material": {
"version": "5.15.14", "version": "5.15.14",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.14.tgz", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.14.tgz",

1
package.json
Unescape View File

@ -14,6 +14,7 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.4", "@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0", "@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.16.4",
"@mui/material": "^5.15.14", "@mui/material": "^5.15.14",
"@testing-library/jest-dom": "^6.4.6", "@testing-library/jest-dom": "^6.4.6",
"@testing-library/user-event": "^14.5.2", "@testing-library/user-event": "^14.5.2",

149
src/App.tsx
Unescape View File

@ -3,14 +3,16 @@ import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg"; import viteLogo from "/vite.svg";
import "./App.css"; import "./App.css";
import { useDropzone } from "react-dropzone"; 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 { decryptStoredWallet } from "./utils/decryptWallet";
import { CountdownCircleTimer } from "react-countdown-circle-timer"; import { CountdownCircleTimer } from "react-countdown-circle-timer";
import Logo1 from "./assets/svgs/Logo1.svg"; import Logo1 from "./assets/svgs/Logo1.svg";
import Logo1Dark from "./assets/svgs/Logo1Dark.svg"; import Logo1Dark from "./assets/svgs/Logo1Dark.svg";
import RefreshIcon from '@mui/icons-material/Refresh';
import Logo2 from "./assets/svgs/Logo2.svg"; import Logo2 from "./assets/svgs/Logo2.svg";
import Copy from "./assets/svgs/Copy.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 { CopyToClipboard } from "react-copy-to-clipboard";
import Download from "./assets/svgs/Download.svg"; import Download from "./assets/svgs/Download.svg";
import Logout from "./assets/svgs/Logout.svg"; import Logout from "./assets/svgs/Logout.svg";
@ -63,13 +65,16 @@ function App() {
const [extState, setExtstate] = useState<extStates>("not-authenticated"); const [extState, setExtstate] = useState<extStates>("not-authenticated");
const [backupjson, setBackupjson] = useState<any>(null); const [backupjson, setBackupjson] = useState<any>(null);
const [rawWallet, setRawWallet] = 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 [decryptedWallet, setdecryptedWallet] = useState<any>(null);
const [requestConnection, setRequestConnection] = useState<any>(null); const [requestConnection, setRequestConnection] = useState<any>(null);
const [requestBuyOrder, setRequestBuyOrder] = useState<any>(null); const [requestBuyOrder, setRequestBuyOrder] = useState<any>(null);
const [authenticatedMode, setAuthenticatedMode] = useState('qort')
const [requestAuthentication, setRequestAuthentication] = useState<any>(null); const [requestAuthentication, setRequestAuthentication] = useState<any>(null);
const [userInfo, setUserInfo] = useState<any>(null); const [userInfo, setUserInfo] = useState<any>(null);
const [balance, setBalance] = useState<any>(null); const [balance, setBalance] = useState<any>(null);
const [ltcBalance, setLtcBalance] = useState<any>(null)
const [paymentTo, setPaymentTo] = useState<string>(""); const [paymentTo, setPaymentTo] = useState<string>("");
const [paymentAmount, setPaymentAmount] = useState<number>(0); const [paymentAmount, setPaymentAmount] = useState<number>(0);
const [paymentPassword, setPaymentPassword] = useState<string>(""); const [paymentPassword, setPaymentPassword] = useState<string>("");
@ -92,8 +97,8 @@ function App() {
const [walletToBeDecryptedError, setWalletToBeDecryptedError] = const [walletToBeDecryptedError, setWalletToBeDecryptedError] =
useState<string>(""); useState<string>("");
const holdRefExtState = useRef<extStates>("not-authenticated") const holdRefExtState = useRef<extStates>("not-authenticated")
useEffect(()=> { useEffect(() => {
if(extState){ if (extState) {
holdRefExtState.current = extState holdRefExtState.current = extState
} }
}, [extState]) }, [extState])
@ -129,7 +134,7 @@ function App() {
try { try {
if (typeof fileContents !== "string") return; if (typeof fileContents !== "string") return;
pf = JSON.parse(fileContents); pf = JSON.parse(fileContents);
} catch (e) {} } catch (e) { }
try { try {
const requiredFields = [ const requiredFields = [
@ -167,7 +172,7 @@ function App() {
wallet = await wallet2.generateSaveWalletData( wallet = await wallet2.generateSaveWalletData(
password, password,
crypto.kdfThreads, crypto.kdfThreads,
() => {} () => { }
); );
setWalletToBeDownloaded({ setWalletToBeDownloaded({
@ -205,10 +210,21 @@ function App() {
const getBalanceFunc = () => { const getBalanceFunc = () => {
setQortBalanceLoading(true)
chrome.runtime.sendMessage({ action: "balance" }, (response) => { chrome.runtime.sendMessage({ action: "balance" }, (response) => {
if (response && !response?.error) { if (response && !response?.error) {
setBalance(response); setBalance(response);
} }
setQortBalanceLoading(false)
});
};
const getLtcBalanceFunc = () => {
setLtcBalanceLoading(true)
chrome.runtime.sendMessage({ action: "ltcBalance" }, (response) => {
if (response && !response?.error) {
setLtcBalance(response);
}
setLtcBalanceLoading(false)
}); });
}; };
const sendCoinFunc = () => { const sendCoinFunc = () => {
@ -409,11 +425,11 @@ function App() {
chrome.runtime.sendMessage({ action: "getWalletInfo" }, (response) => { chrome.runtime.sendMessage({ action: "getWalletInfo" }, (response) => {
if (response && response?.walletInfo) { if (response && response?.walletInfo) {
setRawWallet(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"); setExtstate("authenticated");
} }
}); });
} catch (error) {} finally { } catch (error) { } finally {
setIsLoading(false) setIsLoading(false)
} }
}, []); }, []);
@ -427,7 +443,8 @@ function App() {
} }
}); });
getBalanceFunc(); getBalanceFunc();
} catch (error) {} getLtcBalanceFunc()
} catch (error) { }
}, [address]); }, [address]);
useEffect(() => { useEffect(() => {
@ -444,8 +461,8 @@ function App() {
return; return;
} }
setIsLoading(true) setIsLoading(true)
await new Promise<void>((res)=> { await new Promise<void>((res) => {
setTimeout(()=> { setTimeout(() => {
res() res()
}, 250) }, 250)
}) })
@ -487,8 +504,8 @@ function App() {
return; return;
} }
setIsLoading(true) setIsLoading(true)
await new Promise<void>((res)=> { await new Promise<void>((res) => {
setTimeout(()=> { setTimeout(() => {
res() res()
}, 250) }, 250)
}) })
@ -496,12 +513,14 @@ function App() {
const wallet = await res.generateSaveWalletData( const wallet = await res.generateSaveWalletData(
walletToBeDownloadedPassword, walletToBeDownloadedPassword,
crypto.kdfThreads, crypto.kdfThreads,
() => {} () => { }
); );
chrome.runtime.sendMessage({ action: "decryptWallet", payload: { chrome.runtime.sendMessage({
action: "decryptWallet", payload: {
password: walletToBeDownloadedPassword, password: walletToBeDownloadedPassword,
wallet wallet
} }, (response) => { }
}, (response) => {
if (response && !response?.error) { if (response && !response?.error) {
setRawWallet(wallet); setRawWallet(wallet);
setWalletToBeDownloaded({ setWalletToBeDownloaded({
@ -515,7 +534,7 @@ function App() {
} }
}); });
getBalanceFunc(); getBalanceFunc();
} else if(response?.error){ } else if (response?.error) {
setIsLoading(false) setIsLoading(false)
setWalletToBeDecryptedError(response.error) setWalletToBeDecryptedError(response.error)
} }
@ -536,7 +555,7 @@ function App() {
resetAllStates(); resetAllStates();
} }
}); });
} catch (error) {} } catch (error) { }
}; };
const returnToMain = () => { const returnToMain = () => {
@ -561,6 +580,7 @@ function App() {
setRequestAuthentication(null); setRequestAuthentication(null);
setUserInfo(null); setUserInfo(null);
setBalance(null); setBalance(null);
setLtcBalance(null)
setPaymentTo(""); setPaymentTo("");
setPaymentAmount(0); setPaymentAmount(0);
setPaymentPassword(""); setPaymentPassword("");
@ -574,19 +594,21 @@ function App() {
setSendqortState(null); setSendqortState(null);
}; };
const authenticateWallet = async()=> { const authenticateWallet = async () => {
try { try {
setIsLoading(true) setIsLoading(true)
setWalletToBeDecryptedError('') setWalletToBeDecryptedError('')
await new Promise<void>((res)=> { await new Promise<void>((res) => {
setTimeout(()=> { setTimeout(() => {
res() res()
}, 250) }, 250)
}) })
chrome.runtime.sendMessage({ action: "decryptWallet", payload: { chrome.runtime.sendMessage({
action: "decryptWallet", payload: {
password: authenticatePassword, password: authenticatePassword,
wallet: rawWallet wallet: rawWallet
} }, (response) => { }
}, (response) => {
if (response && !response?.error) { if (response && !response?.error) {
setAuthenticatePassword(""); setAuthenticatePassword("");
setExtstate("authenticated"); setExtstate("authenticated");
@ -598,7 +620,7 @@ function App() {
} }
}); });
getBalanceFunc(); getBalanceFunc();
} else if(response?.error){ } else if (response?.error) {
setIsLoading(false) setIsLoading(false)
setWalletToBeDecryptedError(response.error) setWalletToBeDecryptedError(response.error)
} }
@ -684,6 +706,47 @@ function App() {
<AuthenticatedContainer> <AuthenticatedContainer>
<AuthenticatedContainerInnerLeft> <AuthenticatedContainerInnerLeft>
<Spacer height="48px" /> <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} /> <img src={Logo2} />
<Spacer height="32px" /> <Spacer height="32px" />
<TextP <TextP
@ -703,6 +766,7 @@ function App() {
</AddressBox> </AddressBox>
</CopyToClipboard> </CopyToClipboard>
<Spacer height="10px" /> <Spacer height="10px" />
{qortBalanceLoading && <CircularProgress color="success" size={16} />}
{balance && ( {balance && (
<TextP <TextP
sx={{ sx={{
@ -716,16 +780,7 @@ function App() {
</TextP> </TextP>
)} )}
{/* <p>balance: {balance}</p> */}
<Spacer height="55px" /> <Spacer height="55px" />
{/* <CustomButton
onClick={() => {
setExtstate("download-wallet");
}}
>
Download Wallet
</CustomButton> */}
<CustomButton <CustomButton
onClick={() => { onClick={() => {
setExtstate("send-qort"); setExtstate("send-qort");
@ -733,6 +788,9 @@ function App() {
> >
Transfer QORT Transfer QORT
</CustomButton> </CustomButton>
</>
)}
</AuthenticatedContainerInnerLeft> </AuthenticatedContainerInnerLeft>
<AuthenticatedContainerInnerRight> <AuthenticatedContainerInnerRight>
<Spacer height="20px" /> <Spacer height="20px" />
@ -753,6 +811,25 @@ function App() {
cursor: "pointer", 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> </AuthenticatedContainerInnerRight>
</AuthenticatedContainer> </AuthenticatedContainer>
)} )}
@ -1143,7 +1220,7 @@ function App() {
style={{ style={{
cursor: "pointer", cursor: "pointer",
}} }}
onClick={()=> { onClick={() => {
setRawWallet(null); setRawWallet(null);
setExtstate("not-authenticated"); setExtstate("not-authenticated");
}} }}
@ -1304,7 +1381,7 @@ function App() {
style={{ style={{
cursor: "pointer", cursor: "pointer",
}} }}
onClick={()=> { onClick={() => {
setExtstate("not-authenticated") setExtstate("not-authenticated")
}} }}
src={Return} src={Return}

BIN
src/assets/ltc.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/qort.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

9
src/background.ts
Unescape View File

@ -113,7 +113,6 @@ async function connection(hostname) {
async function getTradeInfo(qortalAtAddress) { async function getTradeInfo(qortalAtAddress) {
const response = await fetch(buyTradeNodeBaseUrl + "/crosschain/trade/" + qortalAtAddress); const response = await fetch(buyTradeNodeBaseUrl + "/crosschain/trade/" + qortalAtAddress);
console.log({})
if (!response?.ok) throw new Error("Cannot crosschain trade information"); if (!response?.ok) throw new Error("Cannot crosschain trade information");
const data = await response.json(); const data = await response.json();
return data; return data;
@ -283,7 +282,7 @@ async function decryptWallet({ password, wallet, walletVersion }) {
const keyPair = wallet2._addresses[0].keyPair; const keyPair = wallet2._addresses[0].keyPair;
const ltcPrivateKey = wallet2._addresses[0].ltcWallet.derivedMasterPrivateKey const ltcPrivateKey = wallet2._addresses[0].ltcWallet.derivedMasterPrivateKey
const ltcPublicKey = wallet2._addresses[0].ltcWallet.derivedMasterPublicKey const ltcPublicKey = wallet2._addresses[0].ltcWallet.derivedMasterPublicKey
const ltcAddress = wallet2._addresses[0].ltcWallet.address
const toSave = { const toSave = {
privateKey: Base58.encode(keyPair.privateKey), privateKey: Base58.encode(keyPair.privateKey),
publicKey: Base58.encode(keyPair.publicKey), publicKey: Base58.encode(keyPair.publicKey),
@ -302,7 +301,8 @@ async function decryptWallet({ password, wallet, walletVersion }) {
}); });
const newWallet = { const newWallet = {
...wallet, ...wallet,
publicKey: Base58.encode(keyPair.publicKey) publicKey: Base58.encode(keyPair.publicKey),
ltcAddress: ltcAddress
} }
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
chrome.storage.local.set({ walletInfo: newWallet }, () => { chrome.storage.local.set({ walletInfo: newWallet }, () => {
@ -322,7 +322,6 @@ async function decryptWallet({ password, wallet, walletVersion }) {
} }
async function signChatFunc(chatBytesArray, chatNonce, validApi, keyPair) { async function signChatFunc(chatBytesArray, chatNonce, validApi, keyPair) {
console.log({ chatBytesArray, chatNonce, validApi, keyPair })
let response let response
try { try {
const signedChatBytes = signChat( const signedChatBytes = signChat(
@ -569,7 +568,6 @@ async function fetchMessagesForBuyOrders(apiCall, signature, senderPublicKey) {
const response = await fetch(apiCall); const response = await fetch(apiCall);
let data = await response.json(); let data = await response.json();
data = data.filter((item) => !triedChatMessage.includes(item.signature)) data = data.filter((item) => !triedChatMessage.includes(item.signature))
console.log({data})
if (data && data.length > 0) { if (data && data.length > 0) {
const encodedMessageObj = data[0] const encodedMessageObj = data[0]
const resKeyPair = await getKeyPair() 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 decodedMessage = decryptChatMessage(encodedMessageObj.data, keyPair.privateKey, senderPublicKey, encodedMessageObj.reference)
const parsedMessage = JSON.parse(decodedMessage) const parsedMessage = JSON.parse(decodedMessage)
console.log({parsedMessage})
if (parsedMessage?.extra?.chatRequestSignature === signature) { if (parsedMessage?.extra?.chatRequestSignature === signature) {
resolve(parsedMessage); resolve(parsedMessage);
} else { } else {

Write Preview
Loading…
Cancel
Save