mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-04-23 19:37:52 +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 { UserLookup } from "./components/UserLookup.tsx/UserLookup";
|
||||||
import { RegisterName } from "./components/RegisterName";
|
import { RegisterName } from "./components/RegisterName";
|
||||||
import { BuyQortInformation } from "./components/BuyQortInformation";
|
import { BuyQortInformation } from "./components/BuyQortInformation";
|
||||||
|
import { QortPayment } from "./components/QortPayment";
|
||||||
|
|
||||||
type extStates =
|
type extStates =
|
||||||
| "not-authenticated"
|
| "not-authenticated"
|
||||||
@ -351,6 +352,8 @@ function App() {
|
|||||||
const [authenticatePassword, setAuthenticatePassword] = useState<string>("");
|
const [authenticatePassword, setAuthenticatePassword] = useState<string>("");
|
||||||
const [sendqortState, setSendqortState] = useState<any>(null);
|
const [sendqortState, setSendqortState] = useState<any>(null);
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||||
|
const [isLoadingSendCoin, setIsLoadingSendCoin] = useState<boolean>(false);
|
||||||
|
|
||||||
const [
|
const [
|
||||||
walletToBeDownloadedPasswordConfirm,
|
walletToBeDownloadedPasswordConfirm,
|
||||||
setWalletToBeDownloadedPasswordConfirm,
|
setWalletToBeDownloadedPasswordConfirm,
|
||||||
@ -775,52 +778,7 @@ function App() {
|
|||||||
setLtcBalanceLoading(false);
|
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 = () => {
|
const clearAllStates = () => {
|
||||||
setRequestConnection(null);
|
setRequestConnection(null);
|
||||||
@ -2119,94 +2077,12 @@ function App() {
|
|||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
<Spacer height="35px" />
|
<Spacer height="35px" />
|
||||||
<Box
|
<QortPayment balance={balance} show={show} onSuccess={()=> {
|
||||||
sx={{
|
setIsOpenSendQort(false);
|
||||||
display: "flex",
|
setIsOpenSendQortSuccess(true);
|
||||||
flexDirection: "column",
|
}}
|
||||||
alignItems: "flex-start",
|
defaultPaymentTo={paymentTo}
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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
|
|
||||||
onClick={() => {
|
|
||||||
sendCoinFunc();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Send
|
|
||||||
</CustomButton>
|
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@ -239,6 +239,18 @@ export const listOfAllQortalRequests = [
|
|||||||
'SEARCH_TRANSACTIONS',
|
'SEARCH_TRANSACTIONS',
|
||||||
'GET_PRICE',
|
'GET_PRICE',
|
||||||
'SHOW_ACTIONS',
|
'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_USER_WALLET_TRANSACTIONS',
|
||||||
'GET_NODE_INFO',
|
'GET_NODE_INFO',
|
||||||
'GET_NODE_STATUS'
|
'GET_NODE_STATUS'
|
||||||
@ -297,7 +309,6 @@ export const UIQortalRequests = [
|
|||||||
'GET_NODE_INFO',
|
'GET_NODE_INFO',
|
||||||
'GET_NODE_STATUS'
|
'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