Skip to content

defaultProps no longer assigned. #551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chedieck merged 7 commits into from
Oct 1, 2025
Merged

defaultProps no longer assigned. #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5aad0c8
defaultProps no longer assigned.
Klakurka Sep 11, 2025
abefdad
Update react/lib/components/BarChart/BarChart.tsx
Klakurka Sep 11, 2025
c0a6b65
Removed duplicate code.
Klakurka Sep 11, 2025
c979a2f
Merge branch 'master' into fix/defaultprops-warnings
chedieck Oct 1, 2025
4f23db5
fix: yarn.lock
chedieck Oct 1, 2025
0bf1830
Merge branch 'master' into fix/defaultprops-warnings
chedieck Oct 1, 2025
6eb7c76
fix: yarn.lock
chedieck Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
761 changes: 376 additions & 385 deletions paybutton/yarn.lock
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 8 additions & 10 deletions react/lib/components/BarChart/BarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@ import React, { useEffect, useState, CSSProperties } from 'react';
import { isPropsTrue } from '../../util';

export interface BarChartProps {
value: number;
color: string;
disabled: boolean;
value?: number;
color?: string;
disabled?: boolean;
}

export const BarChart = (props: BarChartProps): React.ReactElement => {
const { value, color, disabled } = props;
export const BarChart = ({
value = 34,
color = '#4bc846',
disabled = false,
}: BarChartProps): React.ReactElement => {
const [barWidth, setBarWidth] = useState(0);


Expand Down Expand Up @@ -52,9 +55,4 @@ export const BarChart = (props: BarChartProps): React.ReactElement => {
);
};

BarChart.defaultProps = {
value: 34,
color: '#4bc846',
};

export default BarChart;
31 changes: 12 additions & 19 deletions react/lib/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<number>();
const buttonRef = useRef<HTMLButtonElement>(null);

const theme = useTheme(props.theme);
const theme = useTheme(themeProp);
const styleProps: StyleProps = { animation, theme, size, sizeScaleAlreadyApplied };
const classes = useStyles(styleProps);

Expand Down Expand Up @@ -172,7 +176,7 @@ export const Button = (props: ButtonProps): React.ReactElement => {
<MuiButton
disabled={disabled}
className={classes.button}
onClick={props.onClick}
onClick={onClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
ref={buttonRef}
Expand All @@ -184,15 +188,4 @@ 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;
97 changes: 42 additions & 55 deletions react/lib/components/PayButton/PayButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Avoid '' as Currency; default to the address-derived crypto.

-  currency = '' as Currency,
+  currency = getCurrencyTypeFromAddress(to),

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In react/lib/components/PayButton/PayButton.tsx around line 66, the prop default
"currency = '' as Currency" should be removed and replaced by defaulting to the
address-derived crypto; determine the currency from the provided address (e.g.,
call the existing utility that maps address -> Currency or implement a small
helper like getCurrencyFromAddress(address)) and use that derived value as the
default when currency is undefined, or make currency optional and resolve it
inside the component by computing derivedCurrency = currency ??
getCurrencyFromAddress(address) before use.

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<Socket | undefined>(undefined);
const [altpaymentSocket, setAltpaymentSocket] = useState<Socket | undefined>(undefined);
const [useAltpayment, setUseAltpayment] = useState(false);
Expand All @@ -80,34 +110,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
const priceRef = useRef<number>(price);
const cryptoAmountRef = useRef<string | undefined>(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<CryptoCurrency>(
Expand Down Expand Up @@ -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);
Expand All @@ -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) {
Expand Down Expand Up @@ -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,
);
Expand All @@ -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 () => {
Expand Down Expand Up @@ -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<ButtonProps> = (
props: ButtonProps,
Expand Down Expand Up @@ -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: true,
size: 'md',
sizeScaleAlreadyApplied: false,
};

PayButton.defaultProps = payButtonDefaultProps;

export default PayButton;
Loading