diff --git a/paybutton/dev/demo/paybutton-generator.html b/paybutton/dev/demo/paybutton-generator.html index 551b57fa..72521110 100644 --- a/paybutton/dev/demo/paybutton-generator.html +++ b/paybutton/dev/demo/paybutton-generator.html @@ -5,10 +5,11 @@ Paybutton Generator Test @@ -65,7 +92,7 @@
- +
@@ -121,46 +148,51 @@
- +
-
+
-
-
+
+ +
+
+
+
- - \ No newline at end of file + diff --git a/react/lib/components/PayButton/PayButton.tsx b/react/lib/components/PayButton/PayButton.tsx index 86801280..6e8439ea 100644 --- a/react/lib/components/PayButton/PayButton.tsx +++ b/react/lib/components/PayButton/PayButton.tsx @@ -13,7 +13,8 @@ import { isValidXecAddress, CurrencyObject, generatePaymentId, - getCurrencyObject + getCurrencyObject, + isPropsTrue } from '../../util'; import { PaymentDialog } from '../PaymentDialog'; export interface PayButtonProps extends ButtonProps { @@ -121,7 +122,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => { const invalidAmount = props.amount !== undefined && isNaN(+props.amount); if (to !== undefined) { - setDisabled(!!props.disabled); + setDisabled(isPropsTrue(props.disabled)); setErrorMsg(''); } else if (invalidAmount) { setDisabled(true); diff --git a/react/lib/components/PaymentDialog/PaymentDialog.tsx b/react/lib/components/PaymentDialog/PaymentDialog.tsx index ff98dcf2..354eac47 100644 --- a/react/lib/components/PaymentDialog/PaymentDialog.tsx +++ b/react/lib/components/PaymentDialog/PaymentDialog.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react'; import { Theme, ThemeName, ThemeProvider, useTheme } from '../../themes'; import Button, { ButtonProps } from '../Button/Button'; import { WidgetContainer } from '../Widget/WidgetContainer'; -import { Currency, CurrencyObject, Transaction, isValidCashAddress, isValidXecAddress } from '../../util'; +import { Currency, CurrencyObject, Transaction, isPropsTrue, isValidCashAddress, isValidXecAddress } from '../../util'; export interface PaymentDialogProps extends ButtonProps { to: string; @@ -84,7 +84,7 @@ export const PaymentDialog = ( const invalidAmount = amount !== undefined && isNaN(+amount); if (to !== undefined && (isValidCashAddress(to) || isValidXecAddress(to))) { - setDisabled(!!props.disabled); + setDisabled(isPropsTrue(props.disabled)); } else if (invalidAmount) { setDisabled(true); } else { diff --git a/react/lib/components/Widget/Widget.tsx b/react/lib/components/Widget/Widget.tsx index 8de9dab1..9ab336b3 100644 --- a/react/lib/components/Widget/Widget.tsx +++ b/react/lib/components/Widget/Widget.tsx @@ -35,7 +35,8 @@ import { getCurrencyTypeFromAddress, altpaymentListener, CURRENCY_PREFIXES_MAP, - CRYPTO_CURRENCIES + CRYPTO_CURRENCIES, + isPropsTrue } from '../../util'; import AltpaymentWidget from './AltpaymentWidget'; import { AltpaymentPair, AltpaymentShift, AltpaymentError, AltpaymentCoin, MINIMUM_ALTPAYMENT_DOLLAR_AMOUNT } from '../../altpayment'; @@ -141,13 +142,6 @@ const useStyles = makeStyles({ }), }); -const isTruthy = (value?: string | boolean) => { - if (typeof value === "string" && (value === "true" || value === "false")) { - return value === "true" - } else { - return value - } -} export const Widget: React.FunctionComponent = props => { const { @@ -217,7 +211,7 @@ export const Widget: React.FunctionComponent = props => { props.currencyObject, ); - const blurCSS = disabled ? { filter: 'blur(5px)' } : {}; + const blurCSS = isPropsTrue(disabled) ? { filter: 'blur(5px)' } : {}; const bchSvg = useMemo((): string => { const color = theme.palette.logo ?? theme.palette.primary; @@ -313,7 +307,7 @@ export const Widget: React.FunctionComponent = props => { if (thisAmount === undefined || thisAmount === null || thisAmount === 0) { setAltpaymentEditable(true) } - if (isTruthy(editable)) { + if (isPropsTrue(editable)) { setAltpaymentEditable(true) } }, []) @@ -331,7 +325,7 @@ export const Widget: React.FunctionComponent = props => { thisAmount !== undefined && thisAmount && isNaN(+thisAmount); if (isValidCashAddress(to) || isValidXecAddress(to)) { - setDisabled(!!props.disabled); + setDisabled(isPropsTrue(props.disabled)); setErrorMsg(''); } else if (invalidAmount) { setDisabled(true); @@ -689,7 +683,7 @@ export const Widget: React.FunctionComponent = props => { timeout={{ enter: 0, exit: 2000 }} > - {!disabled && ( + {!isPropsTrue(disabled) && ( {copied ? 'Payment copied!' : 'Click to copy'} @@ -719,7 +713,7 @@ export const Widget: React.FunctionComponent = props => { )} - {isTruthy(editable) && ( + {isPropsTrue(editable) && ( { + it('returns true for "true" string', () => { + expect(isPropsTrue("true")).toBe(true) + }) + it('returns true for true boolean', () => { + expect(isPropsTrue(true)).toBe(true) + }) + it('returns false for "false" string', () => { + expect(isPropsTrue("false")).toBe(false) + }) + it('returns false for false boolean', () => { + expect(isPropsTrue(false)).toBe(false) + }) + it('returns false for other string', () => { + expect(isPropsTrue("1")).toBe(false) + }) + it('returns false for empty string', () => { + expect(isPropsTrue("")).toBe(false) + }) + it('returns false for "null" string', () => { + expect(isPropsTrue("null")).toBe(false) + }) + it('returns false for undefined', () => { + expect(isPropsTrue(undefined)).toBe(false) + }) +}) diff --git a/react/lib/util/format.ts b/react/lib/util/format.ts index 38f8c811..152090b6 100644 --- a/react/lib/util/format.ts +++ b/react/lib/util/format.ts @@ -63,6 +63,17 @@ export const formatXEC = (xec: string) => { return formattedString; }; +export const isPropsTrue = (value?: string | boolean) => { + switch (typeof value) { + case "string": + return value === "true" + case "boolean": + return value + case "undefined": + return false + } +} + export default { amount, formatPrice,