@oasisprotocol/privana-sdk 0.5.6 → 0.5.8

package/dist/index.js

@@ -1,13 +1,13 @@
 "use client";
-import { usePrivanaContext, createHostedAuthPendingStorageKey, clearHostedAuthPendingTransaction, HostedAuthRequiredError, HostedAuthError, createPkceVerifier, createPkceChallenge, createHostedAuthState, persistHostedAuthPendingTransaction, parseHostedAuthCallback, readHostedAuthPendingTransaction, HostedAuthStateMismatchError, buildHostedAuthSession, useSafePrivanaContext, usePrivateReadRequest, formatTokenAmount, submitPendingLock, PostDepositLockError, useDepositVerification, useEnsureCorrectChain, getTransactionReceipt, getBlockNumber, waitForTransactionReceipt, canUseBrowserStorage, clampLockAmount, requireDepositLockOwner, getWalletClient, createSignedLockRequest, requireServiceAddress, signWithdrawMessage, signLockMessage, signTransferMessage, signTransferLockedMessage, signModifyLockMessage, cn, stripHostedAuthCallbackParams, AccountingApiError, getBrowserStorageItem, removeBrowserStorageItem, isSignedLockUsable, setBrowserStorageItem, canUseSharedBrowserStorage, DEFAULT_LOCK_DURATION_SECONDS, parseTokenAmount, Skeleton, shortenAddress, formatCountdown, FiatOnRampForm, getExplorerAddressUrl, getExplorerLabel, formatTimeRemaining, getSharedBrowserStorageItem, removeSharedBrowserStorageItem, setSharedBrowserStorageItem } from './chunk-DLGIPF4N.js';
-export { AccountingApiError, Button, DEFAULT_LOCK_DURATION_SECONDS, DEFAULT_ONRAMP_LOCK_BUFFER, HOSTED_AUTH_CLOCK_SKEW_MS, HostedAuthError, HostedAuthRequiredError, HostedAuthStateMismatchError, HttpClient, LOCK_TYPES, MODIFY_LOCK_TYPES, NETWORK_CONFIG, NetworkError, PostDepositLockError, PrivanaClient, PrivanaProvider, SUPPORTED_CHAINS, SiweAuthProvider, Skeleton, TRANSFER_LOCKED_TYPES, TRANSFER_TYPES, ValidationError, WITHDRAW_FROM_LOCK_TYPES, WITHDRAW_TYPES, applyLockBuffer, applyRefreshResponse, buildHostedAuthSession, buildSiweStatement, buttonVariants, clampLockAmount, clearHostedAuthPendingTransaction, clearPendingLock, createDomain, createHostedAuthPendingStorageKey, createHostedAuthState, createHostedAuthStorageKey, createLockExpiry, createPkceChallenge, createPkceVerifier, createSignedLockRequest, getAccountingContract, getApiUrl, getChainById, getChainId, getExplorerAddressUrl, getExplorerLabel, isHostedAuthRefreshActive, isHostedAuthSessionActive, isSignedLockUsable, loadPendingLock, normalizeAddress, normalizeHex, parseHostedAuthCallback, persistHostedAuthPendingTransaction, readHostedAuthPendingTransaction, readStoredHostedAuthSession, requireDepositLockOwner, requireServiceAddress, savePendingLock, signLockMessage, signModifyLockMessage, signTransferLockedMessage, signTransferMessage, signWithdrawFromLockMessage, signWithdrawMessage, stripHostedAuthCallbackParams, submitPendingLock, syncHostedAuthSessionToClient, useDepositVerification, usePrivanaContext, useSafeAccount, useSafePrivanaContext, useSiweAuth } from './chunk-DLGIPF4N.js';
+import { usePrivanaContext, createHostedAuthPendingStorageKey, clearHostedAuthPendingTransaction, HostedAuthRequiredError, HostedAuthError, createPkceVerifier, createPkceChallenge, createHostedAuthState, persistHostedAuthPendingTransaction, parseHostedAuthCallback, readHostedAuthPendingTransaction, HostedAuthStateMismatchError, buildHostedAuthSession, useSafePrivanaContext, usePrivateReadRequest, formatTokenAmount, submitPendingLock, PostDepositLockError, useDepositVerification, useEnsureCorrectChain, getTransactionReceipt, getBlockNumber, waitForTransactionReceipt, canUseBrowserStorage, clampLockAmount, requireDepositLockOwner, getWalletClient, createSignedLockRequest, requireServiceAddress, signWithdrawMessage, signLockMessage, signTransferMessage, signTransferLockedMessage, signModifyLockMessage, cn, stripHostedAuthCallbackParams, AccountingApiError, getBrowserStorageItem, removeBrowserStorageItem, isSignedLockUsable, setBrowserStorageItem, resolveProductOnRamp, matchesProductOnRampScope, createProductOnRampOutcomeCallbacks, canUseSharedBrowserStorage, DEFAULT_LOCK_DURATION_SECONDS, isMoonPayProductOnRamp, parseTokenAmount, createProductOnRampFlowSnapshot, Skeleton, shortenAddress, formatCountdown, getExplorerAddressUrl, getExplorerLabel, formatTimeRemaining, getSharedBrowserStorageItem, removeSharedBrowserStorageItem, setSharedBrowserStorageItem, matchesOnRampTransaction, useTransakOnRamp, getTransakMinimumTargetBaseUnits, matchesFrozenOnRampToken, Button, canRetryOnRampVerification, FiatOnRampForm } from './chunk-ONXJGUOH.js';
+export { AccountingApiError, Button, DEFAULT_LOCK_DURATION_SECONDS, DEFAULT_ONRAMP_LOCK_BUFFER, HOSTED_AUTH_CLOCK_SKEW_MS, HostedAuthError, HostedAuthRequiredError, HostedAuthStateMismatchError, HttpClient, LOCK_TYPES, MODIFY_LOCK_TYPES, NETWORK_CONFIG, NetworkError, PostDepositLockError, PrivanaClient, PrivanaProvider, SUPPORTED_CHAINS, SiweAuthProvider, Skeleton, TRANSFER_LOCKED_TYPES, TRANSFER_TYPES, ValidationError, WITHDRAW_FROM_LOCK_TYPES, WITHDRAW_TYPES, applyLockBuffer, applyRefreshResponse, buildHostedAuthSession, buildSiweStatement, buttonVariants, clampLockAmount, clearHostedAuthPendingTransaction, clearPendingLock, createDomain, createHostedAuthPendingStorageKey, createHostedAuthState, createHostedAuthStorageKey, createLockExpiry, createPkceChallenge, createPkceVerifier, createSignedLockRequest, getAccountingContract, getApiUrl, getChainById, getChainId, getExplorerAddressUrl, getExplorerLabel, isHostedAuthRefreshActive, isHostedAuthSessionActive, isSignedLockUsable, loadPendingLock, normalizeAddress, normalizeHex, parseHostedAuthCallback, persistHostedAuthPendingTransaction, readHostedAuthPendingTransaction, readStoredHostedAuthSession, requireDepositLockOwner, requireServiceAddress, savePendingLock, signLockMessage, signModifyLockMessage, signTransferLockedMessage, signTransferMessage, signWithdrawFromLockMessage, signWithdrawMessage, stripHostedAuthCallbackParams, submitPendingLock, syncHostedAuthSessionToClient, useDepositVerification, usePrivanaContext, useSafeAccount, useSafePrivanaContext, useSiweAuth } from './chunk-ONXJGUOH.js';
 import { useState, useRef, useMemo, useCallback, useContext, useEffect, useId } from 'react';
 import { QueryClientContext, useQuery, useQueryClient, useMutation, keepPreviousData } from '@tanstack/react-query';
 import { useAccount, useWalletClient, useConfig, useWriteContract, useSendTransaction, useBalance as useBalance$1, useReadContract } from 'wagmi';
