From 5aad0c88ad7593386def7404628ba321e5918ca7 Mon Sep 17 00:00:00 2001 From: David Klakurka Date: Wed, 10 Sep 2025 21:53:40 -0700 Subject: [PATCH 1/5] defaultProps no longer assigned. --- paybutton/yarn.lock | 50 +----- react/lib/components/BarChart/BarChart.tsx | 12 +- react/lib/components/Button/Button.tsx | 31 ++-- react/lib/components/PayButton/PayButton.tsx | 97 +++++------- .../PaymentDialog/PaymentDialog.tsx | 146 ++++++++---------- react/lib/components/Widget/Widget.tsx | 16 +- react/yarn.lock | 20 +-- 7 files changed, 147 insertions(+), 225 deletions(-) diff --git a/paybutton/yarn.lock b/paybutton/yarn.lock index 34329b71..fa3cca15 100644 --- a/paybutton/yarn.lock +++ b/paybutton/yarn.lock @@ -1191,32 +1191,6 @@ call-bound@^1.0.3, call-bound@^1.0.4: call-bind-apply-helpers "^1.0.2" get-intrinsic "^1.3.0" -call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6" - integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ== - dependencies: - es-errors "^1.3.0" - function-bind "^1.1.2" - -call-bind@^1.0.8: - version "1.0.8" - resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c" - integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww== - dependencies: - call-bind-apply-helpers "^1.0.0" - es-define-property "^1.0.0" - get-intrinsic "^1.2.4" - set-function-length "^1.2.2" - -call-bound@^1.0.3, call-bound@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.4.tgz#238de935d2a2a692928c538c7ccfa91067fd062a" - integrity sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg== - dependencies: - call-bind-apply-helpers "^1.0.2" - get-intrinsic "^1.3.0" - callsites@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" @@ -1279,14 +1253,14 @@ chokidar@^3.5.0: optionalDependencies: fsevents "~2.3.2" -chronik-client-cashtokens@^3.1.1-rc0: - version "3.1.1-rc0" - resolved "https://registry.yarnpkg.com/chronik-client-cashtokens/-/chronik-client-cashtokens-3.1.1-rc0.tgz#e5e4a3538e8010b70623974a731bf2712506c5e3" - integrity sha512-jnFnog+hVd9u8bik+sf2SRVwr4ETN8Gnq6HpFRdPkM5UtMu7boCjQVrKHOXKb9AyaCFKUnreK9mBEL/l9dAjMg== +chronik-client-cashtokens@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/chronik-client-cashtokens/-/chronik-client-cashtokens-3.4.0.tgz#0c958c72c119867d924c0c446e0765381fd1b792" + integrity sha512-D2G8j+dhOlG0wr+DtgnMHHwCYzpa/XCzNvHhkkAfOOL3OaAoXONMxhbqx+N1y7B0L5ot69y8z/8KOEz9ARL3hg== dependencies: "@types/ws" "^8.2.1" axios "^1.6.3" - ecashaddrjs "file:../../../../../Library/Caches/Yarn/v6/npm-chronik-client-cashtokens-3.1.1-rc0-e5e4a3538e8010b70623974a731bf2712506c5e3-integrity/node_modules/ecashaddrjs" + ecashaddrjs "2.0.0" isomorphic-ws "^4.0.1" protobufjs "^6.8.8" ws "^8.3.0" @@ -1531,7 +1505,7 @@ dunder-proto@^1.0.1: es-errors "^1.3.0" gopd "^1.2.0" -ecashaddrjs@^1.0.7, ecashaddrjs@^2.0.0, "ecashaddrjs@file:../../../../../Library/Caches/Yarn/v6/npm-chronik-client-cashtokens-3.1.1-rc0-e5e4a3538e8010b70623974a731bf2712506c5e3-integrity/node_modules/ecashaddrjs": +ecashaddrjs@2.0.0, ecashaddrjs@^1.0.7, ecashaddrjs@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ecashaddrjs/-/ecashaddrjs-2.0.0.tgz#d45ede7fb6168815dbcf664b8e0a6872e485d874" integrity sha512-EvK1V4D3+nIEoD0ggy/b0F4lW39/72R9aOs/scm6kxMVuXu16btc+H74eQv7okNfXaQWKgolEekZkQ6wfcMMLw== @@ -1825,11 +1799,6 @@ gopd@^1.0.1, gopd@^1.2.0: resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1" integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg== -gopd@^1.0.1, gopd@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1" - integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg== - graceful-fs@^4.2.9: version "4.2.11" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3" @@ -1880,13 +1849,6 @@ hasown@^2.0.2: dependencies: function-bind "^1.1.2" -hasown@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003" - integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ== - dependencies: - function-bind "^1.1.2" - hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" diff --git a/react/lib/components/BarChart/BarChart.tsx b/react/lib/components/BarChart/BarChart.tsx index 0998679c..3f268290 100644 --- a/react/lib/components/BarChart/BarChart.tsx +++ b/react/lib/components/BarChart/BarChart.tsx @@ -7,8 +7,11 @@ export interface BarChartProps { disabled: boolean; } -export const BarChart = (props: BarChartProps): React.ReactElement => { - const { value, color, disabled } = props; +export const BarChart = ({ + value = 34, + color = '#4bc846', + disabled, +}: BarChartProps): React.ReactElement => { const [barWidth, setBarWidth] = useState(0); @@ -52,9 +55,4 @@ export const BarChart = (props: BarChartProps): React.ReactElement => { ); }; -BarChart.defaultProps = { - value: 34, - color: '#4bc846', -}; - export default BarChart; diff --git a/react/lib/components/Button/Button.tsx b/react/lib/components/Button/Button.tsx index a0cdca36..60ef6e0c 100644 --- a/react/lib/components/Button/Button.tsx +++ b/react/lib/components/Button/Button.tsx @@ -123,19 +123,23 @@ const useStyles = makeStyles({ }, }); -export const Button = (props: ButtonProps): React.ReactElement => { - const { animation, text, hoverText, disabled, size, sizeScaleAlreadyApplied } = Object.assign( - {}, - Button.defaultProps, - props, - ); +export const Button = ({ + animation = 'slide', + text = 'Donate', + hoverText = 'Send Payment', + disabled = false, + size = 'medium', + sizeScaleAlreadyApplied = false, + onClick, + theme: themeProp, +}: ButtonProps): React.ReactElement => { const [hovering, setHovering] = useState(false); const [transitioning, setTransitioning] = useState(false); const timer = useRef(); const buttonRef = useRef(null); - const theme = useTheme(props.theme); + const theme = useTheme(themeProp); const styleProps: StyleProps = { animation, theme, size, sizeScaleAlreadyApplied }; const classes = useStyles(styleProps); @@ -172,7 +176,7 @@ export const Button = (props: ButtonProps): React.ReactElement => { { ); }; -const buttonDefaultProps: ButtonProps = { - animation: 'slide', - text: 'Donate', - hoverText: 'Send Payment', - disabled: false, - size: 'medium', - sizeScaleAlreadyApplied: false, -}; - -Button.defaultProps = buttonDefaultProps; - export default Button; diff --git a/react/lib/components/PayButton/PayButton.tsx b/react/lib/components/PayButton/PayButton.tsx index f29452d8..b4517fa3 100644 --- a/react/lib/components/PayButton/PayButton.tsx +++ b/react/lib/components/PayButton/PayButton.tsx @@ -58,11 +58,41 @@ export interface PayButtonProps extends ButtonProps { sizeScaleAlreadyApplied: boolean; } -export const PayButton = (props: PayButtonProps): React.ReactElement => { +export const PayButton = ({ + to, + amount: initialAmount, + opReturn, + disablePaymentId, + currency = '' as Currency, + theme: themeProp, + text, + hoverText, + successText = 'Thank you!', + animation = 'slide', + randomSatoshis = false, + hideToasts = false, + disabled: disabledProp = false, + goalAmount, + disableEnforceFocus = false, + editable = false, + onSuccess, + onTransaction, + onOpen, + onClose, + wsBaseUrl, + apiBaseUrl, + transactionText, + disableSound, + autoClose = false, + disableAltpayment, + contributionOffset, + size = 'md', + sizeScaleAlreadyApplied = false, +}: PayButtonProps): React.ReactElement => { const [dialogOpen, setDialogOpen] = useState(false); const [disabled, setDisabled] = useState(false); const [errorMsg, setErrorMsg] = useState(''); - const [amount, setAmount] = useState(props.amount); + const [amount, setAmount] = useState(initialAmount); const [txsSocket, setTxsSocket] = useState(undefined); const [altpaymentSocket, setAltpaymentSocket] = useState(undefined); const [useAltpayment, setUseAltpayment] = useState(false); @@ -80,34 +110,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => { const priceRef = useRef(price); const cryptoAmountRef = useRef(cryptoAmount); - const { - to, - opReturn, - disablePaymentId, - currency = '' as Currency, - text, - hoverText, - successText, - animation, - randomSatoshis, - hideToasts, - onSuccess, - onTransaction, - onOpen, - onClose, - goalAmount, - disableEnforceFocus, - editable, - wsBaseUrl, - apiBaseUrl, - disableAltpayment, - contributionOffset, - autoClose, - disableSound, - transactionText, - size, - sizeScaleAlreadyApplied - } = Object.assign({}, PayButton.defaultProps, props); + const [paymentId] = useState(!disablePaymentId ? generatePaymentId(8) : undefined); const [addressType, setAddressType] = useState( @@ -147,14 +150,14 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => { }; useEffect(() => { - setAmount(props.amount); - }, [props.amount]); + setAmount(initialAmount); + }, [initialAmount]); useEffect(() => { - const invalidAmount = props.amount !== undefined && isNaN(+props.amount); + const invalidAmount = initialAmount !== undefined && isNaN(+initialAmount); if (to !== undefined) { - setDisabled(isPropsTrue(props.disabled)); + setDisabled(isPropsTrue(disabledProp)); setErrorMsg(''); } else if (invalidAmount) { setDisabled(true); @@ -163,7 +166,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => { setDisabled(true); setErrorMsg('Invalid Recipient'); } - }, [to, props.amount, props.disabled]); + }, [to, initialAmount, disabledProp]); useEffect(() => { if (!to) { @@ -229,9 +232,9 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => { }, [dialogOpen, useAltpayment]); useEffect(() => { - if (dialogOpen === false && props.amount && currency) { + if (dialogOpen === false && initialAmount && currency) { const obj = getCurrencyObject( - Number(props.amount), + Number(initialAmount), currency, randomSatoshis, ); @@ -240,7 +243,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => { setCurrencyObj(obj); }, 300); } - }, [dialogOpen, props.amount, currency, randomSatoshis]); + }, [dialogOpen, initialAmount, currency, randomSatoshis]); const getPrice = useCallback( async () => { @@ -272,7 +275,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => { } }, [price, currencyObj, amount, currency, randomSatoshis, to]); - const theme = useTheme(props.theme, isValidXecAddress(to ?? '')); + const theme = useTheme(themeProp, isValidXecAddress(to ?? '')); const ButtonComponent: React.FC = ( props: ButtonProps, @@ -361,20 +364,4 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => { ); }; -const payButtonDefaultProps: PayButtonProps = { - to: '', - animation: 'slide', - hideToasts: false, - randomSatoshis: false, - successText: 'Thank you!', - disableEnforceFocus: false, - disabled: false, - editable: false, - autoClose: false, - size: 'md', - sizeScaleAlreadyApplied: false, -}; - -PayButton.defaultProps = payButtonDefaultProps; - export default PayButton; diff --git a/react/lib/components/PaymentDialog/PaymentDialog.tsx b/react/lib/components/PaymentDialog/PaymentDialog.tsx index 1dba018d..eae5a5a7 100644 --- a/react/lib/components/PaymentDialog/PaymentDialog.tsx +++ b/react/lib/components/PaymentDialog/PaymentDialog.tsx @@ -65,68 +65,68 @@ export interface PaymentDialogProps extends ButtonProps { transactionText?: string } -export const PaymentDialog = ( - props: PaymentDialogProps, -): React.ReactElement => { +export const PaymentDialog = ({ + to, + amount, + setAmount, + opReturn, + paymentId, + disablePaymentId, + currency, + currencyObj, + setCurrencyObj, + cryptoAmount, + price, + successText = 'Thank you!', + animation = 'slide', + randomSatoshis = false, + hideToasts = false, + onClose, + onSuccess, + onTransaction, + goalAmount, + disableEnforceFocus = false, + editable = false, + dialogOpen = true, + setDialogOpen, + container, + wsBaseUrl, + apiBaseUrl, + hoverText, + disableAltpayment, + contributionOffset, + autoClose = true, + useAltpayment, + setUseAltpayment, + setTxsSocket, + txsSocket, + setAltpaymentSocket, + altpaymentSocket, + setCoins, + coins, + setCoinPair, + coinPair, + setLoadingPair, + loadingPair, + setAltpaymentShift, + altpaymentShift, + setLoadingShift, + loadingShift, + setAltpaymentError, + altpaymentError, + addressType, + newTxs, + setNewTxs, + setAddressType, + disableSound, + transactionText, + disabled, + theme: themeProp, +}: PaymentDialogProps): React.ReactElement => { const [success, setSuccess] = useState(false); - const [disabled, setDisabled] = useState(false); + const [internalDisabled, setInternalDisabled] = useState(false); - const { - to, - amount, - setAmount, - opReturn, - paymentId, - disablePaymentId, - currency, - currencyObj, - setCurrencyObj, - cryptoAmount, - price, - successText, - animation, - randomSatoshis, - hideToasts, - onClose, - onSuccess, - onTransaction, - goalAmount, - 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); + const handleWidgetClose = (): void => { if (onClose) onClose(success, paymentId); @@ -148,19 +148,19 @@ export const PaymentDialog = ( const invalidAmount = amount !== undefined && isNaN(+amount); if (to !== undefined && (isValidCashAddress(to) || isValidXecAddress(to))) { - setDisabled(isPropsTrue(props.disabled)); + setInternalDisabled(isPropsTrue(disabled)); } else if (invalidAmount) { - setDisabled(true); + setInternalDisabled(true); } else { - setDisabled(true); + setInternalDisabled(true); } - }, [to, amount, props.disabled]); + }, [to, amount, disabled]); const ButtonComponent: React.FunctionComponent = ( props: ButtonProps, ): React.ReactElement =>