@coin-voyage/paykit 2.4.2 → 2.4.3

package/README.md

@@ -1,35 +1,29 @@
 # CoinVoyage Payments
 
-CoinVoyage enables seamless crypto payments into your app.
+CoinVoyage enables seamless crypto payments in your app.
 
-Onboard users from any chain, any coin into your app with one click and maximize your conversion.
+Onboard users from any chain and any coin with one click.
 
 ## Features
 
-- 🌱 Cross-chain payments — Accept payments from 1000+ tokens on multiple chains. We handle the swapping and bridging so that your customers don't have to.
-- 💡 Pay with a single transaction - No more wallet round-trips to make approval, swap, or bridging transactions. Your customers pay with a single transfer transaction.
-- ⚡️ Fully permissionless - CoinVoyage never custodies funds and funds can never be stuck in a contract. Payments can be permissionlessly completed by anyone.
-- 💱 Support for all major wallets - CoinVoyage Pay supports payments from browser wallets like MetaMask, Phantom, Sui Wallet, Xverse, etc..
-- 💨 Integrate within minutes - Get up and running with CoinVoyage Pay in as little as 10 minutes.
-
-and much more...
+- Cross-chain payments across many tokens and chains.
+- Single-transaction payment flows for end users.
+- Permissionless payment execution without custodial fund handling.
+- Support for major browser and mobile wallets.
+- Fast integration for embedded crypto payment UX.
 
 ## Documentation
 