-import { zeroAddress, erc20Abi, formatUnits } from 'viem';
+import { zeroAddress, erc20Abi, formatUnits, parseUnits } from 'viem';
 import { MoonPayProvider, MoonPayContext } from '@moonpay/moonpay-react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from 'lucide-react';
+import { XIcon, CircleCheckIcon, Loader2 } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { toast } from 'sonner';
 import { QRCodeSVG } from 'qrcode.react';
@@ -2315,7 +2315,7 @@ function BaseIcon({ className, size = 24 }) {
     }
   );
 }
-function WETHIcon({ className, size = 24 }) {
+function EthereumIcon({ className, size = 24 }) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -2366,18 +2366,19 @@ function WETHIcon({ className, size = 24 }) {
 }
 function getTokenIcon(symbol, size) {
   const iconSize = size ?? 24;
-  switch (symbol.toUpperCase()) {
+  switch ((symbol ?? "").toUpperCase()) {
     case "USDC":
       return /* @__PURE__ */ jsx(USDCIcon, { size: iconSize });
+    case "ETH":
     case "WETH":
-      return /* @__PURE__ */ jsx(WETHIcon, { size: iconSize });
+      return /* @__PURE__ */ jsx(EthereumIcon, { size: iconSize });
     default:
       return /* @__PURE__ */ jsx(
         "div",
         {
           className: "bg-muted flex items-center justify-center rounded-full text-xs font-bold",
           style: { width: iconSize, height: iconSize },
-          children: symbol.slice(0, 2)
+          children: (symbol ?? "?").slice(0, 2)
         }
       );
   }
@@ -2385,8 +2386,12 @@ function getTokenIcon(symbol, size) {
 function getChainIcon(chainId, size) {
   const iconSize = size ?? 24;
   switch (chainId) {
+    case 8453:
     case 84532:
       return /* @__PURE__ */ jsx(BaseIcon, { size: iconSize });
+    case 1:
+    case 11155111:
+      return /* @__PURE__ */ jsx(EthereumIcon, { size: iconSize });
     default:
       return /* @__PURE__ */ jsx(
         "div",
@@ -2399,10 +2404,11 @@ function getChainIcon(chainId, size) {
   }
 }
 function TokenSelectorView({ selectedTokenId, onSelect }) {
-  const { enabledTokens } = usePrivanaContext();
+  const { enabledTokens, getChainById: getChainById2 } = usePrivanaContext();
   return /* @__PURE__ */ jsx("div", { className: "bg-muted flex flex-col rounded-[10px] p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-72 flex-col gap-1 overflow-y-auto", children: [
     enabledTokens.map((token) => {
       const isSelected = selectedTokenId === token.id;
+      const chainName = getChainById2(token.chainId)?.name;
       return /* @__PURE__ */ jsxs(
         "button",
         {
@@ -2416,7 +2422,10 @@ function TokenSelectorView({ selectedTokenId, onSelect }) {
             /* @__PURE__ */ jsx("div", { className: "h-6 w-6 shrink-0 overflow-hidden rounded-full", children: getTokenIcon(token.symbol, 24) }),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
               /* @__PURE__ */ jsx("div", { className: "text-foreground text-sm font-medium", children: token.symbol }),
-              /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-[11px]", children: token.name })
+              /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-[11px]", children: [
+                "on ",
+                chainName ?? "\u2014"
+              ] })
             ] }),
             isSelected && /* @__PURE__ */ jsx("div", { className: "bg-primary flex h-4 w-4 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(
               "svg",
@@ -2446,15 +2455,356 @@ function TokenSelectorView({ selectedTokenId, onSelect }) {
     enabledTokens.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground px-3 py-6 text-center text-sm", children: "No tokens available" })
   ] }) });
 }
+function assertTransakCheckoutPreconditions({
+  activeIntentId,
+  canOpen,
+  canRecreateSession
+}) {
+  if (activeIntentId && !canRecreateSession) {
+    throw new Error("Continue signed-intent recovery instead of reopening this checkout");
+  }
+  if (!canOpen) {
+    throw new Error("Card checkout is unavailable; close this purchase and start again");
+  }
+}
+function TransakCardWidgetView({
+  token,
+  providerAssetCode,
+  amount,
+  allowance,
+  lockServiceAddress,
+  onCredited,
+  onLockSubmitted,
+  onLockFailed,
+  onLeave,
+  onUnsafeToCloseChange,
+  onActiveFlowChange,
+  useOnRamp = useTransakOnRamp
+}) {
+  const [actionError, setActionError] = useState(null);
+  const [rowError, setRowError] = useState(null);
+  const [lockSettled, setLockSettled] = useState(false);
+  const [lockError, setLockError] = useState(null);
+  const [ownedTerminal, setOwnedTerminal] = useState(false);
+  const ownedIntentIdRef = useRef(null);
+  const postDepositLock = useMemo(
+    () => allowance ? {
+      serviceAddress: lockServiceAddress,
+      maxAmount: BigInt(allowance.value),
+      lockDuration: allowance.lockDuration
+    } : void 0,
+    [allowance, lockServiceAddress]
+  );
+  const ownsRecord = useCallback(
+    (record) => Boolean(
+      ownedIntentIdRef.current && matchesOnRampTransaction(record, ownedIntentIdRef.current)
+    ),
+    []
+  );
+  const {
+    status,
+    activeIntentId,
+    pending,
+    activeVerificationId,
+    error,
+    finalityProgress,
+    depositAddress,
+    minDepositBaseUnits,
+    selectedToken,
+    isLaunching,
+    isWidgetOpen,
+    canRecreateSession,
+    widget,
+    launch,
+    recreateSession,
+    closeWidget,
+    finishPendingVerification,
+    refreshPending
+  } = useOnRamp({
+    tokenId: token.id,
+    postDepositLock,
+    iframeTitle: "Card checkout",
+    iframeClassName: "h-[680px] w-full border-0",
+    onCredited: (_depositTxHash, record) => {
+      if (!ownsRecord(record)) return;
+      onCredited?.();
+      if (!postDepositLock) {
+        setOwnedTerminal(true);
+        onActiveFlowChange?.(false);
+      }
+    },
+    onLockSubmitted: (_response, record) => {
+      if (!ownsRecord(record)) return;
+      setLockError(null);
+      setLockSettled(true);
+      setOwnedTerminal(true);
+      onActiveFlowChange?.(false);
+      onLockSubmitted?.();
+    },
+    onLockFailed: (nextError, record) => {
+      if (!ownsRecord(record)) return;
+      setLockError(nextError);
+      setOwnedTerminal(true);
+      onActiveFlowChange?.(false);
+      onLockFailed?.(nextError);
+    }
+  });
+  const ownedIntentId = ownedIntentIdRef.current ?? activeIntentId;
+  useEffect(() => {
+    if (activeIntentId && !ownedIntentIdRef.current) {
+      ownedIntentIdRef.current = activeIntentId;
+    }
+  }, [activeIntentId]);
+  let amountBaseUnits;
+  try {
+    amountBaseUnits = parseUnits(amount, token.decimals);
+  } catch {
+  }
+  const minimumTargetBaseUnits = minDepositBaseUnits === void 0 ? void 0 : getTransakMinimumTargetBaseUnits(minDepositBaseUnits);
+  const belowMinimum = amountBaseUnits !== void 0 && minimumTargetBaseUnits !== void 0 && amountBaseUnits < minimumTargetBaseUnits;
+  const minimumUnknown = minimumTargetBaseUnits === void 0;
+  const tokenMismatch = !matchesFrozenOnRampToken(token, selectedToken);
+  const isSettling = status === "awaiting-delivery" || status === "verifying";
+  const lockPending = !!allowance && status === "credited" && !lockSettled && !lockError;
+  const ownedPending = ownedIntentId ? pending.filter((record) => matchesOnRampTransaction(record, ownedIntentId)) : [];
+  const ownedFlowActive = !ownedTerminal && (Boolean(activeIntentId && activeIntentId === ownedIntentId) || ownedPending.length > 0 || lockPending);
+  const canOpen = Boolean(selectedToken && depositAddress && amountBaseUnits && amountBaseUnits > 0n) && !tokenMismatch && !minimumUnknown && !belowMinimum && !isLaunching && !isWidgetOpen && !isSettling && status !== "credited" && (!activeIntentId || canRecreateSession);
+  useEffect(() => {
+    onActiveFlowChange?.(ownedFlowActive);
+  }, [onActiveFlowChange, ownedFlowActive]);
+  const unsafeToClose = isLaunching || lockPending;
+  useEffect(() => {
+    onUnsafeToCloseChange?.(unsafeToClose);
+    return () => onUnsafeToCloseChange?.(false);
+  }, [onUnsafeToCloseChange, unsafeToClose]);
+  const runCheckout = useCallback(async () => {
+    setActionError(null);
+    try {
+      assertTransakCheckoutPreconditions({ activeIntentId, canOpen, canRecreateSession });
+      setLockError(null);
+      setLockSettled(false);
+      setOwnedTerminal(false);
+      if (!activeIntentId) ownedIntentIdRef.current = null;
+      if (activeIntentId) await recreateSession();
+      else await launch({ providerAssetCode, quoteCurrencyAmount: amount });
+    } catch (nextError) {
+      setActionError(
+        nextError instanceof Error ? nextError : new Error("Failed to open card checkout")
+      );
+    }
+  }, [
+    activeIntentId,
+    amount,
+    canOpen,
+    canRecreateSession,
+    launch,
+    providerAssetCode,
+    recreateSession
+  ]);
+  const handleClose = useCallback(async () => {
+    setActionError(null);
+    try {
+      await closeWidget();
+    } catch (nextError) {
+      setActionError(
+        nextError instanceof Error ? nextError : new Error("Failed to close card checkout")
+      );
+    }
+  }, [closeWidget]);
+  const handleLeave = useCallback(() => {
+    setActionError(null);
+    onActiveFlowChange?.(false);
+    onLeave?.();
+  }, [onActiveFlowChange, onLeave]);
+  return /* @__PURE__ */ jsxs("div", { className: "bg-muted flex flex-col gap-4 rounded-[10px] p-5", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-foreground text-[28px] leading-8 font-medium", children: "Complete your purchase" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground mt-1 text-sm", children: [
+        "Buy ",
+        token.symbol,
+        " and deposit it directly into your Privana balance."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "border-border bg-card rounded-lg border p-3 text-sm", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-foreground font-medium", children: [
+        "Target receipt: at least ",
+        amount,
+        " ",
+        token.symbol
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: "In Transak, adjust the fiat amount until \u201CYou receive\u201D is at least this target." }),
+      allowance && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: "The pre-signed lock is 98% of the target, capped by the service allowance." })
+    ] }),
+    widget ? /* @__PURE__ */ jsxs("div", { className: "border-border bg-card overflow-hidden rounded-xl border", children: [
+      /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center justify-between border-b px-4 py-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Card checkout" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void handleClose(), children: "Close" })
+      ] }),
+      widget
+    ] }) : status === "credited" && !lockPending && !lockError ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 py-8 text-center", children: [
+      /* @__PURE__ */ jsx(CircleCheckIcon, { className: "text-primary size-8", "aria-hidden": true }),
+      /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm font-medium", children: "Purchase credited" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm", children: [
+        "Your ",
+        token.symbol,
+        " deposit is now available in your balance."
+      ] })
+    ] }) : !activeIntentId || canRecreateSession ? /* @__PURE__ */ jsxs(Button, { type: "button", disabled: !canOpen, onClick: () => void runCheckout(), children: [
+      isLaunching && /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", "aria-hidden": true }),
+      isLaunching ? "Opening checkout\u2026" : activeIntentId ? "Reopen card checkout" : allowance ? "Sign policy and open checkout" : "Open card checkout"
+    ] }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "This signed purchase is in recovery. Do not open another checkout for it." }),
+    !depositAddress && !error && !actionError && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Preparing your secure deposit address\u2026" }),
+    tokenMismatch && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", role: "alert", children: "The token configuration changed. Close this purchase and start again." }),
+    !tokenMismatch && depositAddress && minimumUnknown && !error && !actionError && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", role: "alert", children: "The minimum purchase amount is unavailable. Close this purchase and try again." }),
+    belowMinimum && minimumTargetBaseUnits !== void 0 && /* @__PURE__ */ jsxs("p", { className: "text-destructive text-sm", role: "alert", children: [
+      "Minimum target is ",
+      formatUnits(minimumTargetBaseUnits, token.decimals),
+      " ",
+      token.symbol,
+      ", including a 5% delivery buffer."
+    ] }),
+    isSettling && pending.length === 0 && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }),
+      "Verifying your purchase\u2026"
+    ] }),
+    lockPending && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }),
+      "Purchase credited. Locking your funds\u2026"
+    ] }),
+    pending.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm font-medium", children: "Validating purchases" }),
+      pending.map((record) => {
+        const isActivelyVerifying = record.transaction_id === activeVerificationId;
+        const progress = parseFinalityProgress(finalityProgress[record.transaction_id]);
+        const showRetry = canRetryOnRampVerification(record, activeVerificationId);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "border-border flex flex-col gap-2 rounded-md border p-2",
+            children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground flex items-center gap-1 text-xs", children: [
+                /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin", "aria-hidden": true }),
+                record.on_chain_tx_hash ? progress ?? (isActivelyVerifying ? "Verifying\u2026" : "Ready to verify") : "Waiting for provider delivery\u2026"
+              ] }),
+              rowError?.id === record.transaction_id && /* @__PURE__ */ jsx("p", { className: "text-destructive text-xs", children: rowError.message }),
+              showRetry && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  onClick: async () => {
+                    setRowError(null);
+                    try {
+                      await finishPendingVerification(record);
+                    } catch (nextError) {
+                      setRowError({
+                        id: record.transaction_id,
+                        message: nextError instanceof Error ? nextError.message : "Verification failed"
+                      });
+                    }
+                  },
+                  children: "Retry verification"
+                }
+              ),
+              !record.on_chain_tx_hash && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => void refreshPending(),
+                  children: "Refresh delivery"
+                }
+              )
+            ]
+          },
+          record.transaction_id
+        );
+      })
+    ] }),
+    onLeave && ownedFlowActive && !unsafeToClose && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: handleLeave, children: "Leave checkout" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Privana will keep this signed purchase available for exact recovery." })
+    ] }),
+    (actionError ?? error) && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", role: "alert", children: (actionError ?? error)?.message }),
+    lockError && /* @__PURE__ */ jsxs("p", { className: "text-destructive text-sm", role: "alert", children: [
+      "Purchase credited, but locking the funds failed: ",
+      lockError.message
+    ] })
+  ] });
+}
+function parseFinalityProgress(message) {
+  if (!message) return null;
+  const match = message.match(/(\d+\/\d+)\s+confirmations/i);
+  return match ? `${match[1]} confirmations` : null;
+}
 function CreditCardWidgetView({
   token,
+  onRamp,
   amount,
   allowance,
+  lockServiceAddress,
   onCredited,
   onLockSubmitted,
-  onLockFailed
+  onLockFailed,
+  onLeave,
+  onUnsafeToCloseChange,
+  onActiveFlowChange
 }) {
-  const moonpayCurrencyCode = token?.moonpayCurrencyCode;
+  if (onRamp.unavailableReason || !token || !onRamp.provider || !onRamp.providerAssetCode) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-muted flex flex-col gap-2 rounded-[10px] p-5", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-foreground text-[28px] leading-8 font-medium", children: "Card purchases unavailable" }),
+      /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: onRamp.unavailableReason ?? "The card on-ramp is not configured for this token." })
+    ] });
+  }
+  if (onRamp.provider === "transak") {
+    return /* @__PURE__ */ jsx(
+      TransakCardWidgetView,
+      {
+        token,
+        providerAssetCode: onRamp.providerAssetCode,
+        amount,
+        allowance,
+        lockServiceAddress,
+        onCredited,
+        onLockSubmitted,
+        onLockFailed,
+        onLeave,
+        onUnsafeToCloseChange,
+        onActiveFlowChange
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MoonPayCardWidgetView,
+    {
+      token,
+      amount,
+      allowance,
+      lockServiceAddress,
+      onCredited,
+      onLockSubmitted,
+      onLockFailed,
+      onLeaveFlow: onLeave,
+      onUnsafeToCloseChange,
+      onActiveFlowChange
+    }
+  );
+}
+function MoonPayCardWidgetView({
+  token,
+  amount,
+  allowance,
+  lockServiceAddress,
+  onCredited,
+  onLockSubmitted,
+  onLockFailed,
+  onLeaveFlow,
+  onUnsafeToCloseChange,
+  onActiveFlowChange
+}) {
+  const moonpayCurrencyCode = token.moonpayCurrencyCode;
   const containerRef = useRef(null);
   const [widgetTheme, setWidgetTheme] = useState();
   useEffect(() => {
@@ -2462,26 +2812,32 @@ function CreditCardWidgetView({
   }, []);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "bg-muted flex flex-col gap-6 rounded-[10px] p-5", children: [
     /* @__PURE__ */ jsx("h2", { className: "text-foreground text-[28px] leading-8 font-medium", children: "Complete your purchase" }),
-    token && moonpayCurrencyCode ? /* @__PURE__ */ jsx(
+    moonpayCurrencyCode ? /* @__PURE__ */ jsx(
       FiatOnRampForm,
       {
         tokenId: token.id,
+        frozenToken: token,
         currencyCode: moonpayCurrencyCode,
         quoteCurrencyAmount: amount || void 0,
         lockAmount: true,
         variant: "embedded",
         autoStart: true,
         theme: widgetTheme,
+        onlyRouteActiveIntentCallbacks: true,
+        onUnsafeToCloseChange,
+        onActiveFlowChange,
         postDepositLock: allowance ? {
+          serviceAddress: lockServiceAddress,
           maxAmount: BigInt(allowance.value),
           lockDuration: allowance.lockDuration
         } : void 0,
         onCredited,
         onLockSubmitted,
-        onLockFailed
+        onLockFailed,
+        onLeaveFlow
       }
     ) : /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm", children: [
-      token?.symbol ?? "This token",
+      token.symbol,
       " isn\u2019t available for card purchases yet."
     ] })
   ] });
