@unifold/ui-react 0.1.21 → 0.1.22

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/deposits/DepositModal.tsx
-import { useState as useState16, useEffect as useEffect13 } from "react";
+import { useState as useState17, useEffect as useEffect14 } from "react";
 import { ChevronRight as ChevronRight8, MapPinOff, AlertTriangle } from "lucide-react";
 
 // src/components/shared/dialog.tsx
@@ -13,6 +13,29 @@ import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function formatEstimatedTime(seconds) {
+  if (seconds == null) {
+    return "< 1 min";
+  }
+  if (seconds < 60) {
+    return `< ${seconds} sec${seconds > 1 ? "s" : ""}`;
+  } else if (seconds < 3600) {
+    const mins = Math.ceil(seconds / 60);
+    return `< ${mins} min${mins > 1 ? "s" : ""}`;
+  } else {
+    let hrs = Math.floor(seconds / 3600);
+    let mins = Math.ceil(seconds % 3600 / 60);
+    if (mins === 60) {
+      hrs += 1;
+      mins = 0;
+    }
+    const hrLabel = hrs > 1 ? "hrs" : "hr";
+    if (mins === 0) {
+      return `< ${hrs} ${hrLabel}`;
+    }
+    return `< ${hrs} ${hrLabel} ${mins} min${mins > 1 ? "s" : ""}`;
+  }
+}
 
 // src/context/ThemeContext.tsx
 import * as React from "react";