-documentation [here](https://docs.coinvoyage.io).
+Read the docs at [docs.coinvoyage.io](https://docs.coinvoyage.io).
 
 ## Examples
 
-[Examples on Github](https://github.com/coin-voyage/examples)
-
-### Try in Playground
-
-Coming soon.
+See [coin-voyage/examples](https://github.com/coin-voyage/examples).
 
 ## Support
 
-[Contact us](mailto:help@coinvoyage.io) if you'd like to integrate CoinVoyage Pay.
+Contact [help@coinvoyage.io](mailto:help@coinvoyage.io) for integration support.
 
 ## Credits
 
-CoinVoyage PayKit is a fork of [Connectkit](https://github.com/family/connectkit) developed by [Family](https://family.co).
+CoinVoyage PayKit is a fork of [ConnectKit](https://github.com/family/connectkit) by [Family](https://family.co).

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

@@ -102,6 +102,8 @@ function StripeOnrampCheckout({ paymentData }) {
 }
 function OnrampSession({ stripeOnramp, clientSecret, theme, onUiLoaded, onSessionUpdate, }) {
     const mountNodeRef = useRef(null);
+    const onUiLoadedRef = useLatestRef(onUiLoaded);
+    const onSessionUpdateRef = useLatestRef(onSessionUpdate);
     useEffect(() => {
         const mountNode = mountNodeRef.current;
         if (!mountNode) {
@@ -113,10 +115,10 @@ function OnrampSession({ stripeOnramp, clientSecret, theme, onUiLoaded, onSessio
             appearance: theme ? { theme } : undefined,
         });
         const handleUiLoaded = () => {
-            onUiLoaded?.();
+            onUiLoadedRef.current?.();
         };
         const handleSessionUpdated = (event) => {
-            onSessionUpdate?.(event.payload.session.status);
+            onSessionUpdateRef.current?.(event.payload.session.status);
         };
         session.addEventListener("onramp_ui_loaded", handleUiLoaded);
         session.addEventListener("onramp_session_updated", handleSessionUpdated);
@@ -126,7 +128,7 @@ function OnrampSession({ stripeOnramp, clientSecret, theme, onUiLoaded, onSessio
             session.removeEventListener("onramp_session_updated", handleSessionUpdated);
             mountNode.replaceChildren();
         };
-    }, [clientSecret, onSessionUpdate, onUiLoaded, stripeOnramp, theme]);
+    }, [clientSecret, onSessionUpdateRef, onUiLoadedRef, stripeOnramp, theme]);
     return _jsx(OnrampMount, { ref: mountNodeRef });
 }
 function useCardPaymentData() {

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

@@ -19,7 +19,7 @@ export default function Confirmation() {
             onSuccess();
         }
     }, [uiState, onSuccess]);
-    return (_jsx(PageContent, { "$center": true, children: _jsxs(ModalContent, { "$center": true, style: { paddingBottom: 0 }, children: [_jsx(AnimationContainer, { children: _jsxs(InsetContainer, { children: [_jsx(Spinner, { "$status": uiState === "loading" }), _jsx(SuccessIcon, { "$status": uiState === "success" }), _jsx(ErrorIcon, { "$status": uiState === "error" }), _jsx(WarningIcon, { "$status": uiState === "warning" })] }) }), _jsx(ModalH1, { children: title }), txURL && (_jsxs(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: [_jsx(ExternalLinkIcon, { width: 14, height: 14, fillOpacity: 0.9 }), "view transaction"] })), _jsx(PoweredByFooter, {})] }) }));
+    return (_jsx(PageContent, { "$center": true, children: _jsxs(ModalContent, { "$center": true, style: { paddingBottom: 0 }, children: [_jsx(AnimationContainer, { children: _jsxs(InsetContainer, { children: [_jsx(Spinner, { "$status": uiState === "loading" }), _jsx(SuccessIcon, { "$status": uiState === "success" }), _jsx(ErrorIcon, { "$status": uiState === "error" }), _jsx(WarningIcon, { "$status": uiState === "warning" })] }) }), _jsx(ModalH1, { children: title }), txURL && (_jsxs(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", className: "text-sm", children: [_jsx(ExternalLinkIcon, { width: 14, height: 14, fillOpacity: 0.9 }), "View Transaction"] })), _jsx(PoweredByFooter, {})] }) }));
 }
 function getConfirmationState(payOrder, isDeposit, locales, optimisticConfirmation) {
     if (!payOrder) {

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

@@ -22,16 +22,16 @@ export default function PayToAddress() {
 function PayToAddressView() {
     const { paymentState, triggerResize } = usePayContext();
     const { payToAddressChainId: payToAddressChain, payToAddressCurrency } = paymentState;
-    const { data: depositDetails, isLoading, isError, } = useDepositAddressQuery({
+    const { data, isLoading, isError } = useDepositAddressQuery({
         enabled: payToAddressCurrency != undefined,
     });
     if (isError) {
         return payToAddressChain ? _jsx(DepositFailed, {}) : null;
     }
-    if (isLoading || !depositDetails) {
+    if (isLoading || !data) {
         return _jsx(DepositAddressLoading, {});
     }
-    return (_jsx(DepositAddressInfo, { details: depositDetails, triggerResize: triggerResize, isDeposit: paymentState.payOrder?.mode === PayOrderMode.DEPOSIT }));
+    return (_jsx(DepositAddressInfo, { details: data, triggerResize: triggerResize, isDeposit: paymentState.payOrder?.mode === PayOrderMode.DEPOSIT }));
 }
 function DepositAddressLoading() {
     const locales = useLocales();

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

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAccount } from "@coin-voyage/crypto/hooks";
-import { getChainLogo, getChainTypeByChainId } from "@coin-voyage/shared/chain";
-import { ChainType, PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
+import { getChainLogo } from "@coin-voyage/shared/chain";
+import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { assert } from "@coin-voyage/shared/utils";
 import { AnimatePresence, motion } from "framer-motion";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useChainId, useSwitchChain } from "wagmi";
 import { AlertIcon, RetryIconCircle } from "../../../assets/icons";
 import useLocales from "../../../hooks/useLocales";
 import styled from "../../../styles/styled";
@@ -19,7 +18,6 @@ import Tooltip from "../../ui/Tooltip";
 var PayState;
 (function (PayState) {
     PayState["RequestingPayment"] = "Requesting Payment";
-    PayState["SwitchingChain"] = "Switching Chain";
     PayState["RequestCancelled"] = "Payment Cancelled";
     PayState["RequestSuccessful"] = "Payment Successful";
 })(PayState || (PayState = {}));
@@ -29,30 +27,9 @@ export default function PayWithToken() {
     const { account } = useAccount();
     const [payState, setPayState] = useState(PayState.RequestingPayment);
     const locales = useLocales();
-    const walletChainId = useChainId();
-    const { switchChainAsync } = useSwitchChain();
     assert(payOrder !== undefined, "Pay order must be defined");
     const isExpired = payOrder.status === PayOrderStatus.EXPIRED;
     const isDeposit = payOrder.mode === PayOrderMode.DEPOSIT;
-    const chainType = getChainTypeByChainId(paymentState.selectedCurrencyOption?.chain_id);
-    const trySwitchingChain = useCallback(async (option, forceSwitch = false) => {
-        if (walletChainId === option.chain_id && !forceSwitch)
-            return true;
-        try {
-            const switched = await switchChainAsync({ chainId: option.chain_id });
-            return switched?.id === option.chain_id;
-        }
-        catch (e) {
-            console.error("Failed to switch chain", e);
-            return false;
-        }
-    }, [walletChainId, switchChainAsync]);
-    const ensureCorrectChain = useCallback(async (token) => {
-        if (chainType !== ChainType.EVM)
-            return true;
-        setPayState(PayState.SwitchingChain);
-        return trySwitchingChain(token);
-    }, [chainType, trySwitchingChain]);
     const executePayment = useCallback(async (token) => {
         const txHash = await payFromWallet(token);
         if (!txHash)
@@ -66,10 +43,6 @@ export default function PayWithToken() {
     const handleTransfer = useCallback(async (token) => {
         if (isRestricted)
             return;
-        if (!(await ensureCorrectChain(token))) {
-            setPayState(PayState.RequestCancelled);
-            return;
-        }
         setPayState(PayState.RequestingPayment);
         try {
             await executePayment(token);
@@ -77,17 +50,10 @@ export default function PayWithToken() {
             setTimeout(() => setRoute(ROUTE.CONFIRMATION), 200);
         }
         catch (e) {
-            if (e?.name === "ConnectorChainMismatchError") {
-                log("Chain mismatch detected, retrying");
-                if (await trySwitchingChain(token, true)) {
-                    await executePayment(token);
-                    return;
-                }
-            }
             setPayState(PayState.RequestCancelled);
             log("Failed to pay with token", e);
         }
-    }, [isRestricted, ensureCorrectChain, executePayment, trySwitchingChain, setPayState, setRoute, log]);
+    }, [isRestricted, executePayment, setPayState, setRoute, log]);
     useEffect(() => {
         if (!selectedCurrencyOption)
             return;
@@ -109,7 +75,7 @@ export default function PayWithToken() {
             handleTransfer(selectedCurrencyOption);
         }
     };
-    return (_jsxs(PageContent, { children: [_jsx(LoadingContainer, { children: _jsxs(AnimationContainer, { "$shake": payState === PayState.RequestCancelled, "$circle": true, children: [_jsx(AnimatePresence, { children: payState === PayState.RequestCancelled || (isExpired && isDeposit) ? (_jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: onRetry, children: _jsx(RetryIconContainer, { children: _jsx(Tooltip, { open: payState === PayState.RequestCancelled, message: locales.tryAgainQuestion, xOffset: -6, children: _jsx(RetryIconCircle, {}) }) }) })) : (_jsx(ChainLogoContainer, { children: getChainLogo(selectedCurrencyOption?.chain_id) }, "ChainLogoContainer")) }), _jsx(AnimatePresence, { children: _jsx(CircleSpinner, { logo: _jsx("img", { src: selectedCurrencyOption?.image_uri, alt: selectedCurrencyOption?.ticker }, selectedCurrencyOption?.image_uri), loading: payState === PayState.RequestingPayment && !isExpired, unavailable: false }, "CircleSpinner") })] }) }), !isExpired ? (_jsxs(ModalContent, { children: [payState === PayState.RequestCancelled && (_jsxs(_Fragment, { children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.injectionScreen_rejected_h1] }), _jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] })), payState === PayState.SwitchingChain && _jsx(ModalH1, { children: locales.switchNetworkScreen_heading }), payState === PayState.RequestingPayment && (_jsxs(_Fragment, { children: [_jsx(ModalH1, { children: locales.requesting_payment_h1 }), _jsx(ModalBody, { children: locales.requesting_payment_p })] })), payState === PayState.RequestSuccessful && _jsx(ModalH1, { children: locales.injectionScreen_connected_h1 })] })) : (_jsxs(ModalContent, { children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.payWithTokenScreen_expired_h1] }), _jsx(ModalBody, { children: locales.payWithTokenScreen_expired_p })] }))] }));
+    return (_jsxs(PageContent, { children: [_jsx(LoadingContainer, { children: _jsxs(AnimationContainer, { "$shake": payState === PayState.RequestCancelled, "$circle": true, children: [_jsx(AnimatePresence, { children: payState === PayState.RequestCancelled || (isExpired && isDeposit) ? (_jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: onRetry, children: _jsx(RetryIconContainer, { children: _jsx(Tooltip, { open: payState === PayState.RequestCancelled, message: locales.tryAgainQuestion, xOffset: -6, children: _jsx(RetryIconCircle, {}) }) }) })) : (_jsx(ChainLogoContainer, { children: getChainLogo(selectedCurrencyOption?.chain_id) }, "ChainLogoContainer")) }), _jsx(AnimatePresence, { children: _jsx(CircleSpinner, { logo: _jsx("img", { src: selectedCurrencyOption?.image_uri, alt: selectedCurrencyOption?.ticker }, selectedCurrencyOption?.image_uri), loading: payState === PayState.RequestingPayment && !isExpired, unavailable: false }, "CircleSpinner") })] }) }), !isExpired ? (_jsxs(ModalContent, { children: [payState === PayState.RequestCancelled && (_jsxs(_Fragment, { children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.injectionScreen_rejected_h1] }), _jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] })), payState === PayState.RequestingPayment && (_jsxs(_Fragment, { children: [_jsx(ModalH1, { children: locales.requesting_payment_h1 }), _jsx(ModalBody, { children: locales.requesting_payment_p })] })), payState === PayState.RequestSuccessful && _jsx(ModalH1, { children: locales.injectionScreen_connected_h1 })] })) : (_jsxs(ModalContent, { children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.payWithTokenScreen_expired_h1] }), _jsx(ModalBody, { children: locales.payWithTokenScreen_expired_p })] }))] }));
 }
 const LoadingContainer = styled(motion.div) `
   display: flex;

package/dist/components/Pages/PreparingPayment/index.d.ts

@@ -0,0 +1 @@
+export default function PreparingPayment(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import styled from "../../../styles/styled";
+import usePayContext from "../../contexts/pay";
+import { PageContent } from "../../ui/Modal/styles";
+import OptionsList from "../../ui/OptionsList";
+import PoweredByFooter from "../../ui/PoweredByFooter";
+import { Skeleton } from "../../ui/Skeleton";
+export default function PreparingPayment() {
+    const { triggerResize } = usePayContext();
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize]);
+    return (_jsxs(PageContent, { children: [_jsxs(HeaderSkeleton, { children: [_jsx(AmountSkeleton, {}), _jsxs(SubtitleSkeletonRow, { children: [_jsxs(LogoSkeletonStack, { children: [_jsx(LogoSkeleton, {}), _jsx(LogoSkeleton, { "$overlap": true }), _jsx(LogoSkeleton, { "$overlap": true }), _jsx(LogoSkeleton, { "$overlap": true })] }), _jsx(SubtitleSkeleton, {})] })] }), _jsx(OptionsList, { options: [], isLoading: true, requiredSkeletons: 3 }), _jsx(PoweredByFooter, {})] }));
+}
+const HeaderSkeleton = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const BaseSkeleton = styled(Skeleton) `
+  background-color: rgba(0, 0, 0, 0.1);
+`;
+const AmountSkeleton = styled(BaseSkeleton) `
+  width: 184px;
+  height: 50px;
+  border-radius: 16px;
+`;
+const SubtitleSkeletonRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: 24px 0;
+`;
+const LogoSkeletonStack = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const LogoSkeleton = styled(BaseSkeleton) `
+  width: 24px;
+  height: 24px;
+  border-radius: 9999px;
+  margin-left: ${(props) => (props.$overlap ? -8 : 0)}px;
+`;
+const SubtitleSkeleton = styled(BaseSkeleton) `
+  width: 160px;
+  height: 18px;
+  border-radius: 9999px;
+`;

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

