From 035a405fa59688b42affc5008fc970e716b0e424 Mon Sep 17 00:00:00 2001 From: lissavxo Date: Mon, 29 Apr 2024 21:37:08 -0300 Subject: [PATCH] refactor: add socket hook --- react/lib/components/PayButton/PayButton.tsx | 6 +-- react/lib/components/Widget/Widget.tsx | 47 +++++++------------ .../lib/components/Widget/WidgetContainer.tsx | 7 +-- react/lib/hooks/socket.ts | 23 +++++++++ react/lib/util/socket.ts | 13 ++++- 5 files changed, 58 insertions(+), 38 deletions(-) create mode 100644 react/lib/hooks/socket.ts diff --git a/react/lib/components/PayButton/PayButton.tsx b/react/lib/components/PayButton/PayButton.tsx index fb475602..0efb5159 100644 --- a/react/lib/components/PayButton/PayButton.tsx +++ b/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; diff --git a/react/lib/components/Widget/Widget.tsx b/react/lib/components/Widget/Widget.tsx index 49d7c65c..78506e11 100644 --- a/react/lib/components/Widget/Widget.tsx +++ b/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 = props => { const [errorMsg, setErrorMsg] = useState(''); const [goalText, setGoalText] = useState(''); const [goalPercent, setGoalPercent] = useState(0); - const [socket, setSocket] = useState(undefined); const [addressType, setAddressType] = useState( getCurrencyTypeFromAddress(to), ); + + useAddressSocket(to, setNewTxs,apiBaseUrl ,wsBaseUrl); + const [convertedCurrencyObj, setConvertedCurrencyObj] = useState(); const price = props.price ?? 0; @@ -223,20 +222,6 @@ export const Widget: React.FunctionComponent = props => { }, [price]); let prefixedAddress: string; - useEffect(() => { - (async (): Promise => { - // 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 => { diff --git a/react/lib/components/Widget/WidgetContainer.tsx b/react/lib/components/Widget/WidgetContainer.tsx index b719ac40..36de20a9 100644 --- a/react/lib/components/Widget/WidgetContainer.tsx +++ b/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 { active?: boolean; diff --git a/react/lib/hooks/socket.ts b/react/lib/hooks/socket.ts new file mode 100644 index 00000000..95bd89c0 --- /dev/null +++ b/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(undefined); + + useEffect(() => { + (async (): Promise => { + // 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; diff --git a/react/lib/util/socket.ts b/react/lib/util/socket.ts index c6f0f6ef..70ec21aa 100644 --- a/react/lib/util/socket.ts +++ b/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 \ No newline at end of file