@@ -2790,7 +3146,7 @@ function CopyIcon() {
     }
   );
 }
-function CircleCheckIcon() {
+function CircleCheckIcon2() {
   return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
     /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ jsx(
@@ -2909,7 +3265,7 @@ function PolicyTermRow({
           "mt-0.5 shrink-0",
           kind === "permission" ? "text-emerald-500" : "text-orange-500"
         ),
-        children: kind === "permission" ? /* @__PURE__ */ jsx(CircleCheckIcon, {}) : /* @__PURE__ */ jsx(CircleXIcon, {})
+        children: kind === "permission" ? /* @__PURE__ */ jsx(CircleCheckIcon2, {}) : /* @__PURE__ */ jsx(CircleXIcon, {})
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
@@ -2969,6 +3325,7 @@ function AllowancePolicySection({
 function DepositView({
   source,
   selectedToken,
+  onRamp,
   amount,
   allowance,
   externalMinimum,
@@ -2987,6 +3344,8 @@ function DepositView({
   const isConnectedSource = source === "connected";
   const isExternal = source === "external";
   const isCreditCard = source === "credit-card";
+  const isMoonPayCard = isCreditCard && isMoonPayProductOnRamp(onRamp);
+  const isTransakCard = isCreditCard && onRamp.provider === "transak";
   const isNative = selectedToken?.contract === zeroAddress;
   const { data: nativeBalanceData } = useBalance$1({
     address,
@@ -3010,15 +3369,15 @@ function DepositView({
   } = useMoonpayLimits({
     currencyCode: selectedToken?.moonpayCurrencyCode,
     apiBaseUrl: networkConfig.moonpayApiUrl,
-    enabled: isCreditCard
+    enabled: isMoonPayCard
   });
   const hasValidAmount = !!amount && parseFloat(amount) > 0;
-  const maxAmountDecimals = isCreditCard ? 2 : selectedToken?.decimals;
+  const maxAmountDecimals = isMoonPayCard ? 2 : selectedToken?.decimals;
   const tooManyDecimals = hasValidAmount && maxAmountDecimals != null && amount.includes(".") && amount.split(".")[1].length > maxAmountDecimals;
   const exceedsBalance = isConnectedSource && hasValidAmount && !tooManyDecimals && !!selectedToken && walletBalance != null && parseTokenAmount(amount, selectedToken.decimals) > walletBalance;
-  const belowMoonpayMin = isCreditCard && hasValidAmount && moonpayMinBuy != null && parseFloat(amount) < moonpayMinBuy;
-  const moonpayLimitsUnready = isCreditCard && !!selectedToken?.moonpayCurrencyCode && moonpayMinBuy == null;
-  const creditCardUnavailable = isCreditCard && !!selectedToken && !selectedToken.moonpayCurrencyCode;
+  const belowMoonpayMin = isMoonPayCard && hasValidAmount && moonpayMinBuy != null && parseFloat(amount) < moonpayMinBuy;
+  const moonpayLimitsUnready = isMoonPayCard && !!onRamp.providerAssetCode && moonpayMinBuy == null;
+  const creditCardUnavailable = isCreditCard && !!onRamp.unavailableReason;
   const externalTokenUnavailable = isExternal && !!selectedToken && isNative;
   const externalMinimumRequired = isExternal && !!allowance && !!selectedToken;
   const externalMinimumLoading = externalMinimumRequired && externalMinimum === void 0;
@@ -3033,8 +3392,8 @@ function DepositView({
   };
   return /* @__PURE__ */ jsxs("div", { className: "bg-muted flex flex-col gap-6 rounded-[10px] p-5", children: [
     isCreditCard ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-foreground text-[28px] leading-8 font-medium", children: "Buy with credit card and deposit" }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Enter your deposit amount and proceed to sign a policy." })
+      /* @__PURE__ */ jsx("h2", { className: "text-foreground text-[28px] leading-8 font-medium", children: "Buy with card and deposit" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: isTransakCard ? "Enter your target deposit amount and continue." : "Enter your deposit amount and proceed to sign a policy." })
     ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsxs("h2", { className: "text-foreground text-[28px] leading-8 font-medium", children: [
         "Deposit from ",
@@ -3049,7 +3408,7 @@ function DepositView({
         {
           type: "button",
           onClick: onSelectToken,
-          disabled: isSubmitting,
+          disabled: isSubmitting || isCreditCard && onRamp.tokenSelectionLocked,
           className: "border-border bg-input flex w-full cursor-pointer items-center gap-3 rounded-lg border p-3 text-left disabled:cursor-not-allowed disabled:opacity-50",
           children: [
             selectedToken ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3062,7 +3421,7 @@ function DepositView({
                 ] })
               ] })
             ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground flex-1 text-sm", children: "Select token" }),
-            /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex h-5 w-5 items-center justify-center", children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+            (!isCreditCard || !onRamp.tokenSelectionLocked) && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex h-5 w-5 items-center justify-center", children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
           ]
         }
       )
@@ -3132,12 +3491,9 @@ function DepositView({
       ] }),
       externalMinimumLoading && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Checking minimum deposit\u2026" }),
       externalMinimumUnavailable && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: "Couldn\u2019t load the minimum deposit. Please try again." }),
-      isCreditCard && moonpayLimitsError && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: "Couldn\u2019t load purchase limits. Please try again." }),
-      isCreditCard && moonpayLimitsLoading && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Checking purchase limits\u2026" }),
-      creditCardUnavailable && /* @__PURE__ */ jsxs("p", { className: "text-destructive text-sm", children: [
-        selectedToken?.symbol ?? "This token",
-        " isn\u2019t available for card purchases yet."
-      ] }),
+      isMoonPayCard && moonpayLimitsError && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: "Couldn\u2019t load purchase limits. Please try again." }),
+      isMoonPayCard && moonpayLimitsLoading && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Checking purchase limits\u2026" }),
+      creditCardUnavailable && /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: onRamp.unavailableReason }),
       externalTokenUnavailable && /* @__PURE__ */ jsxs("p", { className: "text-destructive text-sm", children: [
         selectedToken?.symbol ?? "This token",
         " can\u2019t be used for external deposits. Choose an ERC20 token."
@@ -3164,7 +3520,7 @@ function DepositView({
           if (selectedToken) onSubmit({ source, tokenId: selectedToken.id, amount });
         },
         className: "bg-primary text-primary-foreground hover:bg-primary/90 flex h-10 w-full cursor-pointer items-center justify-center rounded-[10px] px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-        children: needsConnect ? "Connect Wallet" : allowance ? "Sign Policy and Deposit" : "Deposit"
+        children: needsConnect ? "Connect Wallet" : isTransakCard ? "Continue" : allowance ? "Sign Policy and Deposit" : "Deposit"
       }
     )
   ] });
@@ -3476,9 +3832,11 @@ function ExternalDepositView({
     ] })
   ] });
 }
