@unifold/ui-web 0.1.51 → 0.1.53

package/dist/index.js

@@ -43245,13 +43245,18 @@ async function getSupportedDepositTokens(publishableKey, options2) {
   const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
   validatePublishableKey(pk);
   let url = `${API_BASE_URL}/v1/public/tokens/supported_deposit_tokens`;
+  const params = new URLSearchParams();
   if (options2?.destination_token_address && options2?.destination_chain_id && options2?.destination_chain_type) {
-    const params = new URLSearchParams({
-      destination_token_address: options2.destination_token_address,
-      destination_chain_id: options2.destination_chain_id,
-      destination_chain_type: options2.destination_chain_type
-    });
-    url = `${url}?${params.toString()}`;
+    params.set("destination_token_address", options2.destination_token_address);
+    params.set("destination_chain_id", options2.destination_chain_id);
+    params.set("destination_chain_type", options2.destination_chain_type);
+  }
+  if (options2?.product_type) {
+    params.set("product_type", options2.product_type);
+  }
+  const qs = params.toString();
+  if (qs) {
+    url = `${url}?${qs}`;
   }
   const response = await fetch(url, {
     method: "GET",
@@ -50156,14 +50161,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());
       }
     }
@@ -50181,7 +50186,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());
       }
     }
@@ -54108,8 +54113,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]);
@@ -54503,11 +54511,16 @@ function useAddressValidation({
   };
 }
 function useSupportedDepositTokens(publishableKey, options2) {
-  const filteredOptions = options2?.destination_token_address && options2?.destination_chain_id && options2?.destination_chain_type ? {
-    destination_token_address: options2.destination_token_address,
-    destination_chain_id: options2.destination_chain_id,
-    destination_chain_type: options2.destination_chain_type
-  } : void 0;
+  const hasDestination = options2?.destination_token_address && options2?.destination_chain_id && options2?.destination_chain_type;
+  const filteredOptions = {
+    ...hasDestination ? {
+      destination_token_address: options2.destination_token_address,
+      destination_chain_id: options2.destination_chain_id,
+      destination_chain_type: options2.destination_chain_type
+    } : {},
+    ...options2?.product_type ? { product_type: options2.product_type } : {}
+  };
+  const hasFilteredOptions = Object.keys(filteredOptions).length > 0;
   return useQuery({
     queryKey: [
       "unifold",
@@ -54515,9 +54528,13 @@ function useSupportedDepositTokens(publishableKey, options2) {
       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,
@@ -55716,7 +55733,8 @@ function TransferCryptoSingleInput({
   onDepositError,
   wallets: externalWallets,
   onSourceTokenChange,
-  checkoutQuote
+  checkoutQuote,
+  productType
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
@@ -55729,7 +55747,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({
@@ -56764,6 +56783,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 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,
@@ -57239,7 +57306,7 @@ function EnterAmountView({
                 }
               )
             ] }) }),
-            tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.jsxs)(
               "div",
               {
                 className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
@@ -57841,7 +57908,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");
@@ -57863,7 +57934,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,
@@ -57915,7 +58028,8 @@ function BrowserWalletModal({
         const options2 = {
           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,
@@ -58317,7 +58431,6 @@ function BrowserWalletModal({
       throw error2;
     }
   };
-  const selectedToken = selectedBalance ? getTokenFromBalance(selectedBalance) : null;
   const usdToTokenRate = React262.useMemo(() => {
     if (!selectedBalance || !selectedBalance.amount_usd || !selectedToken)
       return 0;
@@ -58327,15 +58440,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(
@@ -59791,49 +59913,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 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,
@@ -59983,6 +60062,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_react27.useCallback)(
@@ -60374,6 +60454,7 @@ function CheckoutModal({
                   depositConfirmationMode: "auto_ui",
                   wallets,
                   onSourceTokenChange: setSelectedSource,
+                  productType: "payment",
                   checkoutQuote: sourceQuote ? {
                     sourceAmount: sourceQuote.source_amount,
                     sourceTokenDecimals: sourceQuote.source_token_decimals,
@@ -60413,6 +60494,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

@@ -43232,13 +43232,18 @@ async function getSupportedDepositTokens(publishableKey, options2) {
   const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
   validatePublishableKey(pk);
   let url = `${API_BASE_URL}/v1/public/tokens/supported_deposit_tokens`;
+  const params = new URLSearchParams();
   if (options2?.destination_token_address && options2?.destination_chain_id && options2?.destination_chain_type) {
-    const params = new URLSearchParams({
-      destination_token_address: options2.destination_token_address,
-      destination_chain_id: options2.destination_chain_id,
-      destination_chain_type: options2.destination_chain_type
-    });
-    url = `${url}?${params.toString()}`;
+    params.set("destination_token_address", options2.destination_token_address);
+    params.set("destination_chain_id", options2.destination_chain_id);
+    params.set("destination_chain_type", options2.destination_chain_type);
+  }
+  if (options2?.product_type) {
+    params.set("product_type", options2.product_type);
+  }
+  const qs = params.toString();
+  if (qs) {
+    url = `${url}?${qs}`;
   }
   const response = await fetch(url, {
     method: "GET",
@@ -50143,14 +50148,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());
       }
     }
@@ -50168,7 +50173,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());
       }
     }
@@ -54095,8 +54100,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]);
@@ -54490,11 +54498,16 @@ function useAddressValidation({
   };
 }
 function useSupportedDepositTokens(publishableKey, options2) {
-  const filteredOptions = options2?.destination_token_address && options2?.destination_chain_id && options2?.destination_chain_type ? {
-    destination_token_address: options2.destination_token_address,
-    destination_chain_id: options2.destination_chain_id,
-    destination_chain_type: options2.destination_chain_type
-  } : void 0;
+  const hasDestination = options2?.destination_token_address && options2?.destination_chain_id && options2?.destination_chain_type;
+  const filteredOptions = {
+    ...hasDestination ? {
+      destination_token_address: options2.destination_token_address,
+      destination_chain_id: options2.destination_chain_id,
+      destination_chain_type: options2.destination_chain_type
+    } : {},
+    ...options2?.product_type ? { product_type: options2.product_type } : {}
+  };
+  const hasFilteredOptions = Object.keys(filteredOptions).length > 0;
   return useQuery({
     queryKey: [
       "unifold",
@@ -54502,9 +54515,13 @@ function useSupportedDepositTokens(publishableKey, options2) {
       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,
@@ -55703,7 +55720,8 @@ function TransferCryptoSingleInput({
   onDepositError,
   wallets: externalWallets,
   onSourceTokenChange,
-  checkoutQuote
+  checkoutQuote,
+  productType
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
@@ -55716,7 +55734,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({
@@ -56751,6 +56770,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 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,
@@ -57226,7 +57293,7 @@ function EnterAmountView({
                 }
               )
             ] }) }),
-            tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.jsxs)(
               "div",
               {
                 className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
@@ -57828,7 +57895,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");
@@ -57850,7 +57921,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,
@@ -57902,7 +58015,8 @@ function BrowserWalletModal({
         const options2 = {
           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,
@@ -58304,7 +58418,6 @@ function BrowserWalletModal({
       throw error2;
     }
   };
-  const selectedToken = selectedBalance ? getTokenFromBalance(selectedBalance) : null;
   const usdToTokenRate = React262.useMemo(() => {
     if (!selectedBalance || !selectedBalance.amount_usd || !selectedToken)
       return 0;
@@ -58314,15 +58427,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(
@@ -59778,49 +59900,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 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,
@@ -59970,6 +60049,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_react27.useCallback)(
@@ -60361,6 +60441,7 @@ function CheckoutModal({
                   depositConfirmationMode: "auto_ui",
                   wallets,
                   onSourceTokenChange: setSelectedSource,
+                  productType: "payment",
                   checkoutQuote: sourceQuote ? {
                     sourceAmount: sourceQuote.source_amount,
                     sourceTokenDecimals: sourceQuote.source_token_decimals,
@@ -60400,6 +60481,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-web",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "description": "Unifold UI Web - Framework-agnostic deposit widget",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -30,10 +30,10 @@
     "@types/react-dom": "^19.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
-    "@unifold/connect-react": "0.1.51",
-    "@unifold/core": "0.1.51",
-    "@unifold/ui-react": "0.1.51",
-    "@unifold/react-provider": "0.1.51"
+    "@unifold/connect-react": "0.1.53",
+    "@unifold/ui-react": "0.1.53",
+    "@unifold/core": "0.1.53",
+    "@unifold/react-provider": "0.1.53"
   },
   "keywords": [
     "unifold",