@unifold/connect-react 0.1.51 → 0.1.53

package/dist/index.js

@@ -6271,13 +6271,18 @@ async function getSupportedDepositTokens(publishableKey, options) {
   const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
   validatePublishableKey(pk);
   let url = `${API_BASE_URL}/v1/public/tokens/supported_deposit_tokens`;
+  const params = new URLSearchParams();
   if (options?.destination_token_address && options?.destination_chain_id && options?.destination_chain_type) {
-    const params = new URLSearchParams({
-      destination_token_address: options.destination_token_address,
-      destination_chain_id: options.destination_chain_id,
-      destination_chain_type: options.destination_chain_type
-    });
-    url = `${url}?${params.toString()}`;
+    params.set("destination_token_address", options.destination_token_address);
+    params.set("destination_chain_id", options.destination_chain_id);
+    params.set("destination_chain_type", options.destination_chain_type);
+  }
+  if (options?.product_type) {
+    params.set("product_type", options.product_type);
+  }
+  const qs = params.toString();
+  if (qs) {
+    url = `${url}?${qs}`;
   }
   const response = await fetch(url, {
     method: "GET",
@@ -11088,6 +11093,7 @@ var Separator = SelectSeparator;
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var React262 = __toESM(require("react"), 1);
+var import_react_query11 = require("@tanstack/react-query");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var import_jsx_runtime63 = require("react/jsx-runtime");
@@ -11099,7 +11105,6 @@ var React272 = __toESM(require("react"), 1);
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var import_react26 = require("react");
-var import_react_query11 = require("@tanstack/react-query");
 var import_react_query12 = require("@tanstack/react-query");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var import_react27 = require("react");
@@ -13516,14 +13521,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());
       }
     }
@@ -13541,7 +13546,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());
       }
     }
@@ -17468,8 +17473,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]);
@@ -17863,11 +17871,16 @@ function useAddressValidation({
   };
 }
 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_query10.useQuery)({
     queryKey: [
       "unifold",
@@ -17875,9 +17888,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,
@@ -19076,7 +19093,8 @@ function TransferCryptoSingleInput({
   onDepositError,
   wallets: externalWallets,
   onSourceTokenChange,
-  checkoutQuote
+  checkoutQuote,
+  productType
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
@@ -19089,7 +19107,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({
@@ -20124,6 +20143,54 @@ function TransferCryptoDoubleInput({
     }
   ) });
 }
+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_query11.useQuery)({
+    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)
+  });
+}
 var BROWSER_WALLET_STEP_MIN_HEIGHT_CLASS = "uf-min-h-[460px]";
 var WALLET_ICONS = {
   metamask: MetamaskIcon,
@@ -20599,7 +20666,7 @@ function EnterAmountView({
                 }
               )
             ] }) }),