@@ -1,10 +1,10 @@
 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, useMemo, useRef } from "react";
 import { usePaymentLifecycle } from "../../hooks/usePaymentLifecycle";
 import { ResetContainer } from "../../styles";
+import { ROUTE } from "../../types/routes";
 import usePayContext from "../contexts/pay";
 import ThemedButton, { ThemeContainer } from "../ui/ThemedButton";
 import { SkeletonContainer, TextContainer } from "./styles";
@@ -19,97 +19,18 @@ export function PayButton(props) {
 }
 /** Like PayButton, but with custom styling. */
 function PayButtonCustom(props) {
-    const { paymentState, showModal, setOpen, setOnOpen, setOnClose } = usePayContext();
-    const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = props;
-    const { payOrder: order, setPayId } = paymentState;
-    const { children, closeOnSuccess, resetOnSuccess } = props;
-    const hasDepositParams = "toAddress" in props;
-    const hasPayId = "payId" in props;
-    const depositParams = useMemo(() => {
-        if (!hasDepositParams)
-            return null;
-        return {
-            intent: {
-                asset: {
-                    address: props.toToken,
-                    chain_id: props.toChain,
-                },
-                receiving_address: props.toAddress,
-                amount: {
-                    token_amount: props.toAmount,
-                },
-            },
-            metadata: props.metadata,
-        };
-    }, [hasDepositParams, props]);
-    const payId = hasPayId ? props.payId : null;
+    const { options } = usePayContext();
+    usePayModalCallbacks(props.onOpen, props.onClose);
+    const { order, show, hide } = usePayButtonController(props);
     usePaymentLifecycle(order, {
-        onPaymentStarted,
-        onPaymentCompleted,
-        onPaymentBounced,
+        onPaymentStarted: props.onPaymentStarted,
+        onPaymentCompleted: props.onPaymentCompleted,
+        onPaymentBounced: props.onPaymentBounced,
+    }, {
+        optimisticConfirmation: options?.optimisticConfirmation,
     });
-    const metadataKey = useMemo(() => JSON.stringify(depositParams?.metadata ?? {}), [depositParams?.metadata]);
-    // Preload payOrder
-    useQuery({
-        queryKey: [
-            "payOrder",
-            depositParams?.intent.asset?.address,
-            depositParams?.intent.asset?.chain_id,
-            depositParams?.intent.receiving_address,
-            depositParams?.intent.amount.token_amount,
-            metadataKey,
-        ],
-        enabled: hasDepositParams,
-        staleTime: Infinity,
-        queryFn: async () => {
-            if (!depositParams)
-                return null;
-            await paymentState.createDepositPayOrder(depositParams, (msg) => props.onPaymentCreationError?.({
-                type: "payorder_creation_error",
-                errorMessage: msg,
-            }));
-            return null;
-        },
-    });
-    // Load payment by ID when using payId
-    useEffect(() => {
-        if (!payId)
-            return;
-        setPayId(payId);
-    }, [payId, setPayId]);
-    // Register open/close handlers
-    useEffect(() => {
-        setOnOpen(props.onOpen);
-        setOnClose(props.onClose);
-        return () => {
-            setOnOpen(undefined);
-            setOnClose(undefined);
-        };
-    }, [props.onOpen, props.onClose, setOnOpen, setOnClose]);
-    const show = useCallback(() => {
-        if (!order)
-            return;
-        showModal({
-            closeOnSuccess,
-            resetOnSuccess,
-        });
-    }, [order, closeOnSuccess, resetOnSuccess, showModal]);
-    const hide = useCallback(() => {
-        setOpen(false);
-    }, [setOpen]);
-    // Auto-open modal
-    const hasAutoOpened = useRef(false);
-    useEffect(() => {
-        if (!props.defaultOpen)
-            return;
-        if (hasAutoOpened.current)
-            return;
-        if (!order)
-            return;
-        show();
-        hasAutoOpened.current = true;
-    }, [order, props.defaultOpen, show]);
-    return children({ show, hide });
+    useDefaultOpen(props.defaultOpen, show);
+    return props.children({ show, hide });
 }
 PayButtonCustom.displayName = "PayButton.Custom";
 PayButton.Custom = PayButtonCustom;
