@unifold/ui-react 0.1.51 → 0.1.53

package/dist/index.d.mts

@@ -93,7 +93,8 @@ interface EthereumProvider {
         params?: unknown[];
     }): Promise<unknown>;
     on(event: string, callback: (...args: unknown[]) => void): void;
-    removeListener(event: string, callback: (...args: unknown[]) => void): void;
+    off?(event: string, callback: (...args: unknown[]) => void): void;
+    removeListener?(event: string, callback: (...args: unknown[]) => void): void;
 }
 
 /** Quick amount chips on the browser wallet "Enter amount" step */
@@ -126,7 +127,8 @@ interface EvmWalletProvider {
         params?: unknown[];
     }): Promise<unknown>;
     on(event: string, callback: (...args: unknown[]) => void): void;
-    removeListener(event: string, callback: (...args: unknown[]) => void): void;
+    off?(event: string, callback: (...args: unknown[]) => void): void;
+    removeListener?(event: string, callback: (...args: unknown[]) => void): void;
 }
 
 type DepositModalInitialScreen = "main" | "transfer" | "card" | "tracker";
@@ -273,8 +275,10 @@ interface TransferCryptoSingleInputProps {
         sourceTokenSymbol: string;
         sourceAmountUsd: string | null;
     } | null;
+    /** Product context sent to the API — "deposit" (default) or "payment". */
+    productType?: "deposit" | "payment";
 }
-declare function TransferCryptoSingleInput({ userId, publishableKey, clientSecret, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, depositConfirmationMode, onExecutionsChange, onDepositSuccess, onDepositError, wallets: externalWallets, onSourceTokenChange, checkoutQuote, }: TransferCryptoSingleInputProps): react_jsx_runtime.JSX.Element;
+declare function TransferCryptoSingleInput({ userId, publishableKey, clientSecret, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, depositConfirmationMode, onExecutionsChange, onDepositSuccess, onDepositError, wallets: externalWallets, onSourceTokenChange, checkoutQuote, productType, }: TransferCryptoSingleInputProps): react_jsx_runtime.JSX.Element;
 
 interface TransferCryptoDoubleInputProps {
     userId: string;
@@ -838,6 +842,8 @@ interface UseDepositQuoteParams {
     destinationChainType: string;
     destinationChainId: string;
     destinationTokenAddress: string;
+    /** When true, inflates source amount by expected slippage. Typically set by checkout flows. */
+    adjustForSlippage?: boolean;
     enabled?: boolean;
 }
 /**
@@ -884,6 +890,7 @@ interface UseSupportedDepositTokensOptions {
     destination_token_address?: string;
     destination_chain_id?: string;
     destination_chain_type?: string;
+    product_type?: "deposit" | "payment";
 }
 /**
  * Hook to fetch supported deposit tokens with caching and deduplication via react-query.

package/dist/index.d.ts

@@ -93,7 +93,8 @@ interface EthereumProvider {
         params?: unknown[];
     }): Promise<unknown>;
     on(event: string, callback: (...args: unknown[]) => void): void;
-    removeListener(event: string, callback: (...args: unknown[]) => void): void;
+    off?(event: string, callback: (...args: unknown[]) => void): void;
+    removeListener?(event: string, callback: (...args: unknown[]) => void): void;
 }
 
 /** Quick amount chips on the browser wallet "Enter amount" step */
@@ -126,7 +127,8 @@ interface EvmWalletProvider {
         params?: unknown[];
     }): Promise<unknown>;
     on(event: string, callback: (...args: unknown[]) => void): void;
-    removeListener(event: string, callback: (...args: unknown[]) => void): void;
+    off?(event: string, callback: (...args: unknown[]) => void): void;
+    removeListener?(event: string, callback: (...args: unknown[]) => void): void;
 }
 
 type DepositModalInitialScreen = "main" | "transfer" | "card" | "tracker";
@@ -273,8 +275,10 @@ interface TransferCryptoSingleInputProps {
         sourceTokenSymbol: string;
         sourceAmountUsd: string | null;
     } | null;
+    /** Product context sent to the API — "deposit" (default) or "payment". */
+    productType?: "deposit" | "payment";
 }
