@coin-voyage/paykit 2.3.6-beta.1 → 2.3.6-beta.2

package/dist/assets/icons.d.ts

@@ -28,3 +28,6 @@ export declare const AuthIcon: ({ ...props }: {
 export declare const ErrorIcon: ({ ...props }: {
     [x: string]: any;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const CreditCardIcon: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons.js

@@ -41,3 +41,6 @@ export const AuthIcon = ({ ...props }) => (_jsx("div", { ...props, style: {
 export const ErrorIcon = ({ ...props }) => {
     return (_jsx("svg", { "aria-hidden": "true", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18ZM6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L7.58579 9L5.29289 11.2929C4.90237 11.6834 4.90237 12.3166 5.29289 12.7071C5.68342 13.0976 6.31658 13.0976 6.70711 12.7071L9 10.4142L11.2929 12.7071C11.6834 13.0976 12.3166 13.0976 12.7071 12.7071C13.0976 12.3166 13.0976 11.6834 12.7071 11.2929L10.4142 9L12.7071 6.70711C13.0976 6.31658 13.0976 5.68342 12.7071 5.29289C12.3166 4.90237 11.6834 4.90237 11.2929 5.29289L9 7.58579L6.70711 5.29289Z", fill: "currentColor" }) }));
 };
+export const CreditCardIcon = ({ ...props }) => {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }), _jsx("line", { x1: "2", x2: "22", y1: "10", y2: "10" })] }));
+};

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

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

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

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getFiatPaymentData } from "@coin-voyage/shared/common";
+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 { AlertIcon } from "../../../assets/icons";
+import useLocales from "../../../hooks/useLocales";
+import styled from "../../../styles/styled";
+import { ROUTE } from "../../../types/routes";
+import usePayContext from "../../contexts/pay";
+import Button from "../../ui/Button";
+import { ModalBody, ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
+import { OrderHeader } from "../../ui/OrderHeader";
+import PoweredByFooter from "../../ui/PoweredByFooter";
+import { Spinner } from "../../ui/Spinner";
+export default function CardPayment() {
+    const { triggerResize } = usePayContext();
+    const { data, isLoading, error, refetch } = useCardPaymentData();
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize, isLoading, data?.session_id, data?.client_secret, error]);
+    return (_jsxs(PageContent, { children: [_jsx(OrderHeader, { minified: true }), _jsx(CardPaymentContent, { paymentData: data, isLoading: isLoading, error: error instanceof Error ? error : null, onRetry: () => {
+                    void refetch();
+                } }), _jsx(PoweredByFooter, {})] }));
+}
+function CardPaymentContent({ paymentData, isLoading, error, onRetry, }) {
+    const locales = useLocales();
+    const { paymentState, setRoute } = usePayContext();
+    const { payOrder } = paymentState;
+    if (!payOrder) {
+        return (_jsx(StatusCard, { title: locales.selectPayToAddressWaitingScreen_unavailable_h1, body: "We couldn't load this card payment.", actionLabel: locales.back, onAction: () => setRoute(ROUTE.SELECT_METHOD) }));
+    }
+    if (payOrder.status === PayOrderStatus.EXPIRED) {
+        return _jsx(ExpiredCardPayment, {});
+    }
+    if (isLoading) {
+        return _jsx(StatusCard, { loading: true, title: locales.requesting_payment_h1, body: "Preparing secure Stripe checkout..." });
+    }
+    if (error || !paymentData) {
+        return (_jsx(StatusCard, { warning: true, title: locales.selectPayToAddressWaitingScreen_unavailable_h1, body: error?.message ?? "We couldn't start the Stripe checkout for this order.", actionLabel: locales.tryAgain, onAction: onRetry }));
+    }
+    return _jsx(StripeOnrampCheckout, { paymentData: paymentData });
+}
+function ExpiredCardPayment() {
+    const locales = useLocales();
+    const { paymentState, setRoute } = 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: () => {
+            if (isDeposit) {
+                void paymentState.copyDepositPayOrder();
+                return;
+            }
+            setRoute(ROUTE.SELECT_METHOD);
+        } }));
+}
+function StatusCard({ title, body, actionLabel, onAction, loading = false, warning = false, }) {
+    return (_jsxs(ModalContent, { "$center": true, style: {
+            marginLeft: 24,
+            marginRight: 24,
+            paddingTop: 24,
+            paddingBottom: 24,
+        }, children: [loading ? _jsx(Spinner, {}) : warning ? _jsx(AlertIcon, {}) : null, _jsx(ModalH1, { "$warning": warning, children: title }), _jsx(ModalBody, { children: body }), actionLabel && onAction ? (_jsx(ActionRow, { children: _jsx(Button, { onClick: onAction, children: actionLabel }) })) : null] }));
+}
+function StripeOnrampCheckout({ paymentData }) {
+    const { paymentState, mode, triggerResize } = usePayContext();
+    const { data: stripeOnramp, isLoading, error, refetch } = useStripeOnramp(paymentData.stripe_publishable_key);
+    const refreshOrderRef = useLatestRef(paymentState.refreshOrder);
+    const refreshDebounceRef = useRef(null);
+    const theme = useMemo(() => {
+        return mode === "dark" ? "dark" : "light";
+    }, [mode]);
+    const handleSessionUpdate = useCallback((status) => {
+        if (status === "initialized") {
+            return;
+        }
+        if (refreshDebounceRef.current) {
+            window.clearTimeout(refreshDebounceRef.current);
+        }
+        refreshDebounceRef.current = window.setTimeout(() => {
+            void refreshOrderRef.current();
+        }, 500);
+    }, [refreshOrderRef]);
+    useEffect(() => {
+        return () => {
+            if (refreshDebounceRef.current) {
+                window.clearTimeout(refreshDebounceRef.current);
+            }
+        };
+    }, []);
+    if (error) {
+        return (_jsx(StatusCard, { warning: true, title: "Stripe unavailable", body: error.message, actionLabel: "Try again", onAction: () => {
+                void refetch();
+            } }));
+    }
+    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 mountNodeRef = useRef(null);
+    useEffect(() => {
+        const mountNode = mountNodeRef.current;
+        if (!mountNode) {
+            return;
+        }
+        mountNode.replaceChildren();
+        const session = stripeOnramp.createSession({
+            clientSecret,
+            appearance: theme ? { theme } : undefined,
+        });
+        const handleUiLoaded = () => {
+            onUiLoaded?.();
+        };
+        const handleSessionUpdated = (event) => {
+            onSessionUpdate?.(event.payload.session.status);
+        };
+        session.addEventListener("onramp_ui_loaded", handleUiLoaded);
+        session.addEventListener("onramp_session_updated", handleSessionUpdated);
+        session.mount(mountNode);
+        return () => {
+            session.removeEventListener("onramp_ui_loaded", handleUiLoaded);
+            session.removeEventListener("onramp_session_updated", handleSessionUpdated);
+            mountNode.replaceChildren();
+        };
+    }, [clientSecret, onSessionUpdate, onUiLoaded, stripeOnramp, theme]);
+    return _jsx(OnrampMount, { ref: mountNodeRef });
+}
+function useCardPaymentData() {
+    const { paymentState } = usePayContext();
+    const { payOrder, payWithCard } = paymentState;
+    const paymentData = getFiatPaymentData(payOrder?.payment);
+    const query = useQuery({
+        queryKey: ["card-payment", payOrder?.id, paymentData?.session_id ?? null, paymentData?.client_secret ?? null],
+        enabled: Boolean(payOrder?.id) && !paymentData,
+        retry: false,
+        refetchOnWindowFocus: false,
+        queryFn: async () => {
+            if (!payOrder) {
+                throw new Error("Missing pay order");
+            }
+            if (paymentData) {
+                return paymentData;
+            }
+            const paymentDetails = await payWithCard();
+            const fiatPaymentData = getFiatPaymentData(paymentDetails.data);
+            if (!fiatPaymentData) {
+                throw new Error("Stripe onramp session is unavailable for this pay order");
+            }
+            return fiatPaymentData;
+        },
+    });
+    return {
+        ...query,
+        data: paymentData ?? query.data,
+    };
+}
+function useStripeOnramp(publishableKey) {
+    return useQuery({
+        queryKey: ["stripe-onramp", publishableKey],
+        enabled: Boolean(publishableKey),
+        staleTime: Infinity,
+        retry: false,
+        queryFn: async () => {
+            if (!publishableKey) {
+                throw new Error("Missing Stripe publishable key.");
+            }
+            const instance = await getStripeOnrampPromise(publishableKey);
+            if (!instance) {
+                throw new Error("Stripe Onramp is only available in the browser.");
+            }
+            return instance;
+        },
+    });
+}
+const stripeOnrampPromiseCache = new Map();
+function getStripeOnrampPromise(publishableKey) {
+    const cached = stripeOnrampPromiseCache.get(publishableKey);
+    if (cached) {
+        return cached;
+    }
+    const nextPromise = loadStripeOnramp(publishableKey);
+    stripeOnrampPromiseCache.set(publishableKey, nextPromise);
+    return nextPromise;
+}
+function useLatestRef(value) {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref;
+}
+const OnrampShell = styled.div `
+  position: relative;
+  min-height: 480px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--ck-body-background-secondary);
+  border: 1px solid var(--ck-body-divider-secondary, var(--ck-body-divider));
+`;
+const OnrampMount = styled.div `
+  min-height: 480px;
+`;
+const OnrampOverlay = styled.div `
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--ck-body-background) 88%, transparent);
+`;
+const ActionRow = styled.div `
+  width: 100%;
+  margin-top: 8px;
+`;

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

