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

package/dist/config/route-config.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getChainName } from "@coin-voyage/shared/common";
 import About from "../components/Pages/About";
+import CardPayment from "../components/Pages/CardPayment";
 import Confirmation from "../components/Pages/Confirmation";
 import Connectors from "../components/Pages/Connectors";
 import DownloadApp from "../components/Pages/DownloadApp";
@@ -15,92 +16,99 @@ import SelectPayToAddressToken from "../components/Pages/SelectPayToAddressToken
 import SelectToken from "../components/Pages/SelectToken";
 import SwitchNetworks from "../components/Pages/SwitchNetworks";
 import ConnectUsing from "../components/pay-modal/ConnectUsing";
-import { ROUTES } from "../types/routes";
+import { ROUTE } from "../types/routes";
 export const routeConfig = {
-    [ROUTES.SELECT_METHOD]: {
+    [ROUTE.SELECT_METHOD]: {
         component: _jsx(SelectMethod, {}),
         heading: (ctx) => ctx.locales.selectMethodScreen_heading,
         showBackButton: false,
     },
+    [ROUTE.CARD_PAYMENT]: {
+        component: _jsx(CardPayment, {}),
+        heading: () => "Pay with Card",
+        onBack: (actions) => {
+            actions.setRoute(ROUTE.SELECT_METHOD);
+        },
+    },
     // Pay to address routes
-    [ROUTES.SELECT_PAY_TO_ADDRESS_CHAIN]: {
+    [ROUTE.ADDRESS_CHAIN_SELECT]: {
         component: _jsx(SelectPayToAddressChain, {}),
         heading: (ctx) => ctx.locales.selectPayToAddressChainScreen_heading,
         onBack: (actions) => {
-            actions.setRoute(ROUTES.SELECT_METHOD);
+            actions.setRoute(ROUTE.SELECT_METHOD);
         },
     },
-    [ROUTES.SELECT_PAY_TO_ADDRESS_TOKEN]: {
+    [ROUTE.ADDRESS_TOKEN_SELECT]: {
         component: _jsx(SelectPayToAddressToken, {}),
         heading: (ctx) => ctx.locales.selectPayToAddressTokenScreen_heading,
         onBack: (actions) => {
             actions.setPayToAddressChain(undefined);
-            actions.setRoute(ROUTES.SELECT_PAY_TO_ADDRESS_CHAIN);
+            actions.setRoute(ROUTE.ADDRESS_CHAIN_SELECT);
         },
     },
-    [ROUTES.PAY_TO_ADDRESS]: {
+    [ROUTE.PAY_TO_ADDRESS]: {
         component: _jsx(PayToAddress, {}),
         heading: (ctx) => ctx.locales.payToAddressWaitingScreen_heading,
         onBack: (actions) => {
             actions.setPayToAddressCurrency(undefined);
-            actions.setRoute(ROUTES.SELECT_PAY_TO_ADDRESS_TOKEN);
+            actions.setRoute(ROUTE.ADDRESS_TOKEN_SELECT);
         },
     },
     // Pay with token routes
-    [ROUTES.SELECT_CHAIN]: {
+    [ROUTE.WALLET_CHAIN_SELECT]: {
         component: _jsx(SelectChain, {}),
         heading: (ctx) => ctx.locales.selectChainScreen_heading,
         onBack: (actions) => {
-            actions.setRoute(ROUTES.SELECT_METHOD);
+            actions.setRoute(ROUTE.SELECT_METHOD);
         },
     },
-    [ROUTES.SELECT_TOKEN]: {
+    [ROUTE.WALLET_TOKEN_SELECT]: {
         component: _jsx(SelectToken, {}),
         heading: (ctx) => ctx.locales.selectTokenScreen_heading,
         onBack: (actions) => {
             actions.setConnectorChainType(undefined);
-            actions.setRoute(ROUTES.SELECT_CHAIN);
+            actions.setRoute(ROUTE.WALLET_CHAIN_SELECT);
         },
     },
-    [ROUTES.PAY_WITH_TOKEN]: {
+    [ROUTE.WALLET_PAYMENT]: {
         component: _jsx(PayWithToken, {}),
         heading: (ctx) => ctx.selectedCurrencyOption
             ? `Pay with ${ctx.selectedCurrencyOption.ticker} on ${getChainName(ctx.selectedCurrencyOption.chain_id)}`
             : undefined,
         onBack: (actions) => {
             actions.setSelectedCurrencyOption(undefined);
-            actions.setRoute(ROUTES.SELECT_TOKEN);
+            actions.setRoute(ROUTE.WALLET_TOKEN_SELECT);
         },
     },
-    [ROUTES.CONFIRMATION]: {
+    [ROUTE.CONFIRMATION]: {
         component: _jsx(Confirmation, {}),
         heading: (ctx) => ctx.locales.confirmationScreen_heading,
         showBackButton: false,
         showInfoButton: false,
     },
-    [ROUTES.ONBOARDING]: {
+    [ROUTE.ONBOARDING]: {
         component: _jsx(Onboarding, {}),
         heading: (ctx) => ctx.locales.onboardingScreen_heading,
-        onBack: ROUTES.SELECT_METHOD,
+        onBack: ROUTE.SELECT_METHOD,
     },
-    [ROUTES.ABOUT]: {
+    [ROUTE.ABOUT]: {
         component: _jsx(About, {}),
         heading: (ctx) => ctx.locales.aboutScreen_heading,
     },
-    [ROUTES.CONNECTORS]: {
+    [ROUTE.CONNECTORS]: {
         component: _jsx(Connectors, {}),
         heading: (ctx) => ctx.locales.connectorsScreen_heading,
         depth: 0,
         onBack: (actions) => {
             actions.setConnectorChainType(undefined);
-            actions.setRoute(ROUTES.SELECT_METHOD);
+            actions.setRoute(ROUTE.SELECT_METHOD);
         },
     },
-    [ROUTES.MOBILECONNECTORS]: {
+    [ROUTE.MOBILECONNECTORS]: {
         component: _jsx(MobileConnectors, {}),
         heading: (ctx) => ctx.locales.connectorsScreen_heading,
     },
-    [ROUTES.CONNECT]: {
+    [ROUTE.CONNECT]: {
         component: _jsx(ConnectUsing, {}),
         heading: (ctx) => {
             if (ctx.shouldUseQrcode) {
@@ -110,15 +118,15 @@ export const routeConfig = {
             }
             return ctx.walletName;
         },
-        onBack: ROUTES.CONNECTORS,
+        onBack: ROUTE.CONNECTORS,
     },
-    [ROUTES.DOWNLOAD]: {
+    [ROUTE.DOWNLOAD]: {
         component: _jsx(DownloadApp, {}),
         heading: (ctx) => ctx.locales.downloadAppScreen_heading,
         depth: 2,
-        onBack: ROUTES.CONNECT,
+        onBack: ROUTE.CONNECT,
     },
-    [ROUTES.SWITCHNETWORKS]: {
+    [ROUTE.SWITCHNETWORKS]: {
         component: _jsx(SwitchNetworks, {}),
         heading: (ctx) => ctx.locales.switchNetworkScreen_heading,
     },

package/dist/hooks/useChainOptions.js

@@ -10,7 +10,7 @@ import Logos from "../assets/chains";
 import { MetaMask } from "../assets/logos";
 import usePayContext from "../components/contexts/pay";
 import { SquircleIcon } from "../components/ui/Icon";
-import { ROUTES } from "../types/routes";
+import { ROUTE } from "../types/routes";
 function getTitle(subject, isDeposit) {
     return `${isDeposit ? "Deposit from" : "Pay on"} ${subject}`;
 }
@@ -29,7 +29,7 @@ export function useChainOptions({ account, mode, onClick }) {
             : "wallet", [paymentState.senderEnsName, account.address]);
     const handleConnectedWalletClick = useCallback(() => {
         paymentState.setConnectorChainType(account.chainType);
-        setRoute(ROUTES.SELECT_TOKEN);
+        setRoute(ROUTE.WALLET_TOKEN_SELECT);
     }, [paymentState, account.chainType, setRoute]);
     const connectedWalletIcon = useMemo(() => {
         return account.connector?.icon

package/dist/hooks/useDepositAddressQuery.js

@@ -1,3 +1,4 @@
+import { getDepositAddress } from "@coin-voyage/shared/common";
 import { useQuery } from "@tanstack/react-query";
 import usePayContext from "../components/contexts/pay";
 export function useDepositAddressQuery({ enabled }) {
@@ -22,9 +23,12 @@ export function useDepositAddressQuery({ enabled }) {
             });
             if (!response)
                 throw new Error("no-response");
+            const depositAddress = getDepositAddress(response.data);
+            if (!depositAddress)
+                throw new Error("Deposit address is unavailable for this pay order");
             return {
                 ...currency,
-                depositAddress: response.data.deposit_address,
+                depositAddress,
                 amount: response.data.src.total.ui_amount.toString(),
                 ticker: response.data.src.ticker,
                 expirationS: Math.floor(new Date(response.data.expires_at).getTime() / 1000),

package/dist/hooks/useMethodOptions.d.ts

@@ -6,5 +6,6 @@ interface UseMethodOptionsProps {
 }
 export declare function useMethodOptions({ mode, onClick }: UseMethodOptionsProps): {
     options: Option[];
+    isLoading: boolean;
 };
 export {};

package/dist/hooks/useMethodOptions.js

@@ -1,40 +1,99 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PayOrderMode } from "@coin-voyage/shared/types";
+import { PaymentMethod, PayOrderMode } from "@coin-voyage/shared/types";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
 import ChainLogos from "../assets/chains";
+import { CreditCardIcon } from "../assets/icons";
 import Logos from "../assets/logos";
+import { useBackendApi } from "../components/contexts/api";
 import usePayContext from "../components/contexts/pay";
-import { PaymentMethod } from "../types/enums";
-import { ROUTES } from "../types/routes";
+import { ROUTE } from "../types/routes";
 function getTitle(subject, isDeposit) {
     return `${isDeposit ? "Deposit" : "Pay"} ${subject}`;
 }
 export function useMethodOptions({ mode, onClick }) {
-    const { setRoute, paymentState } = usePayContext();
-    const { setPaymentMethod } = paymentState;
+    const api = useBackendApi();
+    const { setRoute, paymentState, options: contextOptions } = usePayContext();
+    const { payOrder, setPaymentMethod } = paymentState;
     const isDeposit = mode === PayOrderMode.DEPOSIT;
-    const options = [
-        {
-            id: PaymentMethod.Wallet,
-            title: getTitle("with Wallet", isDeposit),
-            iconShape: "squircle",
-            icons: [_jsx(Logos.MetaMask, {}, "metamask"), _jsx(Logos.Rainbow, {}, "rainbow"), _jsx(Logos.Phantom, {}, "phantom")],
-            onClick: () => {
-                setPaymentMethod(PaymentMethod.Wallet);
-                setRoute(ROUTES.SELECT_CHAIN);
-                onClick();
-            },
+    const shouldCheckCardAvailability = contextOptions?.experimentalFeatures?.cardPayments === true;
+    const { data: paymentMethods, isLoading } = useQuery({
+        queryKey: ["payment-methods", payOrder?.id],
+        enabled: shouldCheckCardAvailability && Boolean(payOrder?.id),
+        retry: false,
+        refetchOnWindowFocus: false,
+        queryFn: async () => {
+            if (!payOrder?.id) {
+                throw new Error("Missing pay order");
+            }
+            const response = await api.getPayOrderPaymentMethods(payOrder.id);
+            if (response.error || !response.data) {
+                throw new Error(response.error?.message ?? "Unable to load payment methods");
+            }
+            return response.data;
         },
-        {
-            id: PaymentMethod.DepositAddress,
-            title: getTitle("to Address", isDeposit),
-            iconShape: "circle",
-            icons: [_jsx(ChainLogos.Ethereum, {}, "ethereum"), _jsx(ChainLogos.Base, {}, "base"), _jsx(ChainLogos.Arbitrum, {}, "arbitrum")],
+    });
+    const options = useMemo(() => {
+        const nextOptions = [
+            {
+                id: PaymentMethod.WALLET,
+                title: getTitle("with Wallet", isDeposit),
+                iconShape: "squircle",
+                icons: [_jsx(Logos.MetaMask, {}, "metamask"), _jsx(Logos.Rainbow, {}, "rainbow"), _jsx(Logos.Phantom, {}, "phantom")],
+                onClick: () => {
+                    setPaymentMethod(PaymentMethod.WALLET);
+                    setRoute(ROUTE.WALLET_CHAIN_SELECT);
+                    onClick();
+                },
+            },
+            {
+                id: PaymentMethod.DEPOSIT_ADDRESS,
+                title: getTitle("to Address", isDeposit),
+                iconShape: "circle",
+                icons: [
+                    _jsx(ChainLogos.Ethereum, {}, "ethereum"),
+                    _jsx(ChainLogos.Base, {}, "base"),
+                    _jsx(ChainLogos.Arbitrum, {}, "arbitrum"),
+                ],
+                onClick: () => {
+                    setPaymentMethod(PaymentMethod.DEPOSIT_ADDRESS);
+                    setRoute(ROUTE.ADDRESS_CHAIN_SELECT);
+                    onClick();
+                },
+            },
+        ];
+        if (!shouldCheckCardAvailability) {
+            return nextOptions;
+        }
+        const cardMethod = paymentMethods?.methods.find((m) => m.method === PaymentMethod.CARD);
+        if (!cardMethod) {
+            return nextOptions;
+        }
+        nextOptions.push({
+            id: PaymentMethod.CARD,
+            title: getTitle("with Card", isDeposit),
+            subtitle: !cardMethod.available
+                ? (cardMethod.reason ?? formatMinimumAmount(cardMethod.minimum_amount))
+                : undefined,
+            disabled: !cardMethod.available,
+            iconShape: "squircle",
+            icons: [_jsx(CreditCardIcon, {}, "stripe")],
             onClick: () => {
-                setPaymentMethod(PaymentMethod.DepositAddress);
-                setRoute(ROUTES.SELECT_PAY_TO_ADDRESS_CHAIN);
+                if (!cardMethod.available) {
+                    return;
+                }
+                setPaymentMethod(PaymentMethod.CARD);
+                setRoute(ROUTE.CARD_PAYMENT);
                 onClick();
             },
-        },
-    ];
-    return { options };
+        });
+        return nextOptions;
+    }, [isDeposit, onClick, paymentMethods?.methods, setPaymentMethod, setRoute, shouldCheckCardAvailability]);
+    return { options, isLoading };
+}
+function formatMinimumAmount(minimumAmount) {
+    if (!minimumAmount) {
+        return undefined;
+    }
+    return `Minimum ${minimumAmount.amount} ${minimumAmount.unit}`;
 }

package/dist/hooks/usePayToAddressChainOptions.js

@@ -5,7 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import usePayContext from "../components/contexts/pay";
 import { SquircleIcon } from "../components/ui/Icon";
-import { ROUTES } from "../types/routes";
+import { ROUTE } from "../types/routes";
 const BTC_MIN_USD_AMOUNT = 15;
 const TOKEN_LIST_QUERY_KEY = ["token-list"];
 export function usePayToAddressChainOptions({ fiatAmount }) {
@@ -23,7 +23,7 @@ export function usePayToAddressChainOptions({ fiatAmount }) {
         icons: [_jsx(SquircleIcon, { icon: chain.logoURI, alt: chain.name }, chain.chainId)],
         onClick: () => {
             setPayToAddressChain(chain.chainId);
-            setRoute(ROUTES.SELECT_PAY_TO_ADDRESS_TOKEN);
+            setRoute(ROUTE.ADDRESS_TOKEN_SELECT);
         },
         disabled: chain.chainId === ChainId.BTC && typeof fiatAmount === "number" && fiatAmount < BTC_MIN_USD_AMOUNT,
     })), [chains, fiatAmount, setPayToAddressChain, setRoute]);

package/dist/hooks/usePayToAddressTokens.js

@@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import usePayContext from "../components/contexts/pay";
 import { SquircleIcon } from "../components/ui/Icon";
-import { ROUTES } from "../types/routes";
+import { ROUTE } from "../types/routes";
 const TOKEN_LIST_QUERY_KEY = ["token-list"];
 export function usePayToAddressTokens() {
     const { paymentState, setRoute } = usePayContext();
@@ -29,7 +29,7 @@ export function usePayToAddressTokens() {
         onClick: () => {
             const currency = tokenToCurrency(token);
             setPayToAddressCurrency(currency);
-            setRoute(ROUTES.PAY_TO_ADDRESS);
+            setRoute(ROUTE.PAY_TO_ADDRESS);
         },
     })), [tokens, setPayToAddressCurrency, setRoute]);
     return { options, isLoading };

package/dist/hooks/usePayWithCard.d.ts

@@ -0,0 +1,10 @@
+import { type PaymentDetails, type PayOrder } from "@coin-voyage/shared/types";
+interface PayWithCardParams {
+    payOrder: PayOrder | undefined;
+    setPayOrder: (order: PayOrder) => void;
+    log: (message: string) => void;
+}
+export declare function usePayWithCard({ payOrder, setPayOrder, log }: PayWithCardParams): {
+    payWithCard: () => Promise<PaymentDetails>;
+};
+export {};

package/dist/hooks/usePayWithCard.js

@@ -0,0 +1,24 @@
+import { assert } from "@coin-voyage/shared/common";
+import { PaymentRail } from "@coin-voyage/shared/types";
+import { useBackendApi } from "../components/contexts/api";
+import { fetchPaymentDetails } from "../lib/api/payment-details";
+export function usePayWithCard({ payOrder, setPayOrder, log }) {
+    const api = useBackendApi();
+    const payWithCard = async () => {
+        assert(payOrder != undefined, "PayOrder is required");
+        const params = {
+            payorder_id: payOrder.id,
+            payment_rail: PaymentRail.FIAT,
+        };
+        // const paymentDetails = stub as unknown as PaymentDetails
+        const paymentDetails = await fetchPaymentDetails(api, params, payOrder);
+        log(`[PAY-WITH-CARD] Created Stripe onramp session: ${JSON.stringify(paymentDetails)}`);
+        setPayOrder({
+            ...payOrder,
+            payment: paymentDetails.data,
+            status: paymentDetails.status,
+        });
+        return paymentDetails;
+    };
+    return { payWithCard };
+}

package/dist/hooks/usePayWithToken.js

@@ -1,5 +1,5 @@
 import { usePrepareTransaction } from "@coin-voyage/crypto/hooks";
-import { assert } from "@coin-voyage/shared/common";
+import { assert, getDepositAddress, getWalletPaymentData } from "@coin-voyage/shared/common";
 import { useBackendApi } from "../components/contexts/api";
 import { fetchPaymentDetails } from "../lib/api/payment-details";
 export function usePayFromWallet({ senderAddr, payOrder, setPayOrder, chainType, log }) {
@@ -23,15 +23,24 @@ export function usePayFromWallet({ senderAddr, payOrder, setPayOrder, chainType,
         const paymentData = paymentDetails.data;
         log(`[PAY-WITH-TOKEN] Final Quote for Order: ${JSON.stringify(paymentDetails)}, params: ${JSON.stringify(params)}`);
         try {
-            const txHash = await actions.execute({
-                amount: BigInt(paymentData.src.currency_amount.raw_amount),
-                fromAddress: senderAddr,
-                toAddress: paymentData.deposit_address,
-                chainId: paymentData.src.chain_id,
-                token: paymentData.src.address
-                    ? { address: paymentData.src.address, decimals: paymentData.src.decimals }
-                    : undefined,
-            });
+            const walletPaymentData = getWalletPaymentData(paymentData);
+            const depositAddress = getDepositAddress(paymentData);
+            assert(Boolean(walletPaymentData || depositAddress), "Payment step is missing executable wallet data");
+            const txHash = walletPaymentData
+                ? await actions.execute({
+                    from: senderAddr,
+                    chainId: paymentData.src.chain_id,
+                    paymentData: walletPaymentData,
+                })
+                : await actions.execute({
+                    amount: BigInt(paymentData.src.currency_amount.raw_amount),
+                    from: senderAddr,
+                    to: depositAddress,
+                    chainId: paymentData.src.chain_id,
+                    token: paymentData.src.address
+                        ? { address: paymentData.src.address, decimals: paymentData.src.decimals }
+                        : undefined,
+                });
             setPayOrder({
                 ...payOrder,
                 deposit_tx_hash: txHash,

package/dist/hooks/usePaymentLifecycle.js

@@ -56,7 +56,7 @@ export function usePaymentLifecycle(order, handlers) {
                 status: order.status,
                 metadata: order.metadata,
                 refund_address: order.payment.refund_address,
-                refund_tx_hash: order.refund_tx_hash ?? "",
+                refund_tx_hash: order.payment.refund_tx_hash ?? "",
             });
             return;
         }
@@ -66,6 +66,8 @@ export function usePaymentLifecycle(order, handlers) {
             status: order.status,
             metadata: order.metadata,
             payment_data: order.payment,
+            source_tx_hash: order.payment.source_tx_hash ?? "",
+            destination_tx_hash: order.payment.destination_tx_hash ?? "",
         });
     }, [order, isFinalized, onPaymentCompleted, onPaymentBounced]);
     return { isStarted, isFinalized, order };

package/dist/hooks/usePaymentState.d.ts

@@ -1,8 +1,7 @@
 import { WalletProps } from "@coin-voyage/crypto/types/wallet";
-import { ChainId, ChainType, Currency, CurrencyBase, type PayOrder } from "@coin-voyage/shared/types";
+import { ChainId, ChainType, Currency, CurrencyBase, PaymentMethod, type PayOrder } from "@coin-voyage/shared/types";
 import { PaymentDetails, PayOrderParams } from "@coin-voyage/shared/types/api";
-import { PaymentMethod } from "../types/enums";
-import { ROUTES } from "../types/routes";
+import { ROUTE } from "../types/routes";
 import { CurrencyAndQuoteID } from "../types/state";
 import { usePayOrderQuotes } from "./usePayOrderQuotes";
 /** Loads a PayOrder + manages the corresponding modal. */
@@ -22,6 +21,7 @@ export interface PaymentState {
     selectedCurrencyOption: CurrencyAndQuoteID | undefined;
     setSelectedCurrencyOption: (option: CurrencyAndQuoteID | undefined) => void;
     payFromWallet: (currency: CurrencyAndQuoteID) => Promise<string | undefined>;
+    payWithCard: () => Promise<PaymentDetails>;
     payToAddress: (currency: CurrencyBase) => Promise<PaymentDetails | undefined>;
     refreshOrder: () => Promise<void>;
     senderEnsName: string | undefined;
@@ -33,6 +33,6 @@ export interface PaymentState {
 export declare function usePaymentState({ payOrder, setPayOrder, setRoute, log, }: {
     payOrder: PayOrder | undefined;
     setPayOrder: (o: PayOrder) => void;
-    setRoute: React.Dispatch<React.SetStateAction<ROUTES>>;
+    setRoute: React.Dispatch<React.SetStateAction<ROUTE>>;
     log: (...args: unknown[]) => void;
 }): PaymentState;

package/dist/hooks/usePaymentState.js

@@ -6,9 +6,10 @@ import { useCallback, useState } from "react";
 import { mainnet } from "viem/chains";
 import { useEnsName } from "wagmi";
 import { useBackendApi } from "../components/contexts/api";
-import { ROUTES } from "../types/routes";
+import { ROUTE } from "../types/routes";
 import { usePayOrderQuotes } from "./usePayOrderQuotes";
 import { usePayToAddress } from "./usePayToAddress";
+import { usePayWithCard } from "./usePayWithCard";
 import { usePayFromWallet } from "./usePayWithToken";
 export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
     const api = useBackendApi();
@@ -49,6 +50,11 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
         setPayOrder,
         log,
     });
+    const { payWithCard } = usePayWithCard({
+        payOrder,
+        setPayOrder,
+        log,
+    });
     const fetchPayOrder = useCallback(async (id) => {
         const { data: order, error } = await api.getPayOrder(id);
         if (!order || error) {
@@ -130,7 +136,7 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
         setSelectedCurrencyOption(undefined);
         setConnectorChainType(undefined);
         setSelectedWallet(undefined);
-        setRoute(ROUTES.SELECT_METHOD);
+        setRoute(ROUTE.SELECT_METHOD);
     }, [setRoute]);
     return {
         setPayId: setPayOrderId,
@@ -148,6 +154,7 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
         setSelectedCurrencyOption,
         payOrderQuotes,
         payFromWallet,
+        payWithCard,
         payToAddress,
         refreshOrder,
         senderEnsName: evmEnsName ?? suiEnsName ?? undefined,

package/dist/hooks/useTokenOptions.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { getChainName } from "@coin-voyage/shared/common";
 import usePayContext from "../components/contexts/pay";
 import TokenChainLogo from "../components/ui/TokenChainLogo";
-import { ROUTES } from "../types/routes";
+import { ROUTE } from "../types/routes";
 export function useTokenOptions(disabled) {
     const { paymentState, setRoute } = usePayContext();
     const { setSelectedCurrencyOption, payOrderQuotes } = paymentState;
@@ -37,7 +37,7 @@ export function useTokenOptions(disabled) {
             ],
             onClick: () => {
                 setSelectedCurrencyOption(quote);
-                setRoute(ROUTES.PAY_WITH_TOKEN);
+                setRoute(ROUTE.WALLET_PAYMENT);
             },
         };
     }) ?? []);

package/dist/hooks/useWalletConnectModal.js

@@ -6,7 +6,7 @@ import { useWallet } from "@solana/wallet-adapter-react";
 import { useState } from "react";
 import { useConnect as wagmiUseConnect } from "wagmi";
 import usePayContext from "../components/contexts/pay";
-import { ROUTES } from "../types/routes";
+import { ROUTE } from "../types/routes";
 import { isWalletConnectConnector } from "../utils";
 export function useWalletConnectModal() {
     const { log, setRoute, paymentState } = usePayContext();
@@ -15,7 +15,7 @@ export function useWalletConnectModal() {
     const { connect } = useUniversalConnect({
         onSuccess: (_, variables) => {
             if (variables?.connector) {
-                setRoute(ROUTES.SELECT_TOKEN);
+                setRoute(ROUTE.WALLET_TOKEN_SELECT);
             }
         },
         onError: (error) => {

package/dist/hooks/useWalletConnectUri.js

@@ -2,7 +2,7 @@ import { useAccount, useUniversalConnect } from "@coin-voyage/crypto/hooks";
 import { ChainType } from "@coin-voyage/shared/types";
 import { useEffect, useRef, useState } from "react";
 import usePayContext from "../components/contexts/pay";
-import { ROUTES } from "../types/routes";
+import { ROUTE } from "../types/routes";
 import { useWallets } from "./useWallets";
 export function useWalletConnectUri({ enabled } = { enabled: true }) {
     const { log, setRoute, paymentState } = usePayContext();
@@ -19,7 +19,7 @@ export function useWalletConnectUri({ enabled } = { enabled: true }) {
         onError: (err) => log("WC Connect Error", err),
         onSuccess: () => {
             setUri(undefined);
-            setRoute(ROUTES.SELECT_TOKEN);
+            setRoute(ROUTE.WALLET_TOKEN_SELECT);
         },
     });
     const isConnectingRef = useRef(false);