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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      package-lock.json
  2. 1
      package.json
  3. 375
      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": {
"@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",

1
package.json
Unescape View File

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

375
src/App.tsx
Unescape View File

@ -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>("");
@ -79,7 +84,7 @@ function App() {
const [walletToBeDownloaded, setWalletToBeDownloaded] = useState<any>(null);
const [walletToBeDownloadedPassword, setWalletToBeDownloadedPassword] =
useState<string>("");
const [authenticatePassword, setAuthenticatePassword] =
const [authenticatePassword, setAuthenticatePassword] =
useState<string>("");
const [sendqortState, setSendqortState] = useState<any>(null);
const [isLoading, setIsLoading] = useState<boolean>(false)
@ -89,11 +94,11 @@ function App() {
] = useState<string>("");
const [walletToBeDownloadedError, setWalletToBeDownloadedError] =
useState<string>("");
const [walletToBeDecryptedError, setWalletToBeDecryptedError] =
const [walletToBeDecryptedError, setWalletToBeDecryptedError] =
useState<string>("");
const holdRefExtState = useRef<extStates>("not-authenticated")
useEffect(()=> {
if(extState){
const holdRefExtState = useRef<extStates>("not-authenticated")
useEffect(() => {
if (extState) {
holdRefExtState.current = extState
}
}, [extState])
@ -122,14 +127,14 @@ function App() {
// Read the file as text
reader.readAsText(file);
});
let error: any = null;
let pf: any;
try {
if (typeof fileContents !== "string") return;
pf = JSON.parse(fileContents);
} catch (e) {}
} catch (e) { }
try {
const requiredFields = [
@ -157,7 +162,7 @@ function App() {
},
});
const saveWalletFunc = async (password: string) => {
let wallet = structuredClone(rawWallet);
@ -167,7 +172,7 @@ function App() {
wallet = await wallet2.generateSaveWalletData(
password,
crypto.kdfThreads,
() => {}
() => { }
);
setWalletToBeDownloaded({
@ -196,19 +201,30 @@ function App() {
tabs[0].id,
{ from: "popup", subject: "anySubject" },
function (response) {
}
);
}
);
};
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 = () => {
@ -257,7 +273,7 @@ function App() {
useEffect(() => {
// Listen for messages from the background script
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
// 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
@ -284,7 +300,7 @@ function App() {
});
}, []);
//param = isDecline
const confirmPayment = (isDecline: boolean) => {
if (isDecline) {
@ -327,7 +343,7 @@ function App() {
setExtstate("transfer-success-request");
setCountdown(null);
} else {
setSendPaymentError(
response?.error || "Unable to perform payment. Please try again."
);
@ -349,7 +365,7 @@ function App() {
},
},
(response) => {
window.close();
window.close();
}
);
return;
@ -361,8 +377,8 @@ function App() {
action: "buyOrderConfirmation",
payload: {
crosschainAtInfo: requestBuyOrder?.crosschainAtInfo,
interactionId: requestBuyOrder?.interactionId,
isDecline: false,
interactionId: requestBuyOrder?.interactionId,
isDecline: false,
},
},
(response) => {
@ -370,7 +386,7 @@ function App() {
setExtstate("buy-order-submitted");
setCountdown(null);
} else {
setSendPaymentError(
response?.error || "Unable to perform payment. Please try again."
);
@ -402,18 +418,18 @@ function App() {
// useEffect(()=> {
// rawWalletRef.current = rawWallet
// }, [rawWallet])
useEffect(() => {
try {
setIsLoading(true)
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: {
password: walletToBeDownloadedPassword,
wallet
} }, (response) => {
chrome.runtime.sendMessage({
action: "decryptWallet", payload: {
password: walletToBeDownloadedPassword,
wallet
}
}, (response) => {
if (response && !response?.error) {
setRawWallet(wallet);
setWalletToBeDownloaded({
@ -515,18 +534,18 @@ function App() {
}
});
getBalanceFunc();
} else if(response?.error){
} else if (response?.error) {
setIsLoading(false)
setWalletToBeDecryptedError(response.error)
}
});
} catch (error: any) {
setWalletToBeDownloadedError(error?.message);
setIsLoading(false)
}
}
};
const logoutFunc = () => {
@ -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: {
password: authenticatePassword,
wallet: rawWallet
} }, (response) => {
chrome.runtime.sendMessage({
action: "decryptWallet", payload: {
password: authenticatePassword,
wallet: rawWallet
}
}, (response) => {
if (response && !response?.error) {
setAuthenticatePassword("");
setExtstate("authenticated");
@ -598,14 +620,14 @@ function App() {
}
});
getBalanceFunc();
} else if(response?.error){
} else if (response?.error) {
setIsLoading(false)
setWalletToBeDecryptedError(response.error)
}
});
} catch (error) {
setWalletToBeDecryptedError('Unable to authenticate. Wrong password')
}
}
}
return (
@ -684,55 +706,91 @@ function App() {
<AuthenticatedContainer>
<AuthenticatedContainerInnerLeft>
<Spacer height="48px" />
<img src={Logo2} />
<Spacer height="32px" />
<TextP
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "20px",
}}
>
{userInfo?.name}
</TextP>
<Spacer height="10px" />
<CopyToClipboard text={rawWallet?.address0}>
<AddressBox>
{rawWallet?.address0?.slice(0, 6)}...
{rawWallet?.address0?.slice(-4)} <img src={Copy} />
</AddressBox>
</CopyToClipboard>
<Spacer height="10px" />
{balance && (
<TextP
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "20px",
fontWeight: 700,
}}
>
{balance?.toFixed(2)} QORT
</TextP>
{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
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "20px",
}}
>
{userInfo?.name}
</TextP>
<Spacer height="10px" />
<CopyToClipboard text={rawWallet?.address0}>
<AddressBox>
{rawWallet?.address0?.slice(0, 6)}...
{rawWallet?.address0?.slice(-4)} <img src={Copy} />
</AddressBox>
</CopyToClipboard>
<Spacer height="10px" />
{qortBalanceLoading && <CircularProgress color="success" size={16} />}
{balance && (
<TextP
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "20px",
fontWeight: 700,
}}
>
{balance?.toFixed(2)} QORT
</TextP>
)}
<Spacer height="55px" />
<CustomButton
onClick={() => {
setExtstate("send-qort");
}}
>
Transfer QORT
</CustomButton>
</>
)}
{/* <p>balance: {balance}</p> */}
<Spacer height="55px" />
{/* <CustomButton
onClick={() => {
setExtstate("download-wallet");
}}
>
Download Wallet
</CustomButton> */}
<CustomButton
onClick={() => {
setExtstate("send-qort");
}}
>
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>
)}
@ -865,7 +942,7 @@ function App() {
</CustomButton>
</>
)}
{extState === "web-app-request-buy-order" && (
{extState === "web-app-request-buy-order" && (
<>
<Spacer height="100px" />
@ -1143,7 +1220,7 @@ function App() {
style={{
cursor: "pointer",
}}
onClick={()=> {
onClick={() => {
setRawWallet(null);
setExtstate("not-authenticated");
}}
@ -1178,32 +1255,32 @@ function App() {
</TextP>
</Box>
<Spacer height="35px" />
<>
<CustomLabel htmlFor="standard-adornment-password">
Wallet Password
</CustomLabel>
<Spacer height="5px" />
<PasswordField
id="standard-adornment-password"
value={authenticatePassword}
onChange={(e) =>
setAuthenticatePassword(e.target.value)
<>
<CustomLabel htmlFor="standard-adornment-password">
Wallet Password
</CustomLabel>
<Spacer height="5px" />
<PasswordField
id="standard-adornment-password"
value={authenticatePassword}
onChange={(e) =>
setAuthenticatePassword(e.target.value)
}
onKeyDown={(e) => {
if (e.key === "Enter") {
authenticateWallet();
}
onKeyDown={(e) => {
if (e.key === "Enter") {
authenticateWallet();
}
}}
/>
<Spacer height="20px" />
<CustomButton onClick={authenticateWallet} >
Authenticate
</CustomButton>
<ErrorText>
{walletToBeDecryptedError}
</ErrorText>
</>
}}
/>
<Spacer height="20px" />
<CustomButton onClick={authenticateWallet} >
Authenticate
</CustomButton>
<ErrorText>
{walletToBeDecryptedError}
</ErrorText>
</>
</>
)}
{extState === "download-wallet" && (
@ -1290,34 +1367,34 @@ function App() {
<>
{!walletToBeDownloaded && (
<>
<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="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>
width: '136px',
height: '154px'
}}>
<img src={Logo1} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
</div>
<Spacer height="38px" />
<TextP
sx={{

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

Write Preview
Loading…
Cancel
Save