@@ -466,7 +489,7 @@ var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/deposits/BuyWithCard.tsx
-import { useState as useState8, useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useState as useState9, useEffect as useEffect5, useRef as useRef2 } from "react";
 import { ChevronDown as ChevronDown2, ChevronRight } from "lucide-react";
 import {
   getOnrampQuotes,
@@ -481,10 +504,12 @@ import {
 } from "@unifold/core";
 
 // src/components/deposits/CurrencyModal.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/components/deposits/DepositHeader.tsx
 import { ArrowLeft, X as X2 } from "lucide-react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { getAddressBalance } from "@unifold/core";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function DepositHeader({
   title,
@@ -492,10 +517,83 @@ function DepositHeader({
   showClose = true,
   onBack,
   onClose,
-  badge
+  badge,
+  showBalance = false,
+  balanceAddress,
+  balanceChainType,
+  balanceChainId,
+  balanceTokenAddress,
+  publishableKey
 }) {
   const { colors: colors2, fonts, components } = useTheme();
-  return /* @__PURE__ */ jsxs2("div", { className: "uf-flex uf-items-center uf-justify-between uf-pb-6", children: [
+  const [balance, setBalance] = useState2(null);
+  const [isLoadingBalance, setIsLoadingBalance] = useState2(false);
+  useEffect2(() => {
+    if (!showBalance || !balanceAddress || !balanceChainType || !balanceChainId || !balanceTokenAddress || !publishableKey) {
+      setBalance(null);
+      setIsLoadingBalance(false);
+      return;
+    }
+    let cancelled = false;
+    setIsLoadingBalance(true);
+    getAddressBalance(
+      balanceAddress,
+      balanceChainType,
+      balanceChainId,
+      balanceTokenAddress,
+      publishableKey
+    ).then((response) => {
+      if (cancelled) return;
+      if (response.balance && response.balance.amount !== "0") {
+        const value = Number(response.balance.amount) / 10 ** response.balance.token.decimals;
+        let formatted;
+        let maxDecimals = 4;
+        const symbol = response.balance.token.symbol?.toUpperCase() || "";
+        if (symbol === "BTC" || symbol === "WBTC") {
+          maxDecimals = 8;
+        } else if (symbol === "ETH" || symbol === "WETH") {
+          maxDecimals = 6;
+        }
+        if (value >= 1) {
+          formatted = value.toLocaleString(void 0, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: maxDecimals
+          });
+        } else if (value > 0) {
+          formatted = value.toLocaleString(void 0, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: maxDecimals,
+            minimumSignificantDigits: 2,
+            maximumSignificantDigits: 6
+          });
+        } else {
+          formatted = value.toExponential(2);
+        }
+        const balanceText = response.balance.amount_usd ? `Balance: $${response.balance.amount_usd} (${formatted} ${response.balance.token.symbol})` : `Balance: ${formatted} ${response.balance.token.symbol}`;
+        setBalance(balanceText);
+      } else {
+        setBalance(null);
+      }
+    }).catch((error) => {
+      if (cancelled) return;
+      console.error("Error fetching balance:", error);
+      setBalance(null);
+    }).finally(() => {
+      if (cancelled) return;
+      setIsLoadingBalance(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    showBalance,
+    balanceAddress,
+    balanceChainType,
+    balanceChainId,
+    balanceTokenAddress,
+    publishableKey
+  ]);
+  return /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsxs2("div", { className: "uf-flex uf-items-center uf-justify-between uf-pb-6", children: [
     showBack ? /* @__PURE__ */ jsx3(
       "button",
       {
@@ -505,8 +603,32 @@ function DepositHeader({
         children: /* @__PURE__ */ jsx3(ArrowLeft, { className: "uf-w-5 uf-h-5" })
       }
     ) : /* @__PURE__ */ jsx3("div", { className: "uf-w-5 uf-h-5 uf-invisible" }),
-    badge ? /* @__PURE__ */ jsxs2("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
-      /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsxs2("div", { className: "uf-flex uf-flex-col uf-items-center", children: [
+      badge ? /* @__PURE__ */ jsxs2("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+        /* @__PURE__ */ jsx3(
+          DialogTitle,
+          {
+            className: "uf-text-center uf-text-base",
+            style: {
+              color: components.header.titleColor,
+              fontFamily: fonts.medium
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "uf-px-2 uf-py-0.5 uf-rounded-full uf-text-[10px]",
+            style: {
+              backgroundColor: colors2.card,
+              color: colors2.foregroundMuted,
+              fontFamily: fonts.regular
+            },
+            children: badge.count
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx3(
         DialogTitle,
         {
           className: "uf-text-center uf-text-base",
@@ -517,29 +639,19 @@ function DepositHeader({
           children: title
         }
       ),
-      /* @__PURE__ */ jsx3(
+      showBalance && (isLoadingBalance ? /* @__PURE__ */ jsx3("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded uf-animate-pulse uf-mt-2" }) : balance ? /* @__PURE__ */ jsx3(
         "div",
         {
-          className: "uf-px-2 uf-py-0.5 uf-rounded-full uf-text-[10px]",
+          className: "uf-text-xs uf-mt-2",
           style: {
-            backgroundColor: colors2.card,
-            color: colors2.foregroundMuted,
-            fontFamily: fonts.regular
+            color: colors2.foreground,
+            fontFamily: fonts.regular,
+            opacity: 0.7
           },
-          children: badge.count
+          children: balance
         }
-      )
-    ] }) : /* @__PURE__ */ jsx3(
-      DialogTitle,
-      {
-        className: "uf-text-center uf-text-base",
-        style: {
-          color: components.header.titleColor,
-          fontFamily: fonts.medium
-        },
-        children: title
-      }
-    ),
+      ) : null)
+    ] }),
     showClose ? /* @__PURE__ */ jsx3(
       "button",
       {
@@ -549,7 +661,7 @@ function DepositHeader({
         children: /* @__PURE__ */ jsx3(X2, { className: "uf-w-5 uf-h-5" })
       }
     ) : /* @__PURE__ */ jsx3("div", { className: "uf-w-5 uf-h-5 uf-invisible" })
-  ] });
+  ] }) });
 }
 
 // src/components/currency/CurrencyListItem.tsx
@@ -662,7 +774,7 @@ function CurrencyModal({
   themeClass = ""
 }) {
   const { colors: colors2, fonts, components } = useTheme();
-  const [searchQuery, setSearchQuery] = useState3("");
+  const [searchQuery, setSearchQuery] = useState4("");
   const preferredCurrencies = preferredCurrencyCodes.map(
     (code) => currencies.find(
       (currency) => currency.currency_code.toLowerCase() === code.toLowerCase()
@@ -838,7 +950,19 @@ var en_default = {
     minimumDeposit: "Minimum: {{amount}}",
     minimumDepositTooltip: "The minimum amount you can deposit on the selected network.",
     selectTokenDeposit: "Your deposit token",
-    selectTokenDepositTooltip: "Select the token you want to deposit with in order to begin the deposit process."
+    selectTokenDepositTooltip: "Select the token you want to deposit with in order to begin the deposit process.",
+    addressValidation: {
+      validating: "Verifying recipient address...",
+      unableToReceiveFunds: "Unable to Receive Funds",
+      errors: {
+        token_not_supported: "The destination token is not supported",
+        not_opted_in: "Please make sure you opt-in {{token_symbol}}({{chain_name}}) before receiving funds",
+        insufficient_balance: "Recipient account does not meet the minimum balance requirement",
+        account_not_found: "Recipient account does not exist on {{chain_name}}",
+        validation_error: "Unable to verify recipient address on {{chain_name}}"
+      },
+      defaultError: "The recipient address cannot receive funds for the selected token"
+    }
   },
   depositModal: {
     transferCrypto: {
@@ -847,7 +971,7 @@ var en_default = {
     },
     depositWithCard: {
       title: "Deposit with Card",
-      subtitle: "$50,000 limit \u2022 2 min"
+      subtitle: "$50,000 limit"
     },
     quotes: "Quotes"
   },
@@ -865,9 +989,16 @@ var en_default = {
 
 // src/lib/i18n.ts
 var i18n = en_default;
+function interpolate(template, params) {
+  if (!params) return template;
+  return template.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+    const value = params[key];
+    return value !== void 0 ? String(value) : `{{${key}}}`;
+  });
+}
 
 // src/hooks/use-deposit-polling.ts
-import { useState as useState4, useEffect as useEffect2, useRef } from "react";
+import { useState as useState5, useEffect as useEffect3, useRef } from "react";
 import {
   queryExecutions,
   ExecutionStatus
@@ -879,14 +1010,14 @@ function useDepositPolling({
   onDepositSuccess,
   onDepositError
 }) {
-  const [executions, setExecutions] = useState4([]);
-  const [isPolling, setIsPolling] = useState4(false);
+  const [executions, setExecutions] = useState5([]);
+  const [isPolling, setIsPolling] = useState5(false);
   const pollingIntervalRef = useRef(
     null
   );
-  const [modalOpenedAt] = useState4(/* @__PURE__ */ new Date());
-  const [trackedExecutions, setTrackedExecutions] = useState4(/* @__PURE__ */ new Map());
-  useEffect2(() => {
+  const [modalOpenedAt] = useState5(/* @__PURE__ */ new Date());
+  const [trackedExecutions, setTrackedExecutions] = useState5(/* @__PURE__ */ new Map());
+  useEffect3(() => {
     if (!userId || !modalOpenedAt || !enabled) return;
     const pollInterval = setInterval(async () => {
       try {
@@ -989,10 +1120,10 @@ function useDepositPolling({
 }
 
 // src/components/deposits/DepositPollingToasts.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 
 // src/components/deposits/DepositSuccessToast.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { X as X3 } from "lucide-react";
 import {
   ExecutionStatus as ExecutionStatus3,
@@ -1000,7 +1131,7 @@ import {
 } from "@unifold/core";
 
 // src/components/deposits/DepositDetailContent.tsx
-import { useEffect as useEffect3, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 import { ExternalLink, ChevronDown, ChevronUp } from "lucide-react";
 import {
   ExecutionStatus as ExecutionStatus2,
@@ -1019,12 +1150,12 @@ function formatCurrency(currency) {
 }
 function DepositDetailContent({ execution }) {
   const { colors: colors2, fonts, components } = useTheme();
-  const [chains, setChains] = useState5([]);
-  const [showNetworkDetails, setShowNetworkDetails] = useState5(false);
-  useEffect3(() => {
+  const [chains, setChains] = useState6([]);
+  const [showNetworkDetails, setShowNetworkDetails] = useState6(false);
+  useEffect4(() => {
     getTokenChains().then((response) => setChains(response.data)).catch((err) => console.error("Failed to fetch chains:", err));
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     setShowNetworkDetails(false);
   }, [execution?.id]);
   const isPending = execution.status === ExecutionStatus2.PENDING || execution.status === ExecutionStatus2.WAITING || execution.status === ExecutionStatus2.DELAYED;
@@ -1319,6 +1450,37 @@ function DepositDetailContent({ execution }) {
               ]
             }
           ),
+          isPending && /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b",
+              style: { borderColor: colors2.border },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    className: "uf-text-sm",
+                    style: {
+                      color: components.card.labelColor,
+                      fontFamily: fonts.regular
+                    },
+                    children: "Estimated delivery time"
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    style: {
+                      color: components.card.titleColor,
+                      fontFamily: fonts.regular,
+                      fontSize: "14px"
+                    },
+                    children: formatEstimatedTime(execution?.estimated_processing_time)
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs6(
             "div",
             {
@@ -1505,7 +1667,7 @@ function DepositSuccessToast({
   onClose,
   execution
 }) {
-  const [detailModalOpen, setDetailModalOpen] = useState6(false);
+  const [detailModalOpen, setDetailModalOpen] = useState7(false);
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isPending = status === ExecutionStatus3.PENDING || status === ExecutionStatus3.WAITING || status === ExecutionStatus3.DELAYED;
   const formatDateTime = (timestamp) => {
@@ -1639,14 +1801,27 @@ function DepositSuccessToast({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx8(
-              "div",
-              {
-                className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
-                style: { color: colors2.background },
-                children: formatUsdAmount(sourceAmountUsd)
-              }
-            ),
+            /* @__PURE__ */ jsxs7("div", { className: "uf-flex-shrink-0 uf-text-right", children: [
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  className: "uf-font-medium uf-text-sm",
+                  style: { color: colors2.background },
+                  children: formatUsdAmount(sourceAmountUsd)
+                }
+              ),
+              isPending && execution?.estimated_processing_time && /* @__PURE__ */ jsxs7(
+                "p",
+                {
+                  className: "uf-text-xs",
+                  style: { color: colors2.foregroundMuted },
+                  children: [
+                    "Est. ",
+                    formatEstimatedTime(execution.estimated_processing_time)
+                  ]
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsx8(
               "button",
               {
@@ -1695,7 +1870,7 @@ function DepositPollingToasts({
   executions,
   horizontalPadding = "24px"
 }) {
-  const [closedExecutionIds, setClosedExecutionIds] = useState7(
+  const [closedExecutionIds, setClosedExecutionIds] = useState8(
     /* @__PURE__ */ new Set()
   );
   const handleClose = (executionId) => {
@@ -1776,28 +1951,28 @@ function BuyWithCard({
   assetCdnUrl
 }) {
   const { colors: colors2, fonts, components } = useTheme();
-  const [amount, setAmount] = useState8("");
-  const [currency, setCurrency] = useState8("usd");
-  const [hasManualCurrencySelection, setHasManualCurrencySelection] = useState8(false);
-  const [hasManualAmountEntry, setHasManualAmountEntry] = useState8(false);
-  const [showCurrencyModal, setShowCurrencyModal] = useState8(false);
-  const [quotes, setQuotes] = useState8([]);
-  const [quotesLoading, setQuotesLoading] = useState8(false);
-  const [quotesError, setQuotesError] = useState8(null);
-  const [amountValidationError, setAmountValidationError] = useState8(null);
-  const [internalView, setInternalView] = useState8("amount");
-  const [defaultToken, setDefaultToken] = useState8(
+  const [amount, setAmount] = useState9("");
+  const [currency, setCurrency] = useState9("usd");
+  const [hasManualCurrencySelection, setHasManualCurrencySelection] = useState9(false);
+  const [hasManualAmountEntry, setHasManualAmountEntry] = useState9(false);
+  const [showCurrencyModal, setShowCurrencyModal] = useState9(false);
+  const [quotes, setQuotes] = useState9([]);
+  const [quotesLoading, setQuotesLoading] = useState9(false);
+  const [quotesError, setQuotesError] = useState9(null);
+  const [amountValidationError, setAmountValidationError] = useState9(null);
+  const [internalView, setInternalView] = useState9("amount");
+  const [defaultToken, setDefaultToken] = useState9(
     null
   );
-  const [defaultTokenLoading, setDefaultTokenLoading] = useState8(false);
+  const [defaultTokenLoading, setDefaultTokenLoading] = useState9(false);
   const { userIpInfo, isLoading: isLoadingIp } = useUserIp();
-  const [onrampSession, setOnrampSession] = useState8(
+  const [onrampSession, setOnrampSession] = useState9(
     null
   );
   const currentView = externalView ?? internalView;
   const showQuotesView = currentView === "quotes";
   const showOnrampView = currentView === "onramp";
-  useEffect4(() => {
+  useEffect5(() => {
     if (externalView) {
       setInternalView(externalView);
     }
@@ -1810,31 +1985,31 @@ function BuyWithCard({
       onViewChange?.(newView);
     }
   };
-  const [selectedProvider, setSelectedProvider] = useState8(
+  const [selectedProvider, setSelectedProvider] = useState9(
     null
   );
-  const [isAutoSelected, setIsAutoSelected] = useState8(true);
-  const [autoSelectedProvider, setAutoSelectedProvider] = useState8(null);
-  const [hoveredProviderIndex, setHoveredProviderIndex] = useState8(null);
-  const [hasManualSelection, setHasManualSelection] = useState8(false);
+  const [isAutoSelected, setIsAutoSelected] = useState9(true);
+  const [autoSelectedProvider, setAutoSelectedProvider] = useState9(null);
+  const [hoveredProviderIndex, setHoveredProviderIndex] = useState9(null);
+  const [hasManualSelection, setHasManualSelection] = useState9(false);
   const selectedProviderRef = useRef2(null);
   const hasManualSelectionRef = useRef2(false);
-  useEffect4(() => {
+  useEffect5(() => {
     selectedProviderRef.current = selectedProvider;
   }, [selectedProvider]);
-  useEffect4(() => {
+  useEffect5(() => {
     hasManualSelectionRef.current = hasManualSelection;
   }, [hasManualSelection]);
-  const [internalWallets, setInternalWallets] = useState8([]);
-  const [walletsLoading, setWalletsLoading] = useState8(
+  const [internalWallets, setInternalWallets] = useState9([]);
+  const [walletsLoading, setWalletsLoading] = useState9(
     !externalWallets?.length
   );
   const wallets = externalWallets?.length ? externalWallets : internalWallets;
-  const [countdown, setCountdown] = useState8(60);
-  const [fiatCurrencies, setFiatCurrencies] = useState8([]);
-  const [preferredCurrencyCodes, setPreferredCurrencyCodes] = useState8([]);
-  const [currenciesLoading, setCurrenciesLoading] = useState8(true);
-  const [destinationToken, setDestinationToken] = useState8(null);
+  const [countdown, setCountdown] = useState9(60);
+  const [fiatCurrencies, setFiatCurrencies] = useState9([]);
+  const [preferredCurrencyCodes, setPreferredCurrencyCodes] = useState9([]);
+  const [currenciesLoading, setCurrenciesLoading] = useState9(true);
+  const [destinationToken, setDestinationToken] = useState9(null);
   const { executions, isPolling } = useDepositPolling({
     userId,
     publishableKey,
@@ -1846,7 +2021,7 @@ function BuyWithCard({
   const destinationTokenIcon = destinationToken?.icon_url;
   const destinationChainIcon = destinationToken?.chain_icon_url;
   const destinationChainName = destinationToken?.chain_name;
-  useEffect4(() => {
+  useEffect5(() => {
     async function fetchFiatCurrencies() {
       try {
         const response = await getFiatCurrencies(publishableKey);
@@ -1860,7 +2035,7 @@ function BuyWithCard({
     }
     fetchFiatCurrencies();
   }, [publishableKey]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (hasManualCurrencySelection) return;
     if (fiatCurrencies.length === 0 || !userIpInfo?.alpha2) return;
     const userCountryCode = userIpInfo.alpha2.toUpperCase();
@@ -1888,7 +2063,7 @@ function BuyWithCard({
     hasManualAmountEntry
   ]);
   const prevCurrencyRef = useRef2(null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (fiatCurrencies.length === 0) return;
     if (prevCurrencyRef.current !== null && prevCurrencyRef.current !== currency) {
       const currentCurrency = fiatCurrencies.find(
@@ -1900,7 +2075,7 @@ function BuyWithCard({
     }
     prevCurrencyRef.current = currency;
   }, [currency]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (externalWallets?.length) {
       setWalletsLoading(false);
       return;
@@ -1953,7 +2128,7 @@ function BuyWithCard({
     publishableKey,
     externalWallets
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     async function fetchDestinationToken() {
       try {
         const response = await getTokenMetadata(
@@ -1971,7 +2146,7 @@ function BuyWithCard({
     }
     fetchDestinationToken();
   }, [publishableKey]);
-  useEffect4(() => {
+  useEffect5(() => {
     async function fetchDefaultToken() {
       if (!destinationTokenAddress || !destinationChainId || !destinationChainType) {
         return;
@@ -2007,7 +2182,7 @@ function BuyWithCard({
     isLoadingIp,
     publishableKey
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     const amountNum = parseFloat(amount);
     if (isNaN(amountNum) || amountNum <= 0) {
       setQuotes([]);
@@ -2116,7 +2291,7 @@ function BuyWithCard({
       setQuotesLoading(false);
     }
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (quotes.length === 0) return;
     const timer = setInterval(() => {
       setCountdown((prev) => {
@@ -2451,6 +2626,20 @@ function BuyWithCard({
                     },
                     children: quotesError
                   }
+                ),
+                defaultToken?.estimated_processing_time && !quotesLoading && selectedProvider && /* @__PURE__ */ jsxs8(
+                  "div",
+                  {
+                    className: "uf-text-xs uf-mt-2 uf-px-1",
+                    style: {
+                      color: components.card.subtitleColor,
+                      fontFamily: fonts.regular
+                    },
+                    children: [
+                      "Estimated delivery time: ",
+                      formatEstimatedTime(defaultToken.estimated_processing_time)
+                    ]
+                  }
                 )
               ] }),
               /* @__PURE__ */ jsx10(
@@ -2668,7 +2857,7 @@ function BuyWithCard({
 }
 
 // src/components/deposits/DepositsModal.tsx
-import { useEffect as useEffect5, useState as useState9 } from "react";
+import { useEffect as useEffect6, useState as useState10 } from "react";
 
 // src/components/deposits/DepositExecutionItem.tsx
 import { ChevronRight as ChevronRight2 } from "lucide-react";
@@ -2913,9 +3102,9 @@ function DepositsModal({
   themeClass = ""
 }) {
   const { colors: colors2 } = useTheme();
-  const [allExecutions, setAllExecutions] = useState9(sessionExecutions);
-  const [selectedExecution, setSelectedExecution] = useState9(null);
-  useEffect5(() => {
+  const [allExecutions, setAllExecutions] = useState10(sessionExecutions);
+  const [selectedExecution, setSelectedExecution] = useState10(null);
+  useEffect6(() => {
     if (!open || !userId) return;
     const fetchExecutions = async () => {
       try {
@@ -2937,7 +3126,7 @@ function DepositsModal({
       clearInterval(pollInterval);
     };
   }, [open, userId, publishableKey, sessionExecutions]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!open) {
       setSelectedExecution(null);
     }
@@ -3325,8 +3514,68 @@ function useAllowedCountry(publishableKey) {
   };
 }
 
+// src/hooks/use-address-validation.ts
+import { useQuery as useQuery3 } from "@tanstack/react-query";
+import {
+  verifyRecipientAddress
+} from "@unifold/core";
+function useAddressValidation({
+  recipientAddress,
+  destinationChainType,
+  destinationChainId,
+  destinationTokenAddress,
+  publishableKey,
+  enabled = true,
+  refetchOnMount = false
+}) {
+  const shouldValidate = enabled && !!recipientAddress && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress;
+  const { data, isLoading, error } = useQuery3({
+    queryKey: [
+      "unifold",
+      "addressValidation",
+      recipientAddress,
+      destinationChainType,
+      destinationChainId,
+      destinationTokenAddress
+    ],
+    queryFn: () => verifyRecipientAddress(
+      {
+        chain_type: destinationChainType,
+        chain_id: destinationChainId,
+        token_address: destinationTokenAddress,
+        recipient_address: recipientAddress
+      },
+      publishableKey
+    ),
+    enabled: shouldValidate,
+    refetchOnMount,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    staleTime: 1e3 * 60 * 5,
+    // 5 minutes - address state can change
+    gcTime: 1e3 * 60 * 30
+    // 30 minutes
+  });
+  if (!shouldValidate) {
+    return {
+      isValid: null,
+      failureCode: null,
+      metadata: null,
+      isLoading: false,
+      error: null
+    };
+  }
+  return {
+    isValid: data?.valid ?? null,
+    failureCode: data?.failure_code ?? null,
+    metadata: data?.metadata ?? null,
+    isLoading,
+    error: error ?? null
+  };
+}
+
 // src/components/deposits/TransferCryptoSingleInput.tsx
-import { useState as useState14, useEffect as useEffect11 } from "react";
+import { useState as useState15, useEffect as useEffect12 } from "react";
 import {
   ChevronDown as ChevronDown3,
   ChevronUp as ChevronUp2,
@@ -3342,7 +3591,7 @@ import {
 } from "lucide-react";
 
 // src/components/deposits/StyledQRCode.tsx
-import { useEffect as useEffect9, useRef as useRef3 } from "react";
+import { useEffect as useEffect10, useRef as useRef3 } from "react";
 import QRCodeStyling from "qr-code-styling";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function StyledQRCode({
@@ -3354,7 +3603,7 @@ function StyledQRCode({
 }) {
   const ref = useRef3(null);
   const qrCodeRef = useRef3(null);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!ref.current) return;
     if (!qrCodeRef.current) {
       qrCodeRef.current = new QRCodeStyling({
@@ -3394,7 +3643,7 @@ function StyledQRCode({
       qrCodeRef.current.append(ref.current);
     }
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (qrCodeRef.current) {
       qrCodeRef.current.update({
         data: value,
@@ -3435,7 +3684,7 @@ function StyledQRCode({
 }
 
 // src/components/deposits/TokenSelectorSheet.tsx
-import { useState as useState13, useMemo as useMemo3, useEffect as useEffect10 } from "react";
+import { useState as useState14, useMemo as useMemo3, useEffect as useEffect11 } from "react";
 import { ArrowLeft as ArrowLeft2, X as X4 } from "lucide-react";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var STORAGE_KEY = "unifold_recent_tokens";
@@ -3493,10 +3742,10 @@ function TokenSelectorSheet({
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
-  const [searchQuery, setSearchQuery] = useState13("");
-  const [recentTokens, setRecentTokens] = useState13([]);
-  const [hoveredTokenKey, setHoveredTokenKey] = useState13(null);
-  useEffect10(() => {
+  const [searchQuery, setSearchQuery] = useState14("");
+  const [recentTokens, setRecentTokens] = useState14([]);
+  const [hoveredTokenKey, setHoveredTokenKey] = useState14(null);
+  useEffect11(() => {
     setRecentTokens(getRecentTokens());
   }, []);
   const allOptions = useMemo3(() => {
@@ -3938,13 +4187,13 @@ function TransferCryptoSingleInput({
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
-  const [token, setToken] = useState14("USDC");
-  const [chain, setChain] = useState14("solana:mainnet");
-  const [copied, setCopied] = useState14(false);
-  const [internalWallets, setInternalWallets] = useState14([]);
-  const [loading, setLoading] = useState14(!externalWallets?.length);
+  const [token, setToken] = useState15("USDC");
+  const [chain, setChain] = useState15("solana:mainnet");
+  const [copied, setCopied] = useState15(false);
+  const [internalWallets, setInternalWallets] = useState15([]);
+  const [loading, setLoading] = useState15(!externalWallets?.length);
   const wallets = externalWallets?.length ? externalWallets : internalWallets;
-  const [error, setError] = useState14(null);
+  const [error, setError] = useState15(null);
   const { executions: depositExecutions, isPolling } = useDepositPolling({
     userId,
     publishableKey,
@@ -3952,11 +4201,11 @@ function TransferCryptoSingleInput({
     onDepositSuccess,
     onDepositError
   });
-  const [supportedTokens, setSupportedTokens] = useState14([]);
-  const [tokensLoading, setTokensLoading] = useState14(true);
-  const [detailsExpanded, setDetailsExpanded] = useState14(false);
-  const [depositsModalOpen, setDepositsModalOpen] = useState14(false);
-  const [tokenSelectorOpen, setTokenSelectorOpen] = useState14(false);
+  const [supportedTokens, setSupportedTokens] = useState15([]);
+  const [tokensLoading, setTokensLoading] = useState15(true);
+  const [detailsExpanded, setDetailsExpanded] = useState15(false);
+  const [depositsModalOpen, setDepositsModalOpen] = useState15(false);
+  const [tokenSelectorOpen, setTokenSelectorOpen] = useState15(false);
   const allChainsMap = /* @__PURE__ */ new Map();
   supportedTokens.forEach((t5) => {
     t5.chains.forEach((c) => {
@@ -3974,7 +4223,7 @@ function TransferCryptoSingleInput({
   const currentChainType = currentChainData?.chain_type || "ethereum";
   const currentWallet = getWalletByChainType2(wallets, currentChainType);
   const depositAddress = currentWallet?.address || "";
-  useEffect11(() => {
+  useEffect12(() => {
     async function fetchSupportedTokens() {
       try {
         setTokensLoading(true);
@@ -4046,12 +4295,12 @@ function TransferCryptoSingleInput({
     destinationChainId,
     destinationChainType
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (onExecutionsChange) {
       onExecutionsChange(depositExecutions);
     }
   }, [depositExecutions, onExecutionsChange]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (externalWallets?.length) {
       setLoading(false);
       return;
@@ -4108,7 +4357,7 @@ function TransferCryptoSingleInput({
     publishableKey,
     externalWallets
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!supportedTokens.length) return;
     const currentToken = supportedTokens.find((t5) => t5.symbol === token);
     if (!currentToken || currentToken.chains.length === 0) return;
@@ -4486,7 +4735,7 @@ function TransferCryptoSingleInput({
 }
 
 // src/components/deposits/TransferCryptoDoubleInput.tsx
-import { useState as useState15, useEffect as useEffect12 } from "react";
+import { useState as useState16, useEffect as useEffect13 } from "react";
 import {
   ChevronDown as ChevronDown5,
   ChevronUp as ChevronUp4,
@@ -4651,13 +4900,13 @@ function TransferCryptoDoubleInput({
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
-  const [token, setToken] = useState15("USDC");
-  const [chain, setChain] = useState15("solana:mainnet");
-  const [copied, setCopied] = useState15(false);
-  const [internalWallets, setInternalWallets] = useState15([]);
-  const [loading, setLoading] = useState15(!externalWallets?.length);
+  const [token, setToken] = useState16("USDC");
+  const [chain, setChain] = useState16("solana:mainnet");
+  const [copied, setCopied] = useState16(false);
+  const [internalWallets, setInternalWallets] = useState16([]);
+  const [loading, setLoading] = useState16(!externalWallets?.length);
   const wallets = externalWallets?.length ? externalWallets : internalWallets;
-  const [error, setError] = useState15(null);
+  const [error, setError] = useState16(null);
   const { executions: depositExecutions, isPolling } = useDepositPolling({
     userId,
     publishableKey,
@@ -4665,10 +4914,10 @@ function TransferCryptoDoubleInput({
     onDepositSuccess,
     onDepositError
   });
-  const [supportedTokens, setSupportedTokens] = useState15([]);
-  const [tokensLoading, setTokensLoading] = useState15(true);
-  const [detailsExpanded, setDetailsExpanded] = useState15(false);
-  const [depositsModalOpen, setDepositsModalOpen] = useState15(false);
+  const [supportedTokens, setSupportedTokens] = useState16([]);
+  const [tokensLoading, setTokensLoading] = useState16(true);
+  const [detailsExpanded, setDetailsExpanded] = useState16(false);
+  const [depositsModalOpen, setDepositsModalOpen] = useState16(false);
   const allChainsMap = /* @__PURE__ */ new Map();
   supportedTokens.forEach((t5) => {
     t5.chains.forEach((c) => {
@@ -4686,7 +4935,7 @@ function TransferCryptoDoubleInput({
   const currentChainType = currentChainData?.chain_type || "ethereum";
   const currentWallet = getWalletByChainType3(wallets, currentChainType);
   const depositAddress = currentWallet?.address || "";
-  useEffect12(() => {
+  useEffect13(() => {
     async function fetchSupportedTokens() {
       try {
         setTokensLoading(true);
@@ -4729,12 +4978,12 @@ function TransferCryptoDoubleInput({
     destinationChainId,
     destinationChainType
   ]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (onExecutionsChange) {
       onExecutionsChange(depositExecutions);
     }
   }, [depositExecutions, onExecutionsChange]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (externalWallets?.length) {
       setLoading(false);
       return;
@@ -4791,7 +5040,7 @@ function TransferCryptoDoubleInput({
     publishableKey,
     externalWallets
   ]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!supportedTokens.length) return;
     const currentToken = supportedTokens.find((t5) => t5.symbol === token);
     if (!currentToken || currentToken.chains.length === 0) return;
@@ -5242,26 +5491,27 @@ function DepositModal({
   destinationChainId,
   destinationTokenAddress,
   hideDepositTracker = false,
+  showBalanceHeader = false,
   transferInputVariant = "double_input",
   onDepositSuccess,
   onDepositError,
   theme = "dark"
 }) {
-  const { colors: colors2 } = useTheme();
-  const [view, setView] = useState16("main");
-  const [cardView, setCardView] = useState16(
+  const { colors: colors2, fonts } = useTheme();
+  const [view, setView] = useState17("main");
+  const [cardView, setCardView] = useState17(
     "amount"
   );
-  const [quotesCount, setQuotesCount] = useState16(0);
-  const [depositsModalOpen, setDepositsModalOpen] = useState16(false);
-  const [depositExecutions, setDepositExecutions] = useState16([]);
-  const [projectConfig, setProjectConfig] = useState16(null);
-  const [wallets, setWallets] = useState16([]);
-  const [walletsLoading, setWalletsLoading] = useState16(false);
-  useEffect13(() => {
+  const [quotesCount, setQuotesCount] = useState17(0);
+  const [depositsModalOpen, setDepositsModalOpen] = useState17(false);
+  const [depositExecutions, setDepositExecutions] = useState17([]);
+  const [projectConfig, setProjectConfig] = useState17(null);
+  const [wallets, setWallets] = useState17([]);
+  const [walletsLoading, setWalletsLoading] = useState17(false);
+  useEffect14(() => {
     setProjectConfig(null);
   }, [publishableKey]);
-  useEffect13(() => {
+  useEffect14(() => {
     setWallets([]);
   }, [
     userId,
@@ -5271,10 +5521,10 @@ function DepositModal({
     destinationTokenAddress,
     publishableKey
   ]);
-  const [resolvedTheme, setResolvedTheme] = useState16(
+  const [resolvedTheme, setResolvedTheme] = useState17(
     theme === "auto" ? "dark" : theme
   );
-  useEffect13(() => {
+  useEffect14(() => {
     if (theme === "auto") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
       setResolvedTheme(mediaQuery.matches ? "dark" : "light");
@@ -5287,7 +5537,7 @@ function DepositModal({
       setResolvedTheme(theme);
     }
   }, [theme]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (open && !projectConfig) {
       getProjectConfig2(publishableKey).then(setProjectConfig).catch(console.error);
     }
@@ -5297,7 +5547,29 @@ function DepositModal({
     isLoading: isCountryLoading,
     error: countryError
   } = useAllowedCountry(publishableKey);
-  useEffect13(() => {
+  const {
+    isValid: isAddressValid,
+    failureCode: addressFailureCode,
+    metadata: addressFailureMetadata,
+    isLoading: isAddressValidationLoading
+  } = useAddressValidation({
+    recipientAddress,
+    destinationChainType,
+    destinationChainId,
+    destinationTokenAddress,
+    publishableKey,
+    enabled: open,
+    // Only validate when modal is open
+    refetchOnMount: "always"
+  });
+  const addressValidationMessages = i18n.transferCrypto.addressValidation;
+  const getAddressValidationErrorMessage = (code, metadata) => {
+    if (!code) return addressValidationMessages.defaultError;
+    const errors = addressValidationMessages.errors;
+    const template = errors[code] ?? addressValidationMessages.defaultError;
+    return interpolate(template, metadata);
+  };
+  useEffect14(() => {
     if (!open || wallets.length > 0) return;
     let retryTimeout = null;
     let isCancelled = false;
@@ -5381,10 +5653,16 @@ function DepositModal({
             DepositHeader,
             {
               title: modalTitle || "Deposit",
-              onClose: handleClose
+              onClose: handleClose,
+              showBalance: showBalanceHeader,
+              balanceAddress: recipientAddress,
+              balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" ? destinationChainType : void 0,
+              balanceChainId: destinationChainId,
+              balanceTokenAddress: destinationTokenAddress,
+              publishableKey
             }
           ),
-          /* @__PURE__ */ jsx23("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || !projectConfig ? /* @__PURE__ */ jsxs18(Fragment5, { children: [
+          /* @__PURE__ */ jsx23("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || isAddressValidationLoading || !projectConfig ? /* @__PURE__ */ jsxs18(Fragment5, { children: [
             /* @__PURE__ */ jsx23(SkeletonButton, { variant: "with-icons" }),
             /* @__PURE__ */ jsx23(SkeletonButton, { variant: "with-icons" }),
             !hideDepositTracker && /* @__PURE__ */ jsx23(SkeletonButton, {})
@@ -5402,6 +5680,16 @@ function DepositModal({
               /* @__PURE__ */ jsx23("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
               /* @__PURE__ */ jsx23("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "There are no supported tokens available from your current location." })
             ] })
+          ) : isAddressValid === false ? (
+            /* Invalid recipient address state (e.g., Algorand not opted in) */
+            /* @__PURE__ */ jsxs18("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
+              /* @__PURE__ */ jsx23("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx23(AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+              /* @__PURE__ */ jsx23("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
+              /* @__PURE__ */ jsx23("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: getAddressValidationErrorMessage(
+                addressFailureCode,
+                addressFailureMetadata
+              ) })
+            ] })
           ) : (
             /* Normal deposit options */
             /* @__PURE__ */ jsxs18(Fragment5, { children: [