refactor: add socket hook

react/lib/components/PayButton/PayButton.tsx

@@ -10,11 +10,11 @@ import {
   getCurrencyTypeFromAddress,
   isValidCashAddress,
   isValidXecAddress,
-  currencyObject
+  currencyObject,
+  getCurrencyObject,
+  generatePaymentId
 } from '../../util';
 import { PaymentDialog } from '../PaymentDialog/PaymentDialog';
-import { getCurrencyObject } from '../../util/satoshis';
-import { generatePaymentId } from '../../util/opReturn';
 
 export interface PayButtonProps extends ButtonProps {
   to: string;

react/lib/components/Widget/Widget.tsx

@@ -1,3 +1,5 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
 import {
   Box,
   CircularProgress,
@@ -7,37 +9,32 @@ import {
   TextField,
   Grid,
 } from '@material-ui/core';
-import React, { useEffect, useMemo, useState } from 'react';
+import PencilIcon from '../../assets/edit-pencil';
+
 import copy from 'copy-to-clipboard';
 import QRCode, { BaseQRCodeProps } from 'qrcode.react';
-import config from '../../config.json';
-
 import { Theme, ThemeName, ThemeProvider, useTheme } from '../../themes';
-import {
-  isValidCashAddress,
-  isValidXecAddress,
-  getCurrencyTypeFromAddress,
-} from '../../util/address';
-import { formatPrice } from '../../util/format';
 import { Button, animation } from '../Button/Button';
 import BarChart from '../BarChart/BarChart';
 
-import { getCurrencyObject } from '../../util/satoshis';
 import {
   currency,
   getAddressBalance,
-  getAddressDetails,
   isFiat,
   Transaction,
   getCashtabProviderStatus,
   cryptoCurrency,
   DECIMALS,
-  currencyObject
+  currencyObject,
+  getCurrencyTypeFromAddress,
+  encodeOpReturnProps,
+  formatPrice,
+  getCurrencyObject,
+  isValidCashAddress,
+  isValidXecAddress
 } from '../../util';
-import { setListener } from '../../util/socket';
-import PencilIcon from '../../assets/edit-pencil';
-import io, { Socket } from 'socket.io-client';
-import { encodeOpReturnProps } from '../../util/opReturn';
+import useAddressSocket from '../../hooks/socket';
+
 
 type QRCodeProps = BaseQRCodeProps & { renderAs: 'svg' };
 
@@ -164,10 +161,12 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
   const [errorMsg, setErrorMsg] = useState('');
   const [goalText, setGoalText] = useState('');
   const [goalPercent, setGoalPercent] = useState(0);
-  const [socket, setSocket] = useState<Socket | undefined>(undefined);
   const [addressType, setAddressType] = useState<cryptoCurrency>(
     getCurrencyTypeFromAddress(to),
   );
+
+  useAddressSocket(to, setNewTxs,apiBaseUrl ,wsBaseUrl);
+
   const [convertedCurrencyObj, setConvertedCurrencyObj] =
     useState<currencyObject | null>();
   const price = props.price ?? 0;
@@ -223,20 +222,6 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
   }, [price]);
   let prefixedAddress: string;
 
-  useEffect(() => {
-    (async (): Promise<void> => {
-      // subscribes address on paybutton server
-      void getAddressDetails(to, apiBaseUrl);
-      const newSocket = io(`${wsBaseUrl ?? config.wsBaseUrl}/addresses`, {
-        query: { addresses: [to] },
-      });
-      if (socket !== undefined) {
-        socket.disconnect();
-      }
-      setSocket(newSocket);
-      setListener(newSocket, setNewTxs);
-    })();
-  }, [to]);
 
   useEffect(() => {
     (async (): Promise<void> => {

react/lib/components/Widget/WidgetContainer.tsx

@@ -1,7 +1,4 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import Widget, { WidgetProps } from './Widget';
-import { useCustomSnackbar, withSnackbar } from '../../hooks/toast';
-import { useSoundEffects } from '../../hooks/sound';
 
 import {
   isCrypto,
@@ -18,6 +15,10 @@ import {
   isLessThanZero
 } from '../../util';
 
+import Widget, { WidgetProps } from './Widget';
+import { useCustomSnackbar, withSnackbar } from '../../hooks/toast';
+import { useSoundEffects } from '../../hooks/sound';
+
 export interface WidgetContainerProps
   extends Omit<WidgetProps, 'success' | 'setNewTxs' | 'setCurrencyObject'> {
   active?: boolean;

react/lib/hooks/socket.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import { apiBaseUrl, wsBaseUrl } from '../config.json';
+import { Socket } from 'socket.io-client';
+import { getAddressDetails, getSocket, setListener } from '../util';
+
+const useAddressSocket = (to: string, setNewTxs: Function, apiUrl?: string, wsUrl?: string) => {
+    const [socket, setSocket] = useState<Socket | undefined>(undefined);
+
+    useEffect(() => {
+        (async (): Promise<void> => {
+          // subscribes address on paybutton server
+          void getAddressDetails(to, apiUrl ?? apiBaseUrl);
+          const newSocket = getSocket(to, wsUrl ?? wsBaseUrl)
+          if (socket !== undefined) {
+            socket.disconnect();
+          }
+          setSocket(newSocket);
+          setListener(newSocket, setNewTxs);
+        })();
+      }, [to]);
+};
+
+export default useAddressSocket;

react/lib/util/socket.ts

@@ -1,7 +1,10 @@
-import { Socket } from 'socket.io-client';
+import { Socket, io } from 'socket.io-client';
 
 import { BroadcastTxData } from './types';
 
+import config from '../config.json';
+
+
 export const setListener = (socket: Socket, setNewTxs: Function): void => {
   socket.on('incoming-txs', (broadcastedTxData: BroadcastTxData) => {
     const unconfirmedTxs = broadcastedTxData.txs.filter(
@@ -15,3 +18,11 @@ export const setListener = (socket: Socket, setNewTxs: Function): void => {
     }
   });
 };
+
+export const getSocket = (to: string, wsBaseUrl?: string) => {
+  return io(`${wsBaseUrl ?? config.wsBaseUrl}/addresses`, {
+    query: { addresses: [to] },
+  });
+}
+
+export const SocketInterface = typeof Socket