Merge pull request #305 from PayButton/fix/typescript-declaration-files

fix: widget render & loading
PayButton · Jan 5, 2024 · da3a15b · da3a15b
2 parents c119805 + 40b978b
commit da3a15b
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 67 deletions.
diff --git a/paybutton/package.json b/paybutton/package.json
@@ -29,7 +29,7 @@
   },
   "scripts": {
     "dev": "rollup -c rollup.dev.js -w",
-    "build": "npm ci && rollup -c rollup.prod.js"
+    "build": "rollup -c rollup.prod.js"
   },
   "author": "",
   "repository": {

diff --git a/paybutton/src/index.tsx b/paybutton/src/index.tsx
@@ -2,6 +2,7 @@ import camelcase from 'camelcase';
 import { PayButton, PayButtonProps, PaymentDialog, PaymentDialogProps, Widget, WidgetProps } from 'paybutton';
 import { h } from 'preact';
 import { render } from 'preact/compat';
+import WidgetContainer from 'paybutton/dist/components/Widget/WidgetContainer';
 
 declare global {
   interface Window {
@@ -238,7 +239,7 @@ export default {
   renderWidget: (el: HTMLElement, props: WidgetProps) => {
     if (el !== null) {
       validateJSProps(props)
-      render(<Widget {...props} />, el)
+      render(<WidgetContainer {...props} />, el)
     }
   },
   openDialog: (props: PaymentDialogProps) => openDialog(props)

diff --git a/react/src/components/PayButton/PayButton.tsx b/react/src/components/PayButton/PayButton.tsx
@@ -5,6 +5,7 @@ import Button, { ButtonProps } from '../Button/Button';
 import { currency } from '../../util/api-client';
 import { PaymentDialog } from '../PaymentDialog/PaymentDialog';
 import { isValidCashAddress, isValidXecAddress } from '../../util/address';
+import { currencyObject, getCurrencyObject } from '../../util/satoshis';
 import BigNumber from 'bignumber.js';
 
 export interface PayButtonProps extends ButtonProps {
@@ -23,7 +24,7 @@ export interface PayButtonProps extends ButtonProps {
   editable?: boolean;
   onSuccess?: (txid: string, amount: BigNumber) => void;
   onTransaction?: (txid: string, amount: BigNumber) => void;
-  onOpen?: () => void;
+  onOpen?: (expectedAmount?: number | string, address?: string) => void;
   onClose?: (success?: boolean) => void;
   wsBaseUrl?: string;
   apiBaseUrl?: string;
@@ -33,10 +34,11 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [disabled, setDisabled] = useState(false);
   const [errorMsg, setErrorMsg] = useState('');
+  const [amount, setAmount] = useState(props.amount);
+  const [currencyObj, setCurrencyObj] = useState<currencyObject>();
 
   const {
     to,
-    amount,
     currency,
     text,
     hoverText,
@@ -56,7 +58,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
   } = Object.assign({}, PayButton.defaultProps, props);
 
   const handleButtonClick = (): void => {
-    if (onOpen !== undefined) onOpen();
+    if (onOpen !== undefined) onOpen(amount, to);
     setDialogOpen(true);
   };
   const handleCloseDialog = (success?: boolean): void => {
@@ -65,7 +67,11 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
   };
 
   useEffect(() => {
-    const invalidAmount = amount !== undefined && isNaN(+amount);
+    setAmount(props.amount);
+  }, [props.amount]);
+
+  useEffect(() => {
+    const invalidAmount = props.amount !== undefined && isNaN(+props.amount);
 
     if (to !== undefined) {
       setDisabled(!!props.disabled);
@@ -77,7 +83,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
       setDisabled(true);
       setErrorMsg('Invalid Recipient');
     }
-  }, [to, amount]);
+  }, [to, props.amount, props.disabled]);
 
   useEffect(() => {
     if (!to) {
@@ -91,6 +97,20 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
     }
   }, [to]);
 
+  useEffect(() => {
+    if (dialogOpen === false && props.amount && currency) {
+      const obj = getCurrencyObject(
+        Number(props.amount),
+        currency,
+        randomSatoshis,
+      );
+      setTimeout(() => {
+        setAmount(obj.float);
+        setCurrencyObj(obj);
+      }, 300);
+    }
+  }, [dialogOpen, props.amount, currency, randomSatoshis]);
+
   const theme = useTheme(props.theme, isValidXecAddress(to));
 
   const ButtonComponent: React.FC<ButtonProps> = (
@@ -110,6 +130,9 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => {
         disableScrollLock
         to={to}
         amount={amount}
+        setAmount={setAmount}
+        currencyObj={currencyObj}
+        setCurrencyObj={setCurrencyObj}
         currency={currency}
         animation={animation}
         randomSatoshis={randomSatoshis}

diff --git a/react/src/components/PaymentDialog/PaymentDialog.tsx b/react/src/components/PaymentDialog/PaymentDialog.tsx
@@ -7,11 +7,15 @@ import { WidgetContainer } from '../Widget/WidgetContainer';
 import { isValidCashAddress, isValidXecAddress } from '../../util/address';
 import { currency } from '../../util/api-client';
 import BigNumber from 'bignumber.js';
+import { currencyObject } from '../../util/satoshis';
 
 export interface PaymentDialogProps extends ButtonProps {
   to: string;
   amount?: number | string;
+  setAmount: Function;
   currency?: currency;
+  currencyObj?: currencyObject;
+  setCurrencyObj: Function;
   theme?: ThemeName | Theme;
   successText?: string;
   randomSatoshis?: boolean | number;
@@ -39,7 +43,10 @@ export const PaymentDialog = (
   const {
     to,
     amount,
+    setAmount,
     currency,
+    currencyObj,
+    setCurrencyObj,
     successText,
     animation,
     randomSatoshis,
@@ -75,7 +82,7 @@ export const PaymentDialog = (
     } else {
       setDisabled(true);
     }
-  }, [to, amount]);
+  }, [to, amount, props.disabled]);
 
   const ButtonComponent: React.FC<ButtonProps> = (
     props: ButtonProps,
@@ -103,6 +110,9 @@ export const PaymentDialog = (
           active={dialogOpen}
           to={to}
           amount={cleanAmount}
+          setAmount={setAmount}
+          currencyObj={currencyObj}
+          setCurrencyObj={setCurrencyObj}
           currency={currency}
           animation={animation}
           randomSatoshis={randomSatoshis}

diff --git a/react/src/components/Widget/Widget.tsx b/react/src/components/Widget/Widget.tsx
@@ -32,10 +32,9 @@ type QRCodeProps = BaseQRCodeProps & { renderAs: 'svg' };
 export interface WidgetProps {
   to: string;
   amount?: number | null | string;
-  setAmount: Function;
+  setAmount?: Function;
   text?: string;
   ButtonComponent?: React.ComponentType;
-  loading: boolean;
   success: boolean;
   successText?: string;
   theme?: ThemeName | Theme;
@@ -45,7 +44,7 @@ export interface WidgetProps {
   currency?: currency;
   animation?: animation;
   currencyObject?: currencyObject | undefined;
-  setCurrencyObject: Function;
+  setCurrencyObject?: Function;
   randomSatoshis?: boolean | number;
   price?: number;
   editable?: boolean;
@@ -120,33 +119,27 @@ const useStyles = makeStyles({
 export const Widget: React.FC<WidgetProps> = props => {
   const {
     to,
-    amount,
-    setAmount,
     foot,
-    loading,
     success,
     successText,
     goalAmount,
     ButtonComponent = Button,
     currency = getCurrencyTypeFromAddress(to),
     animation,
     randomSatoshis = true,
-    currencyObject,
-    setCurrencyObject,
     editable,
     setNewTxs,
     newTxs,
     apiBaseUrl,
     wsBaseUrl
   } = Object.assign({}, Widget.defaultProps, props);
 
-  const theme = useTheme(props.theme, isValidXecAddress(to));
-  const classes = useStyles({ success, loading, theme });
 
+
+  const [loading, setLoading] = useState(true);
   const [copied, setCopied] = useState(false);
   const [recentlyCopied, setRecentlyCopied] = useState(false);
   const [totalReceived, setTotalReceived] = useState<number | undefined>(undefined);
-  const [isLoading, setIsLoading] = useState(!!goalAmount);
   const [disabled, setDisabled] = useState(false);
   const [errorMsg, setErrorMsg] = useState('');
   const [goalText, setGoalText] = useState('');
@@ -159,6 +152,31 @@ export const Widget: React.FC<WidgetProps> = props => {
   const [text, setText] = useState('Send any amount of BCH');
   const [widgetButtonText, setWidgetButtonText] = useState('Send Payment');
 
+  const theme = useTheme(props.theme, isValidXecAddress(to));
+  const classes = useStyles({ success, loading, theme });
+
+  let amount: number | string | undefined | null
+  let setAmount: Function
+  let currencyObject: currencyObject | undefined
+  let setCurrencyObject: Function
+
+  const [thisAmount, setThisAmount] = useState(props.amount);
+  const [thisCurrencyObject, setThisCurrencyObject] = useState(props.currencyObject);
+  if (props.setAmount !== undefined) {
+    setAmount = props.setAmount
+    amount = props.amount
+  } else {
+    setAmount = setThisAmount
+    amount = thisAmount
+  }
+  if (props.setCurrencyObject !== undefined) {
+    setCurrencyObject = props.setCurrencyObject
+    currencyObject = props.currencyObject
+  } else {
+    setCurrencyObject = setThisCurrencyObject
+    currencyObject = thisCurrencyObject
+  }
+
   const blurCSS = disabled ? { filter: 'blur(5px)' } : {};
 
   const bchSvg = useMemo((): string => {
@@ -411,7 +429,7 @@ export const Widget: React.FC<WidgetProps> = props => {
         if (goal !== undefined) {
           setGoalPercent((100 * progress.float) / goal.float);
           setGoalText(`${progress.float} / ${cleanGoalAmount}`);
-          setIsLoading(false);
+          setLoading(false);
         }
       } else {
         if (hasPrice) {
@@ -429,7 +447,7 @@ export const Widget: React.FC<WidgetProps> = props => {
           const receivedRatio = `${receivedText} / ${goalText}`;
           const receivedPercentage: number =
             100 * (receivedVal / cleanGoalAmount);
-          setIsLoading(false);
+          setLoading(false);
           setGoalPercent(receivedPercentage);
           setGoalText(receivedRatio);
         }
@@ -474,7 +492,7 @@ export const Widget: React.FC<WidgetProps> = props => {
           px={3}
           pt={2}
         >
-          {isLoading ? (
+          {loading ? (
             <Typography
               className={classes.text}
               style={{ margin: '10px auto 20px' }}
@@ -601,7 +619,6 @@ export const Widget: React.FC<WidgetProps> = props => {
 };
 
 Widget.defaultProps = {
-  loading: false,
   success: false,
   successText: 'Thank you!',
   editable: false,