-            tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime63.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_runtime63.jsxs)(
               "div",
               {
                 className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
@@ -21201,7 +21268,11 @@ function BrowserWalletModal({
   checkoutReceivedUsd,
   onNewDeposit,
   onDone,
-  paymentIntentStatus
+  paymentIntentStatus,
+  checkoutQuote,
+  checkoutDestination,
+  checkoutRemainingBaseUnits,
+  productType
 }) {
   const { colors: colors2, fonts, components } = useTheme();
   const [step, setStep] = React262.useState("select-token");
@@ -21223,7 +21294,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 = React262.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 = React262.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,
@@ -21275,7 +21388,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 getSupportedDepositTokens(
           publishableKey,
@@ -21677,7 +21791,6 @@ function BrowserWalletModal({
       throw error2;
     }
   };
-  const selectedToken = selectedBalance ? getTokenFromBalance(selectedBalance) : null;
   const usdToTokenRate = React262.useMemo(() => {
     if (!selectedBalance || !selectedBalance.amount_usd || !selectedToken)
       return 0;
@@ -21687,15 +21800,24 @@ function BrowserWalletModal({
     return balanceAmount / balanceUsd;
   }, [selectedBalance, selectedToken]);
   const tokenAmount = React262.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]);
+  React262.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 = React262.useMemo(() => {
     if (tokenAmount === 0 || !selectedToken) return null;
     return `${tokenAmount.toFixed(6)} ${selectedToken.symbol}`.replace(
@@ -23135,7 +23257,7 @@ function usePaymentIntent(params) {
     enabled = true,
     pollingInterval = 3e3
   } = params;
-  return (0, import_react_query11.useQuery)({
+  return (0, import_react_query12.useQuery)({
     queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
     queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
     enabled: enabled && !!clientSecret && !!publishableKey,
@@ -23151,49 +23273,6 @@ function usePaymentIntent(params) {
     retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
   });
 }
-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_query12.useQuery)({
-    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)
-  });
-}
 function mapDepositAddressesToWallets(depositAddresses, pi) {
   return depositAddresses.map((da, idx) => ({
     id: da.id,
@@ -23343,6 +23422,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_react26.useCallback)(
@@ -23734,6 +23814,7 @@ function CheckoutModal({
                   depositConfirmationMode: "auto_ui",
                   wallets,
                   onSourceTokenChange: setSelectedSource,
+                  productType: "payment",
                   checkoutQuote: sourceQuote ? {
                     sourceAmount: sourceQuote.source_amount,
                     sourceTokenDecimals: sourceQuote.source_token_decimals,
@@ -23773,6 +23854,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

@@ -6244,13 +6244,18 @@ async function getSupportedDepositTokens(publishableKey, options) {
   const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
   validatePublishableKey(pk);
   let url = `${API_BASE_URL}/v1/public/tokens/supported_deposit_tokens`;
+  const params = new URLSearchParams();
   if (options?.destination_token_address && options?.destination_chain_id && options?.destination_chain_type) {
-    const params = new URLSearchParams({
-      destination_token_address: options.destination_token_address,
-      destination_chain_id: options.destination_chain_id,
-      destination_chain_type: options.destination_chain_type
-    });
-    url = `${url}?${params.toString()}`;
+    params.set("destination_token_address", options.destination_token_address);
+    params.set("destination_chain_id", options.destination_chain_id);
+    params.set("destination_chain_type", options.destination_chain_type);
+  }
+  if (options?.product_type) {
+    params.set("product_type", options.product_type);
+  }
+  const qs = params.toString();
+  if (qs) {
+    url = `${url}?${qs}`;
   }
   const response = await fetch(url, {
     method: "GET",
@@ -11061,6 +11066,7 @@ var Separator = SelectSeparator;
 import { jsx as jsx422, jsxs as jsxs36 } from "react/jsx-runtime";
 import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
 import * as React262 from "react";
+import { useQuery as useQuery9 } from "@tanstack/react-query";
 import { jsx as jsx44 } from "react/jsx-runtime";
 import { jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
 import { Fragment as Fragment52, jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
@@ -11079,7 +11085,6 @@ import {
   useRef as useRef82,
   useMemo as useMemo102
 } from "react";
-import { useQuery as useQuery9 } from "@tanstack/react-query";
 import { useQuery as useQuery10 } from "@tanstack/react-query";
 import { Fragment as Fragment10, jsx as jsx522, jsxs as jsxs45 } from "react/jsx-runtime";
 import {
@@ -13502,14 +13507,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());
       }
     }
@@ -13527,7 +13532,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());
       }
     }
@@ -17454,8 +17459,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]);
@@ -17849,11 +17857,16 @@ function useAddressValidation({
   };
 }
 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",
@@ -17861,9 +17874,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,
@@ -19062,7 +19079,8 @@ function TransferCryptoSingleInput({
   onDepositError,
   wallets: externalWallets,
   onSourceTokenChange,
-  checkoutQuote
+  checkoutQuote,
+  productType
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
@@ -19075,7 +19093,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({
@@ -20110,6 +20129,54 @@ function TransferCryptoDoubleInput({
     }
   ) });
 }
+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)
+  });
+}
 var BROWSER_WALLET_STEP_MIN_HEIGHT_CLASS = "uf-min-h-[460px]";
 var WALLET_ICONS = {
   metamask: MetamaskIcon,
@@ -20585,7 +20652,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",
@@ -21187,7 +21254,11 @@ function BrowserWalletModal({
   checkoutReceivedUsd,
   onNewDeposit,
   onDone,
-  paymentIntentStatus
+  paymentIntentStatus,
+  checkoutQuote,
+  checkoutDestination,
+  checkoutRemainingBaseUnits,
+  productType
 }) {
   const { colors: colors2, fonts, components } = useTheme();
   const [step, setStep] = React262.useState("select-token");
@@ -21209,7 +21280,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 = React262.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 = React262.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,
@@ -21261,7 +21374,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 getSupportedDepositTokens(
           publishableKey,
@@ -21663,7 +21777,6 @@ function BrowserWalletModal({
       throw error2;
     }
   };
-  const selectedToken = selectedBalance ? getTokenFromBalance(selectedBalance) : null;
   const usdToTokenRate = React262.useMemo(() => {
     if (!selectedBalance || !selectedBalance.amount_usd || !selectedToken)
       return 0;
@@ -21673,15 +21786,24 @@ function BrowserWalletModal({
     return balanceAmount / balanceUsd;
   }, [selectedBalance, selectedToken]);
   const tokenAmount = React262.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]);
+  React262.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 = React262.useMemo(() => {
     if (tokenAmount === 0 || !selectedToken) return null;
     return `${tokenAmount.toFixed(6)} ${selectedToken.symbol}`.replace(
@@ -23121,7 +23243,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,
@@ -23137,49 +23259,6 @@ function usePaymentIntent(params) {
     retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
   });
 }
-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)
-  });
-}
 function mapDepositAddressesToWallets(depositAddresses, pi) {
   return depositAddresses.map((da, idx) => ({
     id: da.id,
@@ -23329,6 +23408,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 = useCallback52(
@@ -23720,6 +23800,7 @@ function CheckoutModal({
                   depositConfirmationMode: "auto_ui",
                   wallets,
                   onSourceTokenChange: setSelectedSource,
+                  productType: "payment",
                   checkoutQuote: sourceQuote ? {
                     sourceAmount: sourceQuote.source_amount,
                     sourceTokenDecimals: sourceQuote.source_token_decimals,
@@ -23759,6 +23840,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/connect-react",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "description": "Unifold Connect React - Complete React SDK with UI components for crypto deposits",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -26,9 +26,9 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.90.11",
-    "@unifold/core": "0.1.51",
-    "@unifold/ui-react": "0.1.51",
-    "@unifold/react-provider": "0.1.51"
+    "@unifold/core": "0.1.53",
+    "@unifold/ui-react": "0.1.53",
+    "@unifold/react-provider": "0.1.53"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",