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

package/dist/components/Pages/CardPayment/index.js

@@ -3,7 +3,7 @@ import { getFiatPaymentData } from "@coin-voyage/shared/payment";
 import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { loadStripeOnramp } from "@stripe/crypto/pure";
 import { useQuery } from "@tanstack/react-query";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { AlertIcon } from "../../../assets/icons";
 import useLocales from "../../../hooks/useLocales";
 import styled from "../../../styles/styled";
@@ -44,14 +44,17 @@ function CardPaymentContent({ paymentData, isLoading, error, onRetry, }) {
 }
 function ExpiredCardPayment() {
     const locales = useLocales();
-    const { paymentState, setRoute } = usePayContext();
+    const { paymentState, setOpen } = usePayContext();
     const isDeposit = paymentState.payOrder?.mode === PayOrderMode.DEPOSIT;
-    return (_jsx(StatusCard, { warning: true, title: locales.payWithTokenScreen_expired_h1, body: locales.payWithTokenScreen_expired_p, actionLabel: isDeposit ? locales.refresh : locales.selectTokenScreen_selectAnotherMethod, onAction: () => {
+    const body = isDeposit
+        ? locales.payWithTokenScreen_expired_p
+        : "This checkout has expired. Please restart checkout from the merchant.";
+    return (_jsx(StatusCard, { warning: true, title: locales.payWithTokenScreen_expired_h1, body: body, actionLabel: isDeposit ? locales.refresh : locales.close, onAction: () => {
             if (isDeposit) {
                 void paymentState.copyDepositPayOrder();
                 return;
             }
-            setRoute(ROUTE.SELECT_METHOD);
+            setOpen(false);
         } }));
 }
 function StatusCard({ title, body, actionLabel, onAction, loading = false, warning = false, }) {
@@ -100,7 +103,7 @@ function StripeOnrampCheckout({ paymentData }) {
     }
     return (_jsxs(OnrampShell, { children: [isLoading ? (_jsx(OnrampOverlay, { children: _jsx(Spinner, {}) })) : null, stripeOnramp ? (_jsx(OnrampSession, { stripeOnramp: stripeOnramp, clientSecret: paymentData.client_secret, theme: theme, onUiLoaded: triggerResize, onSessionUpdate: handleSessionUpdate }, paymentData.client_secret)) : null] }));
 }
-function OnrampSession({ stripeOnramp, clientSecret, theme, onUiLoaded, onSessionUpdate, }) {
+const OnrampSession = memo(function OnrampSession({ stripeOnramp, clientSecret, theme, onUiLoaded, onSessionUpdate, }) {
     const mountNodeRef = useRef(null);
     const onUiLoadedRef = useLatestRef(onUiLoaded);
     const onSessionUpdateRef = useLatestRef(onSessionUpdate);
@@ -130,7 +133,7 @@ function OnrampSession({ stripeOnramp, clientSecret, theme, onUiLoaded, onSessio
         };
     }, [clientSecret, onSessionUpdateRef, onUiLoadedRef, stripeOnramp, theme]);
     return _jsx(OnrampMount, { ref: mountNodeRef });
-}
+});
 function useCardPaymentData() {
     const { paymentState } = usePayContext();
     const { payOrder, payWithCard } = paymentState;

package/dist/components/Pages/PayToAddress/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PayOrderMode } from "@coin-voyage/shared/types";
+import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { useCallback, useEffect, useMemo } from "react";
 import { AlertIcon } from "../../../assets/icons";
 import { useCountdown } from "../../../hooks/useCountdown";
@@ -17,61 +17,60 @@ import TokenChainLogo from "../../ui/TokenChainLogo";
 import { CopyableInfo } from "./copyable-info";
 import { LogoRow, QRWrap } from "./styles";
 export default function PayToAddress() {
-    return (_jsxs(PageContent, { children: [_jsx(PayToAddressView, {}), _jsx(PoweredByFooter, {})] }));
+    return (_jsxs(PageContent, { children: [_jsx(PayToAddressContent, {}), _jsx(PoweredByFooter, {})] }));
 }
-function PayToAddressView() {
+function PayToAddressContent() {
     const { paymentState, triggerResize } = usePayContext();
-    const { payToAddressChainId: payToAddressChain, payToAddressCurrency } = paymentState;
-    const { data, isLoading, isError } = useDepositAddressQuery({
-        enabled: payToAddressCurrency != undefined,
+    const { payToAddressChainId, payToAddressCurrency, payOrder } = paymentState;
+    const depositAddressQuery = useDepositAddressQuery({
+        enabled: payToAddressCurrency != null,
     });
-    if (isError) {
-        return payToAddressChain ? _jsx(DepositFailed, {}) : null;
+    if (depositAddressQuery.isError) {
+        return payToAddressChainId ? _jsx(DepositAddressUnavailable, {}) : null;
     }
-    if (isLoading || !data) {
+    if (depositAddressQuery.isLoading || !depositAddressQuery.data) {
         return _jsx(DepositAddressLoading, {});
     }
-    return (_jsx(DepositAddressInfo, { details: data, triggerResize: triggerResize, isDeposit: paymentState.payOrder?.mode === PayOrderMode.DEPOSIT }));
+    return (_jsx(DepositAddressDetails, { details: depositAddressQuery.data, isDeposit: payOrder?.mode === PayOrderMode.DEPOSIT, isPayOrderExpired: payOrder?.status === PayOrderStatus.EXPIRED, onResizeNeeded: triggerResize, onRefreshDepositOrder: paymentState.copyDepositPayOrder }));
 }
 function DepositAddressLoading() {
     const locales = useLocales();
     return (_jsxs(ModalContent, { "$center": true, style: { paddingTop: 32, paddingBottom: 32 }, children: [_jsx(Spinner, {}), _jsx(ModalBody, { style: { marginTop: 12 }, children: locales.payToAddressScreen_generatingDepositAddress })] }));
 }
-function DepositAddressInfo({ details, triggerResize, isDeposit, }) {
-    const locales = useLocales();
+function DepositAddressDetails({ details, isDeposit, isPayOrderExpired, onResizeNeeded, onRefreshDepositOrder, }) {
     const [remainingS, totalS] = useCountdown(details.expirationS);
-    const isExpired = details.expirationS != null && remainingS === 0;
-    useEffect(triggerResize, [details, isExpired, triggerResize]);
-    const logoElement = useMemo(() => (_jsx(TokenChainLogo, { chainId: details.chainId, src: details.logoURI, alt: details.ticker }, `${details.ticker}-${details.chainId}`)), [details.chainId, details.ticker, details.logoURI]);
-    return (_jsxs(ModalContent, { children: [_jsx(DepositAddressView, { isExpired: isExpired, isDeposit: isDeposit, depositAddress: details.depositAddress, logoElement: logoElement, localesRefreshLabel: locales.refresh }), _jsx("div", { style: { height: 8 } }), _jsx(CopyableInfo, { details: details, remainingS: remainingS, totalS: totalS })] }));
+    const isExpired = isPayOrderExpired || (details.expirationS != null && remainingS === 0);
+    const effectiveRemainingS = isExpired ? 0 : remainingS;
+    useEffect(() => {
+        onResizeNeeded();
+    }, [details, isExpired, onResizeNeeded]);
+    const tokenChainLogo = useMemo(() => (_jsx(TokenChainLogo, { chainId: details.chainId, chainStyle: { borderRadius: 9999, bottom: 6, right: 4, height: "20px", width: "20px" }, src: details.logoURI, alt: details.ticker })), [details.chainId, details.ticker, details.logoURI]);
+    return (_jsxs(ModalContent, { children: [_jsx(DepositAddressPrimaryContent, { depositAddress: details.depositAddress, isExpired: isExpired, isDeposit: isDeposit, tokenChainLogo: tokenChainLogo, onRefreshDepositOrder: onRefreshDepositOrder }), _jsx("div", { style: { height: 8 } }), _jsx(CopyableInfo, { details: details, remainingS: effectiveRemainingS, totalS: totalS })] }));
 }
-function DepositAddressView({ isExpired, isDeposit, depositAddress, logoElement, localesRefreshLabel, }) {
-    const locales = useLocales();
-    const { paymentState } = usePayContext();
-    if (isExpired) {
-        if (!isDeposit) {
-            return (_jsxs(ModalContent, { "$center": true, style: { paddingTop: 32, paddingBottom: 32 }, children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.payWithTokenScreen_expired_h1] }), _jsx(ModalBody, { children: locales.payWithTokenScreen_expired_p })] }));
-        }
-        return (_jsx(LogoRow, { children: _jsx(Button, { onClick: () => {
-                    // Create a new deposit pay order and trigger a refetch of the payment details query
-                    paymentState.copyDepositPayOrder();
-                }, style: { width: 128 }, children: localesRefreshLabel }) }));
+function DepositAddressPrimaryContent({ depositAddress, isExpired, isDeposit, tokenChainLogo, onRefreshDepositOrder, }) {
+    if (!isExpired) {
+        return (_jsx(QRWrap, { children: _jsx(CustomQRCode, { value: depositAddress, image: tokenChainLogo }) }));
     }
-    return (_jsx(QRWrap, { children: _jsx(CustomQRCode, { value: depositAddress, image: logoElement }) }));
+    if (isDeposit) {
+        return _jsx(RefreshExpiredDepositAddress, { onRefresh: onRefreshDepositOrder });
+    }
+    return _jsx(ExpiredPaymentAddressMessage, {});
+}
+function RefreshExpiredDepositAddress({ onRefresh }) {
+    const locales = useLocales();
+    return (_jsx(LogoRow, { children: _jsx(Button, { onClick: onRefresh, style: { width: 128 }, children: locales.refresh }) }));
+}
+function ExpiredPaymentAddressMessage() {
+    const locales = useLocales();
+    return (_jsxs(ModalContent, { "$center": true, style: { paddingTop: 32, paddingBottom: 32 }, children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.payWithTokenScreen_expired_h1] }), _jsx(ModalBody, { children: locales.payWithTokenScreen_expired_p })] }));
 }
-function DepositFailed() {
+function DepositAddressUnavailable() {
     const locales = useLocales();
     const { setRoute, paymentState } = usePayContext();
-    const { setPayToAddressChainId: setPayToAddressChain, setPayToAddressCurrency } = paymentState;
     const onSelectAnotherMethod = useCallback(() => {
-        setPayToAddressChain(undefined);
-        setPayToAddressCurrency(undefined);
+        paymentState.setPayToAddressChainId(undefined);
+        paymentState.setPayToAddressCurrency(undefined);
         setRoute(ROUTE.ADDRESS_CHAIN_SELECT);
-    }, [setRoute, setPayToAddressChain, setPayToAddressCurrency]);
-    return (_jsxs(ModalContent, { "$center": true, style: {
-            marginLeft: 24,
-            marginRight: 24,
-            paddingTop: 16,
-            paddingBottom: 16,
-        }, children: [_jsx(ModalH1, { children: locales.selectPayToAddressWaitingScreen_unavailable_h1 }), _jsx(ModalBody, { children: locales.selectPayToAddressWaitingScreen_unavailable_p }), _jsx(SelectAnotherMethod, { buttonText: locales.selectTokenScreen_selectAnotherMethod, onSelectAnotherMethod: onSelectAnotherMethod })] }));
+    }, [paymentState, setRoute]);
+    return (_jsxs(ModalContent, { "$center": true, style: { marginLeft: 24, marginRight: 24, paddingTop: 16, paddingBottom: 16 }, children: [_jsx(ModalH1, { children: locales.selectPayToAddressWaitingScreen_unavailable_h1 }), _jsx(ModalBody, { children: locales.selectPayToAddressWaitingScreen_unavailable_p }), _jsx(SelectAnotherMethod, { buttonText: locales.selectTokenScreen_selectAnotherMethod, onSelectAnotherMethod: onSelectAnotherMethod })] }));
 }

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/components/pay-modal/ConnectUsing.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "framer-motion";
 import { isWalletConnectConnector } from "../../utils";
 import usePayContext from "../contexts/pay";
 import Alert from "../ui/Alert";
-import { contentVariants } from "../ui/Modal";
 import ConnectWithInjector from "./ConnectWithInjector";
 import ConnectWithQRCode from "./ConnectWithQRCode";
 export default function ConnectUsing() {
@@ -14,5 +12,5 @@ export default function ConnectUsing() {
     }
     // If cannot be scanned, display injector flow, which if extension is not installed will show CTA to install it
     const isQrCode = isWalletConnectConnector(wallet?.id) && wallet?.getWalletDeeplink;
-    return (_jsx(AnimatePresence, { children: isQrCode ? (_jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: _jsx(ConnectWithQRCode, {}) }, "QRCODE")) : (_jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: _jsx(ConnectWithInjector, {}) })) }));
+    return isQrCode ? _jsx(ConnectWithQRCode, {}) : _jsx(ConnectWithInjector, {});
 }