@@ -6,7 +6,7 @@ import { useWalletConnectModal } from "../../../hooks/useWalletConnectModal";
 import { useWalletConnectUri } from "../../../hooks/useWalletConnectUri";
 import { useWallets } from "../../../hooks/useWallets";
 import { walletConfigs } from "../../../lib/config/wallet";
-import { ROUTES } from "../../../types/routes";
+import { ROUTE } from "../../../types/routes";
 import usePayContext from "../../contexts/pay";
 import { ModalContent, PageContent } from "../../ui/Modal/styles";
 import { ScrollArea } from "../../ui/ScrollArea";
@@ -44,7 +44,7 @@ export default function MobileConnectors() {
                 chainType: connectorChainType,
                 open: true,
                 walletId,
-                route: ROUTES.CONNECTORS,
+                route: ROUTE.CONNECTORS,
             }))}`;
         }
         const uri = wallet.getWalletDeeplink?.(URI, connectorChainType);

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

@@ -5,7 +5,7 @@ import { AlertIcon } from "../../../assets/icons";
 import { useCountdown } from "../../../hooks/useCountdown";
 import { useDepositAddressQuery } from "../../../hooks/useDepositAddressQuery";
 import useLocales from "../../../hooks/useLocales";
-import { ROUTES } from "../../../types/routes";
+import { ROUTE } from "../../../types/routes";
 import usePayContext from "../../contexts/pay";
 import Button from "../../ui/Button";
 import CustomQRCode from "../../ui/CustomQRCode";
@@ -66,7 +66,7 @@ function DepositFailed() {
     const onSelectAnotherMethod = useCallback(() => {
         setPayToAddressChain(undefined);
         setPayToAddressCurrency(undefined);
-        setRoute(ROUTES.SELECT_PAY_TO_ADDRESS_CHAIN);
+        setRoute(ROUTE.ADDRESS_CHAIN_SELECT);
     }, [setRoute, setPayToAddressChain, setPayToAddressCurrency]);
     return (_jsxs(ModalContent, { "$center": true, style: {
             marginLeft: 24,

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

@@ -9,7 +9,7 @@ import { chainToLogo } from "../../../assets/chains";
 import { AlertIcon, RetryIconCircle } from "../../../assets/icons";
 import useLocales from "../../../hooks/useLocales";
 import styled from "../../../styles/styled";
-import { ROUTES } from "../../../types/routes";
+import { ROUTE } from "../../../types/routes";
 import usePayContext from "../../contexts/pay";
 import { RetryButton, RetryIconContainer } from "../../pay-modal/ConnectWithInjector/styles";
 import CircleSpinner from "../../spinners/CircleSpinner";
@@ -74,7 +74,7 @@ export default function PayWithToken() {
         try {
             await executePayment(token);
             setPayState(PayState.RequestSuccessful);
-            setTimeout(() => setRoute(ROUTES.CONFIRMATION), 200);
+            setTimeout(() => setRoute(ROUTE.CONFIRMATION), 200);
         }
         catch (e) {
             if (e?.name === "ConnectorChainMismatchError") {
@@ -103,7 +103,7 @@ export default function PayWithToken() {
     const onRetry = () => {
         if (isExpired && isDeposit) {
             paymentState.copyDepositPayOrder();
-            setRoute(ROUTES.SELECT_TOKEN);
+            setRoute(ROUTE.WALLET_TOKEN_SELECT);
         }
         else if (selectedCurrencyOption) {
             handleTransfer(selectedCurrencyOption);

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAccount, useAccountDisconnect } from "@coin-voyage/crypto/hooks";
 import { useIsMobile } from "@coin-voyage/shared/hooks";
 import { useChainOptions } from "../../../hooks/useChainOptions";
-import { ROUTES } from "../../../types/routes";
+import { ROUTE } from "../../../types/routes";
 import usePayContext from "../../contexts/pay";
 import { PageContent } from "../../ui/Modal/styles";
 import OptionsList from "../../ui/OptionsList";
@@ -19,7 +19,7 @@ export default function SelectChain() {
     const handleClick = (chainType) => {
         disconnect(account);
         paymentState.setConnectorChainType(chainType);
-        setRoute(ROUTES.CONNECTORS);
+        setRoute(ROUTE.CONNECTORS);
     };
     const { options } = useChainOptions({
         account,

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

@@ -18,9 +18,9 @@ export default function SelectMethod() {
     const handleClick = () => {
         disconnect(account);
     };
-    const { options } = useMethodOptions({
+    const { options, isLoading } = useMethodOptions({
         mode: paymentState.payOrder?.mode,
         onClick: handleClick,
     });
-    return (_jsxs(PageContent, { children: [_jsx(OrderHeader, {}), _jsx(OptionsList, { requiredSkeletons: isMobile ? 3 : 4, options: options }), _jsx(PoweredByFooter, {})] }));
+    return (_jsxs(PageContent, { children: [_jsx(OrderHeader, {}), _jsx(OptionsList, { requiredSkeletons: 3, options: options, isLoading: isLoading }), _jsx(PoweredByFooter, {})] }));
 }

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ROUTES } from "../../../types/routes";
+import { ROUTE } from "../../../types/routes";
 import { ModalBody, ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
 import { useAccount } from "@coin-voyage/crypto/hooks";
 import { useCallback } from "react";
@@ -12,7 +12,7 @@ import SelectAnotherMethod from "../../ui/SelectAnotherMethod";
 export default function SelectToken() {
     const locales = useLocales();
     const { paymentState, allowedWallets, setRoute } = usePayContext();
-    const { payOrderQuotes, selectedWallet, connectorChainType, setConnectorChainType, setSelectedCurrencyOption, } = paymentState;
+    const { payOrderQuotes, selectedWallet, connectorChainType, setConnectorChainType, setSelectedCurrencyOption } = paymentState;
     const { account } = useAccount({
         selectedWallet,
         chainType: connectorChainType,
@@ -23,7 +23,7 @@ export default function SelectToken() {
     const onSelectAnotherMethod = useCallback(() => {
         setConnectorChainType(undefined);
         setSelectedCurrencyOption(undefined);
-        setRoute(ROUTES.SELECT_CHAIN);
+        setRoute(ROUTE.WALLET_CHAIN_SELECT);
     }, [setConnectorChainType, setSelectedCurrencyOption, setRoute]);
     return (_jsxs(PageContent, { children: [_jsx(OrderHeader, { minified: true, showConnectedWallet: true }), walletDisabled ? (_jsxs(ModalContent, { "$center": true, style: {
                     paddingTop: 16,

package/dist/components/contexts/pay/index.d.ts

@@ -3,7 +3,7 @@ import { WalletPermission } from "@coin-voyage/crypto/types/wallet";
 import React from "react";
 import type { PaymentState } from "../../../hooks/usePaymentState";
 import type { CustomTheme, Languages, Mode, PayKitOptions, PayModalOptions, Theme } from "../../../types";
-import type { ROUTES } from "../../../types/routes";
+import type { ROUTE } from "../../../types/routes";
 export type PayContextValue = {
     theme: Theme;
     setTheme: React.Dispatch<React.SetStateAction<Theme>>;
@@ -18,8 +18,8 @@ export type PayContextValue = {
     open: boolean;
     setOpen: (open: boolean) => void;
     onSuccess: () => void;
-    route: string;
-    setRoute: React.Dispatch<React.SetStateAction<ROUTES>>;
+    route: ROUTE;
+    setRoute: React.Dispatch<React.SetStateAction<ROUTE>>;
     errorMessage: string | React.ReactNode | null;
     debugMode?: boolean;
     log: (...props: any) => void;

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

@@ -41,7 +41,7 @@ function PayButtonCustom(props) {
             },
             metadata: props.metadata,
         };
-    }, [props]);
+    }, [hasDepositParams, props]);
     const payId = hasPayId ? props.payId : null;
     usePaymentLifecycle(order, {
         onPaymentStarted,

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

@@ -12,7 +12,7 @@ import { getConnectorId } from "@coin-voyage/crypto/lib/utils/connector";
 import { detectBrowser } from "@coin-voyage/shared/common";
 import { AlertIcon, RetryIconCircle, TickIcon } from "../../../assets/icons";
 import useLocales from "../../../hooks/useLocales";
-import { ROUTES } from "../../../types/routes";
+import { ROUTE } from "../../../types/routes";
 import { isInjectedConnector, isWalletConnectConnector } from "../../../utils";
 import usePayContext from "../../contexts/pay";
 import CircleSpinner from "../../spinners/CircleSpinner";
@@ -101,7 +101,7 @@ export default function ConnectWithInjector({ forceState }) {
         onSuccess(_, variables) {
             if (variables?.connector) {
                 setStatus(states.CONNECTED);
-                setRoute(ROUTES.SELECT_TOKEN);
+                setRoute(ROUTE.WALLET_TOKEN_SELECT);
             }
         },
     });

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

@@ -5,7 +5,7 @@ import ScanIconWithLogos from "../../assets/scan-icon-with-logos";
 import useLocales from "../../hooks/useLocales";
 import { useWalletConnectModal } from "../../hooks/useWalletConnectModal";
 import { useWalletConnectUri } from "../../hooks/useWalletConnectUri";
-import { ROUTES } from "../../types/routes";
+import { ROUTE } from "../../types/routes";
 import { isWalletConnectConnector } from "../../utils";
 import usePayContext from "../contexts/pay";
 import Button from "../ui/Button";
@@ -34,6 +34,6 @@ export default function ConnectWithQRCode() {
                     justifyContent: "center",
                     gap: 14,
                 }, children: [context.options?.walletConnectCTA !== "modal" && (_jsx(CopyToClipboard, { variant: "button", text: uri, children: context.options?.walletConnectCTA === "link" ? locales.copyToClipboard : locales.copyCode })), context.options?.walletConnectCTA !== "link" && (_jsx(Button, { icon: _jsx(ExternalLinkIcon, {}), onClick: openW3M, disabled: isOpenW3M, waiting: isOpenW3M, children: context.options?.walletConnectCTA === "modal" ? locales.useWalletConnectModal : locales.useModal }))] })), hasApps && (_jsx(_Fragment, { children: _jsx(Button, { onClick: () => {
-                        context.setRoute(ROUTES.DOWNLOAD);
+                        context.setRoute(ROUTE.DOWNLOAD);
                     }, download: true, children: locales.getWalletName }) }))] }));
 }

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

@@ -4,7 +4,7 @@ import { useCallback, useMemo } from "react";
 import { routeConfig } from "../../config/route-config";
 import useLocales from "../../hooks/useLocales";
 import { ThemeProvider } from "../../providers/theme/provider";
-import { ROUTES } from "../../types/routes";
+import { ROUTE } from "../../types/routes";
 import { isWalletConnectConnector } from "../../utils";
 import usePayContext from "../contexts/pay";
 import Modal from "../ui/Modal";
@@ -54,12 +54,12 @@ export function PayModal() {
             clearUserSelection();
             return;
         }
-        if (typeof config.onBack === "string") {
-            setRoute(config.onBack);
+        if (typeof config.onBack === "function") {
+            config.onBack(actions);
         }
         else {
-            config.onBack(actions);
+            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(ROUTES.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), onInfo: showInfoButton ? () => setRoute(ROUTE.ABOUT) : undefined, onBack: showBackButton ? onBack : undefined }) }));
 }

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ROUTES } from "../../../types/routes";
+import { ROUTE } from "../../../types/routes";
 import { ConnectorButton, ConnectorIcon, ConnectorLabel, ConnectorsContainer, RecentlyUsedTag } from "./styles";
 import Alert from "../Alert";
 import { ScrollArea } from "../ScrollArea";
 import { useLastConnector, useUniversalConnect } from "@coin-voyage/crypto/hooks";
 import { isWalletInstalled } from "@coin-voyage/crypto/lib/utils/is-wallet-installed";
-import { useIsMobile } from "@coin-voyage/shared/hooks";
 import { detectBrowser } from "@coin-voyage/shared/common";
+import { useIsMobile } from "@coin-voyage/shared/hooks";
 import { useCallback, useMemo } from "react";
 import useLocales from "../../../hooks/useLocales";
 import { useWalletConnectUri } from "../../../hooks/useWalletConnectUri";
@@ -48,7 +48,7 @@ const ConnectorItem = ({ wallet, isRecent, walletConnectURI, }) => {
     const { connect } = useUniversalConnect({
         onSuccess: (_, variables) => {
             if (variables?.connector) {
-                setRoute(ROUTES.SELECT_TOKEN);
+                setRoute(ROUTE.WALLET_TOKEN_SELECT);
             }
         },
         onError: (error) => {
@@ -82,7 +82,7 @@ const ConnectorItem = ({ wallet, isRecent, walletConnectURI, }) => {
         if (deeplink)
             return;
         if (redirectToMoreWallets) {
-            setRoute(ROUTES.MOBILECONNECTORS);
+            setRoute(ROUTE.MOBILECONNECTORS);
             return;
         }
         if (shouldConnectImmediately) {
@@ -92,7 +92,7 @@ const ConnectorItem = ({ wallet, isRecent, walletConnectURI, }) => {
             connect({ walletConnector });
         }
         paymentState.setSelectedWallet(wallet);
-        setRoute(ROUTES.CONNECT);
+        setRoute(ROUTE.CONNECT);
     }, [deeplink, redirectToMoreWallets, shouldConnectImmediately, wallet, paymentState, setRoute, connect]);
-    return (_jsxs(ConnectorButton, { type: "button", as: deeplink ? "a" : undefined, href: deeplink, disabled: route !== ROUTES.CONNECTORS, onClick: handleClick, children: [_jsx(ConnectorIcon, { "data-small": wallet.iconShouldShrink, "data-shape": wallet.iconShape, children: wallet.iconConnector ?? wallet.icon }), _jsxs(ConnectorLabel, { children: [isMobile ? (wallet.shortName ?? wallet.name) : wallet.name, !options?.hideRecentBadge && isRecent && _jsx(RecentlyUsedTag, { children: locales.recent })] })] }));
+    return (_jsxs(ConnectorButton, { type: "button", as: deeplink ? "a" : undefined, href: deeplink, disabled: route !== ROUTE.CONNECTORS, onClick: handleClick, children: [_jsx(ConnectorIcon, { "data-small": wallet.iconShouldShrink, "data-shape": wallet.iconShape, children: wallet.iconConnector ?? wallet.icon }), _jsxs(ConnectorLabel, { children: [isMobile ? (wallet.shortName ?? wallet.name) : wallet.name, !options?.hideRecentBadge && isRecent && _jsx(RecentlyUsedTag, { children: locales.recent })] })] }));
 };

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

@@ -1,8 +1,8 @@
 import type React from "react";
-import { ROUTES } from "../../../types/routes";
+import { ROUTE } from "../../../types/routes";
 type ModalPageRendererProps = {
-    pages: Record<ROUTES, React.ReactNode>;
-    pageId: string;
+    pages: Record<ROUTE, React.ReactNode>;
+    pageId: ROUTE;
     currentDepth: number;
     prevDepth: number;
     positionInside?: boolean;

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

@@ -3,7 +3,10 @@ import { useEffect } from "react";
 import { useTransition } from "react-transition-state";
 import { InnerContainer, PageContainer, PageContents } from "./styles";
 export function ModalPageRenderer({ pages, pageId, currentDepth, prevDepth, positionInside, transitionState, contentRef, rendered, }) {
-    return (_jsx(InnerContainer, { children: Object.keys(pages).map((key) => (_jsx(Page, { open: key === pageId, initial: !positionInside && transitionState !== "entered", enterAnim: key === pageId && currentDepth > prevDepth ? "active-scale-up" : "active", exitAnim: key !== pageId && currentDepth < prevDepth ? "exit-scale-down" : "exit", children: _jsx(PageContents, { ref: contentRef, style: { pointerEvents: key === pageId && rendered ? "auto" : "none" }, children: pages[key] }, `inner-${key}`) }, key))) }));
+    return (_jsx(InnerContainer, { children: Object.keys(pages).map((key) => {
+            const routeKey = Number(key);
+            return (_jsx(Page, { open: routeKey === pageId, initial: !positionInside && transitionState !== "entered", enterAnim: routeKey === pageId && currentDepth > prevDepth ? "active-scale-up" : "active", exitAnim: routeKey !== pageId && currentDepth < prevDepth ? "exit-scale-down" : "exit", children: _jsx(PageContents, { ref: contentRef, style: { pointerEvents: routeKey === pageId && rendered ? "auto" : "none" }, children: pages[routeKey] }, `inner-${routeKey}`) }, routeKey));
+        }) }));
 }
 const Page = ({ children, open, initial, enterAnim, exitAnim }) => {
     const [state, setOpen] = useTransition({

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

@@ -1,10 +1,10 @@
 import type { Variants } from "framer-motion";
 import type React from "react";
-import { ROUTES } from "../../../types/routes";
+import { ROUTE } from "../../../types/routes";
 export declare const contentVariants: Variants;
 type ModalProps = {
-    pages: Record<ROUTES, React.ReactNode>;
-    pageId: string;
+    pages: Record<ROUTE, React.ReactNode>;
+    pageId: ROUTE;
     heading?: string;
     depth?: number;
     positionInside?: boolean;

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

@@ -4,7 +4,7 @@ import { FocusTrap, usePrevious } from "@coin-voyage/shared/hooks";
 import useLocales from "../../../hooks/useLocales";
 import { useThemeContext } from "../../../providers/theme/provider";
 import { ResetContainer } from "../../../styles";
-import { ROUTES } from "../../../types/routes";
+import { ROUTE } from "../../../types/routes";
 import usePayContext from "../../contexts/pay";
 import Portal from "../Portal";
 import { ModalControls } from "./ModalControls";
@@ -59,7 +59,7 @@ export default function Modal({ pages, pageId, heading, depth = 1, positionInsid
                                 width: "var(--width)",
                                 zIndex: 9,
                                 transition: "width 200ms ease",
-                            } }), _jsxs(BoxContainer, { className: `${rendered && "active"}`, children: [_jsx(ModalDisclaimer, { disclaimer: context.options?.disclaimer, visible: context.route === ROUTES.CONNECTORS }), _jsx(ModalErrorBanner, { errorMessage: context.errorMessage, onDismiss: () => context.displayError(null) }), _jsx(ModalControls, { locales: locales, mobile: mobile, inTransition: inTransition, hideQuestionMarkCTA: context.options?.hideQuestionMarkCTA, onClose: onClose, onBack: onBack, onInfo: onInfo }), _jsx(ModalHeadingBar, { heading: heading, routeKey: `${context.route}`, mobile: mobile }), _jsx(ModalPageRenderer, { pages: pages, pageId: pageId, currentDepth: depth, prevDepth: prevDepth, positionInside: positionInside, transitionState: state, contentRef: contentRef, rendered: rendered })] })] })] }) }));
+                            } }), _jsxs(BoxContainer, { className: `${rendered && "active"}`, children: [_jsx(ModalDisclaimer, { disclaimer: context.options?.disclaimer, visible: context.route === ROUTE.CONNECTORS }), _jsx(ModalErrorBanner, { errorMessage: context.errorMessage, onDismiss: () => context.displayError(null) }), _jsx(ModalControls, { locales: locales, mobile: mobile, inTransition: inTransition, hideQuestionMarkCTA: context.options?.hideQuestionMarkCTA, onClose: onClose, onBack: onBack, onInfo: onInfo }), _jsx(ModalHeadingBar, { heading: heading, routeKey: `${context.route}`, mobile: mobile }), _jsx(ModalPageRenderer, { pages: pages, pageId: pageId, currentDepth: depth, prevDepth: prevDepth, positionInside: positionInside, transitionState: state, contentRef: contentRef, rendered: rendered })] })] })] }) }));
     if (!mounted)
         return null;
     if (positionInside)

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

@@ -2,6 +2,8 @@ import { motion } from "framer-motion";
 import { keyframes } from "styled-components";
 import defaultTheme from "../../../lib/config/default-theme";
 import styled from "../../../styles/styled";
+const mobileModalMaxHeight = "calc(100vh - 8px)";
+const mobileModalMaxHeightDynamic = "calc(100dvh - 8px)";
 export const ErrorMessage = styled(motion.div) `
   z-index: -1;
   pointer-events: auto;