-function MoonPayGate({ enabled, children }) {
-  const { networkConfig } = usePrivanaContext();
-  const apiKey = networkConfig.moonpayApiKey;
+function MoonPayGate({
+  enabled,
+  apiKey,
+  children
+}) {
   if (!enabled || !apiKey) return /* @__PURE__ */ jsx(Fragment, { children });
   return /* @__PURE__ */ jsx(MoonPayProvider, { apiKey, children });
 }
@@ -3565,15 +3923,52 @@ function DepositModalContent({
   onCloseBlockedChange,
   onExit
 }) {
-  const { serviceName, enabledTokens, defaultToken, hostedAuthConfig, getChainById: getChainById2, getTokenById } = usePrivanaContext();
+  const {
+    serviceName,
+    enabledTokens,
+    defaultToken,
+    hostedAuthConfig,
+    serviceAddress,
+    getChainById: getChainById2,
+    getTokenById,
+    networkConfig,
+    onRamp
+  } = usePrivanaContext();
   const { address } = useAccount();
+  const { privateReadQueryScope } = usePrivateReadRequest();
+  const [privateReadApiUrl, accountingChainId, beneficiaryAddress] = privateReadQueryScope;
   const appName = serviceName ?? "Privana";
   const [activeTab, setActiveTab] = useState(defaultTab);
   const [view, setView] = useState("method");
   const [source, setSource] = useState("connected");
   const [selectedTokenId, setSelectedTokenId] = useState(defaultToken?.id ?? "");
   const [amount, setAmount] = useState("");
-  const selectedToken = enabledTokens.find((t) => t.id === selectedTokenId) ?? defaultToken;
+  const [cardFlow, setCardFlow] = useState(null);
+  const [cardFlowActive, setCardFlowActive] = useState(false);
+  const [cardUnsafeToClose, setCardUnsafeToClose] = useState(false);
+  const nextCardFlowId = useRef(0);
+  const stateSelectedToken = enabledTokens.find((t) => t.id === selectedTokenId) ?? defaultToken;
+  const cardOnRamp = useMemo(
+    () => resolveProductOnRamp({
+      config: onRamp,
+      enabledTokens,
+      legacyToken: stateSelectedToken,
+      moonpayApiKey: networkConfig.moonpayApiKey
+    }),
+    [enabledTokens, networkConfig.moonpayApiKey, onRamp, stateSelectedToken]
+  );
+  const cardOnRampScope = useMemo(
+    () => ({
+      apiUrl: privateReadApiUrl,
+      accountingChainId,
+      accountingContract: networkConfig.accountingContract,
+      beneficiaryAddress
+    }),
+    [accountingChainId, beneficiaryAddress, networkConfig.accountingContract, privateReadApiUrl]
+  );
+  const mountedCardFlow = cardFlow && matchesProductOnRampScope(cardFlow.scope, cardOnRampScope) ? cardFlow : null;
+  const displayedCardOnRamp = view === "credit-card-widget" && mountedCardFlow ? mountedCardFlow.selection : cardOnRamp;
+  const selectedToken = source === "credit-card" ? displayedCardOnRamp.token : stateSelectedToken;
   const externalDepositAddress = useDepositAddress({
     enabled: source === "external" && (view === "deposit" || view === "external-deposit")
   });
@@ -3587,6 +3982,9 @@ function DepositModalContent({
       setView("method");
       setAmount("");
       setSelectedTokenId("");
+      setCardFlow(null);
+      setCardFlowActive(false);
+      setCardUnsafeToClose(false);
     }
   }, [address, hostedAuthConfig]);
   const openDeposit = (next) => {
@@ -3609,9 +4007,33 @@ function DepositModalContent({
     }
   };
   const finishCardPurchase = () => {
+    setCardFlowActive(false);
+    setCardUnsafeToClose(false);
     setAmount("");
     onDepositSuccess?.();
   };
+  const leaveCardPurchase = useCallback(() => {
+    setCardFlow(null);
+    setCardFlowActive(false);
+    setCardUnsafeToClose(false);
+    setAmount("");
+    setView("deposit");
+  }, []);
+  useEffect(() => {
+    if (cardFlow && !matchesProductOnRampScope(cardFlow.scope, cardOnRampScope)) {
+      leaveCardPurchase();
+    }
+  }, [cardFlow, cardOnRampScope, leaveCardPurchase]);
+  const cardOutcomeCallbacks = mountedCardFlow ? createProductOnRampOutcomeCallbacks({
+    requiresLock: mountedCardFlow.requiresLock,
+    onComplete: finishCardPurchase,
+    onLockFailed: (err) => {
+      setCardFlowActive(false);
+      setCardUnsafeToClose(false);
+      setLockFailure(err);
+      onLockFailed?.(err);
+    }
+  }) : null;
   const {
     txHash,
     isGettingAddress,
@@ -3681,7 +4103,7 @@ function DepositModalContent({
       setView("deposit");
     }
   }, [allowance, externalLock.session, view]);
-  const isUnsafeToClose = (isGettingAddress || isSendingTransaction) && !cancelled || externalLock.isSigning || externalLock.isSubmittingLock;
+  const isUnsafeToClose = (isGettingAddress || isSendingTransaction) && !cancelled || externalLock.isSigning || externalLock.isSubmittingLock || cardUnsafeToClose;
   useEffect(() => {
     onCloseBlockedChange?.(isUnsafeToClose);
   }, [isUnsafeToClose, onCloseBlockedChange]);
@@ -3724,6 +4146,28 @@ function DepositModalContent({
       return;
     }
     if (args.source === "credit-card") {
+      if (cardFlow && cardFlowActive) {
+        setView("credit-card-widget");
+        return;
+      }
+      try {
+        setCardFlow(
+          createProductOnRampFlowSnapshot({
+            id: ++nextCardFlowId.current,
+            selection: cardOnRamp,
+            amount: args.amount,
+            allowance,
+            lockServiceAddress: serviceAddress,
+            moonpayApiKey: networkConfig.moonpayApiKey,
+            scope: cardOnRampScope
+          })
+        );
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : "Card purchase is unavailable");
+        return;
+      }
+      setCardFlowActive(false);
+      setCardUnsafeToClose(false);
       setView("credit-card-widget");
       return;
     }
@@ -3801,6 +4245,12 @@ function DepositModalContent({
     setCancelled(false);
     resetDeposit();
     if (view === "external-deposit") setView("deposit");
+    if (view === "credit-card-widget") {
+      setCardFlow(null);
+      setCardFlowActive(false);
+      setCardUnsafeToClose(false);
+      setView("deposit");
+    }
   };
   const handleExternalLockRetry = () => {
     externalLock.retryAfterCredit().catch((err) => {
@@ -3824,12 +4274,20 @@ function DepositModalContent({
     retryVerification().catch(() => {
     });
   };
-  const back = view === "external-deposit" ? { to: "deposit", label: "Deposit from External Wallet" } : view === "credit-card-widget" ? { to: "deposit", label: "Buy with credit card and deposit" } : view === "select-token" ? { to: "deposit", label: "Deposit" } : { to: "method", label: "Deposit Method" };
+  const back = view === "external-deposit" ? { to: "deposit", label: "Deposit from External Wallet" } : view === "credit-card-widget" ? { to: "deposit", label: "Buy with card and deposit" } : view === "select-token" ? { to: "deposit", label: "Deposit" } : { to: "method", label: "Deposit Method" };
   const goBack = () => {
     if (view === "external-deposit" && externalLock.session) {
       toast.error("Cancel the active deposit from the address screen before going back");
       return;
     }
+    if (view === "credit-card-widget" && (cardUnsafeToClose || cardFlowActive)) {
+      toast.error("Finish or recover the active card purchase before going back");
+      return;
+    }
+    if (view === "credit-card-widget") {
+      setCardFlow(null);
+      setCardUnsafeToClose(false);
+    }
     if (back.to === "method") {
       setAmount("");
       setSelectedTokenId("");
@@ -3915,8 +4373,8 @@ function DepositModalContent({
     ] }),
     activeView === "method" && /* @__PURE__ */ jsxs("div", { className: "bg-muted flex flex-col gap-6 rounded-[10px] p-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-foreground text-[28px] leading-8 font-medium", children: activeTab === "crypto" ? "Choose the deposit method" : "Buy with credit card and deposit" }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: activeTab === "crypto" ? "Choose the deposit method." : "Use credit card to buy crypto and deposit" })
+        /* @__PURE__ */ jsx("h2", { className: "text-foreground text-[28px] leading-8 font-medium", children: activeTab === "crypto" ? "Choose the deposit method" : "Buy with card and deposit" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: activeTab === "crypto" ? "Choose the deposit method." : "Buy crypto by card and deposit it into your account." })
       ] }),
       /* @__PURE__ */ jsx(MethodTabs, { activeTab, onTabChange: setActiveTab }),
       activeTab === "crypto" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
@@ -3945,8 +4403,8 @@ function DepositModalContent({
       ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsx(
         MethodOption,
         {
-          title: "Moonpay",
-          description: "on selected address",
+          title: "Buy with card",
+          description: "Purchase and deposit directly into your account.",
           onClick: () => {
             onSelectCreditCard?.();
             openDeposit("credit-card");
@@ -3954,21 +4412,29 @@ function DepositModalContent({
         }
       ) })
     ] }),
-    activeView === "deposit" && /* @__PURE__ */ jsx(MoonPayGate, { enabled: source === "credit-card", children: /* @__PURE__ */ jsx(
-      DepositView,
+    activeView === "deposit" && /* @__PURE__ */ jsx(
+      MoonPayGate,
       {
-        source,
-        selectedToken,
-        amount,
-        allowance,
-        externalMinimum,
-        onAmountChange: setAmount,
-        onSelectToken: () => setView("select-token"),
-        onConnectWallet,
-        onSubmit: handleSubmit,
-        isSubmitting: isPending || externalLock.isSigning || externalLock.isSubmittingLock
+        enabled: source === "credit-card" && cardOnRamp.provider === "moonpay" && !cardOnRamp.unavailableReason,
+        apiKey: networkConfig.moonpayApiKey,
+        children: /* @__PURE__ */ jsx(
+          DepositView,
+          {
+            source,
+            selectedToken,
+            onRamp: cardOnRamp,
+            amount,
+            allowance,
+            externalMinimum,
+            onAmountChange: setAmount,
+            onSelectToken: () => setView("select-token"),
+            onConnectWallet,
+            onSubmit: handleSubmit,
+            isSubmitting: isPending || externalLock.isSigning || externalLock.isSubmittingLock
+          }
+        )
       }
-    ) }),
+    ),
     activeView === "select-token" && /* @__PURE__ */ jsx(
       TokenSelectorView,
       {
@@ -3990,20 +4456,30 @@ function DepositModalContent({
         lock: externalLock.session ? externalLock : void 0
       }
     ),
-    activeView === "credit-card-widget" && /* @__PURE__ */ jsx(MoonPayGate, { enabled: true, children: /* @__PURE__ */ jsx(
-      CreditCardWidgetView,
+    activeView === "credit-card-widget" && mountedCardFlow && /* @__PURE__ */ jsx(
+      MoonPayGate,
       {
-        token: selectedToken,
-        amount,
-        allowance,
-        onCredited: allowance ? void 0 : finishCardPurchase,
-        onLockSubmitted: finishCardPurchase,
-        onLockFailed: (err) => {
-          setLockFailure(err);
-          onLockFailed?.(err);
-        }
+        enabled: mountedCardFlow.selection.provider === "moonpay",
+        apiKey: mountedCardFlow.moonpayApiKey,
+        children: /* @__PURE__ */ jsx(
+          CreditCardWidgetView,
+          {
+            token: mountedCardFlow.selection.token,
+            onRamp: mountedCardFlow.selection,
+            amount: mountedCardFlow.amount,
+            allowance: mountedCardFlow.allowance,
+            lockServiceAddress: mountedCardFlow.lockServiceAddress,
+            onUnsafeToCloseChange: setCardUnsafeToClose,
+            onActiveFlowChange: setCardFlowActive,
+            onCredited: cardOutcomeCallbacks?.onCredited,
+            onLockSubmitted: cardOutcomeCallbacks?.onLockSubmitted,
+            onLockFailed: cardOutcomeCallbacks?.onLockFailed,
+            onLeave: leaveCardPurchase
+          },
+          mountedCardFlow.id
+        )
       }
-    ) })
+    )
   ] });
 }
 function DepositModal({ open, onClose, ...handlers }) {