package/dist/components/pay-modal/ConnectWithInjector/index.js

@@ -100,7 +100,6 @@ export default function ConnectWithInjector({ forceState }) {
         },
         onSuccess(_, variables) {
             if (variables?.connector) {
-                setStatus(states.CONNECTED);
                 setRoute(ROUTE.WALLET_TOKEN_SELECT);
             }
         },

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getChainTypeName } from "@coin-voyage/shared/chain";
+import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { useCallback, useMemo } from "react";
 import { routeConfig } from "../../config/route-config";
 import useLocales from "../../hooks/useLocales";
@@ -17,7 +18,9 @@ export function PayModal({ onExited }) {
         CHAIN_TYPE: getChainTypeName(connectorChainType),
     });
     const config = routeConfig[route];
-    const showBackButton = config?.showBackButton !== false;
+    const isExpiredPayment = paymentState.payOrder?.status === PayOrderStatus.EXPIRED &&
+        paymentState.payOrder.mode === PayOrderMode.SALE;
+    const showBackButton = config?.showBackButton !== false && !isExpiredPayment;
     const showInfoButton = config?.showInfoButton !== false;
     const depth = config?.depth ?? 1;
     const headingCtx = {

package/dist/components/ui/Modal/useModalTransition.js

@@ -32,7 +32,14 @@ export function useModalTransition({ open, positionInside, onClose, resizeDepend
         // laid out yet. ResizeObserver or a subsequent contentRef attachment will re-measure
         // once the node reports a real size.
         if (w > 0 && h > 0) {
-            setDimensions({ width: `${w}px`, height: `${h}px` });
+            const nextDimensions = { width: `${w}px`, height: `${h}px` };
+            setDimensions((currentDimensions) => {
+                if (currentDimensions.width === nextDimensions.width &&
+                    currentDimensions.height === nextDimensions.height) {
+                    return currentDimensions;
+                }
+                return nextDimensions;
+            });
         }
     }, []);
     // Re-measure when callers update `resizeDependency` (used by pages to force a re-measure

package/dist/components/ui/TokenChainLogo/index.d.ts

@@ -1,6 +1,8 @@
 import type { ChainId } from "@coin-voyage/shared/types";
-interface TokenChainLogoProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+import type { CSSProperties, DetailedHTMLProps, ImgHTMLAttributes } from "react";
+interface TokenChainLogoProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
     chainId: ChainId;
+    chainStyle?: CSSProperties;
 }
