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

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

@@ -29,39 +29,49 @@ function getConfirmationState(payOrder, isDeposit, locales, optimisticConfirmati
         };
     }
     const payment = payOrder.payment;
+    const status = payOrder.status;
     const confirmOptimistically = optimisticConfirmation && !isDeposit;
     const sourceTxURL = payment?.src.chain_id && payment?.source_tx_hash
         ? getChainExplorerTxUrl(payment.src.chain_id, payment.source_tx_hash)
         : undefined;
-    if (payOrder.status === PayOrderStatus.FAILED) {
+    if (status === PayOrderStatus.FAILED) {
         return {
             title: locales.confirmationScreen_failed ?? "Transaction failed",
             uiState: "error",
         };
     }
-    if (payOrder.status === PayOrderStatus.PARTIAL_PAYMENT) {
+    if (status === PayOrderStatus.PARTIAL_PAYMENT) {
         return {
             title: "Partial payment received",
             uiState: "warning",
             txURL: sourceTxURL,
         };
     }
-    if (payOrder.status === PayOrderStatus.AWAITING_CONFIRMATION ||
-        payOrder.status === PayOrderStatus.OPTIMISTIC_CONFIRMED) {
+    if (status === PayOrderStatus.REFUNDED) {
+        const refundTxURL = payment?.dst.chain_id && payment?.refund_tx_hash
+            ? getChainExplorerTxUrl(payment.dst.chain_id, payment.refund_tx_hash)
+            : undefined;
+        return {
+            title: "Payment Refunded",
+            uiState: "warning",
+            txURL: refundTxURL ?? sourceTxURL,
+        };
+    }
+    if (status === PayOrderStatus.AWAITING_CONFIRMATION || status === PayOrderStatus.OPTIMISTIC_CONFIRMED) {
         return {
             title: confirmOptimistically ? locales.confirmationScreen_completed : _jsxs(_Fragment, { children: [locales.awaitingConfirmation, "..."] }),
             uiState: confirmOptimistically ? "success" : "loading",
             txURL: sourceTxURL,
         };
     }
-    if (payOrder.status === PayOrderStatus.EXECUTING_ORDER) {
+    if (status === PayOrderStatus.EXECUTING_ORDER) {
         return {
             title: confirmOptimistically ? (locales.confirmationScreen_completed) : (_jsxs(_Fragment, { children: [locales.confirmationScreen_executing, "..."] })),
             uiState: confirmOptimistically ? "success" : "loading",
             txURL: sourceTxURL,
         };
     }
-    if (payOrder.status === PayOrderStatus.COMPLETED) {
+    if (status === PayOrderStatus.COMPLETED) {
         const receivingTxHash = payment?.destination_tx_hash;
         const destChainId = payment?.dst.chain_id;
         const txURL = isDeposit && destChainId && receivingTxHash ? getChainExplorerTxUrl(destChainId, receivingTxHash) : sourceTxURL;

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/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/usePayToAddressChainOptions.js

@@ -1,23 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fetchTokenList, getChains } from "@coin-voyage/shared/currency";
-import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import usePayContext from "../components/contexts/pay";
 import { SquircleIcon } from "../components/ui/Icon";
+import { BTC_MIN_USD_AMOUNT } from "../lib/constants";
 import { ChainId } from "../server";
 import { ROUTE } from "../types/routes";
-import { BTC_MIN_USD_AMOUNT } from "../lib/constants";
-const TOKEN_LIST_QUERY_KEY = ["token-list"];
+import { useTokenList } from "./useTokenList";
 export function usePayToAddressChainOptions() {
     const { setRoute, paymentState } = usePayContext();
-    const { setPayToAddressChainId: setPayToAddressChain, payOrder } = paymentState;
+    const { setPayToAddressChainId, payOrder } = paymentState;
     const fiatAmount = payOrder?.fulfillment.amount.value_usd;
-    const { data: tokenList, isLoading } = useQuery({
-        queryKey: TOKEN_LIST_QUERY_KEY,
-        queryFn: fetchTokenList,
-        staleTime: 1000 * 60 * 15,
-    });
-    const chains = useMemo(() => getChains(tokenList?.chains ?? []), [tokenList]);
+    const { chains, isLoading } = useTokenList();
     const options = useMemo(() => chains.map((chain) => {
         const disabled = chain.chainId === ChainId.BTC && typeof fiatAmount === "number" && fiatAmount < BTC_MIN_USD_AMOUNT;
         return {
@@ -25,12 +18,12 @@ export function usePayToAddressChainOptions() {
             title: chain.name,
             icons: [_jsx(SquircleIcon, { icon: chain.logoURI, alt: chain.name }, chain.chainId)],
             onClick: () => {
-                setPayToAddressChain(chain.chainId);
+                setPayToAddressChainId(chain.chainId);
                 setRoute(ROUTE.ADDRESS_TOKEN_SELECT);
             },
             disabled,
             subtitle: disabled ? `Minimum $${BTC_MIN_USD_AMOUNT}` : undefined,
         };
-    }), [chains, setPayToAddressChain, setRoute, fiatAmount]);
+    }), [chains, setPayToAddressChainId, setRoute, fiatAmount]);
     return { options, isLoading };
 }

package/dist/hooks/usePayToAddressTokens.js

@@ -1,25 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fetchTokenList, tokensByChainId, tokenToCurrency } from "@coin-voyage/shared/currency";
-import { useQuery } from "@tanstack/react-query";
+import { tokenToCurrency } from "@coin-voyage/shared/currency";
 import { useMemo } from "react";
 import usePayContext from "../components/contexts/pay";
 import { SquircleIcon } from "../components/ui/Icon";
 import { ROUTE } from "../types/routes";
-const TOKEN_LIST_QUERY_KEY = ["token-list"];
+import { useTokenList } from "./useTokenList";
 export function usePayToAddressTokens() {
     const { paymentState, setRoute } = usePayContext();
-    const { payToAddressChainId: payToAddressChain, setPayToAddressCurrency } = paymentState;
-    const chainId = payToAddressChain;
-    const { data: tokenList, isLoading } = useQuery({
-        queryKey: TOKEN_LIST_QUERY_KEY,
-        queryFn: fetchTokenList,
-        staleTime: 1000 * 60 * 5,
-    });
-    const tokens = useMemo(() => {
-        if (!tokenList || !chainId)
-            return [];
-        return tokensByChainId(tokenList.chains, chainId);
-    }, [tokenList, chainId]);
+    const { payToAddressChainId, setPayToAddressCurrency } = paymentState;
+    const { tokens, isLoading } = useTokenList(payToAddressChainId);
     const options = useMemo(() => tokens.map((token) => ({
         id: token.address ?? token.ticker,
         title: token.name,