@@ -140,7 +61,166 @@ const contentVariants = {
     },
 };
 function ButtonInner({ label }) {
-    return (_jsx(AnimatePresence, { initial: false, children: _jsx(TextContainer, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, style: {
-                height: 40,
-            }, children: label }) }));
+    return (_jsx(AnimatePresence, { initial: false, children: _jsx(TextContainer, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, style: { height: 40 }, children: label }) }));
+}
+function isDepositParams(props) {
+    return "toAddress" in props;
+}
+function isPayIdProps(props) {
+    return "payId" in props;
+}
+function useResolvedPaymentInput(props) {
+    const hasDepositParams = isDepositParams(props);
+    const hasPayId = isPayIdProps(props);
+    const toToken = hasDepositParams ? props.toToken : undefined;
+    const toChain = hasDepositParams ? props.toChain : undefined;
+    const toAddress = hasDepositParams ? props.toAddress : undefined;
+    const toAmount = hasDepositParams ? props.toAmount : undefined;
+    const metadata = hasDepositParams ? props.metadata : undefined;
+    const payId = hasPayId ? props.payId : null;
+    const depositParams = useMemo(() => {
+        if (!hasDepositParams)
+            return null;
+        return {
+            intent: {
+                asset: {
+                    address: toToken,
+                    chain_id: toChain,
+                },
+                receiving_address: toAddress,
+                amount: {
+                    token_amount: toAmount,
+                },
+            },
+            metadata,
+        };
+    }, [hasDepositParams, toToken, toChain, toAddress, toAmount, metadata]);
+    if (payId) {
+        return {
+            kind: "payId",
+            payId,
+            depositParams: null,
+        };
+    }
+    return {
+        kind: "deposit",
+        payId: null,
+        depositParams: depositParams,
+    };
+}
+function usePayModalCallbacks(onOpen, onClose) {
+    const { setOnOpen, setOnClose } = usePayContext();
+    useEffect(() => {
+        setOnOpen(onOpen);
+        setOnClose(onClose);
+        return () => {
+            setOnOpen(undefined);
+            setOnClose(undefined);
+        };
+    }, [onClose, onOpen, setOnClose, setOnOpen]);
+}
+function useDefaultOpen(enabled, show) {
+    const hasAutoOpened = useRef(false);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        if (hasAutoOpened.current)
+            return;
+        hasAutoOpened.current = true;
+        show();
+    }, [enabled, show]);
+}
+function useDepositPayOrderLoader(params) {
+    const { paymentState } = usePayContext();
+    const { depositParams, onPaymentCreationError } = params;
+    const handlePaymentCreationError = useCallback((msg) => {
+        onPaymentCreationError?.({
+            type: "payorder_creation_error",
+            errorMessage: msg,
+        });
+    }, [onPaymentCreationError]);
+    return useCallback(async () => {
+        if (!depositParams)
+            return undefined;
+        return paymentState.createDepositPayOrder(depositParams, handlePaymentCreationError);
+    }, [depositParams, handlePaymentCreationError, paymentState]);
+}
+function usePayButtonController(props) {
+    const { paymentState, showModal, setOpen, setRoute, open, route, displayError } = usePayContext();
+    const { payOrder: order, setPayId } = paymentState;
+    const { closeOnSuccess, resetOnSuccess, onPaymentCreationError } = props;
+    const paymentInput = useResolvedPaymentInput(props);
+    const queuedModalOptionsRef = useRef(null);
+    const paymentKind = paymentInput.kind;
+    const handlePaymentCreationError = useCallback((event) => {
+        queuedModalOptionsRef.current = null;
+        displayError(event.errorMessage);
+        onPaymentCreationError?.(event);
+    }, [displayError, onPaymentCreationError]);
+    const loadDepositPayOrder = useDepositPayOrderLoader({
+        depositParams: paymentInput.depositParams,
+        onPaymentCreationError: handlePaymentCreationError,
+    });
+    const payId = paymentKind === "payId" ? paymentInput.payId : null;
+    useEffect(() => {
+        if (!payId)
+            return;
+        setPayId(payId);
+    }, [payId, setPayId]);
+    useEffect(() => {
+        const queuedModalOptions = queuedModalOptionsRef.current;
+        if (!queuedModalOptions || !order)
+            return;
+        queuedModalOptionsRef.current = null;
+        showModal(queuedModalOptions);
+    }, [order, showModal]);
+    useEffect(() => {
+        if (paymentKind !== "deposit")
+            return;
+        if (open || route !== ROUTE.PREPARING_PAYMENT)
+            return;
+        queuedModalOptionsRef.current = null;
+    }, [open, paymentKind, route]);
+    const show = useCallback(() => {
+        const nextModalOptions = {
+            closeOnSuccess,
+            resetOnSuccess,
+        };
+        if (order) {
+            showModal(nextModalOptions);
+            return;
+        }
+        queuedModalOptionsRef.current = nextModalOptions;
+        if (paymentKind === "deposit") {
+            displayError(null);
+            setRoute(ROUTE.PREPARING_PAYMENT);
+            setOpen(true);
+            void loadDepositPayOrder();
+            return;
+        }
+        if (payId) {
+            void setPayId(payId);
+            return;
+        }
+    }, [
+        closeOnSuccess,
+        displayError,
+        loadDepositPayOrder,
+        order,
+        payId,
+        paymentKind,
+        resetOnSuccess,
+        setOpen,
+        setPayId,
+        setRoute,
+        showModal,
+    ]);
+    const hide = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    return {
+        order,
+        show,
+        hide,
+    };
 }

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