-export default function TokenChainLogo({ chainId, ...props }: TokenChainLogoProps): import("react/jsx-runtime").JSX.Element;
+export default function TokenChainLogo({ chainId, chainStyle, style, ...props }: TokenChainLogoProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/TokenChainLogo/index.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getChainLogo } from "@coin-voyage/shared/chain";
+import { cloneElement } from "react";
 import { ChainContainer, TokenChainContainer } from "./styles";
-export default function TokenChainLogo({ chainId, ...props }) {
-    return (_jsxs(TokenChainContainer, { children: [_jsx("img", { ...props, style: { borderRadius: "22.5%" } }), _jsx(ChainContainer, { children: getChainLogo(chainId) })] }));
+export default function TokenChainLogo({ chainId, chainStyle, style, ...props }) {
+    const chainLogo = getChainLogo(chainId);
+    return (_jsxs(TokenChainContainer, { children: [_jsx("img", { ...props, style: {
+                    ...style,
+                    borderRadius: style?.borderRadius ?? "22.5%",
+                } }), _jsx(ChainContainer, { style: chainStyle, children: chainLogo && cloneElement(chainLogo) })] }));
 }

package/dist/components/ui/TokenChainLogo/styles.js

@@ -1,6 +1,7 @@
-import styled from "../../../styles/styled";
 import { motion } from "framer-motion";
+import styled from "../../../styles/styled";
 export const TokenChainContainer = styled(motion.div) `
+  position: relative;
   width: 100%;
   height: 100%;
 `;
@@ -12,4 +13,10 @@ export const ChainContainer = styled(motion.div) `
   overflow: hidden;
   bottom: 0px;
   right: 0px;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 `;

package/dist/hooks/useCountdown.js

@@ -1,23 +1,25 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 export function useCountdown(expirationS) {
-    const [nowS, setNowS] = useState(0);
-    const [initialRemaining] = useState(() => {
-        if (!expirationS)
-            return 0;
-        return Math.max(0, expirationS - Math.floor(Date.now() / 1000));
-    });
+    const [nowS, setNowS] = useState(getNowS);
+    const initialRemaining = useMemo(() => computeRemaining(expirationS, getNowS()), [expirationS]);
+    const remainingS = computeRemaining(expirationS, nowS);
     useEffect(() => {
-        if (!expirationS)
+        if (expirationS == null)
             return;
-        const tick = () => {
-            setNowS(Math.floor(Date.now() / 1000));
-        };
+        const tick = () => setNowS(getNowS());
         tick();
+        if (expirationS <= getNowS())
+            return;
         const id = setInterval(tick, 1000);
         return () => clearInterval(id);
     }, [expirationS]);
-    if (!expirationS || nowS === 0)
-        return [0, 0];
-    const remainingS = Math.max(0, expirationS - nowS);
     return [remainingS, initialRemaining];
 }
+function getNowS() {
+    return Math.floor(Date.now() / 1000);
+}
+function computeRemaining(expirationS, nowS) {
+    if (expirationS == null)
+        return 0;
+    return Math.max(0, expirationS - nowS);
+}

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/usePayToAddressTokens.d.ts

@@ -1,9 +1,5 @@
+import type { Option } from "../components/ui/OptionsList/types";
 export declare function usePayToAddressTokens(): {
-    options: {
-        id: string;
-        title: string;
-        icons: import("react/jsx-runtime").JSX.Element[];
-        onClick: () => void;
-    }[];
+    options: Option[];
     isLoading: boolean;
 };

package/dist/hooks/usePayToAddressTokens.js

@@ -15,6 +15,7 @@ export function usePayToAddressTokens() {
         icons: token.logoURI
             ? [_jsx(SquircleIcon, { icon: token.logoURI, alt: token.name }, token.address ?? token.ticker)]
             : [],
+        iconShape: "circle",
         onClick: () => {
             const currency = tokenToCurrency(token);
             setPayToAddressCurrency(currency);

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/hooks/useTokenOptions.js

@@ -33,7 +33,7 @@ export function useTokenOptions(disabled) {
             disabled: isDisabled,
             iconShape: "squircle",
             icons: [
-                _jsx(TokenChainLogo, { src: quote.image_uri, alt: `${quote.ticker} logo`, chainId: quote.chain_id }, `${quote.ticker}-${quote.chain_id}`),
+                _jsx(TokenChainLogo, { src: quote.image_uri, alt: `${quote.ticker} logo`, chainId: quote.chain_id, style: { borderRadius: 9999 }, chainStyle: { bottom: -1, right: -1 } }, `${quote.ticker}-${quote.chain_id}`),
             ],
             onClick: () => {
                 setSelectedCurrencyOption(quote);

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-beta.0",
+  "version": "2.4.5-beta.0",
   "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/shared": "2.4.4-beta.1",
-    "@coin-voyage/crypto": "2.4.3"
+    "@coin-voyage/crypto": "2.4.4",
+    "@coin-voyage/shared": "2.4.5-beta.0"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",