mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-04-24 03:47:53 +00:00
added payment component
This commit is contained in:
parent
45726e85fe
commit
7f6834f0f1
142
src/App.tsx
142
src/App.tsx
@ -153,6 +153,7 @@ import { DrawerUserLookup } from "./components/Drawer/DrawerUserLookup";
|
||||
import { UserLookup } from "./components/UserLookup.tsx/UserLookup";
|
||||
import { RegisterName } from "./components/RegisterName";
|
||||
import { BuyQortInformation } from "./components/BuyQortInformation";
|
||||
import { QortPayment } from "./components/QortPayment";
|
||||
|
||||
type extStates =
|
||||
| "not-authenticated"
|
||||
@ -351,6 +352,8 @@ function App() {
|
||||
const [authenticatePassword, setAuthenticatePassword] = useState<string>("");
|
||||
const [sendqortState, setSendqortState] = useState<any>(null);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
const [isLoadingSendCoin, setIsLoadingSendCoin] = useState<boolean>(false);
|
||||
|
||||
const [
|
||||
walletToBeDownloadedPasswordConfirm,
|
||||
setWalletToBeDownloadedPasswordConfirm,
|
||||
@ -775,52 +778,7 @@ function App() {
|
||||
setLtcBalanceLoading(false);
|
||||
});
|
||||
};
|
||||
const sendCoinFunc = async() => {
|
||||
try {
|
||||
setSendPaymentError("");
|
||||
setSendPaymentSuccess("");
|
||||
if (!paymentTo) {
|
||||
setSendPaymentError("Please enter a recipient");
|
||||
return;
|
||||
}
|
||||
if (!paymentAmount) {
|
||||
setSendPaymentError("Please enter an amount greater than 0");
|
||||
return;
|
||||
}
|
||||
if (!paymentPassword) {
|
||||
setSendPaymentError("Please enter your wallet password");
|
||||
return;
|
||||
}
|
||||
const fee = await getFee('PAYMENT')
|
||||
|
||||
await show({
|
||||
message: `Would you like to transfer ${Number(paymentAmount)} QORT?` ,
|
||||
paymentFee: fee.fee + ' QORT'
|
||||
})
|
||||
setIsLoading(true);
|
||||
window
|
||||
.sendMessage("sendCoin", {
|
||||
amount: Number(paymentAmount),
|
||||
receiver: paymentTo.trim(),
|
||||
password: paymentPassword,
|
||||
})
|
||||
.then((response) => {
|
||||
if (response?.error) {
|
||||
setSendPaymentError(response.error);
|
||||
} else {
|
||||
setIsOpenSendQort(false);
|
||||
setIsOpenSendQortSuccess(true);
|
||||
}
|
||||
setIsLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to send coin:", error);
|
||||
setIsLoading(false);
|
||||
});
|
||||
} catch (error) {
|
||||
// error
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const clearAllStates = () => {
|
||||
setRequestConnection(null);
|
||||
@ -2119,94 +2077,12 @@ function App() {
|
||||
/>
|
||||
</Box>
|
||||
<Spacer height="35px" />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
}}
|
||||
>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "start",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Transfer QORT
|
||||
</TextP>
|
||||
<Spacer height="35px" />
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "start",
|
||||
lineHeight: "16px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 600,
|
||||
color: "rgba(255, 255, 255, 0.5)",
|
||||
}}
|
||||
>
|
||||
Balance:
|
||||
</TextP>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "start",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{balance?.toFixed(2)} QORT
|
||||
</TextP>
|
||||
</Box>
|
||||
<Spacer height="35px" />
|
||||
|
||||
<Box>
|
||||
<CustomLabel htmlFor="standard-adornment-name">To</CustomLabel>
|
||||
<Spacer height="5px" />
|
||||
<CustomInput
|
||||
id="standard-adornment-name"
|
||||
value={paymentTo}
|
||||
onChange={(e) => setPaymentTo(e.target.value)}
|
||||
autoComplete="off"
|
||||
<QortPayment balance={balance} show={show} onSuccess={()=> {
|
||||
setIsOpenSendQort(false);
|
||||
setIsOpenSendQortSuccess(true);
|
||||
}}
|
||||
defaultPaymentTo={paymentTo}
|
||||
/>
|
||||
<Spacer height="6px" />
|
||||
<CustomLabel htmlFor="standard-adornment-amount">
|
||||
Amount
|
||||
</CustomLabel>
|
||||
<Spacer height="5px" />
|
||||
<BoundedNumericTextField
|
||||
value={paymentAmount}
|
||||
minValue={0}
|
||||
maxValue={+balance}
|
||||
allowDecimals={true}
|
||||
initialValue={'0'}
|
||||
allowNegatives={false}
|
||||
afterChange={(e: string) => setPaymentAmount(+e)}
|
||||
/>
|
||||
<Spacer height="6px" />
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
Confirm Wallet Password
|
||||
</CustomLabel>
|
||||
<Spacer height="5px" />
|
||||
<PasswordField
|
||||
id="standard-adornment-password"
|
||||
value={paymentPassword}
|
||||
onChange={(e) => setPaymentPassword(e.target.value)}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Box>
|
||||
<Spacer height="10px" />
|
||||
<ErrorText>{sendPaymentError}</ErrorText>
|
||||
{/* <Typography>{sendPaymentSuccess}</Typography> */}
|
||||
<Spacer height="25px" />
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
sendCoinFunc();
|
||||
}}
|
||||
>
|
||||
Send
|
||||
</CustomButton>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
|
||||
@ -239,6 +239,18 @@ export const listOfAllQortalRequests = [
|
||||
'SEARCH_TRANSACTIONS',
|
||||
'GET_PRICE',
|
||||
'SHOW_ACTIONS',
|
||||
'REGISTER_NAME',
|
||||
'UPDATE_NAME',
|
||||
'LEAVE_GROUP',
|
||||
'INVITE_TO_GROUP',
|
||||
'KICK_FROM_GROUP',
|
||||
'BAN_FROM_GROUP',
|
||||
'CANCEL_GROUP_BAN',
|
||||
'ADD_GROUP_ADMIN',
|
||||
'REMOVE_GROUP_ADMIN',
|
||||
'DECRYPT_AESGCM',
|
||||
'CANCEL_GROUP_INVITE',
|
||||
'CREATE_GROUP',
|
||||
'GET_USER_WALLET_TRANSACTIONS',
|
||||
'GET_NODE_INFO',
|
||||
'GET_NODE_STATUS'
|
||||
@ -297,7 +309,6 @@ export const UIQortalRequests = [
|
||||
'GET_NODE_INFO',
|
||||
'GET_NODE_STATUS'
|
||||
];
|
||||
// TODO listOfAllQortalRequests
|
||||
|
||||
|
||||
|
||||
|
||||
167
src/components/QortPayment.tsx
Normal file
167
src/components/QortPayment.tsx
Normal file
@ -0,0 +1,167 @@
|
||||
import { Box, CircularProgress } from '@mui/material';
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { CustomButton, CustomInput, CustomLabel, TextP } from '../App-styles';
|
||||
import { Spacer } from '../common/Spacer';
|
||||
import BoundedNumericTextField from '../common/BoundedNumericTextField';
|
||||
import { PasswordField } from './PasswordField/PasswordField';
|
||||
import { ErrorText } from './ErrorText/ErrorText';
|
||||
import { getFee } from '../background';
|
||||
|
||||
export const QortPayment = ({balance, show, onSuccess, defaultPaymentTo}) => {
|
||||
const [paymentTo, setPaymentTo] = useState<string>(defaultPaymentTo);
|
||||
const [paymentAmount, setPaymentAmount] = useState<number>(0);
|
||||
const [paymentPassword, setPaymentPassword] = useState<string>("");
|
||||
const [sendPaymentError, setSendPaymentError] = useState<string>("");
|
||||
const [sendPaymentSuccess, setSendPaymentSuccess] = useState<string>("");
|
||||
const [isLoadingSendCoin, setIsLoadingSendCoin] = useState<boolean>(false);
|
||||
|
||||
|
||||
|
||||
const sendCoinFunc = async() => {
|
||||
try {
|
||||
setSendPaymentError("");
|
||||
setSendPaymentSuccess("");
|
||||
if (!paymentTo) {
|
||||
setSendPaymentError("Please enter a recipient");
|
||||
return;
|
||||
}
|
||||
if (!paymentAmount) {
|
||||
setSendPaymentError("Please enter an amount greater than 0");
|
||||
return;
|
||||
}
|
||||
if (!paymentPassword) {
|
||||
setSendPaymentError("Please enter your wallet password");
|
||||
return;
|
||||
}
|
||||
const fee = await getFee('PAYMENT')
|
||||
|
||||
await show({
|
||||
message: `Would you like to transfer ${Number(paymentAmount)} QORT?` ,
|
||||
paymentFee: fee.fee + ' QORT'
|
||||
})
|
||||
setIsLoadingSendCoin(true);
|
||||
window
|
||||
.sendMessage("sendCoin", {
|
||||
amount: Number(paymentAmount),
|
||||
receiver: paymentTo.trim(),
|
||||
password: paymentPassword,
|
||||
})
|
||||
.then((response) => {
|
||||
if (response?.error) {
|
||||
setSendPaymentError(response.error);
|
||||
} else {
|
||||
onSuccess()
|
||||
|
||||
}
|
||||
setIsLoadingSendCoin(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to send coin:", error);
|
||||
setIsLoadingSendCoin(false);
|
||||
});
|
||||
} catch (error) {
|
||||
// error
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
}}
|
||||
>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "start",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Transfer QORT
|
||||
</TextP>
|
||||
<Spacer height="35px" />
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "start",
|
||||
lineHeight: "16px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 600,
|
||||
color: "rgba(255, 255, 255, 0.5)",
|
||||
}}
|
||||
>
|
||||
Balance:
|
||||
</TextP>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "start",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{balance?.toFixed(2)} QORT
|
||||
</TextP>
|
||||
</Box>
|
||||
<Spacer height="35px" />
|
||||
|
||||
<Box>
|
||||
<CustomLabel htmlFor="standard-adornment-name">To</CustomLabel>
|
||||
<Spacer height="5px" />
|
||||
<CustomInput
|
||||
id="standard-adornment-name"
|
||||
value={paymentTo}
|
||||
onChange={(e) => setPaymentTo(e.target.value)}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<Spacer height="6px" />
|
||||
<CustomLabel htmlFor="standard-adornment-amount">
|
||||
Amount
|
||||
</CustomLabel>
|
||||
<Spacer height="5px" />
|
||||
<BoundedNumericTextField
|
||||
value={paymentAmount}
|
||||
minValue={0}
|
||||
maxValue={+balance}
|
||||
allowDecimals={true}
|
||||
initialValue={'0'}
|
||||
allowNegatives={false}
|
||||
afterChange={(e: string) => setPaymentAmount(+e)}
|
||||
/>
|
||||
<Spacer height="6px" />
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
Confirm Wallet Password
|
||||
</CustomLabel>
|
||||
<Spacer height="5px" />
|
||||
<PasswordField
|
||||
id="standard-adornment-password"
|
||||
value={paymentPassword}
|
||||
onChange={(e) => setPaymentPassword(e.target.value)}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Box>
|
||||
<Spacer height="10px" />
|
||||
<ErrorText>{sendPaymentError}</ErrorText>
|
||||
{/* <Typography>{sendPaymentSuccess}</Typography> */}
|
||||
<Spacer height="25px" />
|
||||
<CustomButton
|
||||
sx={{
|
||||
cursor: isLoadingSendCoin ? 'default' : 'pointer'
|
||||
}}
|
||||
onClick={() => {
|
||||
if(isLoadingSendCoin) return
|
||||
sendCoinFunc();
|
||||
}}
|
||||
>
|
||||
{isLoadingSendCoin && (
|
||||
<CircularProgress size={16} sx={{
|
||||
color: 'white'
|
||||
}} />
|
||||
)}
|
||||
Send
|
||||
</CustomButton>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user