@oasisprotocol/privana-sdk 0.5.7 → 0.5.9

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-4VOTSHNC.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-4VOTSHNC.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, Skeleton, createProductOnRampFlowSnapshot, shortenAddress, formatCountdown, getExplorerAddressUrl, getExplorerLabel, formatTimeRemaining, getSharedBrowserStorageItem, removeSharedBrowserStorageItem, setSharedBrowserStorageItem, matchesOnRampTransaction, useTransakOnRamp, getTransakMinimumTargetBaseUnits, matchesFrozenOnRampToken, Button, canRetryOnRampVerification, FiatOnRampForm } from './chunk-RDYNQUMV.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-RDYNQUMV.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';
@@ -788,6 +788,7 @@ function useWithdraw(options = {}) {
       const isStale = () => generation !== generationRef.current;
       try {
         if (!address || !walletClient) throw new Error("Wallet not connected");
+        setCurrentStep("preparing");
         const pendingResponse = await client.getPendingWithdrawals(address);
         if (isStale()) return void 0;
         const knownIndices = new Set(pendingResponse.pending_withdrawals.map((w) => w.index));
@@ -2455,15 +2456,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
+}) {
+  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 moonpayCurrencyCode = token.moonpayCurrencyCode;
   const containerRef = useRef(null);
   const [widgetTheme, setWidgetTheme] = useState();
   useEffect(() => {
@@ -2471,26 +2813,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."
     ] })
   ] });
@@ -2799,7 +3147,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(
@@ -2918,7 +3266,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: [
@@ -2978,6 +3326,7 @@ function AllowancePolicySection({
 function DepositView({
   source,
   selectedToken,
+  onRamp,
   amount,
   allowance,
   externalMinimum,
@@ -2996,13 +3345,15 @@ 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({
+  const { data: nativeBalanceData, isLoading: isNativeBalanceLoading } = useBalance$1({
     address,
     chainId: targetChain?.id,
     query: { enabled: isConnectedSource && !!address && !!selectedToken && isNative }
   });
-  const { data: erc20Balance } = useReadContract({
+  const { data: erc20Balance, isLoading: isErc20BalanceLoading } = useReadContract({
     address: selectedToken?.contract,
     abi: erc20Abi,
     functionName: "balanceOf",
@@ -3011,6 +3362,7 @@ function DepositView({
     query: { enabled: isConnectedSource && !!address && !!selectedToken && !isNative }
   });
   const walletBalance = isNative ? nativeBalanceData?.value : erc20Balance;
+  const isWalletBalanceLoading = isNative ? isNativeBalanceLoading : isErc20BalanceLoading;
   const formattedWalletBalance = walletBalance != null && selectedToken ? formatTokenAmount(walletBalance.toString(), selectedToken.decimals) : "0.00";
   const {
     minBuyAmount: moonpayMinBuy,
@@ -3019,15 +3371,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;
@@ -3037,13 +3389,13 @@ function DepositView({
   const needsConnect = (isConnectedSource || externalNeedsWallet) && !isConnected;
   const canDeposit = hasValidAmount && !!selectedToken && !tooManyDecimals && !exceedsBalance && !belowMoonpayMin && !moonpayLimitsUnready && !creditCardUnavailable && !externalTokenUnavailable && !externalMinimumLoading && !externalMinimumUnavailable && !belowExternalMinimum && !needsConnect;
   const handleMax = () => {
-    const max = formattedWalletBalance.replace(/\s/g, "");
-    if (parseFloat(max) > 0) onAmountChange(max);
+    if (selectedToken && walletBalance != null && walletBalance > 0n)
+      onAmountChange(formatUnits(walletBalance, selectedToken.decimals));
   };
   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 ",
@@ -3058,7 +3410,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: [
@@ -3071,7 +3423,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, {}) })
           ]
         }
       )
@@ -3079,11 +3431,10 @@ function DepositView({
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("label", { className: "text-muted-foreground text-sm", children: "Amount" }),
-        isConnectedSource && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [
-          "Available ",
-          formattedWalletBalance,
+        isConnectedSource && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-sm", children: [
+          "Available",
           " ",
-          selectedToken?.symbol
+          isWalletBalanceLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }) : `${formattedWalletBalance} ${selectedToken?.symbol ?? ""}`
         ] })
       ] }),
       /* @__PURE__ */ jsxs(
@@ -3114,7 +3465,8 @@ function DepositView({
               {
                 type: "button",
                 onClick: handleMax,
-                className: "bg-secondary text-foreground hover:bg-secondary/80 cursor-pointer rounded px-3 py-2.5 text-xs font-semibold transition-colors",
+                disabled: isWalletBalanceLoading,
+                className: "bg-secondary text-foreground hover:bg-secondary/80 cursor-pointer rounded px-3 py-2.5 text-xs font-semibold transition-colors disabled:cursor-default disabled:opacity-50",
                 children: "MAX"
               }
             ) : isCreditCard ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: selectedToken?.symbol ?? "USD" }) : selectedToken && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: selectedToken.symbol })
@@ -3141,12 +3493,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."
@@ -3173,7 +3522,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"
       }
     )
   ] });
