@coin-voyage/paykit 2.4.4 → 2.4.5-beta.1

package/dist/components/pay-button/index.d.ts

@@ -1,4 +1,4 @@
-import type { ChainId, PayOrderCompletedEvent, PayOrderConfirmingEvent, PayOrderCreationErrorEvent, PayOrderMetadata, PayOrderRefundedEvent } from "@coin-voyage/shared/types";
+import type { ChainId, PayOrderCompletedEvent, PayOrderConfirmingEvent, PayOrderCreationErrorEvent, PayOrderExecutingEvent, PayOrderMetadata, PayOrderRefundedEvent, PayOrderStartedEvent } from "@coin-voyage/shared/types";
 import type { CustomTheme, Mode, PayModalOptions, Theme } from "../../types";
 type DepositPayButtonParams = {
     /**
@@ -34,8 +34,17 @@ type PayButtonCommonProps = PayButtonPaymentProps & {
     intent?: string;
     /** Called when invalid properties are used in order to create a deposit payOrder */
     onPaymentCreationError?: (event: PayOrderCreationErrorEvent) => void;
-    /** Called when user sends payment and transaction is seen on chain */
+    /** Called when payment details are available and the order is awaiting payment. */
+    onAwaitingPayment?: (event: PayOrderStartedEvent) => void;
+    /** Called when the payment is detected and awaiting confirmation. */
+    onConfirmingPayment?: (event: PayOrderConfirmingEvent) => void;
+    /**
+     * Called when the payment is detected and awaiting confirmation.
+     * @deprecated Use `onConfirmingPayment` instead.
+     */
     onPaymentStarted?: (event: PayOrderConfirmingEvent) => void;
+    /** Called when the payment is confirmed and the order is executing. */
+    onExecutingPayment?: (event: PayOrderExecutingEvent) => void;
     /** Called when destination transfer or call completes successfully */
     onPaymentCompleted?: (event: PayOrderCompletedEvent) => void;
     /** Called when destination call reverts and funds are refunded */

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

@@ -23,7 +23,9 @@ function PayButtonCustom(props) {
     usePayModalCallbacks(props.onOpen, props.onClose);
     const { order, show, hide } = usePayButtonController(props);
     usePaymentLifecycle(order, {
-        onPaymentStarted: props.onPaymentStarted,
+        onAwaitingPayment: props.onAwaitingPayment,
+        onConfirmingPayment: props.onConfirmingPayment ?? props.onPaymentStarted,
+        onExecutingPayment: props.onExecutingPayment,
         onPaymentCompleted: props.onPaymentCompleted,
         onPaymentBounced: props.onPaymentBounced,
     }, {

package/dist/hooks/useOrderStatusWS.d.ts

@@ -0,0 +1,9 @@
+import { PayOrderEvent } from "@coin-voyage/shared/types";
+interface UseOrderStatusWSProps {
+    orderId?: string;
+    enabled?: boolean;
+    onEvent?: (eventData: PayOrderEvent) => void;
+    onError?: (error: unknown) => void;
+}
+export declare function useOrderStatusWS({ orderId, enabled, onEvent, onError, }: UseOrderStatusWSProps): void;
+export {};

package/dist/hooks/useOrderStatusWS.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from "react";
+import { useBackendApi } from "../components/contexts/api";
+export function useOrderStatusWS({ orderId, enabled = true, onEvent, onError, }) {
+    const api = useBackendApi();
+    const socketRef = useRef(null);
+    const onEventRef = useRef(null);
+    const onErrorRef = useRef(null);
+    useEffect(() => {
+        onEventRef.current = onEvent;
+    }, [onEvent]);
+    useEffect(() => {
+        onErrorRef.current = onError;
+    }, [onError]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        if (socketRef.current)
+            return;
+        const socket = api.subscribeOrderStatus();
+        socketRef.current = socket;
+        socket.onOpen(() => {
+            if (orderId) {
+                socket.subscribe(orderId);
+            }
+            else {
+                socket.subscribeOrg();
+            }
+        });
+        socket.onMessage((msg) => {
+            if (msg.type === "event") {
+                onEventRef.current?.(msg.data);
+            }
+        });
+        socket.onError((e) => {
+            onErrorRef.current?.(e);
+        });
+        socket.onClose(() => {
+            if (socketRef.current === socket) {
+                socketRef.current = null;
+            }
+        });
+        return () => {
+            if (socketRef.current === socket) {
+                socketRef.current = null;
+            }
+            socket.close();
+        };
+    }, [api, enabled, orderId]);
+}

package/dist/hooks/usePaymentLifecycle.d.ts

@@ -1,6 +1,8 @@
-import { PayOrder, PayOrderCompletedEvent, PayOrderConfirmingEvent, PayOrderRefundedEvent } from "@coin-voyage/shared/types";
+import { PayOrder, PayOrderCompletedEvent, PayOrderConfirmingEvent, PayOrderExecutingEvent, PayOrderRefundedEvent, PayOrderStartedEvent } from "@coin-voyage/shared/types";
 type PaymentLifecycleHandlers = {
-    onPaymentStarted: ((event: PayOrderConfirmingEvent) => void) | undefined;
+    onAwaitingPayment: ((event: PayOrderStartedEvent) => void) | undefined;
+    onConfirmingPayment: ((event: PayOrderConfirmingEvent) => void) | undefined;
+    onExecutingPayment: ((event: PayOrderExecutingEvent) => void) | undefined;
     onPaymentCompleted: ((event: PayOrderCompletedEvent) => void) | undefined;
     onPaymentBounced: ((event: PayOrderRefundedEvent) => void) | undefined;
 };

package/dist/hooks/usePaymentLifecycle.js

@@ -2,11 +2,13 @@ import { PayOrderMode, PayOrderStatus, } from "@coin-voyage/shared/types";
 import { useEffect, useRef } from "react";
 const COMPLETED_STATES = [PayOrderStatus.COMPLETED, PayOrderStatus.REFUNDED];
 const STARTED_STATES = [
-    ...COMPLETED_STATES,
+    PayOrderStatus.AWAITING_PAYMENT,
     PayOrderStatus.PARTIAL_PAYMENT,
     PayOrderStatus.AWAITING_CONFIRMATION,
     PayOrderStatus.OPTIMISTIC_CONFIRMED,
     PayOrderStatus.EXECUTING_ORDER,
+    PayOrderStatus.COMPLETED,
+    PayOrderStatus.REFUNDED,
 ];
 /**
  *  Handles payment lifecycle events of an order, such as started, completed, and bounced.
@@ -16,58 +18,92 @@ const STARTED_STATES = [
  * @returns
  */
 export function usePaymentLifecycle(order, handlers, options = {}) {
-    const sentStart = useRef(false);
+    const sentAwaitingPayment = useRef(false);
+    const sentConfirmingPayment = useRef(false);
+    const sentExecutingPayment = useRef(false);
     const sentComplete = useRef(false);
+    const sentBounced = useRef(false);
     const currentOrderId = useRef(undefined);
-    const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = handlers;
+    const { onAwaitingPayment, onConfirmingPayment, onExecutingPayment, onPaymentCompleted, onPaymentBounced } = handlers;
     const { optimisticConfirmation = true } = options;
     const orderId = order?.id;
     const orderStatus = order?.status;
     const orderMetadata = order?.metadata;
     const payment = order?.payment;
-    const allowOptimisticCompletion = optimisticConfirmation && order?.mode === PayOrderMode.SALE;
+    const allowOptimisticFinalized = optimisticConfirmation && order?.mode === PayOrderMode.SALE;
     const isStarted = !!orderStatus && STARTED_STATES.includes(orderStatus);
-    const isFinalized = !!orderStatus &&
-        (COMPLETED_STATES.includes(orderStatus) ||
-            (allowOptimisticCompletion &&
-                (orderStatus === PayOrderStatus.OPTIMISTIC_CONFIRMED || orderStatus === PayOrderStatus.EXECUTING_ORDER)));
+    const isFinalized = (!!orderStatus && COMPLETED_STATES.includes(orderStatus)) ||
+        (allowOptimisticFinalized &&
+            (orderStatus === PayOrderStatus.OPTIMISTIC_CONFIRMED || orderStatus === PayOrderStatus.EXECUTING_ORDER));
     useEffect(() => {
         if (!orderId)
             return;
         if (currentOrderId.current === orderId)
             return;
         currentOrderId.current = orderId;
-        sentStart.current = false;
+        sentAwaitingPayment.current = false;
+        sentConfirmingPayment.current = false;
+        sentExecutingPayment.current = false;
         sentComplete.current = false;
+        sentBounced.current = false;
     }, [orderId]);
     useEffect(() => {
-        if (sentStart.current || !orderId || !payment || !orderStatus || !isStarted)
+        if (sentAwaitingPayment.current || !orderId || !payment || orderStatus !== PayOrderStatus.AWAITING_PAYMENT)
             return;
-        sentStart.current = true;
-        onPaymentStarted?.({
+        sentAwaitingPayment.current = true;
+        onAwaitingPayment?.({
+            type: "payorder_started",
+            payorder_id: orderId,
+            status: orderStatus,
+            metadata: orderMetadata,
+            payment_data: payment,
+        });
+    }, [onAwaitingPayment, orderId, orderMetadata, orderStatus, payment]);
+    useEffect(() => {
+        if (sentConfirmingPayment.current || !orderId || !payment || orderStatus !== PayOrderStatus.AWAITING_CONFIRMATION) {
+            return;
+        }
+        sentConfirmingPayment.current = true;
+        onConfirmingPayment?.({
             type: "payorder_confirming",
             payorder_id: orderId,
             status: orderStatus,
             metadata: orderMetadata,
             payment_data: payment,
+            source_tx_hash: payment.source_tx_hash ?? "",
         });
-    }, [isStarted, onPaymentStarted, orderId, orderMetadata, orderStatus, payment]);
+    }, [onConfirmingPayment, orderId, orderMetadata, orderStatus, payment]);
     useEffect(() => {
-        if (sentComplete.current || !orderId || !payment || !orderStatus || !isFinalized)
+        if (sentExecutingPayment.current || !orderId || !payment || orderStatus !== PayOrderStatus.EXECUTING_ORDER)
             return;
-        sentComplete.current = true;
-        if (orderStatus === PayOrderStatus.REFUNDED) {
-            onPaymentBounced?.({
-                type: "payorder_refunded",
-                payorder_id: orderId,
-                status: orderStatus,
-                metadata: orderMetadata,
-                payment_data: payment,
-                refund_address: payment.refund_address ?? "",
-                refund_tx_hash: payment.refund_tx_hash ?? "",
-            });
+        sentExecutingPayment.current = true;
+        onExecutingPayment?.({
+            type: "payorder_executing",
+            payorder_id: orderId,
+            status: orderStatus,
+            metadata: orderMetadata,
+            payment_data: payment,
+            source_tx_hash: payment.source_tx_hash ?? "",
+        });
+    }, [onExecutingPayment, orderId, orderMetadata, orderStatus, payment]);
+    useEffect(() => {
+        if (sentBounced.current || !orderId || !payment || orderStatus !== PayOrderStatus.REFUNDED)
             return;
-        }
+        sentBounced.current = true;
+        onPaymentBounced?.({
+            type: "payorder_refunded",
+            payorder_id: orderId,
+            status: orderStatus,
+            metadata: orderMetadata,
+            payment_data: payment,
+            refund_address: payment.refund_address ?? "",
+            refund_tx_hash: payment.refund_tx_hash ?? "",
+        });
+    }, [onPaymentBounced, orderId, orderMetadata, orderStatus, payment]);
+    useEffect(() => {
+        if (sentComplete.current || !orderId || !payment || orderStatus !== PayOrderStatus.COMPLETED)
+            return;
+        sentComplete.current = true;
         onPaymentCompleted?.({
             type: "payorder_completed",
             payorder_id: orderId,
@@ -77,6 +113,6 @@ export function usePaymentLifecycle(order, handlers, options = {}) {
             source_tx_hash: payment.source_tx_hash ?? "",
             destination_tx_hash: payment.destination_tx_hash ?? "",
         });
-    }, [isFinalized, onPaymentBounced, onPaymentCompleted, orderId, orderMetadata, orderStatus, payment]);
+    }, [onPaymentCompleted, orderId, orderMetadata, orderStatus, payment]);
     return { isStarted, isFinalized, order };
 }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { WalletProvider } from "@coin-voyage/crypto/wallets";
 export { PayButton } from "./components/pay-button";
 export { PayKitProvider } from "./providers/paykit-provider";
+export { useOrderStatusWS } from "./hooks/useOrderStatusWS";
 export { usePayStatus } from "./hooks/usePayStatus";
 export * as themes from "./styles/themes";

package/dist/index.js

@@ -1,5 +1,6 @@
 export { WalletProvider } from "@coin-voyage/crypto/wallets";
 export { PayButton } from "./components/pay-button";
 export { PayKitProvider } from "./providers/paykit-provider";
+export { useOrderStatusWS } from "./hooks/useOrderStatusWS";
 export { usePayStatus } from "./hooks/usePayStatus";
 export * as themes from "./styles/themes";

package/dist/lib/api/index.d.ts

@@ -1,5 +1,5 @@
 import { ApiClient as ApiClientInternal, APIEnvironment } from "@coin-voyage/shared/api";
-export declare function ApiClient({ apiKey, environment, }: {
+export declare function ApiClient({ apiKey, environment }: {
     apiKey: string;
     environment?: APIEnvironment;
 }): ApiClientInternal;

package/dist/lib/api/index.js

@@ -1,7 +1,7 @@
 import { ApiClient as ApiClientInternal } from "@coin-voyage/shared/api";
 import { paykitVersion } from "../../utils/version";
 import { v4 as uuidv4 } from "uuid";
-export function ApiClient({ apiKey, environment = "production", }) {
+export function ApiClient({ apiKey, environment = "production" }) {
     return new ApiClientInternal({
         apiKey,
         version: paykitVersion,

package/dist/providers/paykit-provider.js

@@ -2,13 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useInWagmiContext } from "@coin-voyage/crypto/evm";
 import { useAccount, useConnectCallback } from "@coin-voyage/crypto/hooks";
 import { getDepositAddress, getPaymentStep } from "@coin-voyage/shared/payment";
-import { PaymentMethod, PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
+import { PaymentMethod, PayOrderStatus } from "@coin-voyage/shared/types";
 import { Buffer } from "buffer";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ThemeProvider as StyledThemeProvider } from "styled-components";
 import { PayContext } from "../components/contexts/pay/index";
 import { PayModal } from "../components/pay-modal/index";
 import { useThemeFont } from "../hooks/useGoogleFont";
+import { useOrderStatusWS } from "../hooks/useOrderStatusWS";
 import { usePaymentState } from "../hooks/usePaymentState";
 import defaultTheme from "../styles/defaultTheme";
 import { ROUTE } from "../types/routes";
@@ -167,13 +168,17 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
             removeInitStateParam();
         }
     }, [setOpen, setPayId, setConnectorChainType]);
-    useEffect(() => {
-        const intervalMs = getPollingIntervalMs(payOrder?.status, payOrder?.mode);
-        if (!intervalMs)
+    const onOrderStatusEvent = useCallback((event) => {
+        if (!("payorder_id" in event) || event.payorder_id !== payOrder?.id)
             return;
-        const timeoutId = setTimeout(refreshOrder, intervalMs);
-        return () => clearTimeout(timeoutId);
-    }, [payOrder?.mode, payOrder?.status, refreshOrder]);
+        void refreshOrder();
+    }, [payOrder?.id, refreshOrder]);
+    useOrderStatusWS({
+        orderId: payOrder?.id,
+        enabled: shouldSubscribeOrderStatus(payOrder?.status),
+        onEvent: onOrderStatusEvent,
+        onError: log,
+    });
     useEffect(() => {
         if (isFinalPayOrderStatus(payOrder?.status)) {
             setRoute(ROUTE.CONFIRMATION);
@@ -259,17 +264,11 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
 // === Helper functions ===
 const NON_FINAL_PAY_ORDER_STATUSES = [PayOrderStatus.PENDING, PayOrderStatus.AWAITING_PAYMENT, PayOrderStatus.EXPIRED];
 const isFinalPayOrderStatus = (status) => !!status && !NON_FINAL_PAY_ORDER_STATUSES.includes(status);
-const getPollingIntervalMs = (status, mode) => {
-    if (!status)
-        return null;
-    if (status === PayOrderStatus.AWAITING_PAYMENT) {
-        return 5000;
-    }
-    if ([PayOrderStatus.AWAITING_CONFIRMATION, PayOrderStatus.OPTIMISTIC_CONFIRMED].includes(status)) {
-        return 2500;
-    }
-    if (status === PayOrderStatus.EXECUTING_ORDER) {
-        return mode === PayOrderMode.DEPOSIT ? 1000 : 2500;
-    }
-    return null;
-};
+const ORDER_STATUS_SUBSCRIPTION_STATUSES = [
+    PayOrderStatus.PENDING,
+    PayOrderStatus.AWAITING_PAYMENT,
+    PayOrderStatus.AWAITING_CONFIRMATION,
+    PayOrderStatus.OPTIMISTIC_CONFIRMED,
+    PayOrderStatus.EXECUTING_ORDER,
+];
+const shouldSubscribeOrderStatus = (status) => !!status && ORDER_STATUS_SUBSCRIPTION_STATUSES.includes(status);

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.4.4",
+  "version": "2.4.5-beta.1",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -60,8 +60,8 @@
     "@stripe/crypto": "0.0.4",
     "styled-components": "^5.3.11",
     "uuid": "13.0.0",
-    "@coin-voyage/crypto": "2.4.4",
-    "@coin-voyage/shared": "2.4.4"
+    "@coin-voyage/shared": "2.4.5-beta.0",
+    "@coin-voyage/crypto": "2.4.4"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",