@@ -234,6 +236,10 @@ export const BoxContainer = styled(motion.div) `
 
     &:before {
       width: 100%;
+      height: min(var(--height, ${mobileModalMaxHeight}), ${mobileModalMaxHeight});
+      height: min(var(--height, ${mobileModalMaxHeightDynamic}), ${mobileModalMaxHeightDynamic});
+      max-height: ${mobileModalMaxHeight};
+      max-height: ${mobileModalMaxHeightDynamic};
       transition: 0ms height cubic-bezier(0.15, 1.15, 0.6, 1);
       will-change: height;
     }
@@ -248,9 +254,15 @@ export const ControllerContainer = styled(motion.div) `
   transform: translateX(-50%);
   backface-visibility: hidden;
   width: var(--width);
+  border-radius: var(--ck-border-radius, 20px) var(--ck-border-radius, 20px) 0 0;
+  background: var(--ck-body-background);
   transition: 0.2s ease width;
   pointer-events: auto;
   //border-bottom: 1px solid var(--ck-body-divider);
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    border-radius: var(--ck-border-radius, 30px) var(--ck-border-radius, 30px) 0 0;
+  }
 `;
 export const InnerContainer = styled(motion.div) `
   position: relative;
@@ -258,6 +270,15 @@ export const InnerContainer = styled(motion.div) `
   height: var(--height);
   transition: 0.2s ease height;
   @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: min(var(--height, ${mobileModalMaxHeight}), ${mobileModalMaxHeight});
+    height: min(var(--height, ${mobileModalMaxHeightDynamic}), ${mobileModalMaxHeightDynamic});
+    max-height: ${mobileModalMaxHeight};
+    max-height: ${mobileModalMaxHeightDynamic};
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-y;
     transition: 0ms height cubic-bezier(0.15, 1.15, 0.6, 1);
     /* animation-delay: 34ms; */
   }

package/dist/config/route-config.d.ts

@@ -1,3 +1,3 @@
 import type { RouteConfig } from "../types/route-config";
-import { ROUTES } from "../types/routes";
-export declare const routeConfig: Record<ROUTES, RouteConfig>;
+import { ROUTE } from "../types/routes";
+export declare const routeConfig: Record<ROUTE, RouteConfig>;