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

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/payment";
+import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
+import { loadStripeOnramp } from "@stripe/crypto/pure";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { 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/Confirmation/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { getChainExplorerTxUrl } from "@coin-voyage/shared/common";
+import { getChainExplorerTxUrl } from "@coin-voyage/shared/chain";
 import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { useEffect, useMemo } from "react";
 import { ExternalLinkIcon } from "../../../assets/icons";

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/copyable-info.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { truncateAddress } from "@coin-voyage/shared/common";
+import { truncateAddress } from "@coin-voyage/shared/utils";
 import useLocales from "../../../hooks/useLocales";
 import { CopyRowOrThrobber } from "../../ui/CopyableInfo";
 import { CountdownTimer } from "../../ui/CountDownTimer";

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAccount } from "@coin-voyage/crypto/hooks";
-import { assert, getChainTypeByChainId } from "@coin-voyage/shared/common";
+import { getChainTypeByChainId } from "@coin-voyage/shared/chain";
 import { ChainType, 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";
@@ -9,7 +10,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 +75,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 +104,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/SelectPayToAddressChain/index.js

@@ -1,14 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import usePayContext from "../../contexts/pay";
 import { PageContent } from "../../ui/Modal/styles";
 import { OrderHeader } from "../../ui/OrderHeader";
 import OptionsList from "../../ui/OptionsList";
 import PoweredByFooter from "../../ui/PoweredByFooter";
 import { usePayToAddressChainOptions } from "../../../hooks/usePayToAddressChainOptions";
 export default function SelectPayToAddressChain() {
-    const { paymentState } = usePayContext();
-    const { payOrder } = paymentState;
-    const fiatAmount = payOrder?.fulfillment.amount.value_usd;
-    const { options, isLoading } = usePayToAddressChainOptions({ fiatAmount });
+    const { options, isLoading } = usePayToAddressChainOptions();
     return (_jsxs(PageContent, { children: [_jsx(OrderHeader, { minified: true }), _jsx(OptionsList, { isLoading: isLoading, requiredSkeletons: 4, options: options }), _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

@@ -1,9 +1,9 @@
-import { useConnectCallbackProps } from "@coin-voyage/crypto/hooks/use-connect-callback";
-import { WalletPermission } from "@coin-voyage/crypto/types/wallet";
+import { useConnectCallbackProps } from "@coin-voyage/crypto/hooks";
+import { WalletPermission } from "@coin-voyage/crypto/types";
 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

@@ -4,15 +4,15 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { ConnectingContainer, Container, Content, RetryButton, RetryIconContainer } from "./styles";
 import Alert from "../../ui/Alert";
 import Button from "../../ui/Button";
-import { ModalBody, ModalContent, ModalContentContainer, ModalH1, ModalHeading, PageContent, } from "../../ui/Modal/styles";
+import { ModalBody, ModalContent, ModalContentContainer, ModalH1, PageContent } from "../../ui/Modal/styles";
 import Tooltip from "../../ui/Tooltip";
 import SquircleSpinner from "../../spinners/SquircleSpinner";
 import { useUniversalConnect } from "@coin-voyage/crypto/hooks";
-import { getConnectorId } from "@coin-voyage/crypto/lib/utils/connector";
-import { detectBrowser } from "@coin-voyage/shared/common";
+import { getConnectorId } from "@coin-voyage/crypto/utils";
+import { detectBrowser } from "@coin-voyage/shared/utils";
 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);
             }
         },
     });
@@ -153,14 +153,14 @@ export default function ConnectWithInjector({ forceState }) {
         return () => clearTimeout(timeoutId);
     }, [status, runConnect]);
     if (!wallet) {
-        return (_jsx(PageContent, { children: _jsxs(Container, { children: [_jsx(ModalHeading, { children: "Invalid State" }), _jsx(ModalContent, { children: _jsx(Alert, { children: "No connectors match the id given. This state should never happen." }) })] }) }));
+        return (_jsx(PageContent, { children: _jsx(Container, { children: _jsxs(ModalContent, { children: [_jsx(ModalH1, { "$error": true, children: "Invalid State" }), _jsx(Alert, { children: "No connectors match the id given. This state should never happen." })] }) }) }));
     }
     const connectorId = getConnectorId(wallet.connectors[0].connector);
     const isWalletConnect = isWalletConnectConnector(connectorId);
     const isInjected = isInjectedConnector(connectorId);
     // TODO: Make this more generic
     if (isWalletConnect) {
-        return (_jsx(PageContent, { children: _jsxs(Container, { children: [_jsx(ModalHeading, { children: "Invalid State" }), _jsx(ModalContent, { children: _jsx(Alert, { children: "WalletConnect does not have an injection flow. This state should never happen." }) })] }) }));
+        return (_jsx(PageContent, { children: _jsx(Container, { children: _jsxs(ModalContent, { children: [_jsx(ModalH1, { "$error": true, children: "Invalid State" }), _jsx(Alert, { children: "WalletConnect does not have an injection flow. This state should never happen." })] }) }) }));
     }
     return (_jsx(PageContent, { children: _jsxs(Container, { children: [_jsx(ConnectingContainer, { children: _jsxs(AnimationContainer, { "$shake": status === states.FAILED || status === states.REJECTED, "$circle": walletInfo.iconShape === "circle", children: [_jsx(AnimatePresence, { children: (status === states.FAILED || status === states.REJECTED) && (_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: runConnect, children: _jsx(RetryIconContainer, { children: _jsx(Tooltip, { open: showTryAgainTooltip && (status === states.FAILED || status === states.REJECTED), message: locales.tryAgainQuestion, xOffset: -6, children: _jsx(RetryIconCircle, {}) }) }) })) }), walletInfo.iconShape === "circle" ? (_jsx(CircleSpinner, { logo: status === states.UNAVAILABLE ? (_jsx("div", { style: {
                                         transform: "scale(1.14)",

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getChainTypeName } from "@coin-voyage/shared/common";
+import { getChainTypeName } from "@coin-voyage/shared/chain";
 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/BrowserIcon/index.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { detectBrowser } from "@coin-voyage/shared/common";
+import { detectBrowser } from "@coin-voyage/shared/utils";
 import { BrowserIconContainer } from "./styles";
 import browsers from "../../../assets/browsers";
 const BrowserIcon = React.forwardRef(({ browser }, _ref) => {

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

@@ -5,7 +5,7 @@ import Alert from "../Alert";
 import { ChainButton, ChainButtonBg, ChainButtonContainer, ChainButtonStatus, ChainButtons, ChainIcon, ChainLogoContainer, ChainLogoSpinner, SwitchNetworksContainer, } from "./styles";
 import { AnimatePresence, motion } from "framer-motion";
 import { isCoinbaseWalletConnector } from "../../../utils";
-import { isMobile } from "@coin-voyage/shared/common";
+import { isMobile } from "@coin-voyage/shared/utils";
 import ChainIcons from "../../../assets/chains";
 import useLocales from "../../../hooks/useLocales";
 import { chainConfigs } from "../../../lib/config/chain";

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 { isWalletInstalled } from "@coin-voyage/crypto/utils";
+import { detectBrowser } from "@coin-voyage/shared/utils";
 import { useIsMobile } from "@coin-voyage/shared/hooks";
-import { detectBrowser } from "@coin-voyage/shared/common";
 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/CountDownTimer/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatTime } from "@coin-voyage/shared/common";
+import { formatTime } from "@coin-voyage/shared/utils";
 import useLocales from "../../../hooks/useLocales";
 import CircleTimer from "../CircleTimer";
 import { ModalBody } from "../Modal/styles";

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({