-declare function TransferCryptoSingleInput({ userId, publishableKey, clientSecret, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, depositConfirmationMode, onExecutionsChange, onDepositSuccess, onDepositError, wallets: externalWallets, onSourceTokenChange, checkoutQuote, }: TransferCryptoSingleInputProps): react_jsx_runtime.JSX.Element;
+declare function TransferCryptoSingleInput({ userId, publishableKey, clientSecret, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, depositConfirmationMode, onExecutionsChange, onDepositSuccess, onDepositError, wallets: externalWallets, onSourceTokenChange, checkoutQuote, productType, }: TransferCryptoSingleInputProps): react_jsx_runtime.JSX.Element;
 
 interface TransferCryptoDoubleInputProps {
     userId: string;
@@ -838,6 +842,8 @@ interface UseDepositQuoteParams {
     destinationChainType: string;
     destinationChainId: string;
     destinationTokenAddress: string;
+    /** When true, inflates source amount by expected slippage. Typically set by checkout flows. */
+    adjustForSlippage?: boolean;
     enabled?: boolean;
 }
 /**
@@ -884,6 +890,7 @@ interface UseSupportedDepositTokensOptions {
     destination_token_address?: string;
     destination_chain_id?: string;
     destination_chain_type?: string;
+    product_type?: "deposit" | "payment";
 }
 /**
  * Hook to fetch supported deposit tokens with caching and deduplication via react-query.

package/dist/index.js

@@ -2608,14 +2608,14 @@ function BuyWithCard({
     );
     if (matchingCurrency) {
       setCurrency(matchingCurrency.currency_code.toLowerCase());
-      if (!amount && !hasManualAmountEntry) {
+      if (!amount && !hasManualAmountEntry && matchingCurrency.default_amount != null) {
         setAmount(matchingCurrency.default_amount.toString());
       }
     } else if (!amount && !hasManualAmountEntry) {
       const usdCurrency = fiatCurrencies.find(
         (c) => c.currency_code.toLowerCase() === "usd"
       );
-      if (usdCurrency) {
+      if (usdCurrency?.default_amount != null) {
         setAmount(usdCurrency.default_amount.toString());
       }
     }
@@ -2633,7 +2633,7 @@ function BuyWithCard({
       const currentCurrency = fiatCurrencies.find(
         (c) => c.currency_code.toLowerCase() === currency.toLowerCase()
       );
-      if (currentCurrency) {
+      if (currentCurrency?.default_amount != null) {
         setAmount(currentCurrency.default_amount.toString());
       }
     }
@@ -6658,8 +6658,11 @@ function BrowserWalletButton({
         solanaProvider.off("accountChanged", handleAccountsChanged);
       }
       for (const provider of ethProviders) {
-        provider.removeListener("accountsChanged", handleEthAccountsChanged);
-        provider.removeListener("chainChanged", handleAccountsChanged);
+        const off = provider.off?.bind(provider) ?? provider.removeListener?.bind(provider);
+        if (off) {
+          off("accountsChanged", handleEthAccountsChanged);
+          off("chainChanged", handleAccountsChanged);
+        }
       }
     };
   }, [chainType, eip6963ProviderCount]);
@@ -6954,7 +6957,7 @@ function useProjectConfig({
 }
 
 // src/components/deposits/DepositModal.tsx
-var import_core23 = require("@unifold/core");
+var import_core24 = require("@unifold/core");
 
 // src/hooks/use-allowed-country.ts
 var import_react_query6 = require("@tanstack/react-query");
@@ -7083,11 +7086,16 @@ function useAddressValidation({
 var import_react_query8 = require("@tanstack/react-query");
 var import_core18 = require("@unifold/core");
 function useSupportedDepositTokens(publishableKey, options) {
-  const filteredOptions = options?.destination_token_address && options?.destination_chain_id && options?.destination_chain_type ? {
-    destination_token_address: options.destination_token_address,
-    destination_chain_id: options.destination_chain_id,
-    destination_chain_type: options.destination_chain_type
-  } : void 0;
+  const hasDestination = options?.destination_token_address && options?.destination_chain_id && options?.destination_chain_type;
+  const filteredOptions = {
+    ...hasDestination ? {
+      destination_token_address: options.destination_token_address,
+      destination_chain_id: options.destination_chain_id,
+      destination_chain_type: options.destination_chain_type
+    } : {},
+    ...options?.product_type ? { product_type: options.product_type } : {}
+  };
+  const hasFilteredOptions = Object.keys(filteredOptions).length > 0;
   return (0, import_react_query8.useQuery)({
     queryKey: [
       "unifold",
@@ -7095,9 +7103,13 @@ function useSupportedDepositTokens(publishableKey, options) {
       publishableKey,
       filteredOptions?.destination_token_address ?? null,
       filteredOptions?.destination_chain_id ?? null,
-      filteredOptions?.destination_chain_type ?? null
+      filteredOptions?.destination_chain_type ?? null,
+      filteredOptions?.product_type ?? null
     ],
-    queryFn: () => (0, import_core18.getSupportedDepositTokens)(publishableKey, filteredOptions),
+    queryFn: () => (0, import_core18.getSupportedDepositTokens)(
+      publishableKey,
+      hasFilteredOptions ? filteredOptions : void 0
+    ),
     staleTime: 1e3 * 60 * 5,
     // 5 minutes — token list rarely changes
     gcTime: 1e3 * 60 * 30,
@@ -8375,7 +8387,8 @@ function TransferCryptoSingleInput({
   onDepositError,
   wallets: externalWallets,
   onSourceTokenChange,
-  checkoutQuote
+  checkoutQuote,
+  productType
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
@@ -8388,7 +8401,8 @@ function TransferCryptoSingleInput({
   const { data: tokensResponse, isLoading: tokensLoading } = useSupportedDepositTokens(publishableKey, {
     destination_token_address: destinationTokenAddress,
     destination_chain_id: destinationChainId,
-    destination_chain_type: destinationChainType
+    destination_chain_type: destinationChainType,
+    product_type: productType
   });
   const supportedTokens = tokensResponse?.data ?? [];
   const { token, chain, setToken, setChain, initialSelectionDone } = useDefaultSourceToken({
@@ -9441,7 +9455,59 @@ function TransferCryptoDoubleInput({
 
 // src/components/deposits/BrowserWalletModal.tsx
 var React26 = __toESM(require("react"));
+var import_core23 = require("@unifold/core");
+
+// src/hooks/use-deposit-quote.ts
+var import_react_query9 = require("@tanstack/react-query");
 var import_core22 = require("@unifold/core");
+function useDepositQuote(params) {
+  const {
+    publishableKey,
+    sourceChainType,
+    sourceChainId,
+    sourceTokenAddress,
+    destinationAmount,
+    destinationChainType,
+    destinationChainId,
+    destinationTokenAddress,
+    adjustForSlippage,
+    enabled = true
+  } = params;
+  const request = {
+    source_chain_type: sourceChainType,
+    source_chain_id: sourceChainId,
+    source_token_address: sourceTokenAddress,
+    destination_amount: destinationAmount,
+    destination_chain_type: destinationChainType,
+    destination_chain_id: destinationChainId,
+    destination_token_address: destinationTokenAddress,
+    ...adjustForSlippage ? { adjust_for_slippage: true } : {}
+  };
+  return (0, import_react_query9.useQuery)({
+    queryKey: [
+      "unifold",
+      "depositQuote",
+      sourceChainType,
+      sourceChainId,
+      sourceTokenAddress,
+      destinationAmount,
+      destinationChainType,
+      destinationChainId,
+      destinationTokenAddress,
+      adjustForSlippage,
+      publishableKey
+    ],
+    queryFn: () => (0, import_core22.getDepositQuote)(request, publishableKey),
+    enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
+    staleTime: 3e4,
+    gcTime: 5 * 6e4,
+    refetchInterval: 3e4,
+    refetchIntervalInBackground: false,
+    refetchOnWindowFocus: true,
+    retry: 2,
+    retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
+  });
+}
 
 // src/components/deposits/browser-wallets/types.ts
 var BROWSER_WALLET_STEP_MIN_HEIGHT_CLASS = "uf-min-h-[460px]";
@@ -9931,7 +9997,7 @@ function EnterAmountView({
                 }
               )
             ] }) }),
-            tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+            tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && tokenChainDetails.minimum_deposit_amount_usd > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
               "div",
               {
                 className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
@@ -10545,7 +10611,11 @@ function BrowserWalletModal({
   checkoutReceivedUsd,
   onNewDeposit,
   onDone,
-  paymentIntentStatus
+  paymentIntentStatus,
+  checkoutQuote,
+  checkoutDestination,
+  checkoutRemainingBaseUnits,
+  productType
 }) {
   const { colors: colors2, fonts, components } = useTheme();
   const [step, setStep] = React26.useState("select-token");
@@ -10567,7 +10637,49 @@ function BrowserWalletModal({
   const themeClass = theme === "dark" ? "uf-dark" : "";
   const chainType = depositWallet.chain_type;
   const recipientAddress = depositWallet.address;
+  const isCheckoutMode = !!checkoutAmountUsd;
   const supportedChainType = chainType === "algorand" || chainType === "xrpl" ? "ethereum" : chainType;
+  const selectedToken = selectedBalance ? getTokenFromBalance(selectedBalance) : null;
+  const effectiveDestinationAmount = React26.useMemo(() => {
+    if (!checkoutRemainingBaseUnits || checkoutRemainingBaseUnits === "0") return "0";
+    if (!checkoutAmountUsd) return checkoutRemainingBaseUnits;
+    const remaining = BigInt(checkoutRemainingBaseUnits);
+    const minUsd = Math.max(tokenChainDetails?.minimum_deposit_amount_usd ?? 0, 3);
+    const totalUsd = parseFloat(checkoutAmountUsd);
+    if (totalUsd <= 0) return remaining > 0n ? remaining.toString() : "0";
+    const receivedUsd = parseFloat(checkoutReceivedUsd ?? "0");
+    const remainingUsd = totalUsd - receivedUsd;
+    if (remainingUsd <= 0) return "0";
+    const baseUnitsPerUsd = Number(remaining) / remainingUsd;
+    const minBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
+    const effective = remaining > minBaseUnits ? remaining : minBaseUnits;
+    return effective > 0n ? effective.toString() : "0";
+  }, [checkoutRemainingBaseUnits, checkoutAmountUsd, checkoutReceivedUsd, tokenChainDetails]);
+  const { data: walletCheckoutQuote } = useDepositQuote({
+    publishableKey,
+    sourceChainType: selectedToken?.chain_type ?? "",
+    sourceChainId: selectedToken?.chain_id ?? "",
+    sourceTokenAddress: selectedToken?.token_address ?? "",
+    destinationAmount: effectiveDestinationAmount,
+    destinationChainType: checkoutDestination?.chainType ?? "",
+    destinationChainId: checkoutDestination?.chainId ?? "",
+    destinationTokenAddress: checkoutDestination?.tokenAddress ?? "",
+    adjustForSlippage: true,
+    enabled: open && isCheckoutMode && !!selectedToken && !!checkoutDestination && effectiveDestinationAmount !== "0"
+  });
+  const activeCheckoutQuote = React26.useMemo(() => {
+    if (!isCheckoutMode) return null;
+    if (walletCheckoutQuote) {
+      return {
+        sourceAmount: walletCheckoutQuote.source_amount,
+        sourceTokenDecimals: walletCheckoutQuote.source_token_decimals,
+        sourceTokenSymbol: walletCheckoutQuote.source_token_symbol,
+        sourceAmountUsd: walletCheckoutQuote.source_amount_usd,
+        slippageBufferPercent: walletCheckoutQuote.slippage_buffer_percent ?? null
+      };
+    }
+    return checkoutQuote ?? null;
+  }, [isCheckoutMode, walletCheckoutQuote, checkoutQuote]);
   const { executions: depositExecutions, isPolling, handleIveDeposited } = useDepositPolling({
     userId,
     publishableKey,
@@ -10619,9 +10731,10 @@ function BrowserWalletModal({
         const options = {
           destination_token_address: depositWallet.destination_token_address,
           destination_chain_id: depositWallet.destination_chain_id,
-          destination_chain_type: depositWallet.destination_chain_type
+          destination_chain_type: depositWallet.destination_chain_type,
+          ...productType ? { product_type: productType } : {}
         };
-        const response = await (0, import_core22.getSupportedDepositTokens)(
+        const response = await (0, import_core23.getSupportedDepositTokens)(
           publishableKey,
           options
         );
@@ -10658,7 +10771,7 @@ function BrowserWalletModal({
     let cancelled = false;
     setIsLoading(true);
     setError(null);
-    (0, import_core22.getAddressBalances)(walletInfo.address, supportedChainType, publishableKey).then((response) => {
+    (0, import_core23.getAddressBalances)(walletInfo.address, supportedChainType, publishableKey).then((response) => {
       if (cancelled) return;
       const nonZeroBalances = response.balances.filter(
         (b) => b.amount !== "0"
@@ -10982,7 +11095,7 @@ function BrowserWalletModal({
       amountInSmallestUnit = decimalToSmallestUnit(amountStr, token.decimals);
     }
     try {
-      const buildResponse = await (0, import_core22.buildSolanaTransaction)(
+      const buildResponse = await (0, import_core23.buildSolanaTransaction)(
         {
           chain_id: "mainnet",
           token_address: token.token_address === "" ? "native" : token.token_address,
@@ -11009,7 +11122,7 @@ function BrowserWalletModal({
         binaryStr += String.fromCharCode(serialized[i]);
       }
       const signedTransactionBase64 = btoa(binaryStr);
-      const sendResponse = await (0, import_core22.sendSolanaTransaction)(
+      const sendResponse = await (0, import_core23.sendSolanaTransaction)(
         {
           chain_id: "mainnet",
           signed_transaction: signedTransactionBase64
@@ -11021,7 +11134,6 @@ function BrowserWalletModal({
       throw error2;
     }
   };
-  const selectedToken = selectedBalance ? getTokenFromBalance(selectedBalance) : null;
   const usdToTokenRate = React26.useMemo(() => {
     if (!selectedBalance || !selectedBalance.amount_usd || !selectedToken)
       return 0;
@@ -11031,15 +11143,24 @@ function BrowserWalletModal({
     return balanceAmount / balanceUsd;
   }, [selectedBalance, selectedToken]);
   const tokenAmount = React26.useMemo(() => {
+    if (isCheckoutMode && activeCheckoutQuote && selectedToken) {
+      return Number(activeCheckoutQuote.sourceAmount) / 10 ** activeCheckoutQuote.sourceTokenDecimals;
+    }
     const usdNum = parseFloat(amountUsd) || 0;
     if (usdNum === 0 || usdToTokenRate === 0) return 0;
     return usdNum * usdToTokenRate;
-  }, [amountUsd, usdToTokenRate]);
+  }, [amountUsd, usdToTokenRate, isCheckoutMode, activeCheckoutQuote, selectedToken]);
+  React26.useEffect(() => {
+    if (isCheckoutMode && activeCheckoutQuote?.sourceAmountUsd && step === "input-amount") {
+      const quoteUsd = activeCheckoutQuote.sourceAmountUsd;
+      setAmountUsd(quoteUsd);
+    }
+  }, [isCheckoutMode, activeCheckoutQuote, step]);
   const maxTokenAmount = selectedBalance && selectedToken ? Number(selectedBalance.amount) / 10 ** selectedToken.decimals : 0;
   const maxUsdAmount = selectedBalance?.amount_usd ? parseFloat(selectedBalance.amount_usd) : 0;
   const inputUsdNum = parseFloat(amountUsd) || 0;
   const minDepositUsd = tokenChainDetails?.minimum_deposit_amount_usd || 0;
-  const isValidAmount = inputUsdNum > 0 && inputUsdNum <= maxUsdAmount && inputUsdNum >= minDepositUsd;
+  const isValidAmount = isCheckoutMode && activeCheckoutQuote ? tokenAmount > 0 && tokenAmount <= maxTokenAmount : inputUsdNum > 0 && inputUsdNum <= maxUsdAmount && inputUsdNum >= minDepositUsd;
   const formattedTokenAmount = React26.useMemo(() => {
     if (tokenAmount === 0 || !selectedToken) return null;
     return `${tokenAmount.toFixed(6)} ${selectedToken.symbol}`.replace(
@@ -11954,7 +12075,7 @@ function DepositModal({
     if (view !== "tracker" || !userId) return;
     const fetchExecutions = async () => {
       try {
-        const response = await (0, import_core23.queryExecutions)(userId, publishableKey, import_core23.ActionType.Deposit);
+        const response = await (0, import_core24.queryExecutions)(userId, publishableKey, import_core24.ActionType.Deposit);
         const sorted = [...response.data].sort((a, b) => {
           const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
           const timeB = b.created_at ? new Date(b.created_at).getTime() : 0;
@@ -12480,8 +12601,8 @@ var import_react19 = require("react");
 var import_lucide_react24 = require("lucide-react");
 
 // src/hooks/use-payment-intent.ts
-var import_react_query9 = require("@tanstack/react-query");
-var import_core24 = require("@unifold/core");
+var import_react_query10 = require("@tanstack/react-query");
+var import_core25 = require("@unifold/core");
 var TERMINAL_STATUSES = /* @__PURE__ */ new Set([
   "succeeded",
   "expired",
@@ -12495,9 +12616,9 @@ function usePaymentIntent(params) {
     enabled = true,
     pollingInterval = 3e3
   } = params;
-  return (0, import_react_query9.useQuery)({
+  return (0, import_react_query10.useQuery)({
     queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
-    queryFn: () => (0, import_core24.retrievePaymentIntent)(clientSecret, publishableKey),
+    queryFn: () => (0, import_core25.retrievePaymentIntent)(clientSecret, publishableKey),
     enabled: enabled && !!clientSecret && !!publishableKey,
     staleTime: 0,
     refetchInterval: (query) => {
@@ -12512,53 +12633,6 @@ function usePaymentIntent(params) {
   });
 }
 
-// src/hooks/use-deposit-quote.ts
-var import_react_query10 = require("@tanstack/react-query");
-var import_core25 = require("@unifold/core");
-function useDepositQuote(params) {
-  const {
-    publishableKey,
-    sourceChainType,
-    sourceChainId,
-    sourceTokenAddress,
-    destinationAmount,
-    destinationChainType,
-    destinationChainId,
-    destinationTokenAddress,
-    enabled = true
-  } = params;
-  const request = {
-    source_chain_type: sourceChainType,
-    source_chain_id: sourceChainId,
-    source_token_address: sourceTokenAddress,
-    destination_amount: destinationAmount,
-    destination_chain_type: destinationChainType,
-    destination_chain_id: destinationChainId,
-    destination_token_address: destinationTokenAddress
-  };
-  return (0, import_react_query10.useQuery)({
-    queryKey: [
-      "unifold",
-      "depositQuote",
-      sourceChainType,
-      sourceChainId,
-      sourceTokenAddress,
-      destinationAmount,
-      destinationChainType,
-      destinationChainId,
-      destinationTokenAddress,
-      publishableKey
-    ],
-    queryFn: () => (0, import_core25.getDepositQuote)(request, publishableKey),
-    enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
-    staleTime: 6e4,
-    gcTime: 5 * 6e4,
-    refetchOnWindowFocus: false,
-    retry: 2,
-    retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
-  });
-}
-
 // src/components/checkout/CheckoutModal.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function mapDepositAddressesToWallets(depositAddresses, pi) {
@@ -12710,6 +12784,7 @@ function CheckoutModal({
     destinationChainType: paymentIntent?.destination_chain_type ?? "",
     destinationChainId: paymentIntent?.destination_chain_id ?? "",
     destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
+    adjustForSlippage: true,
     enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
   });
   const handleBrowserWalletClick = (0, import_react19.useCallback)(
@@ -13101,6 +13176,7 @@ function CheckoutModal({
                   depositConfirmationMode: "auto_ui",
                   wallets,
                   onSourceTokenChange: setSelectedSource,
+                  productType: "payment",
                   checkoutQuote: sourceQuote ? {
                     sourceAmount: sourceQuote.source_amount,
                     sourceTokenDecimals: sourceQuote.source_token_decimals,
@@ -13140,6 +13216,16 @@ function CheckoutModal({
         prefillAmountUsd: remainingAmountUsd,
         checkoutAmountUsd: paymentIntent?.amount_usd,
         checkoutReceivedUsd: paymentIntent?.amount_received_usd,
+        checkoutDestination: paymentIntent ? {
+          chainType: paymentIntent.destination_chain_type,
+          chainId: paymentIntent.destination_chain_id,
+          tokenAddress: paymentIntent.destination_token_address
+        } : void 0,
+        productType: "payment",
+        checkoutRemainingBaseUnits: paymentIntent ? (() => {
+          const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
+          return remaining > 0n ? remaining.toString() : "0";
+        })() : void 0,
         onSuccess: (txHash) => {
           onCheckoutSuccess?.({
             paymentIntentId: paymentIntent?.id || "",

package/dist/index.mjs

@@ -2531,14 +2531,14 @@ function BuyWithCard({
     );
     if (matchingCurrency) {
       setCurrency(matchingCurrency.currency_code.toLowerCase());
-      if (!amount && !hasManualAmountEntry) {
+      if (!amount && !hasManualAmountEntry && matchingCurrency.default_amount != null) {
         setAmount(matchingCurrency.default_amount.toString());
       }
     } else if (!amount && !hasManualAmountEntry) {
       const usdCurrency = fiatCurrencies.find(
         (c) => c.currency_code.toLowerCase() === "usd"
       );
-      if (usdCurrency) {
+      if (usdCurrency?.default_amount != null) {
         setAmount(usdCurrency.default_amount.toString());
       }
     }
@@ -2556,7 +2556,7 @@ function BuyWithCard({
       const currentCurrency = fiatCurrencies.find(
         (c) => c.currency_code.toLowerCase() === currency.toLowerCase()
       );
-      if (currentCurrency) {
+      if (currentCurrency?.default_amount != null) {
         setAmount(currentCurrency.default_amount.toString());
       }
     }
@@ -6586,8 +6586,11 @@ function BrowserWalletButton({
         solanaProvider.off("accountChanged", handleAccountsChanged);
       }
       for (const provider of ethProviders) {
-        provider.removeListener("accountsChanged", handleEthAccountsChanged);
-        provider.removeListener("chainChanged", handleAccountsChanged);
+        const off = provider.off?.bind(provider) ?? provider.removeListener?.bind(provider);
+        if (off) {
+          off("accountsChanged", handleEthAccountsChanged);
+          off("chainChanged", handleAccountsChanged);
+        }
       }
     };
   }, [chainType, eip6963ProviderCount]);
@@ -7023,11 +7026,16 @@ import {
   getSupportedDepositTokens
 } from "@unifold/core";
 function useSupportedDepositTokens(publishableKey, options) {
-  const filteredOptions = options?.destination_token_address && options?.destination_chain_id && options?.destination_chain_type ? {
-    destination_token_address: options.destination_token_address,
-    destination_chain_id: options.destination_chain_id,
-    destination_chain_type: options.destination_chain_type
-  } : void 0;
+  const hasDestination = options?.destination_token_address && options?.destination_chain_id && options?.destination_chain_type;
+  const filteredOptions = {
+    ...hasDestination ? {
+      destination_token_address: options.destination_token_address,
+      destination_chain_id: options.destination_chain_id,
+      destination_chain_type: options.destination_chain_type
+    } : {},
+    ...options?.product_type ? { product_type: options.product_type } : {}
+  };
+  const hasFilteredOptions = Object.keys(filteredOptions).length > 0;
   return useQuery8({
     queryKey: [
       "unifold",
@@ -7035,9 +7043,13 @@ function useSupportedDepositTokens(publishableKey, options) {
       publishableKey,
       filteredOptions?.destination_token_address ?? null,
       filteredOptions?.destination_chain_id ?? null,
-      filteredOptions?.destination_chain_type ?? null
+      filteredOptions?.destination_chain_type ?? null,
+      filteredOptions?.product_type ?? null
     ],
-    queryFn: () => getSupportedDepositTokens(publishableKey, filteredOptions),
+    queryFn: () => getSupportedDepositTokens(
+      publishableKey,
+      hasFilteredOptions ? filteredOptions : void 0
+    ),
     staleTime: 1e3 * 60 * 5,
     // 5 minutes — token list rarely changes
     gcTime: 1e3 * 60 * 30,
@@ -8328,7 +8340,8 @@ function TransferCryptoSingleInput({
   onDepositError,
   wallets: externalWallets,
   onSourceTokenChange,
-  checkoutQuote
+  checkoutQuote,
+  productType
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
@@ -8341,7 +8354,8 @@ function TransferCryptoSingleInput({
   const { data: tokensResponse, isLoading: tokensLoading } = useSupportedDepositTokens(publishableKey, {
     destination_token_address: destinationTokenAddress,
     destination_chain_id: destinationChainId,
-    destination_chain_type: destinationChainType
+    destination_chain_type: destinationChainType,
+    product_type: productType
   });
   const supportedTokens = tokensResponse?.data ?? [];
   const { token, chain, setToken, setChain, initialSelectionDone } = useDefaultSourceToken({
@@ -9414,6 +9428,60 @@ import {
   sendSolanaTransaction as sendSolanaTransactionToBackend
 } from "@unifold/core";
 
+// src/hooks/use-deposit-quote.ts
+import { useQuery as useQuery9 } from "@tanstack/react-query";
+import {
+  getDepositQuote
+} from "@unifold/core";
+function useDepositQuote(params) {
+  const {
+    publishableKey,
+    sourceChainType,
+    sourceChainId,
+    sourceTokenAddress,
+    destinationAmount,
+    destinationChainType,
+    destinationChainId,
+    destinationTokenAddress,
+    adjustForSlippage,
+    enabled = true
+  } = params;
+  const request = {
+    source_chain_type: sourceChainType,
+    source_chain_id: sourceChainId,
+    source_token_address: sourceTokenAddress,
+    destination_amount: destinationAmount,
+    destination_chain_type: destinationChainType,
+    destination_chain_id: destinationChainId,
+    destination_token_address: destinationTokenAddress,
+    ...adjustForSlippage ? { adjust_for_slippage: true } : {}
+  };
+  return useQuery9({
+    queryKey: [
+      "unifold",
+      "depositQuote",
+      sourceChainType,
+      sourceChainId,
+      sourceTokenAddress,
+      destinationAmount,
+      destinationChainType,
+      destinationChainId,
+      destinationTokenAddress,
+      adjustForSlippage,
+      publishableKey
+    ],
+    queryFn: () => getDepositQuote(request, publishableKey),
+    enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
+    staleTime: 3e4,
+    gcTime: 5 * 6e4,
+    refetchInterval: 3e4,
+    refetchIntervalInBackground: false,
+    refetchOnWindowFocus: true,
+    retry: 2,
+    retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
+  });
+}
+
 // src/components/deposits/browser-wallets/types.ts
 var BROWSER_WALLET_STEP_MIN_HEIGHT_CLASS = "uf-min-h-[460px]";
 
@@ -9902,7 +9970,7 @@ function EnterAmountView({
                 }
               )
             ] }) }),
-            tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ jsxs39(
+            tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && tokenChainDetails.minimum_deposit_amount_usd > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ jsxs39(
               "div",
               {
                 className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
@@ -10516,7 +10584,11 @@ function BrowserWalletModal({
   checkoutReceivedUsd,
   onNewDeposit,
   onDone,
-  paymentIntentStatus
+  paymentIntentStatus,
+  checkoutQuote,
+  checkoutDestination,
+  checkoutRemainingBaseUnits,
+  productType
 }) {
   const { colors: colors2, fonts, components } = useTheme();
   const [step, setStep] = React26.useState("select-token");
@@ -10538,7 +10610,49 @@ function BrowserWalletModal({
   const themeClass = theme === "dark" ? "uf-dark" : "";
   const chainType = depositWallet.chain_type;
   const recipientAddress = depositWallet.address;
+  const isCheckoutMode = !!checkoutAmountUsd;
   const supportedChainType = chainType === "algorand" || chainType === "xrpl" ? "ethereum" : chainType;
+  const selectedToken = selectedBalance ? getTokenFromBalance(selectedBalance) : null;
+  const effectiveDestinationAmount = React26.useMemo(() => {
+    if (!checkoutRemainingBaseUnits || checkoutRemainingBaseUnits === "0") return "0";
+    if (!checkoutAmountUsd) return checkoutRemainingBaseUnits;
+    const remaining = BigInt(checkoutRemainingBaseUnits);
+    const minUsd = Math.max(tokenChainDetails?.minimum_deposit_amount_usd ?? 0, 3);
+    const totalUsd = parseFloat(checkoutAmountUsd);
+    if (totalUsd <= 0) return remaining > 0n ? remaining.toString() : "0";
+    const receivedUsd = parseFloat(checkoutReceivedUsd ?? "0");
+    const remainingUsd = totalUsd - receivedUsd;
+    if (remainingUsd <= 0) return "0";
+    const baseUnitsPerUsd = Number(remaining) / remainingUsd;
+    const minBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
+    const effective = remaining > minBaseUnits ? remaining : minBaseUnits;
+    return effective > 0n ? effective.toString() : "0";
+  }, [checkoutRemainingBaseUnits, checkoutAmountUsd, checkoutReceivedUsd, tokenChainDetails]);
+  const { data: walletCheckoutQuote } = useDepositQuote({
+    publishableKey,
+    sourceChainType: selectedToken?.chain_type ?? "",
+    sourceChainId: selectedToken?.chain_id ?? "",
+    sourceTokenAddress: selectedToken?.token_address ?? "",
+    destinationAmount: effectiveDestinationAmount,
+    destinationChainType: checkoutDestination?.chainType ?? "",
+    destinationChainId: checkoutDestination?.chainId ?? "",
+    destinationTokenAddress: checkoutDestination?.tokenAddress ?? "",
+    adjustForSlippage: true,
+    enabled: open && isCheckoutMode && !!selectedToken && !!checkoutDestination && effectiveDestinationAmount !== "0"
+  });
+  const activeCheckoutQuote = React26.useMemo(() => {
+    if (!isCheckoutMode) return null;
+    if (walletCheckoutQuote) {
+      return {
+        sourceAmount: walletCheckoutQuote.source_amount,
+        sourceTokenDecimals: walletCheckoutQuote.source_token_decimals,
+        sourceTokenSymbol: walletCheckoutQuote.source_token_symbol,
+        sourceAmountUsd: walletCheckoutQuote.source_amount_usd,
+        slippageBufferPercent: walletCheckoutQuote.slippage_buffer_percent ?? null
+      };
+    }
+    return checkoutQuote ?? null;
+  }, [isCheckoutMode, walletCheckoutQuote, checkoutQuote]);
   const { executions: depositExecutions, isPolling, handleIveDeposited } = useDepositPolling({
     userId,
     publishableKey,
@@ -10590,7 +10704,8 @@ function BrowserWalletModal({
         const options = {
           destination_token_address: depositWallet.destination_token_address,
           destination_chain_id: depositWallet.destination_chain_id,
-          destination_chain_type: depositWallet.destination_chain_type
+          destination_chain_type: depositWallet.destination_chain_type,
+          ...productType ? { product_type: productType } : {}
         };
         const response = await getSupportedDepositTokens2(
           publishableKey,
@@ -10992,7 +11107,6 @@ function BrowserWalletModal({
       throw error2;
     }
   };
-  const selectedToken = selectedBalance ? getTokenFromBalance(selectedBalance) : null;
   const usdToTokenRate = React26.useMemo(() => {
     if (!selectedBalance || !selectedBalance.amount_usd || !selectedToken)
       return 0;
@@ -11002,15 +11116,24 @@ function BrowserWalletModal({
     return balanceAmount / balanceUsd;
   }, [selectedBalance, selectedToken]);
   const tokenAmount = React26.useMemo(() => {
+    if (isCheckoutMode && activeCheckoutQuote && selectedToken) {
+      return Number(activeCheckoutQuote.sourceAmount) / 10 ** activeCheckoutQuote.sourceTokenDecimals;
+    }
     const usdNum = parseFloat(amountUsd) || 0;
     if (usdNum === 0 || usdToTokenRate === 0) return 0;
     return usdNum * usdToTokenRate;
-  }, [amountUsd, usdToTokenRate]);
+  }, [amountUsd, usdToTokenRate, isCheckoutMode, activeCheckoutQuote, selectedToken]);
+  React26.useEffect(() => {
+    if (isCheckoutMode && activeCheckoutQuote?.sourceAmountUsd && step === "input-amount") {
+      const quoteUsd = activeCheckoutQuote.sourceAmountUsd;
+      setAmountUsd(quoteUsd);
+    }
+  }, [isCheckoutMode, activeCheckoutQuote, step]);
   const maxTokenAmount = selectedBalance && selectedToken ? Number(selectedBalance.amount) / 10 ** selectedToken.decimals : 0;
   const maxUsdAmount = selectedBalance?.amount_usd ? parseFloat(selectedBalance.amount_usd) : 0;
   const inputUsdNum = parseFloat(amountUsd) || 0;
   const minDepositUsd = tokenChainDetails?.minimum_deposit_amount_usd || 0;
-  const isValidAmount = inputUsdNum > 0 && inputUsdNum <= maxUsdAmount && inputUsdNum >= minDepositUsd;
+  const isValidAmount = isCheckoutMode && activeCheckoutQuote ? tokenAmount > 0 && tokenAmount <= maxTokenAmount : inputUsdNum > 0 && inputUsdNum <= maxUsdAmount && inputUsdNum >= minDepositUsd;
   const formattedTokenAmount = React26.useMemo(() => {
     if (tokenAmount === 0 || !selectedToken) return null;
     return `${tokenAmount.toFixed(6)} ${selectedToken.symbol}`.replace(
@@ -12458,7 +12581,7 @@ import {
 import { AlertTriangle as AlertTriangle2, ChevronRight as ChevronRight12 } from "lucide-react";
 
 // src/hooks/use-payment-intent.ts
-import { useQuery as useQuery9 } from "@tanstack/react-query";
+import { useQuery as useQuery10 } from "@tanstack/react-query";
 import { retrievePaymentIntent } from "@unifold/core";
 var TERMINAL_STATUSES = /* @__PURE__ */ new Set([
   "succeeded",
@@ -12473,7 +12596,7 @@ function usePaymentIntent(params) {
     enabled = true,
     pollingInterval = 3e3
   } = params;
-  return useQuery9({
+  return useQuery10({
     queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
     queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
     enabled: enabled && !!clientSecret && !!publishableKey,
@@ -12490,55 +12613,6 @@ function usePaymentIntent(params) {
   });
 }
 
-// src/hooks/use-deposit-quote.ts
-import { useQuery as useQuery10 } from "@tanstack/react-query";
-import {
-  getDepositQuote
-} from "@unifold/core";
-function useDepositQuote(params) {
-  const {
-    publishableKey,
-    sourceChainType,
-    sourceChainId,
-    sourceTokenAddress,
-    destinationAmount,
-    destinationChainType,
-    destinationChainId,
-    destinationTokenAddress,
-    enabled = true
-  } = params;
-  const request = {
-    source_chain_type: sourceChainType,
-    source_chain_id: sourceChainId,
-    source_token_address: sourceTokenAddress,
-    destination_amount: destinationAmount,
-    destination_chain_type: destinationChainType,
-    destination_chain_id: destinationChainId,
-    destination_token_address: destinationTokenAddress
-  };
-  return useQuery10({
-    queryKey: [
-      "unifold",
-      "depositQuote",
-      sourceChainType,
-      sourceChainId,
-      sourceTokenAddress,
-      destinationAmount,
-      destinationChainType,
-      destinationChainId,
-      destinationTokenAddress,
-      publishableKey
-    ],
-    queryFn: () => getDepositQuote(request, publishableKey),
-    enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
-    staleTime: 6e4,
-    gcTime: 5 * 6e4,
-    refetchOnWindowFocus: false,
-    retry: 2,
-    retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
-  });
-}
-
 // src/components/checkout/CheckoutModal.tsx
 import { Fragment as Fragment10, jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
 function mapDepositAddressesToWallets(depositAddresses, pi) {
@@ -12690,6 +12764,7 @@ function CheckoutModal({
     destinationChainType: paymentIntent?.destination_chain_type ?? "",
     destinationChainId: paymentIntent?.destination_chain_id ?? "",
     destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
+    adjustForSlippage: true,
     enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
   });
   const handleBrowserWalletClick = useCallback5(
@@ -13081,6 +13156,7 @@ function CheckoutModal({
                   depositConfirmationMode: "auto_ui",
                   wallets,
                   onSourceTokenChange: setSelectedSource,
+                  productType: "payment",
                   checkoutQuote: sourceQuote ? {
                     sourceAmount: sourceQuote.source_amount,
                     sourceTokenDecimals: sourceQuote.source_token_decimals,
@@ -13120,6 +13196,16 @@ function CheckoutModal({
         prefillAmountUsd: remainingAmountUsd,
         checkoutAmountUsd: paymentIntent?.amount_usd,
         checkoutReceivedUsd: paymentIntent?.amount_received_usd,
+        checkoutDestination: paymentIntent ? {
+          chainType: paymentIntent.destination_chain_type,
+          chainId: paymentIntent.destination_chain_id,
+          tokenAddress: paymentIntent.destination_token_address
+        } : void 0,
+        productType: "payment",
+        checkoutRemainingBaseUnits: paymentIntent ? (() => {
+          const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
+          return remaining > 0n ? remaining.toString() : "0";
+        })() : void 0,
         onSuccess: (txHash) => {
           onCheckoutSuccess?.({
             paymentIntentId: paymentIntent?.id || "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifold/ui-react",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "description": "Unifold UI React - Deposit and onramp components for React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -34,7 +34,7 @@
     "lucide-react": "^0.454.0",
     "qr-code-styling": "^1.6.0-rc.1",
     "tailwind-merge": "^2.0.0",
-    "@unifold/core": "0.1.51"
+    "@unifold/core": "0.1.53"
   },
   "devDependencies": {
     "@solana/web3.js": "^1.87.0",