feat: generate paymentId on server

Author: lissavxo

react/lib/components/PayButton/PayButton.tsx

@@ -13,14 +13,14 @@ import {
   isValidCashAddress,
   isValidXecAddress,
   CurrencyObject,
-  generatePaymentId,
   getCurrencyObject,
   isPropsTrue,
   setupAltpaymentSocket,
   setupChronikWebSocket,
   CryptoCurrency,
   ButtonSize
 } from '../../util';
+import { createPayment } from '../../util/api-client';
 import { PaymentDialog } from '../PaymentDialog';
 import { AltpaymentCoin, AltpaymentError, AltpaymentPair, AltpaymentShift } from '../../altpayment';
 export interface PayButtonProps extends ButtonProps {
@@ -109,11 +109,26 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
     sizeScaleAlreadyApplied
   } = Object.assign({}, PayButton.defaultProps, props);
 
-  const [paymentId] = useState(!disablePaymentId ? generatePaymentId(8) : undefined);
+  const [paymentId, setPaymentId] = useState<string | undefined>(undefined);
   const [addressType, setAddressType] = useState<CryptoCurrency>(
     getCurrencyTypeFromAddress(to),
   );
 
+  useEffect(() => {
+    const initializePaymentId = async () => {
+      if (!disablePaymentId && to) {
+        try {
+          const responsePaymentId = await createPayment(amount, to, apiBaseUrl);
+          setPaymentId(responsePaymentId);
+        } catch (error) {
+          console.error('Error creating payment ID:', error);
+        }
+      }
+    };
+
+    initializePaymentId();
+  }, [disablePaymentId, amount, to, apiBaseUrl]);
+
   useEffect(() => {
     priceRef.current = price;
   }, [price]);

react/lib/components/Widget/WidgetContainer.tsx

@@ -9,7 +9,6 @@ import {
   Currency,
   CurrencyObject,
   Transaction,
-  generatePaymentId,
   getCurrencyTypeFromAddress,
   isCrypto,
   isGreaterThanZero,
@@ -18,6 +17,7 @@ import {
   shouldTriggerOnSuccess,
   isPropsTrue,
 } from '../../util';
+import { createPayment } from '../../util/api-client';
 
 import Widget, { WidgetProps } from './Widget';
 
@@ -139,13 +139,23 @@ export const WidgetContainer: React.FunctionComponent<WidgetContainerProps> =
     const [thisPrice, setThisPrice] = useState(0);
     const [usdPrice, setUsdPrice] = useState(0);
     useEffect(() => {
-      if ((paymentId === undefined || paymentId === '') && !disablePaymentId) {
-        const newPaymentId = generatePaymentId(8);
-        setThisPaymentId(newPaymentId)
-      } else {
-        setThisPaymentId(paymentId)
-      }
-    }, [paymentId, disablePaymentId]);
+      const initializePaymentId = async () => {
+        if ((paymentId === undefined || paymentId === '') && !disablePaymentId) {
+          if (to) {
+            try {
+              const responsePaymentId = await createPayment(amount, to, apiBaseUrl);
+              setThisPaymentId(responsePaymentId);
+            } catch (error) {
+              console.error('Error creating payment ID:', error);
+            }
+          }
+        } else {
+          setThisPaymentId(paymentId);
+        }
+      };
+
+      initializePaymentId();
+    }, [paymentId, disablePaymentId, amount, to, apiBaseUrl]);
     const [success, setSuccess] = useState(false);
     const { enqueueSnackbar } = useSnackbar();
 

react/lib/util/api-client.ts

@@ -89,6 +89,20 @@ export const getTransactionDetails = async (
   return res.json();
 };
 
+export const createPayment = async (
+  amount: string | number | undefined,
+  address: string,
+  rootUrl = config.apiBaseUrl,
+): Promise<string> => {
+  const { data } = await axios.post(
+    `${rootUrl}/api/payments/paymentId`,
+    { amount, address }
+  );
+  return data.paymentId;
+  
+};
+
+
 export default {
   getAddressDetails,
   getTransactionDetails,