@@ -1 +1,3 @@
-export declare function PayModal(): import("react/jsx-runtime").JSX.Element;
+export declare function PayModal({ onExited }: {
+    onExited?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -9,7 +9,7 @@ import { isWalletConnectConnector } from "../../utils";
 import usePayContext from "../contexts/pay";
 import Modal from "../ui/Modal";
 const pages = Object.fromEntries(Object.entries(routeConfig).map(([key, cfg]) => [key, cfg.component]));
-export function PayModal() {
+export function PayModal({ onExited }) {
     const { route, setOpen, setRoute, paymentState, mode, theme, customTheme } = usePayContext();
     const { setConnectorChainType, clearUserSelection, setPayToAddressChainId: setPayToAddressChain, setPayToAddressCurrency, setSelectedCurrencyOption, selectedWallet, selectedCurrencyOption, connectorChainType, } = paymentState;
     const locales = useLocales({
@@ -61,5 +61,5 @@ export function PayModal() {
             setRoute(config.onBack);
         }
     }, [config, actions, setRoute, clearUserSelection]);
-    return (_jsx(ThemeProvider, { theme: theme, customTheme: customTheme, mode: mode, children: _jsx(Modal, { pages: pages, pageId: route, heading: heading, depth: depth, onClose: () => setOpen(false), onInfo: showInfoButton ? () => setRoute(ROUTE.ABOUT) : undefined, onBack: showBackButton ? onBack : undefined }) }));
+    return (_jsx(ThemeProvider, { theme: theme, customTheme: customTheme, mode: mode, children: _jsx(Modal, { pages: pages, pageId: route, heading: heading, depth: depth, onClose: () => setOpen(false), onExited: onExited, onInfo: showInfoButton ? () => setRoute(ROUTE.ABOUT) : undefined, onBack: showBackButton ? onBack : undefined }) }));
 }

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

@@ -10,8 +10,9 @@ type ModalProps = {
     positionInside?: boolean;
     inline?: boolean;
     onClose?: () => void;
+    onExited?: () => void;
     onBack?: () => void;
     onInfo?: () => void;
 };
-export default function Modal({ pages, pageId, heading, depth, positionInside, inline, onClose, onBack, onInfo, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Modal({ pages, pageId, heading, depth, positionInside, inline, onClose, onExited, onBack, onInfo, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getChainTypeName } from "@coin-voyage/shared/chain";
 import { FocusTrap, usePrevious } from "@coin-voyage/shared/hooks";
 import { isMobile } from "@coin-voyage/shared/utils";
+import { useEffect } from "react";
 import useLocales from "../../../hooks/useLocales";
 import { useThemeContext } from "../../../providers/theme/provider";
 import { ResetContainer } from "../../../styles";
@@ -37,7 +38,7 @@ export const contentVariants = {
         transition: { duration: contentTransitionDuration, ease: [0.26, 0.08, 0.25, 1] },
     },
 };
-export default function Modal({ pages, pageId, heading, depth = 1, positionInside, inline, onClose, onBack, onInfo, }) {
+export default function Modal({ pages, pageId, heading, depth = 1, positionInside, inline, onClose, onExited, onBack, onInfo, }) {
     const context = usePayContext();
     const themeContext = useThemeContext();
     const mobile = isMobile();
@@ -50,6 +51,12 @@ export default function Modal({ pages, pageId, heading, depth = 1, positionInsid
         resizeDependency: context.resize,
     });
     const prevDepth = usePrevious(depth, depth);
+    const prevMounted = usePrevious(mounted, mounted);
+    useEffect(() => {
+        if (prevMounted && !mounted && !context.open) {
+            onExited?.();
+        }
+    }, [context.open, mounted, onExited, prevMounted]);
     const Content = (_jsx(ResetContainer, { "$useTheme": themeContext.theme, "$useMode": themeContext.mode, "$customTheme": themeContext.customTheme, children: _jsxs(ModalContainer, { role: "dialog", style: { pointerEvents: rendered ? "auto" : "none", position: positionInside ? "absolute" : undefined }, children: [!inline && _jsx(BackgroundOverlay, { "$active": rendered, onClick: onClose, "$blur": context.options?.overlayBlur }), _jsxs(Container, { style: dimensionsCSS, initial: false, children: [_jsx("div", { style: {
                                 pointerEvents: inTransition ? "all" : "none",
                                 position: "absolute",

package/dist/config/route-config.js

@@ -9,6 +9,7 @@ import MobileConnectors from "../components/Pages/MobileConnectors";
 import Onboarding from "../components/Pages/Onboarding";
 import PayToAddress from "../components/Pages/PayToAddress";
 import PayWithToken from "../components/Pages/PayWithToken";
+import PreparingPayment from "../components/Pages/PreparingPayment";
 import SelectChain from "../components/Pages/SelectChain";
 import SelectMethod from "../components/Pages/SelectMethod";
 import SelectPayToAddressChain from "../components/Pages/SelectPayToAddressChain";
@@ -22,6 +23,12 @@ export const routeConfig = {
         heading: (ctx) => ctx.locales.selectMethodScreen_heading,
         showBackButton: false,
     },
+    [ROUTE.PREPARING_PAYMENT]: {
+        component: _jsx(PreparingPayment, {}),
+        heading: () => "Preparing payment",
+        showBackButton: false,
+        showInfoButton: false,
+    },
     [ROUTE.CARD_PAYMENT]: {
         component: _jsx(CardPayment, {}),
         heading: () => "Pay with Card",

package/dist/hooks/usePayWithToken.d.ts

@@ -1,4 +1,4 @@
-import type { ChainType, PayOrder } from "@coin-voyage/shared/types";
+import { type ChainType, type PayOrder } from "@coin-voyage/shared/types";
 import type { CurrencyAndQuoteID } from "../types/state";
 interface PayFromWalletParams {
     senderAddr: string | undefined;

package/dist/hooks/usePayWithToken.js

@@ -1,8 +1,57 @@
 import { usePrepareTransaction } from "@coin-voyage/crypto/hooks";
-import { getDepositAddress, getWalletPaymentData } from "@coin-voyage/shared/payment";
+import { PaymentRail, StepKind, } from "@coin-voyage/shared/types";
 import { assert } from "@coin-voyage/shared/utils";
 import { useBackendApi } from "../components/contexts/api";
 import { fetchPaymentDetails } from "../lib/api/payment-details";
+import { isCryptoPaymentData, isDepositStepData } from "@coin-voyage/shared/payment";
+async function executeWalletStep({ actions, paymentData, senderAddr, step, }) {
+    if (step.kind === StepKind.KIND_TRANSACTION) {
+        assert(isCryptoPaymentData(step.data), "Transaction step is missing executable wallet data");
+        return actions.execute({
+            from: senderAddr,
+            paymentData: step.data,
+        });
+    }
+    assert(step.kind === StepKind.KIND_DEPOSIT, "Unsupported wallet payment step");
+    assert(isDepositStepData(step.data), "Deposit step is missing a deposit address");
+    return actions.execute({
+        amount: BigInt(paymentData.src.currency_amount.raw_amount),
+        from: senderAddr,
+        to: step.data.deposit_address,
+        chainId: paymentData.src.chain_id,
+        token: step.data.currency.address
+            ? { address: step.data.currency.address, decimals: paymentData.src.decimals }
+            : undefined,
+    });
+}
+async function executeWalletPayment({ actions, paymentData, senderAddr, log, }) {
+    let lastTxHash;
+    let sourceTxHash;
+    for (const [index, step] of paymentData.steps.entries()) {
+        if (step.rail !== PaymentRail.CRYPTO) {
+            throw new Error(`Unsupported payment rail for wallet execution: ${step.rail}`);
+        }
+        log(`[PAY-WITH-TOKEN] Executing step ${index + 1}/${paymentData.steps.length}: ${step.kind}`);
+        const txHash = await executeWalletStep({
+            actions,
+            paymentData,
+            senderAddr,
+            log,
+            step,
+        });
+        if (!txHash) {
+            return undefined;
+        }
+        if (!sourceTxHash && step.kind === StepKind.KIND_DEPOSIT) {
+            sourceTxHash = txHash;
+        }
+        lastTxHash = txHash;
+        log(`[PAY-WITH-TOKEN] Step ${index + 1}/${paymentData.steps.length} hash: ${txHash}`);
+    }
+    const txHash = sourceTxHash ?? lastTxHash;
+    assert(Boolean(txHash), "Payment execution did not produce a transaction hash");
+    return txHash;
+}
 export function usePayFromWallet({ senderAddr, payOrder, setPayOrder, chainType, log }) {
     const actions = usePrepareTransaction(chainType);
     const api = useBackendApi();
@@ -25,24 +74,15 @@ export function usePayFromWallet({ senderAddr, payOrder, setPayOrder, chainType,
         const paymentData = paymentDetails.data;
         log(`[PAY-WITH-TOKEN] Final Quote for Order: ${JSON.stringify(paymentDetails)}, params: ${JSON.stringify(params)}`);
         try {
-            const walletPaymentData = getWalletPaymentData(paymentData);
-            const depositAddress = getDepositAddress(paymentData);
-            assert(Boolean(walletPaymentData || depositAddress), "Payment step is missing executable wallet data");
-            const txHash = walletPaymentData
-                ? await actions.execute({
-                    from: senderAddr,
-                    chainId: paymentData.src.chain_id,
-                    paymentData: walletPaymentData,
-                })
-                : await actions.execute({
-                    amount: BigInt(paymentData.src.currency_amount.raw_amount),
-                    from: senderAddr,
-                    to: depositAddress,
-                    chainId: paymentData.src.chain_id,
-                    token: paymentData.src.address
-                        ? { address: paymentData.src.address, decimals: paymentData.src.decimals }
-                        : undefined,
-                });
+            const txHash = await executeWalletPayment({
+                actions,
+                paymentData,
+                senderAddr,
+                log,
+            });
+            if (!txHash) {
+                return undefined;
+            }
             const nextPaymentData = {
                 ...paymentData,
                 source_tx_hash: txHash,

package/dist/hooks/usePaymentLifecycle.d.ts

@@ -4,13 +4,17 @@ type PaymentLifecycleHandlers = {
     onPaymentCompleted: ((event: PayOrderCompletedEvent) => void) | undefined;
     onPaymentBounced: ((event: PayOrderRefundedEvent) => void) | undefined;
 };
+type PaymentLifecycleOptions = {
+    optimisticConfirmation?: boolean;
+};
 /**
  *  Handles payment lifecycle events of an order, such as started, completed, and bounced.
  * @param {PayOrder | undefined} order The pay order to monitor.
  * @param {PaymentLifecycleHandlers} handlers Handlers for payment lifecycle events.
+ * @param {PaymentLifecycleOptions} options Lifecycle behavior flags.
  * @returns
  */
-export declare function usePaymentLifecycle(order: PayOrder | undefined, handlers: PaymentLifecycleHandlers): {
+export declare function usePaymentLifecycle(order: PayOrder | undefined, handlers: PaymentLifecycleHandlers, options?: PaymentLifecycleOptions): {
     isStarted: boolean;
     isFinalized: boolean;
     order: PayOrder | undefined;

package/dist/hooks/usePaymentLifecycle.js

@@ -1,76 +1,82 @@
 import { PayOrderMode, PayOrderStatus, } from "@coin-voyage/shared/types";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
+const COMPLETED_STATES = [PayOrderStatus.COMPLETED, PayOrderStatus.REFUNDED];
+const STARTED_STATES = [
+    ...COMPLETED_STATES,
+    PayOrderStatus.PARTIAL_PAYMENT,
+    PayOrderStatus.AWAITING_CONFIRMATION,
+    PayOrderStatus.OPTIMISTIC_CONFIRMED,
+    PayOrderStatus.EXECUTING_ORDER,
+];
 /**
  *  Handles payment lifecycle events of an order, such as started, completed, and bounced.
  * @param {PayOrder | undefined} order The pay order to monitor.
  * @param {PaymentLifecycleHandlers} handlers Handlers for payment lifecycle events.
+ * @param {PaymentLifecycleOptions} options Lifecycle behavior flags.
  * @returns
  */
-export function usePaymentLifecycle(order, handlers) {
+export function usePaymentLifecycle(order, handlers, options = {}) {
     const sentStart = useRef(false);
     const sentComplete = useRef(false);
+    const currentOrderId = useRef(undefined);
     const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = handlers;
+    const { optimisticConfirmation = true } = options;
+    const orderId = order?.id;
     const orderStatus = order?.status;
-    const isSale = order?.mode === PayOrderMode.SALE;
-    const completedStates = useMemo(() => [PayOrderStatus.COMPLETED, PayOrderStatus.REFUNDED], []);
-    const isStarted = useMemo(() => {
-        if (!orderStatus)
-            return false;
-        const startedStatus = [
-            ...completedStates,
-            PayOrderStatus.PARTIAL_PAYMENT,
-            PayOrderStatus.AWAITING_CONFIRMATION,
-            PayOrderStatus.OPTIMISTIC_CONFIRMED,
-            PayOrderStatus.EXECUTING_ORDER,
-        ];
-        return startedStatus.includes(orderStatus);
-    }, [orderStatus, completedStates]);
-    const isFinalized = useMemo(() => {
-        if (!orderStatus)
-            return false;
-        const finalizedStatus = [...completedStates];
-        if (isSale) {
-            finalizedStatus.push(PayOrderStatus.OPTIMISTIC_CONFIRMED, PayOrderStatus.EXECUTING_ORDER);
-        }
-        return finalizedStatus.includes(orderStatus);
-    }, [orderStatus, isSale, completedStates]);
+    const orderMetadata = order?.metadata;
+    const payment = order?.payment;
+    const allowOptimisticCompletion = 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)));
+    useEffect(() => {
+        if (!orderId)
+            return;
+        if (currentOrderId.current === orderId)
+            return;
+        currentOrderId.current = orderId;
+        sentStart.current = false;
+        sentComplete.current = false;
+    }, [orderId]);
     useEffect(() => {
-        if (sentStart.current || !order?.payment || !isStarted)
+        if (sentStart.current || !orderId || !payment || !orderStatus || !isStarted)
             return;
         sentStart.current = true;
         onPaymentStarted?.({
             type: "payorder_confirming",
-            payorder_id: order.id,
-            status: order.status,
-            metadata: order.metadata,
-            payment_data: order.payment,
+            payorder_id: orderId,
+            status: orderStatus,
+            metadata: orderMetadata,
+            payment_data: payment,
         });
-    }, [order, isStarted, onPaymentStarted]);
+    }, [isStarted, onPaymentStarted, orderId, orderMetadata, orderStatus, payment]);
     useEffect(() => {
-        if (sentComplete.current || !order?.payment || !isFinalized)
+        if (sentComplete.current || !orderId || !payment || !orderStatus || !isFinalized)
             return;
         sentComplete.current = true;
-        if (order.status === PayOrderStatus.REFUNDED) {
+        if (orderStatus === PayOrderStatus.REFUNDED) {
             onPaymentBounced?.({
                 type: "payorder_refunded",
-                payorder_id: order.id,
-                status: order.status,
-                metadata: order.metadata,
-                payment_data: order.payment,
-                refund_address: order.payment.refund_address ?? "",
-                refund_tx_hash: order.payment.refund_tx_hash ?? "",
+                payorder_id: orderId,
+                status: orderStatus,
+                metadata: orderMetadata,
+                payment_data: payment,
+                refund_address: payment.refund_address ?? "",
+                refund_tx_hash: payment.refund_tx_hash ?? "",
             });
             return;
         }
         onPaymentCompleted?.({
             type: "payorder_completed",
-            payorder_id: order.id,
-            status: order.status,
-            metadata: order.metadata,
-            payment_data: order.payment,
-            source_tx_hash: order.payment.source_tx_hash ?? "",
-            destination_tx_hash: order.payment.destination_tx_hash ?? "",
+            payorder_id: orderId,
+            status: orderStatus,
+            metadata: orderMetadata,
+            payment_data: payment,
+            source_tx_hash: payment.source_tx_hash ?? "",
+            destination_tx_hash: payment.destination_tx_hash ?? "",
         });
-    }, [order, isFinalized, onPaymentCompleted, onPaymentBounced]);
+    }, [isFinalized, onPaymentBounced, onPaymentCompleted, orderId, orderMetadata, orderStatus, payment]);
     return { isStarted, isFinalized, order };
 }

package/dist/hooks/usePaymentState.d.ts

@@ -5,10 +5,11 @@ import { CurrencyAndQuoteID } from "../types/state";
 import { usePayOrderQuotes } from "./usePayOrderQuotes";
 /** Loads a PayOrder + manages the corresponding modal. */
 export interface PaymentState {
-    setPayId: (id: string | null) => Promise<void>;
-    createDepositPayOrder: (params: PayOrderParams, onError?: (message: string) => void) => Promise<void>;
+    setPayId: (id: string | null) => Promise<PayOrder | undefined>;
+    createDepositPayOrder: (params: PayOrderParams, onError?: (message: string) => void) => Promise<PayOrder | undefined>;
     copyDepositPayOrder: () => Promise<void>;
     clearUserSelection: () => void;
+    resetPaymentState: () => void;
     payOrder: PayOrder | undefined;
     paymentMethod: PaymentMethod | undefined;
     setPaymentMethod: React.Dispatch<React.SetStateAction<PaymentMethod | undefined>>;
@@ -31,7 +32,7 @@ export interface PaymentState {
 }
 export declare function usePaymentState({ payOrder, setPayOrder, setRoute, log, }: {
     payOrder: PayOrder | undefined;
-    setPayOrder: (o: PayOrder) => void;
+    setPayOrder: (o: PayOrder | undefined) => void;
     setRoute: React.Dispatch<React.SetStateAction<ROUTE>>;
     log: (...args: unknown[]) => void;
 }): PaymentState;

package/dist/hooks/usePaymentState.js

@@ -15,7 +15,8 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
     const api = useBackendApi();
     const [connectorChainType, setConnectorChainType] = useState();
     const [selectedWallet, setSelectedWallet] = useState();
-    const lastRequestedIdRef = useRef(null);
+    const latestRequestedIdRef = useRef(null);
+    const inFlightPayOrderIdsRef = useRef(new Set());
     const { account: senderAccount } = useAccount({
         selectedWallet,
         chainType: connectorChainType,
@@ -74,13 +75,23 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
     const setPayOrderId = useCallback(async (payOrderId) => {
         if (!payOrderId)
             return;
-        if (lastRequestedIdRef.current === payOrderId)
+        if (payOrder?.id === payOrderId)
             return;
-        lastRequestedIdRef.current = payOrderId;
-        const order = await fetchPayOrder(payOrderId);
-        if (order)
-            setPayOrder(order);
-    }, [fetchPayOrder, setPayOrder]);
+        if (inFlightPayOrderIdsRef.current.has(payOrderId))
+            return;
+        latestRequestedIdRef.current = payOrderId;
+        inFlightPayOrderIdsRef.current.add(payOrderId);
+        try {
+            const order = await fetchPayOrder(payOrderId);
+            if (order && latestRequestedIdRef.current === payOrderId) {
+                setPayOrder(order);
+            }
+            return order;
+        }
+        finally {
+            inFlightPayOrderIdsRef.current.delete(payOrderId);
+        }
+    }, [fetchPayOrder, payOrder?.id, setPayOrder]);
     const copyDepositPayOrder = useCallback(async () => {
         if (!payOrder?.id) {
             log(`No payOrder to copy`);
@@ -124,10 +135,13 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
             }
             const { data: payOrder, error } = await api.createDepositPayOrder(params);
             if (!payOrder || error) {
+                const errorMessage = error?.message || "Unable to create payment order";
+                onError?.(errorMessage);
                 log(`[CREATE DEPOSIT] Error creating payOrder: ${JSON.stringify(error)}`);
                 return;
             }
             setPayOrder(payOrder);
+            return payOrder;
         }
         catch (e) {
             if (e instanceof Error)
@@ -142,11 +156,24 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
         setSelectedWallet(undefined);
         setRoute(ROUTE.SELECT_METHOD);
     }, [setRoute]);
+    const resetPaymentState = useCallback(() => {
+        latestRequestedIdRef.current = null;
+        inFlightPayOrderIdsRef.current.clear();
+        setPayOrder(undefined);
+        setPaymentMethod(undefined);
+        setSelectedCurrencyOption(undefined);
+        setConnectorChainType(undefined);
+        setSelectedWallet(undefined);
+        setPayToAddressChainId(undefined);
+        setPayToAddressCurrency(undefined);
+        setRoute(ROUTE.SELECT_METHOD);
+    }, [setPayOrder, setRoute]);
     return {
         setPayId: setPayOrderId,
         createDepositPayOrder,
         copyDepositPayOrder,
         clearUserSelection,
+        resetPaymentState,
         payOrder,
         paymentMethod,
         setPaymentMethod,

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, chainId: quote.chain_id }, quote.ticker + quote.chain_id),
+                _jsx(TokenChainLogo, { src: quote.image_uri, alt: `${quote.ticker} logo`, chainId: quote.chain_id }, `${quote.ticker}-${quote.chain_id}`),
             ],
             onClick: () => {
                 setSelectedCurrencyOption(quote);

package/dist/providers/paykit-provider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getDepositAddress, getFiatPaymentStep, getWalletPaymentStep } from "@coin-voyage/shared/payment";
 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 { Buffer } from "buffer";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -35,6 +35,7 @@ export const PayKitProvider = ({ apiKey, environment = "production", ...props })
 };
 function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, options, onConnect, onConnectValidation, onDisconnect, debugMode = false, children, }) {
     const { account } = useAccount();
+    const { isConnected, chainType } = account;
     const [allowedWallets, setAllowedWallets] = useState(onConnectValidation ? [] : null);
     useConnectCallback({
         onConnect,
@@ -61,6 +62,10 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
     const [resize, onResize] = useState(0);
     const onOpenRef = useRef(undefined);
     const onCloseRef = useRef(undefined);
+    const openRef = useRef(false);
+    useEffect(() => {
+        openRef.current = open;
+    }, [open]);
     const setOnOpen = useCallback((fn) => {
         onOpenRef.current = fn;
     }, []);
@@ -100,20 +105,23 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
         setErrorMessage(null);
     }, [route, open]);
     const resetAfterClose = useCallback(() => {
-        if (paymentCompleted && modalOptions?.resetOnSuccess) {
-            setPaymentCompleted(false);
-            paymentStateRef.current.clearUserSelection();
-        }
+        if (!paymentCompleted || !modalOptions?.resetOnSuccess)
+            return;
+        setPaymentCompleted(false);
+        paymentStateRef.current.resetPaymentState();
     }, [modalOptions?.resetOnSuccess, paymentCompleted]);
     const setOpen = useCallback((nextOpen) => {
+        if (openRef.current === nextOpen) {
+            return;
+        }
+        openRef.current = nextOpen;
         setOpenState(nextOpen);
         if (nextOpen) {
             onOpenRef.current?.();
             return;
         }
-        resetAfterClose();
         onCloseRef.current?.();
-    }, [resetAfterClose]);
+    }, []);
     const onSuccess = useCallback(() => {
         setPaymentCompleted(true);
         if (modalOptions?.closeOnSuccess) {
@@ -160,7 +168,7 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
         }
     }, [setOpen, setPayId, setConnectorChainType]);
     useEffect(() => {
-        const intervalMs = getPollingIntervalMs(payOrder);
+        const intervalMs = getPollingIntervalMs(payOrder?.status, payOrder?.mode);
         if (!intervalMs)
             return;
         const timeoutId = setTimeout(refreshOrder, intervalMs);
@@ -174,7 +182,6 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
     const showModal = useCallback((modalOptions) => {
         setModalOptions(modalOptions);
         setOpen(true);
-        const { isConnected, chainType } = account;
         const { payOrder, paymentMethod } = paymentState;
         const status = payOrder?.status;
         const payment = payOrder?.payment;
@@ -186,18 +193,18 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
             return;
         }
         if (status === PayOrderStatus.AWAITING_PAYMENT && payment) {
-            const fiatStep = getFiatPaymentStep(payment);
-            const walletStep = getWalletPaymentStep(payment);
-            const depositAddress = getDepositAddress(payment);
-            if (paymentMethod === PaymentMethod.CARD && fiatStep) {
+            if (paymentMethod === PaymentMethod.CARD) {
                 setRoute(ROUTE.CARD_PAYMENT);
                 return;
             }
-            if (paymentMethod === PaymentMethod.WALLET && (walletStep || depositAddress)) {
+            const step = getPaymentStep(payment);
+            const isTransactionStep = step?.kind === "transaction";
+            if (paymentMethod === PaymentMethod.WALLET || isTransactionStep) {
                 paymentState.setSelectedCurrencyOption(payment.src);
                 setRoute(ROUTE.WALLET_PAYMENT);
                 return;
             }
+            const depositAddress = getDepositAddress(payment);
             if (paymentMethod === PaymentMethod.DEPOSIT_ADDRESS && depositAddress) {
                 paymentState.setPayToAddressChainId(payment.src.chain_id);
                 paymentState.setPayToAddressCurrency(payment.src);
@@ -206,7 +213,7 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
             }
         }
         setRoute(isConnected ? ROUTE.WALLET_TOKEN_SELECT : ROUTE.SELECT_METHOD);
-    }, [account.isConnected, account.chainType, paymentState, setOpen]);
+    }, [isConnected, chainType, paymentState, setOpen]);
     const triggerResize = useCallback(() => onResize((prev) => prev + 1), []);
     const displayError = useCallback((message, code) => {
         setErrorMessage(message);
@@ -247,22 +254,22 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
         paymentState,
         allowedWallets,
     };
-    return (_jsx(PayContext.Provider, { value: value, children: _jsxs(StyledThemeProvider, { theme: defaultTheme, children: [children, _jsx(PayModal, {})] }) }));
+    return (_jsx(PayContext.Provider, { value: value, children: _jsxs(StyledThemeProvider, { theme: defaultTheme, children: [children, _jsx(PayModal, { onExited: resetAfterClose })] }) }));
 }
 // === 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 = (payOrder) => {
-    if (!payOrder?.status)
+const getPollingIntervalMs = (status, mode) => {
+    if (!status)
         return null;
-    if (payOrder.status === PayOrderStatus.AWAITING_PAYMENT) {
+    if (status === PayOrderStatus.AWAITING_PAYMENT) {
         return 5000;
     }
-    if ([PayOrderStatus.AWAITING_CONFIRMATION, PayOrderStatus.OPTIMISTIC_CONFIRMED].includes(payOrder.status)) {
+    if ([PayOrderStatus.AWAITING_CONFIRMATION, PayOrderStatus.OPTIMISTIC_CONFIRMED].includes(status)) {
         return 2500;
     }
-    if (payOrder.status === PayOrderStatus.EXECUTING_ORDER) {
-        return payOrder.mode === PayOrderMode.DEPOSIT ? 1000 : 2500;
+    if (status === PayOrderStatus.EXECUTING_ORDER) {
+        return mode === PayOrderMode.DEPOSIT ? 1000 : 2500;
     }
     return null;
 };

package/dist/types/routes.d.ts

@@ -1,17 +1,18 @@
 export declare enum ROUTE {
     SELECT_METHOD = 0,
-    ADDRESS_CHAIN_SELECT = 1,
-    ADDRESS_TOKEN_SELECT = 2,
-    PAY_TO_ADDRESS = 3,
-    WALLET_CHAIN_SELECT = 4,
-    WALLET_TOKEN_SELECT = 5,
-    CONNECTORS = 6,
-    MOBILECONNECTORS = 7,
-    CONNECT = 8,
-    WALLET_PAYMENT = 9,
-    CARD_PAYMENT = 10,
-    CONFIRMATION = 11,
-    ONBOARDING = 12,
-    ABOUT = 13,
-    DOWNLOAD = 14
+    PREPARING_PAYMENT = 1,
+    ADDRESS_CHAIN_SELECT = 2,
+    ADDRESS_TOKEN_SELECT = 3,
+    PAY_TO_ADDRESS = 4,
+    WALLET_CHAIN_SELECT = 5,
+    WALLET_TOKEN_SELECT = 6,
+    CONNECTORS = 7,
+    MOBILECONNECTORS = 8,
+    CONNECT = 9,
+    WALLET_PAYMENT = 10,
+    CARD_PAYMENT = 11,
+    CONFIRMATION = 12,
+    ONBOARDING = 13,
+    ABOUT = 14,
+    DOWNLOAD = 15
 }

package/dist/types/routes.js

@@ -1,19 +1,20 @@
 export var ROUTE;
 (function (ROUTE) {
     ROUTE[ROUTE["SELECT_METHOD"] = 0] = "SELECT_METHOD";
-    ROUTE[ROUTE["ADDRESS_CHAIN_SELECT"] = 1] = "ADDRESS_CHAIN_SELECT";
-    ROUTE[ROUTE["ADDRESS_TOKEN_SELECT"] = 2] = "ADDRESS_TOKEN_SELECT";
-    ROUTE[ROUTE["PAY_TO_ADDRESS"] = 3] = "PAY_TO_ADDRESS";
-    ROUTE[ROUTE["WALLET_CHAIN_SELECT"] = 4] = "WALLET_CHAIN_SELECT";
-    ROUTE[ROUTE["WALLET_TOKEN_SELECT"] = 5] = "WALLET_TOKEN_SELECT";
-    ROUTE[ROUTE["CONNECTORS"] = 6] = "CONNECTORS";
-    ROUTE[ROUTE["MOBILECONNECTORS"] = 7] = "MOBILECONNECTORS";
-    ROUTE[ROUTE["CONNECT"] = 8] = "CONNECT";
-    ROUTE[ROUTE["WALLET_PAYMENT"] = 9] = "WALLET_PAYMENT";
-    ROUTE[ROUTE["CARD_PAYMENT"] = 10] = "CARD_PAYMENT";
-    ROUTE[ROUTE["CONFIRMATION"] = 11] = "CONFIRMATION";
+    ROUTE[ROUTE["PREPARING_PAYMENT"] = 1] = "PREPARING_PAYMENT";
+    ROUTE[ROUTE["ADDRESS_CHAIN_SELECT"] = 2] = "ADDRESS_CHAIN_SELECT";
+    ROUTE[ROUTE["ADDRESS_TOKEN_SELECT"] = 3] = "ADDRESS_TOKEN_SELECT";
+    ROUTE[ROUTE["PAY_TO_ADDRESS"] = 4] = "PAY_TO_ADDRESS";
+    ROUTE[ROUTE["WALLET_CHAIN_SELECT"] = 5] = "WALLET_CHAIN_SELECT";
+    ROUTE[ROUTE["WALLET_TOKEN_SELECT"] = 6] = "WALLET_TOKEN_SELECT";
+    ROUTE[ROUTE["CONNECTORS"] = 7] = "CONNECTORS";
+    ROUTE[ROUTE["MOBILECONNECTORS"] = 8] = "MOBILECONNECTORS";
+    ROUTE[ROUTE["CONNECT"] = 9] = "CONNECT";
+    ROUTE[ROUTE["WALLET_PAYMENT"] = 10] = "WALLET_PAYMENT";
+    ROUTE[ROUTE["CARD_PAYMENT"] = 11] = "CARD_PAYMENT";
+    ROUTE[ROUTE["CONFIRMATION"] = 12] = "CONFIRMATION";
     // Other
-    ROUTE[ROUTE["ONBOARDING"] = 12] = "ONBOARDING";
-    ROUTE[ROUTE["ABOUT"] = 13] = "ABOUT";
-    ROUTE[ROUTE["DOWNLOAD"] = 14] = "DOWNLOAD";
+    ROUTE[ROUTE["ONBOARDING"] = 13] = "ONBOARDING";
+    ROUTE[ROUTE["ABOUT"] = 14] = "ABOUT";
+    ROUTE[ROUTE["DOWNLOAD"] = 15] = "DOWNLOAD";
 })(ROUTE || (ROUTE = {}));

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.2",
+  "version": "2.4.3",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -31,9 +31,6 @@
       ],
       "server": [
         "dist/server.d.ts"
-      ],
-      "client": [
-        "dist/client.d.ts"
       ]
     }
   },
@@ -63,8 +60,8 @@
     "@stripe/crypto": "0.0.4",
     "styled-components": "^5.3.11",
     "uuid": "13.0.0",
-    "@coin-voyage/crypto": "2.4.0",
-    "@coin-voyage/shared": "2.4.2"
+    "@coin-voyage/crypto": "2.4.3",
+    "@coin-voyage/shared": "2.4.3"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",

package/dist/utils/item.d.ts

@@ -1,5 +0,0 @@
-export interface AllowDeny<T> {
-    allow?: T[];
-    deny?: T[];
-}
-export declare const isItemAllowed: <T>(itemId: T, items?: AllowDeny<T>) => boolean;

package/dist/utils/item.js

@@ -1,6 +0,0 @@
-export const isItemAllowed = (itemId, items) => {
-    if (items?.allow?.length) {
-        return items.allow.includes(itemId);
-    }
-    return !items?.deny?.includes(itemId);
-};