@@ -3485,9 +3834,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 });
 }
@@ -3574,15 +3925,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")
   });
@@ -3596,6 +3984,9 @@ function DepositModalContent({
       setView("method");
       setAmount("");
       setSelectedTokenId("");
+      setCardFlow(null);
+      setCardFlowActive(false);
+      setCardUnsafeToClose(false);
     }
   }, [address, hostedAuthConfig]);
   const openDeposit = (next) => {
@@ -3618,9 +4009,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,
@@ -3690,7 +4105,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]);
@@ -3733,6 +4148,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;
     }
@@ -3810,6 +4247,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) => {
@@ -3833,12 +4276,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("");
@@ -3924,8 +4375,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: [
@@ -3954,8 +4405,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");
@@ -3963,26 +4414,35 @@ 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,
       {
         selectedTokenId: selectedToken?.id,
         onSelect: (id) => {
+          if (id !== selectedTokenId) setAmount("");
           setSelectedTokenId(id);
           setView("deposit");
         }
@@ -3999,20 +4459,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 }) {
@@ -4114,6 +4584,15 @@ function WithdrawView({
     return "pending";
   };
   const withdrawSteps = [
+    {
+      label: "Preparing withdrawal",
+      status: getStepStatus("preparing", [
+        "switching-chain",
+        "signing",
+        "submitting",
+        "processing"
+      ])
+    },
     {
       label: "Switching to signing chain",
       status: getStepStatus("switching-chain", ["signing", "submitting", "processing"])
@@ -4136,8 +4615,8 @@ function WithdrawView({
   const canWithdraw = isConnected && hasValidAmount && !!selectedToken && !tooManyDecimals && !exceedsBalance;
   const handleMax = () => {
     if (!selectedToken) return;
-    const max = formattedBalance.replace(/\s/g, "");
-    if (parseFloat(max) > 0) onAmountChange(max);
+    const wei = BigInt(balanceWei);
+    if (wei > 0n) onAmountChange(formatUnits(wei, selectedToken.decimals));
   };
   const handleWithdraw = async () => {
     if (!selectedToken || !canWithdraw) return;
@@ -4180,7 +4659,7 @@ function WithdrawView({
     ) });
   }
   if (isPending && !cancelled) {
-    const canCancel = currentStep === "idle" || currentStep === "switching-chain" || currentStep === "signing";
+    const canCancel = currentStep === "idle" || currentStep === "preparing" || currentStep === "switching-chain" || currentStep === "signing";
     return /* @__PURE__ */ jsx("div", { className: "bg-muted flex flex-col gap-6 rounded-[10px] p-5", children: /* @__PURE__ */ jsx(
       TransactionProgressView,
       {
@@ -4219,11 +4698,10 @@ function WithdrawView({
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("label", { className: "text-muted-foreground text-sm", children: "Amount" }),
-        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [
-          "Available ",
-          formattedBalance,
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-sm", children: [
+          "Available",
           " ",
-          selectedToken?.symbol
+          isBalanceLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }) : `${formattedBalance} ${selectedToken?.symbol ?? ""}`
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "border-border bg-input flex items-center gap-2 rounded-[10px] border py-1 pr-1 pl-3", children: [
@@ -4246,7 +4724,8 @@ function WithdrawView({
           {
             type: "button",
             onClick: handleMax,
-            className: "bg-secondary text-foreground hover:bg-secondary/80 cursor-pointer rounded px-3 py-2.5 text-xs font-semibold transition-colors",
+            disabled: isBalanceLoading,
+            className: "bg-secondary text-foreground hover:bg-secondary/80 cursor-pointer rounded px-3 py-2.5 text-xs font-semibold transition-colors disabled:cursor-default disabled:opacity-50",
             children: "MAX"
           }
         )
@@ -4349,6 +4828,7 @@ function WithdrawModalContent({
       {
         selectedTokenId: selectedToken?.id,
         onSelect: (id) => {
+          if (id !== selectedTokenId) setAmount("");
           setSelectedTokenId(id);
           setView("form");
         }