@coin-voyage/paykit 2.2.7 → 2.3.1

package/dist/components/pay-button/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useIsClient } from "@coin-voyage/shared/hooks";
 import { useQuery } from "@tanstack/react-query";
 import { AnimatePresence } from "framer-motion";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { usePaymentLifecycle } from "../../hooks/usePaymentLifecycle";
 import { ResetContainer } from "../../styles";
 import usePayContext from "../contexts/pay";
@@ -22,12 +22,13 @@ function PayButtonCustom(props) {
     const { paymentState, showModal, setOpen, setOnOpen, setOnClose } = usePayContext();
     const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = props;
     const { payOrder: order, setPayId } = paymentState;
-    // Determine payment mode: either depositParams or payId (but not both)
+    const { children, closeOnSuccess, resetOnSuccess } = props;
     const hasDepositParams = "toAddress" in props;
     const hasPayId = "payId" in props;
-    // Pre-compute values for hooks (must be unconditional)
-    const depositParams = hasDepositParams
-        ? {
+    const depositParams = useMemo(() => {
+        if (!hasDepositParams)
+            return null;
+        return {
             intent: {
                 asset: {
                     address: props.toToken,
@@ -39,19 +40,28 @@ function PayButtonCustom(props) {
                 },
             },
             metadata: props.metadata,
-        }
-        : null;
+        };
+    }, [props]);
     const payId = hasPayId ? props.payId : null;
-    // Validation: must have exactly one of payId or depositParams
-    if ((!hasDepositParams && !hasPayId) || (hasDepositParams && hasPayId)) {
-        throw new Error("PayButton requires either payId or deposit parameters (toChain, toAddress, toAmount), but not both");
-    }
-    usePaymentLifecycle(order, { onPaymentStarted, onPaymentCompleted, onPaymentBounced });
-    // Pre-load payment info in background when using depositParams
+    usePaymentLifecycle(order, {
+        onPaymentStarted,
+        onPaymentCompleted,
+        onPaymentBounced,
+    });
+    const metadataKey = useMemo(() => JSON.stringify(depositParams?.metadata ?? {}), [depositParams?.metadata]);
+    // Preload payOrder
     useQuery({
-        queryKey: ["payOrder", JSON.stringify({ depositParams })],
+        queryKey: [
+            "payOrder",
+            depositParams?.intent.asset?.address,
+            depositParams?.intent.asset?.chain_id,
+            depositParams?.intent.receiving_address,
+            depositParams?.intent.amount.token_amount,
+            metadataKey,
+        ],
+        enabled: hasDepositParams,
         queryFn: async () => {
-            if (depositParams == null || !depositParams.intent.receiving_address || !depositParams.intent.asset)
+            if (!depositParams)
                 return null;
             await paymentState.createDepositPayOrder(depositParams, (msg) => props.onPaymentCreationError?.({
                 type: "payorder_creation_error",
@@ -59,7 +69,6 @@ function PayButtonCustom(props) {
             }));
             return null;
         },
-        enabled: depositParams != null,
     });
     // Load payment by ID when using payId
     useEffect(() => {
@@ -67,32 +76,34 @@ function PayButtonCustom(props) {
             return;
         setPayId(payId);
     }, [payId, setPayId]);
-    // Set the onOpen and onClose callbacks
+    // Register open/close handlers
     useEffect(() => {
         setOnOpen(props.onOpen);
-        return () => setOnOpen(undefined);
-    }, [props.onOpen, setOnOpen]);
-    useEffect(() => {
         setOnClose(props.onClose);
-        return () => setOnClose(undefined);
-    }, [props.onClose, setOnClose]);
-    const { children, closeOnSuccess, resetOnSuccess } = props;
+        return () => {
+            setOnOpen(undefined);
+            setOnClose(undefined);
+        };
+    }, [props.onOpen, props.onClose, setOnOpen, setOnClose]);
     const show = useCallback(() => {
-        if (order == null)
+        if (!order)
             return;
-        const modalOptions = {
+        showModal({
             closeOnSuccess,
             resetOnSuccess,
-        };
-        showModal(modalOptions);
+        });
     }, [order, closeOnSuccess, resetOnSuccess, showModal]);
-    const hide = useCallback(() => setOpen(false), [setOpen]);
-    // Open the modal by default if the defaultOpen prop is true
+    const hide = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    // Auto-open modal
     const hasAutoOpened = useRef(false);
     useEffect(() => {
-        if (!props.defaultOpen || hasAutoOpened.current)
+        if (!props.defaultOpen)
+            return;
+        if (hasAutoOpened.current)
             return;
-        if (order == null)
+        if (!order)
             return;
         show();
         hasAutoOpened.current = true;

package/dist/hooks/useDepositAddressQuery.js

@@ -11,6 +11,7 @@ export function useDepositAddressQuery({ enabled }) {
         queryKey: ["paymentDetails", orderId, chainId, tokenAddress],
         enabled: isEnabled,
         retry: false,
+        refetchOnWindowFocus: false,
         queryFn: async () => {
             if (!orderId || !chainId || !currency) {
                 throw new Error("Missing required deposit parameters");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coin-voyage/paykit",
   "description": "Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.",
-  "version": "2.2.7",
+  "version": "2.3.1",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -61,8 +61,8 @@
     "react-use-measure": "^2.1.1",
     "styled-components": "^5.3.11",
     "uuid": "13.0.0",
-    "@coin-voyage/crypto": "2.2.3",
-    "@coin-voyage/shared": "2.2.5"
+    "@coin-voyage/shared": "2.3.1",
+    "@coin-voyage/crypto": "2.2.3"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",