[#300] feat: keep socket open on closed button

react/lib/components/PayButton/PayButton.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 
 import { Theme, ThemeName, ThemeProvider, useTheme } from '../../themes';
 import Button, { ButtonProps } from '../Button/Button';
+import { Socket } from 'socket.io-client';
 
 import {
   Transaction,
@@ -14,9 +15,13 @@ import {
   CurrencyObject,
   generatePaymentId,
   getCurrencyObject,
-  isPropsTrue
+  isPropsTrue,
+  setupAltpaymentSocket,
+  setupTxsSocket,
+  CryptoCurrency
 } from '../../util';
 import { PaymentDialog } from '../PaymentDialog';
+import { AltpaymentCoin, AltpaymentError, AltpaymentPair, AltpaymentShift } from '../../altpayment';
 export interface PayButtonProps extends ButtonProps {
   to: string;
   amount?: number | string;
@@ -55,10 +60,20 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
   const [disabled, setDisabled] = useState(false);
   const [errorMsg, setErrorMsg] = useState('');
   const [amount, setAmount] = useState(props.amount);
+  const [txsSocket, setTxsSocket] = useState<Socket | undefined>(undefined);
+  const [altpaymentSocket, setAltpaymentSocket] = useState<Socket | undefined>(undefined);
+  const [useAltpayment, setUseAltpayment] = useState(false);
+  const [coins, setCoins] = useState<AltpaymentCoin[]>([]);
+  const [loadingPair, setLoadingPair] = useState<boolean>(false);
+  const [coinPair, setCoinPair] = useState<AltpaymentPair | undefined>();
+  const [loadingShift, setLoadingShift] = useState(false);
+  const [altpaymentShift, setAltpaymentShift] = useState<AltpaymentShift | undefined>();
+  const [altpaymentError, setAltpaymentError] = useState<AltpaymentError | undefined>(undefined);
 
   const [currencyObj, setCurrencyObj] = useState<CurrencyObject | undefined>();
   const [cryptoAmount, setCryptoAmount] = useState<string>();
   const [price, setPrice] = useState(0);
+  const [newTxs, setNewTxs] = useState<Transaction[] | undefined>();
   const priceRef = useRef<number>(price);
   const cryptoAmountRef = useRef<string | undefined>(cryptoAmount);
 
@@ -90,6 +105,9 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
   } = Object.assign({}, PayButton.defaultProps, props);
 
   const [paymentId] = useState(!disablePaymentId ? generatePaymentId(8) : undefined);
+  const [addressType, setAddressType] = useState<CryptoCurrency>(
+    getCurrencyTypeFromAddress(to),
+  );
 
   useEffect(() => {
     priceRef.current = price;
@@ -154,6 +172,61 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
     }
   }, [to]);
 
+  useEffect(() => {
+    if (dialogOpen === false) {
+      return
+    }
+    (async () => {
+    if (txsSocket === undefined) {
+      const expectedAmount = currencyObj ? currencyObj?.float : undefined
+      await setupTxsSocket({
+        address: to,
+        txsSocket,
+        apiBaseUrl,
+        wsBaseUrl,
+        setTxsSocket,
+        setNewTxs,
+        setDialogOpen,
+        checkSuccessInfo: {
+          currency,
+          price,
+          randomSatoshis: randomSatoshis ?? false,
+          disablePaymentId,
+          expectedAmount,
+          expectedOpReturn: opReturn,
+          expectedPaymentId: paymentId,
+          currencyObj,
+        }
+      })
+    }
+    if (altpaymentSocket === undefined && useAltpayment) {
+      await setupAltpaymentSocket({
+        addressType,
+        altpaymentSocket,
+        wsBaseUrl,
+        setAltpaymentSocket,
+        setCoins,
+        setCoinPair,
+        setLoadingPair,
+        setAltpaymentShift,
+        setLoadingShift,
+        setAltpaymentError,
+      })
+    }
+    })()
+
+    return () => {
+      if (txsSocket !== undefined) {
+        txsSocket.disconnect();
+        setTxsSocket(undefined);
+      }
+      if (altpaymentSocket !== undefined) {
+        altpaymentSocket.disconnect();
+        setAltpaymentSocket(undefined);
+      }
+    }
+  }, [dialogOpen, useAltpayment]);
+
   useEffect(() => {
     if (dialogOpen === false && props.amount && currency) {
       const obj = getCurrencyObject(
@@ -236,13 +309,36 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
         editable={editable}
         goalAmount={goalAmount}
         dialogOpen={dialogOpen}
+        setDialogOpen={setDialogOpen}
         onClose={handleCloseDialog}
         wsBaseUrl={wsBaseUrl}
         apiBaseUrl={apiBaseUrl}
         hoverText={hoverText}
         disableAltpayment={disableAltpayment}
         contributionOffset={contributionOffset}
         autoClose={autoClose}
+        useAltpayment={useAltpayment}
+        setUseAltpayment={setUseAltpayment}
+        setTxsSocket={setTxsSocket}
+        txsSocket={txsSocket}
+        setAltpaymentSocket={setAltpaymentSocket}
+        altpaymentSocket={altpaymentSocket}
+        setCoins={setCoins}
+        coins={coins}
+        setCoinPair={setCoinPair}
+        coinPair={coinPair}
+        setLoadingPair={setLoadingPair}
+        loadingPair={loadingPair}
+        setAltpaymentShift={setAltpaymentShift}
+        altpaymentShift={altpaymentShift}
+        setLoadingShift={setLoadingShift}
+        loadingShift={loadingShift}
+        setAltpaymentError={setAltpaymentError}
+        altpaymentError={altpaymentError}
+        addressType={addressType}
+        setAddressType={setAddressType}
+        setNewTxs={setNewTxs}
+        newTxs={newTxs}
         disableSound={disableSound}
         transactionText={transactionText}
       />

react/lib/components/PaymentDialog/PaymentDialog.tsx

@@ -4,6 +4,8 @@ import { Theme, ThemeName, ThemeProvider, useTheme } from '../../themes';
 import Button, { ButtonProps } from '../Button/Button';
 import { WidgetContainer } from '../Widget/WidgetContainer';
 import { Currency, CurrencyObject, Transaction, isPropsTrue, isValidCashAddress, isValidXecAddress } from '../../util';
+import { Socket } from 'socket.io-client';
+import { AltpaymentCoin, AltpaymentError, AltpaymentPair, AltpaymentShift } from '../../altpayment';
 
 export interface PaymentDialogProps extends ButtonProps {
   to: string;
@@ -26,6 +28,7 @@ export interface PaymentDialogProps extends ButtonProps {
   disableEnforceFocus?: boolean;
   editable?: boolean;
   dialogOpen: boolean;
+  setDialogOpen: Function;
   disableScrollLock?: boolean;
   active?: boolean;
   container?: HTMLElement;
@@ -35,9 +38,31 @@ export interface PaymentDialogProps extends ButtonProps {
   wsBaseUrl?: string;
   apiBaseUrl?: string;
   disableAltpayment?: boolean;
-  disableSound?: boolean;
+  contributionOffset?: number;
+  useAltpayment: boolean
+  setUseAltpayment: Function;
+  txsSocket?: Socket;
+  setTxsSocket: Function;
+  altpaymentSocket?: Socket;
+  setAltpaymentSocket: Function;
+  setCoins: Function;
+  coins: AltpaymentCoin[];
+  setCoinPair: Function;
+  coinPair?: AltpaymentPair;
+  setLoadingPair: Function;
+  loadingPair: boolean;
+  setAltpaymentShift: Function;
+  altpaymentShift?: AltpaymentShift;
+  setLoadingShift: Function;
+  loadingShift: boolean;
+  setAltpaymentError: Function;
+  altpaymentError?: AltpaymentError;
+  addressType: Currency,
+  setAddressType: Function,
+  setNewTxs: Function,
+  newTxs?: Transaction[]
   autoClose?: boolean;
-  contributionOffset?:number;
+  disableSound?: boolean;
   transactionText?: string
 }
 
@@ -70,13 +95,36 @@ export const PaymentDialog = (
     disableEnforceFocus,
     editable,
     dialogOpen,
+    setDialogOpen,
     container,
     wsBaseUrl,
     apiBaseUrl,
     hoverText,
     disableAltpayment,
     contributionOffset,
     autoClose,
+    useAltpayment,
+    setUseAltpayment,
+    setTxsSocket,
+    txsSocket,
+    setAltpaymentSocket,
+    altpaymentSocket,
+    setCoins,
+    coins,
+    setCoinPair,
+    coinPair,
+    setLoadingPair,
+    loadingPair,
+    setAltpaymentShift,
+    altpaymentShift,
+    setLoadingShift,
+    loadingShift,
+    setAltpaymentError,
+    altpaymentError,
+    addressType,
+    newTxs,
+    setNewTxs,
+    setAddressType,
     disableSound,
     transactionText,
   } = Object.assign({}, PaymentDialog.defaultProps, props);
@@ -86,6 +134,9 @@ export const PaymentDialog = (
     setSuccess(false);
   };
   const handleSuccess = (transaction: Transaction): void => {
+    if (dialogOpen === false) {
+      setDialogOpen(true)
+    }
     setSuccess(true);
     onSuccess?.(transaction);
     setTimeout(() => {
@@ -131,6 +182,7 @@ export const PaymentDialog = (
         transitionDuration={{ enter: 300, exit: 300 }}
       >
         <WidgetContainer
+          isChild={true}
           ButtonComponent={ButtonComponent}
           active={dialogOpen}
           to={to}
@@ -158,6 +210,28 @@ export const PaymentDialog = (
           hoverText={hoverText}
           disableAltpayment={disableAltpayment}
           contributionOffset={contributionOffset}
+          useAltpayment={useAltpayment}
+          setUseAltpayment={setUseAltpayment}
+          setTxsSocket={setTxsSocket}
+          txsSocket={txsSocket}
+          setAltpaymentSocket={setAltpaymentSocket}
+          altpaymentSocket={altpaymentSocket}
+          setCoins={setCoins}
+          coins={coins}
+          setCoinPair={setCoinPair}
+          coinPair={coinPair}
+          setLoadingPair={setLoadingPair}
+          loadingPair={loadingPair}
+          setAltpaymentShift={setAltpaymentShift}
+          altpaymentShift={altpaymentShift}
+          setLoadingShift={setLoadingShift}
+          loadingShift={loadingShift}
+          setAltpaymentError={setAltpaymentError}
+          altpaymentError={altpaymentError}
+          addressType={addressType}
+          setAddressType={setAddressType}
+          setNewTxs={setNewTxs}
+          newTxs={newTxs}
           disableSound={disableSound}
           transactionText={transactionText}
           foot={success && (