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

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

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

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

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

package/dist/hooks/usePayWithToken.d.ts

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

package/dist/hooks/usePayWithToken.js

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

package/dist/providers/paykit-provider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getDepositAddress, getFiatPaymentStep, getWalletPaymentStep } from "@coin-voyage/shared/payment";
 import { useInWagmiContext } from "@coin-voyage/crypto/evm";
 import { useAccount, useConnectCallback } from "@coin-voyage/crypto/hooks";
+import { getDepositAddress, getPaymentStep } from "@coin-voyage/shared/payment";
 import { PaymentMethod, PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { Buffer } from "buffer";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -35,6 +35,7 @@ export const PayKitProvider = ({ apiKey, environment = "production", ...props })
 };
 function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, options, onConnect, onConnectValidation, onDisconnect, debugMode = false, children, }) {
     const { account } = useAccount();
+    const { isConnected, chainType } = account;
     const [allowedWallets, setAllowedWallets] = useState(onConnectValidation ? [] : null);
     useConnectCallback({
         onConnect,
@@ -160,7 +161,7 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
         }
     }, [setOpen, setPayId, setConnectorChainType]);
     useEffect(() => {
-        const intervalMs = getPollingIntervalMs(payOrder);
+        const intervalMs = getPollingIntervalMs(payOrder?.status, payOrder?.mode);
         if (!intervalMs)
             return;
         const timeoutId = setTimeout(refreshOrder, intervalMs);
@@ -174,7 +175,6 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
     const showModal = useCallback((modalOptions) => {
         setModalOptions(modalOptions);
         setOpen(true);
-        const { isConnected, chainType } = account;
         const { payOrder, paymentMethod } = paymentState;
         const status = payOrder?.status;
         const payment = payOrder?.payment;
@@ -186,18 +186,18 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
             return;
         }
         if (status === PayOrderStatus.AWAITING_PAYMENT && payment) {
-            const fiatStep = getFiatPaymentStep(payment);
-            const walletStep = getWalletPaymentStep(payment);
-            const depositAddress = getDepositAddress(payment);
-            if (paymentMethod === PaymentMethod.CARD && fiatStep) {
+            if (paymentMethod === PaymentMethod.CARD) {
                 setRoute(ROUTE.CARD_PAYMENT);
                 return;
             }
-            if (paymentMethod === PaymentMethod.WALLET && (walletStep || depositAddress)) {
+            const step = getPaymentStep(payment);
+            const isTransactionStep = step?.kind === "transaction";
+            if (paymentMethod === PaymentMethod.WALLET || isTransactionStep) {
                 paymentState.setSelectedCurrencyOption(payment.src);
                 setRoute(ROUTE.WALLET_PAYMENT);
                 return;
             }
+            const depositAddress = getDepositAddress(payment);
             if (paymentMethod === PaymentMethod.DEPOSIT_ADDRESS && depositAddress) {
                 paymentState.setPayToAddressChainId(payment.src.chain_id);
                 paymentState.setPayToAddressCurrency(payment.src);
@@ -206,7 +206,7 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
             }
         }
         setRoute(isConnected ? ROUTE.WALLET_TOKEN_SELECT : ROUTE.SELECT_METHOD);
-    }, [account.isConnected, account.chainType, paymentState, setOpen]);
+    }, [isConnected, chainType, paymentState, setOpen]);
     const triggerResize = useCallback(() => onResize((prev) => prev + 1), []);
     const displayError = useCallback((message, code) => {
         setErrorMessage(message);
@@ -252,17 +252,17 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
 // === Helper functions ===
 const NON_FINAL_PAY_ORDER_STATUSES = [PayOrderStatus.PENDING, PayOrderStatus.AWAITING_PAYMENT, PayOrderStatus.EXPIRED];
 const isFinalPayOrderStatus = (status) => !!status && !NON_FINAL_PAY_ORDER_STATUSES.includes(status);
-const getPollingIntervalMs = (payOrder) => {
-    if (!payOrder?.status)
+const getPollingIntervalMs = (status, mode) => {
+    if (!status)
         return null;
-    if (payOrder.status === PayOrderStatus.AWAITING_PAYMENT) {
+    if (status === PayOrderStatus.AWAITING_PAYMENT) {
         return 5000;
     }
-    if ([PayOrderStatus.AWAITING_CONFIRMATION, PayOrderStatus.OPTIMISTIC_CONFIRMED].includes(payOrder.status)) {
+    if ([PayOrderStatus.AWAITING_CONFIRMATION, PayOrderStatus.OPTIMISTIC_CONFIRMED].includes(status)) {
         return 2500;
     }
-    if (payOrder.status === PayOrderStatus.EXECUTING_ORDER) {
-        return payOrder.mode === PayOrderMode.DEPOSIT ? 1000 : 2500;
+    if (status === PayOrderStatus.EXECUTING_ORDER) {
+        return mode === PayOrderMode.DEPOSIT ? 1000 : 2500;
     }
     return null;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coin-voyage/paykit",
   "description": "Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.",
-  "version": "2.4.2",
+  "version": "2.4.3-beta.0",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -63,8 +63,8 @@
     "@stripe/crypto": "0.0.4",
     "styled-components": "^5.3.11",
     "uuid": "13.0.0",
-    "@coin-voyage/crypto": "2.4.0",
-    "@coin-voyage/shared": "2.4.2"
+    "@coin-voyage/shared": "2.4.3-beta.0",
+    "@coin-voyage/crypto": "2.4.3-beta.0"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",