From 7f6834f0f106dd1226d48d3dcb22471e86a28153 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Thu, 6 Mar 2025 17:46:38 +0200
Subject: [PATCH] added  payment component

---
 src/App.tsx                                   | 142 +--------------
 .../Apps/useQortalMessageListener.tsx         |  13 +-
 src/components/QortPayment.tsx                | 167 ++++++++++++++++++
 3 files changed, 188 insertions(+), 134 deletions(-)
 create mode 100644 src/components/QortPayment.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 47b42f0..221b8cb 100644
--- a/src/App.tsx
+++ b/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>
       )}
 
diff --git a/src/components/Apps/useQortalMessageListener.tsx b/src/components/Apps/useQortalMessageListener.tsx
index e3f5c52..508d5bc 100644
--- a/src/components/Apps/useQortalMessageListener.tsx
+++ b/src/components/Apps/useQortalMessageListener.tsx
@@ -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
 
 
 
diff --git a/src/components/QortPayment.tsx b/src/components/QortPayment.tsx
new file mode 100644
index 0000000..6add9b2
--- /dev/null
+++ b/src/components/QortPayment.tsx
@@ -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>
+    </>
+  )
+}