@unifold/ui-react 0.1.21 → 0.1.22

package/dist/index.js

@@ -85,7 +85,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/deposits/DepositModal.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_lucide_react15 = require("lucide-react");
 
 // src/components/shared/dialog.tsx
@@ -99,6 +99,29 @@ var import_tailwind_merge = require("tailwind-merge");
 function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.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
 var React = __toESM(require("react"));
@@ -552,15 +575,17 @@ var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/deposits/BuyWithCard.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_lucide_react6 = require("lucide-react");
-var import_core6 = require("@unifold/core");
+var import_core7 = require("@unifold/core");
 
 // src/components/deposits/CurrencyModal.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/components/deposits/DepositHeader.tsx
 var import_lucide_react2 = require("lucide-react");
+var import_react = require("react");
+var import_core = require("@unifold/core");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function DepositHeader({
   title,
@@ -568,10 +593,83 @@ function DepositHeader({
   showClose = true,
   onBack,
   onClose,
-  badge
+  badge,
+  showBalance = false,
+  balanceAddress,
+  balanceChainType,
+  balanceChainId,
+  balanceTokenAddress,
+  publishableKey
 }) {
   const { colors: colors2, fonts, components } = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-pb-6", children: [
+  const [balance, setBalance] = (0, import_react.useState)(null);
+  const [isLoadingBalance, setIsLoadingBalance] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!showBalance || !balanceAddress || !balanceChainType || !balanceChainId || !balanceTokenAddress || !publishableKey) {
+      setBalance(null);
+      setIsLoadingBalance(false);
+      return;
+    }
+    let cancelled = false;
+    setIsLoadingBalance(true);
+    (0, import_core.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__ */ (0, import_jsx_runtime3.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-pb-6", children: [
     showBack ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
@@ -581,8 +679,32 @@ function DepositHeader({
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ArrowLeft, { className: "uf-w-5 uf-h-5" })
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "uf-w-5 uf-h-5 uf-invisible" }),
-    badge ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center", children: [
+      badge ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          DialogTitle,
+          {
+            className: "uf-text-center uf-text-base",
+            style: {
+              color: components.header.titleColor,
+              fontFamily: fonts.medium
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "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__ */ (0, import_jsx_runtime3.jsx)(
         DialogTitle,
         {
           className: "uf-text-center uf-text-base",
@@ -593,29 +715,19 @@ function DepositHeader({
           children: title
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      showBalance && (isLoadingBalance ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded uf-animate-pulse uf-mt-2" }) : balance ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "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__ */ (0, import_jsx_runtime3.jsx)(
-      DialogTitle,
-      {
-        className: "uf-text-center uf-text-base",
-        style: {
-          color: components.header.titleColor,
-          fontFamily: fonts.medium
-        },
-        children: title
-      }
-    ),
+      ) : null)
+    ] }),
     showClose ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
@@ -625,13 +737,13 @@ function DepositHeader({
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.X, { className: "uf-w-5 uf-h-5" })
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "uf-w-5 uf-h-5 uf-invisible" })
-  ] });
+  ] }) });
 }
 
 // src/components/currency/CurrencyListItem.tsx
 var React3 = __toESM(require("react"));
 var import_lucide_react3 = require("lucide-react");
-var import_core = require("@unifold/core");
+var import_core2 = require("@unifold/core");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function CurrencyListItem({
   currency,
@@ -640,7 +752,7 @@ function CurrencyListItem({
 }) {
   const { colors: colors2, fonts, components } = useTheme();
   const [isHovered, setIsHovered] = React3.useState(false);
-  const iconUrl = (0, import_core.getPreferredIconUrl)(currency.icon_urls, "png") || currency.icon_url;
+  const iconUrl = (0, import_core2.getPreferredIconUrl)(currency.icon_urls, "png") || currency.icon_url;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "button",
     {
@@ -738,7 +850,7 @@ function CurrencyModal({
   themeClass = ""
 }) {
   const { colors: colors2, fonts, components } = useTheme();
-  const [searchQuery, setSearchQuery] = (0, import_react.useState)("");
+  const [searchQuery, setSearchQuery] = (0, import_react2.useState)("");
   const preferredCurrencies = preferredCurrencyCodes.map(
     (code) => currencies.find(
       (currency) => currency.currency_code.toLowerCase() === code.toLowerCase()
@@ -834,7 +946,7 @@ function CurrencyModal({
 
 // src/hooks/use-user-ip.ts
 var import_react_query = require("@tanstack/react-query");
-var import_core2 = require("@unifold/core");
+var import_core3 = require("@unifold/core");
 function useUserIp() {
   const {
     data: userIpInfo,
@@ -843,7 +955,7 @@ function useUserIp() {
   } = (0, import_react_query.useQuery)({
     queryKey: ["unifold", "userIpInfo"],
     queryFn: async () => {
-      const data = await (0, import_core2.getIpAddress)();
+      const data = await (0, import_core3.getIpAddress)();
       return {
         alpha2: data.alpha2.toLowerCase(),
         alpha3: data.alpha3?.toLowerCase(),
@@ -914,7 +1026,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: {
@@ -923,7 +1047,7 @@ var en_default = {
     },
     depositWithCard: {
       title: "Deposit with Card",
-      subtitle: "$50,000 limit \u2022 2 min"
+      subtitle: "$50,000 limit"
     },
     quotes: "Quotes"
   },
@@ -941,10 +1065,17 @@ 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
-var import_react2 = require("react");
-var import_core3 = require("@unifold/core");
+var import_react3 = require("react");
+var import_core4 = require("@unifold/core");
 function useDepositPolling({
   userId,
   publishableKey,
@@ -952,18 +1083,18 @@ function useDepositPolling({
   onDepositSuccess,
   onDepositError
 }) {
-  const [executions, setExecutions] = (0, import_react2.useState)([]);
-  const [isPolling, setIsPolling] = (0, import_react2.useState)(false);
-  const pollingIntervalRef = (0, import_react2.useRef)(
+  const [executions, setExecutions] = (0, import_react3.useState)([]);
+  const [isPolling, setIsPolling] = (0, import_react3.useState)(false);
+  const pollingIntervalRef = (0, import_react3.useRef)(
     null
   );
-  const [modalOpenedAt] = (0, import_react2.useState)(/* @__PURE__ */ new Date());
-  const [trackedExecutions, setTrackedExecutions] = (0, import_react2.useState)(/* @__PURE__ */ new Map());
-  (0, import_react2.useEffect)(() => {
+  const [modalOpenedAt] = (0, import_react3.useState)(/* @__PURE__ */ new Date());
+  const [trackedExecutions, setTrackedExecutions] = (0, import_react3.useState)(/* @__PURE__ */ new Map());
+  (0, import_react3.useEffect)(() => {
     if (!userId || !modalOpenedAt || !enabled) return;
     const pollInterval = setInterval(async () => {
       try {
-        const response = await (0, import_core3.queryExecutions)(userId, publishableKey);
+        const response = await (0, import_core4.queryExecutions)(userId, publishableKey);
         let executionToShow = null;
         for (const execution of response.data) {
           const executionTime = execution.created_at ? new Date(execution.created_at) : null;
@@ -976,13 +1107,13 @@ function useDepositPolling({
             break;
           }
           const inProgressStatuses = [
-            import_core3.ExecutionStatus.PENDING,
-            import_core3.ExecutionStatus.WAITING,
-            import_core3.ExecutionStatus.DELAYED
+            import_core4.ExecutionStatus.PENDING,
+            import_core4.ExecutionStatus.WAITING,
+            import_core4.ExecutionStatus.DELAYED
           ];
           const terminalStatuses = [
-            import_core3.ExecutionStatus.SUCCEEDED,
-            import_core3.ExecutionStatus.FAILED
+            import_core4.ExecutionStatus.SUCCEEDED,
+            import_core4.ExecutionStatus.FAILED
           ];
           if (inProgressStatuses.includes(trackedStatus) && terminalStatuses.includes(execution.status)) {
             executionToShow = execution;
@@ -1008,17 +1139,17 @@ function useDepositPolling({
             return updated;
           });
           const inProgressStatuses = [
-            import_core3.ExecutionStatus.PENDING,
-            import_core3.ExecutionStatus.WAITING,
-            import_core3.ExecutionStatus.DELAYED
+            import_core4.ExecutionStatus.PENDING,
+            import_core4.ExecutionStatus.WAITING,
+            import_core4.ExecutionStatus.DELAYED
           ];
-          if (execution.status === import_core3.ExecutionStatus.SUCCEEDED && onDepositSuccess && (!previousStatus || inProgressStatuses.includes(previousStatus))) {
+          if (execution.status === import_core4.ExecutionStatus.SUCCEEDED && onDepositSuccess && (!previousStatus || inProgressStatuses.includes(previousStatus))) {
             onDepositSuccess({
               message: "Deposit completed successfully",
               executionId: execution.id,
               transaction: execution
             });
-          } else if (execution.status === import_core3.ExecutionStatus.FAILED && onDepositError && previousStatus !== import_core3.ExecutionStatus.FAILED) {
+          } else if (execution.status === import_core4.ExecutionStatus.FAILED && onDepositError && previousStatus !== import_core4.ExecutionStatus.FAILED) {
             onDepositError({
               message: "Deposit failed",
               code: "DEPOSIT_FAILED",
@@ -1062,17 +1193,17 @@ function useDepositPolling({
 }
 
 // src/components/deposits/DepositPollingToasts.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/deposits/DepositSuccessToast.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_lucide_react5 = require("lucide-react");
-var import_core5 = require("@unifold/core");
+var import_core6 = require("@unifold/core");
 
 // src/components/deposits/DepositDetailContent.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_lucide_react4 = require("lucide-react");
-var import_core4 = require("@unifold/core");
+var import_core5 = require("@unifold/core");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function formatCurrency(currency) {
   if (!currency) return "";
@@ -1084,15 +1215,15 @@ function formatCurrency(currency) {
 }
 function DepositDetailContent({ execution }) {
   const { colors: colors2, fonts, components } = useTheme();
-  const [chains, setChains] = (0, import_react3.useState)([]);
-  const [showNetworkDetails, setShowNetworkDetails] = (0, import_react3.useState)(false);
-  (0, import_react3.useEffect)(() => {
-    (0, import_core4.getTokenChains)().then((response) => setChains(response.data)).catch((err) => console.error("Failed to fetch chains:", err));
+  const [chains, setChains] = (0, import_react4.useState)([]);
+  const [showNetworkDetails, setShowNetworkDetails] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    (0, import_core5.getTokenChains)().then((response) => setChains(response.data)).catch((err) => console.error("Failed to fetch chains:", err));
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setShowNetworkDetails(false);
   }, [execution?.id]);
-  const isPending = execution.status === import_core4.ExecutionStatus.PENDING || execution.status === import_core4.ExecutionStatus.WAITING || execution.status === import_core4.ExecutionStatus.DELAYED;
+  const isPending = execution.status === import_core5.ExecutionStatus.PENDING || execution.status === import_core5.ExecutionStatus.WAITING || execution.status === import_core5.ExecutionStatus.DELAYED;
   const formatDateTime = (timestamp) => {
     try {
       const date = new Date(timestamp);
@@ -1162,7 +1293,7 @@ function DepositDetailContent({ execution }) {
     return "$0.00";
   };
   const getNetworkName = (chainType, chainId) => {
-    return (0, import_core4.getChainName)(chains, chainType, chainId);
+    return (0, import_core5.getChainName)(chains, chainType, chainId);
   };
   const formatTransactionHash = (hash) => {
     if (!hash || hash.length < 12) return hash;
@@ -1174,7 +1305,7 @@ function DepositDetailContent({ execution }) {
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "img",
           {
-            src: execution.destination_token_metadata?.icon_url || (0, import_core4.getIconUrl)("/icons/tokens/svg/usdc.svg"),
+            src: execution.destination_token_metadata?.icon_url || (0, import_core5.getIconUrl)("/icons/tokens/svg/usdc.svg"),
             alt: "Token",
             width: 64,
             height: 64,
@@ -1384,6 +1515,37 @@ function DepositDetailContent({ execution }) {
               ]
             }
           ),
+          isPending && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "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__ */ (0, import_jsx_runtime7.jsx)(
+                  "span",
+                  {
+                    className: "uf-text-sm",
+                    style: {
+                      color: components.card.labelColor,
+                      fontFamily: fonts.regular
+                    },
+                    children: "Estimated delivery time"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "span",
+                  {
+                    style: {
+                      color: components.card.titleColor,
+                      fontFamily: fonts.regular,
+                      fontSize: "14px"
+                    },
+                    children: formatEstimatedTime(execution?.estimated_processing_time)
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "div",
             {
@@ -1570,9 +1732,9 @@ function DepositSuccessToast({
   onClose,
   execution
 }) {
-  const [detailModalOpen, setDetailModalOpen] = (0, import_react4.useState)(false);
+  const [detailModalOpen, setDetailModalOpen] = (0, import_react5.useState)(false);
   const { themeClass, colors: colors2, fonts, components } = useTheme();
-  const isPending = status === import_core5.ExecutionStatus.PENDING || status === import_core5.ExecutionStatus.WAITING || status === import_core5.ExecutionStatus.DELAYED;
+  const isPending = status === import_core6.ExecutionStatus.PENDING || status === import_core6.ExecutionStatus.WAITING || status === import_core6.ExecutionStatus.DELAYED;
   const formatDateTime = (timestamp) => {
     try {
       const date = new Date(timestamp);
@@ -1650,7 +1812,7 @@ function DepositSuccessToast({
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "img",
                 {
-                  src: tokenIconUrl || (0, import_core5.getIconUrl)("/icons/tokens/svg/usdc.svg"),
+                  src: tokenIconUrl || (0, import_core6.getIconUrl)("/icons/tokens/svg/usdc.svg"),
                   alt: "Token",
                   width: 36,
                   height: 36,
@@ -1704,14 +1866,27 @@ function DepositSuccessToast({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "div",
-              {
-                className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
-                style: { color: colors2.background },
-                children: formatUsdAmount(sourceAmountUsd)
-              }
-            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "uf-flex-shrink-0 uf-text-right", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  className: "uf-font-medium uf-text-sm",
+                  style: { color: colors2.background },
+                  children: formatUsdAmount(sourceAmountUsd)
+                }
+              ),
+              isPending && execution?.estimated_processing_time && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "p",
+                {
+                  className: "uf-text-xs",
+                  style: { color: colors2.foregroundMuted },
+                  children: [
+                    "Est. ",
+                    formatEstimatedTime(execution.estimated_processing_time)
+                  ]
+                }
+              )
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
@@ -1760,7 +1935,7 @@ function DepositPollingToasts({
   executions,
   horizontalPadding = "24px"
 }) {
-  const [closedExecutionIds, setClosedExecutionIds] = (0, import_react5.useState)(
+  const [closedExecutionIds, setClosedExecutionIds] = (0, import_react6.useState)(
     /* @__PURE__ */ new Set()
   );
   const handleClose = (executionId) => {
@@ -1841,28 +2016,28 @@ function BuyWithCard({
   assetCdnUrl
 }) {
   const { colors: colors2, fonts, components } = useTheme();
-  const [amount, setAmount] = (0, import_react6.useState)("");
-  const [currency, setCurrency] = (0, import_react6.useState)("usd");
-  const [hasManualCurrencySelection, setHasManualCurrencySelection] = (0, import_react6.useState)(false);
-  const [hasManualAmountEntry, setHasManualAmountEntry] = (0, import_react6.useState)(false);
-  const [showCurrencyModal, setShowCurrencyModal] = (0, import_react6.useState)(false);
-  const [quotes, setQuotes] = (0, import_react6.useState)([]);
-  const [quotesLoading, setQuotesLoading] = (0, import_react6.useState)(false);
-  const [quotesError, setQuotesError] = (0, import_react6.useState)(null);
-  const [amountValidationError, setAmountValidationError] = (0, import_react6.useState)(null);
-  const [internalView, setInternalView] = (0, import_react6.useState)("amount");
-  const [defaultToken, setDefaultToken] = (0, import_react6.useState)(
+  const [amount, setAmount] = (0, import_react7.useState)("");
+  const [currency, setCurrency] = (0, import_react7.useState)("usd");
+  const [hasManualCurrencySelection, setHasManualCurrencySelection] = (0, import_react7.useState)(false);
+  const [hasManualAmountEntry, setHasManualAmountEntry] = (0, import_react7.useState)(false);
+  const [showCurrencyModal, setShowCurrencyModal] = (0, import_react7.useState)(false);
+  const [quotes, setQuotes] = (0, import_react7.useState)([]);
+  const [quotesLoading, setQuotesLoading] = (0, import_react7.useState)(false);
+  const [quotesError, setQuotesError] = (0, import_react7.useState)(null);
+  const [amountValidationError, setAmountValidationError] = (0, import_react7.useState)(null);
+  const [internalView, setInternalView] = (0, import_react7.useState)("amount");
+  const [defaultToken, setDefaultToken] = (0, import_react7.useState)(
     null
   );
-  const [defaultTokenLoading, setDefaultTokenLoading] = (0, import_react6.useState)(false);
+  const [defaultTokenLoading, setDefaultTokenLoading] = (0, import_react7.useState)(false);
   const { userIpInfo, isLoading: isLoadingIp } = useUserIp();
-  const [onrampSession, setOnrampSession] = (0, import_react6.useState)(
+  const [onrampSession, setOnrampSession] = (0, import_react7.useState)(
     null
   );
   const currentView = externalView ?? internalView;
   const showQuotesView = currentView === "quotes";
   const showOnrampView = currentView === "onramp";
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (externalView) {
       setInternalView(externalView);
     }
@@ -1875,31 +2050,31 @@ function BuyWithCard({
       onViewChange?.(newView);
     }
   };
-  const [selectedProvider, setSelectedProvider] = (0, import_react6.useState)(
+  const [selectedProvider, setSelectedProvider] = (0, import_react7.useState)(
     null
   );
-  const [isAutoSelected, setIsAutoSelected] = (0, import_react6.useState)(true);
-  const [autoSelectedProvider, setAutoSelectedProvider] = (0, import_react6.useState)(null);
-  const [hoveredProviderIndex, setHoveredProviderIndex] = (0, import_react6.useState)(null);
-  const [hasManualSelection, setHasManualSelection] = (0, import_react6.useState)(false);
-  const selectedProviderRef = (0, import_react6.useRef)(null);
-  const hasManualSelectionRef = (0, import_react6.useRef)(false);
-  (0, import_react6.useEffect)(() => {
+  const [isAutoSelected, setIsAutoSelected] = (0, import_react7.useState)(true);
+  const [autoSelectedProvider, setAutoSelectedProvider] = (0, import_react7.useState)(null);
+  const [hoveredProviderIndex, setHoveredProviderIndex] = (0, import_react7.useState)(null);
+  const [hasManualSelection, setHasManualSelection] = (0, import_react7.useState)(false);
+  const selectedProviderRef = (0, import_react7.useRef)(null);
+  const hasManualSelectionRef = (0, import_react7.useRef)(false);
+  (0, import_react7.useEffect)(() => {
     selectedProviderRef.current = selectedProvider;
   }, [selectedProvider]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     hasManualSelectionRef.current = hasManualSelection;
   }, [hasManualSelection]);
-  const [internalWallets, setInternalWallets] = (0, import_react6.useState)([]);
-  const [walletsLoading, setWalletsLoading] = (0, import_react6.useState)(
+  const [internalWallets, setInternalWallets] = (0, import_react7.useState)([]);
+  const [walletsLoading, setWalletsLoading] = (0, import_react7.useState)(
     !externalWallets?.length
   );
   const wallets = externalWallets?.length ? externalWallets : internalWallets;
-  const [countdown, setCountdown] = (0, import_react6.useState)(60);
-  const [fiatCurrencies, setFiatCurrencies] = (0, import_react6.useState)([]);
-  const [preferredCurrencyCodes, setPreferredCurrencyCodes] = (0, import_react6.useState)([]);
-  const [currenciesLoading, setCurrenciesLoading] = (0, import_react6.useState)(true);
-  const [destinationToken, setDestinationToken] = (0, import_react6.useState)(null);
+  const [countdown, setCountdown] = (0, import_react7.useState)(60);
+  const [fiatCurrencies, setFiatCurrencies] = (0, import_react7.useState)([]);
+  const [preferredCurrencyCodes, setPreferredCurrencyCodes] = (0, import_react7.useState)([]);
+  const [currenciesLoading, setCurrenciesLoading] = (0, import_react7.useState)(true);
+  const [destinationToken, setDestinationToken] = (0, import_react7.useState)(null);
   const { executions, isPolling } = useDepositPolling({
     userId,
     publishableKey,
@@ -1911,10 +2086,10 @@ function BuyWithCard({
   const destinationTokenIcon = destinationToken?.icon_url;
   const destinationChainIcon = destinationToken?.chain_icon_url;
   const destinationChainName = destinationToken?.chain_name;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     async function fetchFiatCurrencies() {
       try {
-        const response = await (0, import_core6.getFiatCurrencies)(publishableKey);
+        const response = await (0, import_core7.getFiatCurrencies)(publishableKey);
         setFiatCurrencies(response.data);
         setPreferredCurrencyCodes(response.preferred || []);
       } catch (err) {
@@ -1925,7 +2100,7 @@ function BuyWithCard({
     }
     fetchFiatCurrencies();
   }, [publishableKey]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (hasManualCurrencySelection) return;
     if (fiatCurrencies.length === 0 || !userIpInfo?.alpha2) return;
     const userCountryCode = userIpInfo.alpha2.toUpperCase();
@@ -1952,8 +2127,8 @@ function BuyWithCard({
     amount,
     hasManualAmountEntry
   ]);
-  const prevCurrencyRef = (0, import_react6.useRef)(null);
-  (0, import_react6.useEffect)(() => {
+  const prevCurrencyRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     if (fiatCurrencies.length === 0) return;
     if (prevCurrencyRef.current !== null && prevCurrencyRef.current !== currency) {
       const currentCurrency = fiatCurrencies.find(
@@ -1965,7 +2140,7 @@ function BuyWithCard({
     }
     prevCurrencyRef.current = currency;
   }, [currency]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (externalWallets?.length) {
       setWalletsLoading(false);
       return;
@@ -1980,7 +2155,7 @@ function BuyWithCard({
       if (isCancelled) return;
       setWalletsLoading(true);
       try {
-        const response = await (0, import_core6.createDepositAddress)(
+        const response = await (0, import_core7.createDepositAddress)(
           {
             external_user_id: userId,
             recipient_address: recipientAddress,
@@ -2018,10 +2193,10 @@ function BuyWithCard({
     publishableKey,
     externalWallets
   ]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     async function fetchDestinationToken() {
       try {
-        const response = await (0, import_core6.getTokenMetadata)(
+        const response = await (0, import_core7.getTokenMetadata)(
           {
             chain_type: destinationChainType || "",
             chain_id: destinationChainId || "",
@@ -2036,7 +2211,7 @@ function BuyWithCard({
     }
     fetchDestinationToken();
   }, [publishableKey]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     async function fetchDefaultToken() {
       if (!destinationTokenAddress || !destinationChainId || !destinationChainType) {
         return;
@@ -2046,7 +2221,7 @@ function BuyWithCard({
       }
       setDefaultTokenLoading(true);
       try {
-        const response = await (0, import_core6.getDefaultOnrampToken)(
+        const response = await (0, import_core7.getDefaultOnrampToken)(
           {
             country_code: userIpInfo?.alpha2?.toUpperCase() || "US",
             subdivision_code: userIpInfo?.state || void 0,
@@ -2072,7 +2247,7 @@ function BuyWithCard({
     isLoadingIp,
     publishableKey
   ]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const amountNum = parseFloat(amount);
     if (isNaN(amountNum) || amountNum <= 0) {
       setQuotes([]);
@@ -2134,7 +2309,7 @@ function BuyWithCard({
         destination_network: defaultToken.destination_network,
         subdivision_code: userIpInfo?.state || void 0
       };
-      const response = await (0, import_core6.getOnrampQuotes)(request, publishableKey);
+      const response = await (0, import_core7.getOnrampQuotes)(request, publishableKey);
       setQuotes(response.data);
       const currentHasManualSelection = hasManualSelectionRef.current;
       const currentSelectedProvider = selectedProviderRef.current;
@@ -2181,7 +2356,7 @@ function BuyWithCard({
       setQuotesLoading(false);
     }
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (quotes.length === 0) return;
     const timer = setInterval(() => {
       setCountdown((prev) => {
@@ -2218,7 +2393,7 @@ function BuyWithCard({
   const handleContinue = () => {
     if (!selectedProvider) return;
     if (!defaultToken) return;
-    const wallet = (0, import_core6.getWalletByChainType)(
+    const wallet = (0, import_core7.getWalletByChainType)(
       wallets,
       defaultToken.destination_token_metadata.chain_type
     );
@@ -2236,7 +2411,7 @@ function BuyWithCard({
       wallet_address: wallet.address,
       subdivision_code: userIpInfo?.state || void 0
     };
-    const sessionStartUrl = (0, import_core6.getOnrampSessionStartUrl)(
+    const sessionStartUrl = (0, import_core7.getOnrampSessionStartUrl)(
       sessionRequest,
       publishableKey
     );
@@ -2286,7 +2461,7 @@ function BuyWithCard({
                       selectedCurrencyData && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "img",
                         {
-                          src: (0, import_core6.getPreferredIconUrl)(
+                          src: (0, import_core7.getPreferredIconUrl)(
                             selectedCurrencyData.icon_urls,
                             "png"
                           ) || selectedCurrencyData.icon_url,
@@ -2516,6 +2691,20 @@ function BuyWithCard({
                     },
                     children: quotesError
                   }
+                ),
+                defaultToken?.estimated_processing_time && !quotesLoading && selectedProvider && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                  "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__ */ (0, import_jsx_runtime10.jsx)(
@@ -2633,7 +2822,7 @@ function BuyWithCard({
                   /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "uf-h-8 uf-flex uf-items-center uf-justify-center uf-mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "img",
                     {
-                      src: (0, import_core6.getIconUrlWithCdn)(
+                      src: (0, import_core7.getIconUrlWithCdn)(
                         `/icons/currencies/png/${onrampSession.sourceCurrency.toLowerCase()}.png`,
                         assetCdnUrl
                       ),
@@ -2650,7 +2839,7 @@ function BuyWithCard({
                     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "img",
                       {
-                        src: defaultToken?.destination_token_metadata?.icon_url || (0, import_core6.getIconUrlWithCdn)(
+                        src: defaultToken?.destination_token_metadata?.icon_url || (0, import_core7.getIconUrlWithCdn)(
                           "/icons/tokens/png/usdc.png",
                           assetCdnUrl
                         ),
@@ -2661,7 +2850,7 @@ function BuyWithCard({
                     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "img",
                       {
-                        src: defaultToken?.destination_token_metadata?.chain.icon_url || (0, import_core6.getIconUrlWithCdn)(
+                        src: defaultToken?.destination_token_metadata?.chain.icon_url || (0, import_core7.getIconUrlWithCdn)(
                           "/icons/networks/png/polygon.png",
                           assetCdnUrl
                         ),
@@ -2679,7 +2868,7 @@ function BuyWithCard({
                     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "img",
                       {
-                        src: destinationTokenIcon || (0, import_core6.getIconUrlWithCdn)(
+                        src: destinationTokenIcon || (0, import_core7.getIconUrlWithCdn)(
                           "/icons/tokens/png/usdc.png",
                           assetCdnUrl
                         ),
@@ -2733,18 +2922,18 @@ function BuyWithCard({
 }
 
 // src/components/deposits/DepositsModal.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/deposits/DepositExecutionItem.tsx
 var import_lucide_react7 = require("lucide-react");
-var import_core7 = require("@unifold/core");
+var import_core8 = require("@unifold/core");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function DepositExecutionItem({
   execution,
   onClick
 }) {
   const { colors: colors2, fonts, components } = useTheme();
-  const isPending = execution.status === import_core7.ExecutionStatus.PENDING || execution.status === import_core7.ExecutionStatus.WAITING || execution.status === import_core7.ExecutionStatus.DELAYED;
+  const isPending = execution.status === import_core8.ExecutionStatus.PENDING || execution.status === import_core8.ExecutionStatus.WAITING || execution.status === import_core8.ExecutionStatus.DELAYED;
   const formatDateTime = (timestamp) => {
     try {
       const date = new Date(timestamp);
@@ -2787,7 +2976,7 @@ function DepositExecutionItem({
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "img",
             {
-              src: execution.destination_token_metadata?.icon_url || (0, import_core7.getIconUrl)("/icons/tokens/svg/usdc.svg"),
+              src: execution.destination_token_metadata?.icon_url || (0, import_core8.getIconUrl)("/icons/tokens/svg/usdc.svg"),
               alt: "Token",
               width: 36,
               height: 36,
@@ -2963,7 +3152,7 @@ function ThemeStyleInjector({
 }
 
 // src/components/deposits/DepositsModal.tsx
-var import_core8 = require("@unifold/core");
+var import_core9 = require("@unifold/core");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function DepositsModal({
   open,
@@ -2975,13 +3164,13 @@ function DepositsModal({
   themeClass = ""
 }) {
   const { colors: colors2 } = useTheme();
-  const [allExecutions, setAllExecutions] = (0, import_react7.useState)(sessionExecutions);
-  const [selectedExecution, setSelectedExecution] = (0, import_react7.useState)(null);
-  (0, import_react7.useEffect)(() => {
+  const [allExecutions, setAllExecutions] = (0, import_react8.useState)(sessionExecutions);
+  const [selectedExecution, setSelectedExecution] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
     if (!open || !userId) return;
     const fetchExecutions = async () => {
       try {
-        const response = await (0, import_core8.queryExecutions)(userId, publishableKey);
+        const response = await (0, import_core9.queryExecutions)(userId, publishableKey);
         const sorted = [...response.data].sort((a, b) => {
           const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
           const timeB = b.created_at ? new Date(b.created_at).getTime() : 0;
@@ -2999,7 +3188,7 @@ function DepositsModal({
       clearInterval(pollInterval);
     };
   }, [open, userId, publishableKey, sessionExecutions]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!open) {
       setSelectedExecution(null);
     }
@@ -3325,11 +3514,11 @@ function DepositTrackerButton({
 }
 
 // src/components/deposits/DepositModal.tsx
-var import_core12 = require("@unifold/core");
+var import_core14 = require("@unifold/core");
 
 // src/hooks/use-allowed-country.ts
 var import_react_query2 = require("@tanstack/react-query");
-var import_core9 = require("@unifold/core");
+var import_core10 = require("@unifold/core");
 function useAllowedCountry(publishableKey) {
   const {
     data: ipData,
@@ -3337,7 +3526,7 @@ function useAllowedCountry(publishableKey) {
     error: ipError
   } = (0, import_react_query2.useQuery)({
     queryKey: ["unifold", "ipAddress"],
-    queryFn: () => (0, import_core9.getIpAddress)(),
+    queryFn: () => (0, import_core10.getIpAddress)(),
     refetchOnMount: false,
     refetchOnReconnect: true,
     refetchOnWindowFocus: false,
@@ -3352,7 +3541,7 @@ function useAllowedCountry(publishableKey) {
     error: configError
   } = (0, import_react_query2.useQuery)({
     queryKey: ["unifold", "projectConfig", publishableKey],
-    queryFn: () => (0, import_core9.getProjectConfig)(publishableKey),
+    queryFn: () => (0, import_core10.getProjectConfig)(publishableKey),
     refetchOnMount: false,
     refetchOnReconnect: true,
     refetchOnWindowFocus: false,
@@ -3381,12 +3570,70 @@ function useAllowedCountry(publishableKey) {
   };
 }
 
+// src/hooks/use-address-validation.ts
+var import_react_query3 = require("@tanstack/react-query");
+var import_core11 = require("@unifold/core");
+function useAddressValidation({
+  recipientAddress,
+  destinationChainType,
+  destinationChainId,
+  destinationTokenAddress,
+  publishableKey,
+  enabled = true,
+  refetchOnMount = false
+}) {
+  const shouldValidate = enabled && !!recipientAddress && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress;
+  const { data, isLoading, error } = (0, import_react_query3.useQuery)({
+    queryKey: [
+      "unifold",
+      "addressValidation",
+      recipientAddress,
+      destinationChainType,
+      destinationChainId,
+      destinationTokenAddress
+    ],
+    queryFn: () => (0, import_core11.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
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_lucide_react12 = require("lucide-react");
 
 // src/components/deposits/StyledQRCode.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_qr_code_styling = __toESM(require("qr-code-styling"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function StyledQRCode({
@@ -3396,9 +3643,9 @@ function StyledQRCode({
   imageSize = 50,
   darkMode = false
 }) {
-  const ref = (0, import_react8.useRef)(null);
-  const qrCodeRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const ref = (0, import_react9.useRef)(null);
+  const qrCodeRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
     if (!ref.current) return;
     if (!qrCodeRef.current) {
       qrCodeRef.current = new import_qr_code_styling.default({
@@ -3438,7 +3685,7 @@ function StyledQRCode({
       qrCodeRef.current.append(ref.current);
     }
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (qrCodeRef.current) {
       qrCodeRef.current.update({
         data: value,
@@ -3479,7 +3726,7 @@ function StyledQRCode({
 }
 
 // src/components/deposits/TokenSelectorSheet.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_lucide_react11 = require("lucide-react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var STORAGE_KEY = "unifold_recent_tokens";
@@ -3537,13 +3784,13 @@ function TokenSelectorSheet({
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
-  const [searchQuery, setSearchQuery] = (0, import_react9.useState)("");
-  const [recentTokens, setRecentTokens] = (0, import_react9.useState)([]);
-  const [hoveredTokenKey, setHoveredTokenKey] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
+  const [searchQuery, setSearchQuery] = (0, import_react10.useState)("");
+  const [recentTokens, setRecentTokens] = (0, import_react10.useState)([]);
+  const [hoveredTokenKey, setHoveredTokenKey] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
     setRecentTokens(getRecentTokens());
   }, []);
-  const allOptions = (0, import_react9.useMemo)(() => {
+  const allOptions = (0, import_react10.useMemo)(() => {
     const options = [];
     tokens.forEach((token) => {
       token.chains.forEach((chain) => {
@@ -3552,7 +3799,7 @@ function TokenSelectorSheet({
     });
     return options;
   }, [tokens]);
-  const quickSelectOptions = (0, import_react9.useMemo)(() => {
+  const quickSelectOptions = (0, import_react10.useMemo)(() => {
     const result = [];
     const seen = /* @__PURE__ */ new Set();
     const addOption = (symbol, chainType, chainId, isRecent) => {
@@ -3584,7 +3831,7 @@ function TokenSelectorSheet({
     });
     setRecentTokens(updated);
   };
-  const filteredOptions = (0, import_react9.useMemo)(() => {
+  const filteredOptions = (0, import_react10.useMemo)(() => {
     if (!searchQuery.trim()) return allOptions;
     const query = searchQuery.toLowerCase();
     return allOptions.filter(
@@ -3954,7 +4201,7 @@ var TooltipContent = React8.forwardRef(({ className, sideOffset = 4, ...props },
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/deposits/TransferCryptoSingleInput.tsx
-var import_core10 = require("@unifold/core");
+var import_core12 = require("@unifold/core");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var t2 = i18n.transferCrypto;
 var getChainKey = (chainId, chainType) => {
@@ -3978,13 +4225,13 @@ function TransferCryptoSingleInput({
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
-  const [token, setToken] = (0, import_react10.useState)("USDC");
-  const [chain, setChain] = (0, import_react10.useState)("solana:mainnet");
-  const [copied, setCopied] = (0, import_react10.useState)(false);
-  const [internalWallets, setInternalWallets] = (0, import_react10.useState)([]);
-  const [loading, setLoading] = (0, import_react10.useState)(!externalWallets?.length);
+  const [token, setToken] = (0, import_react11.useState)("USDC");
+  const [chain, setChain] = (0, import_react11.useState)("solana:mainnet");
+  const [copied, setCopied] = (0, import_react11.useState)(false);
+  const [internalWallets, setInternalWallets] = (0, import_react11.useState)([]);
+  const [loading, setLoading] = (0, import_react11.useState)(!externalWallets?.length);
   const wallets = externalWallets?.length ? externalWallets : internalWallets;
-  const [error, setError] = (0, import_react10.useState)(null);
+  const [error, setError] = (0, import_react11.useState)(null);
   const { executions: depositExecutions, isPolling } = useDepositPolling({
     userId,
     publishableKey,
@@ -3992,11 +4239,11 @@ function TransferCryptoSingleInput({
     onDepositSuccess,
     onDepositError
   });
-  const [supportedTokens, setSupportedTokens] = (0, import_react10.useState)([]);
-  const [tokensLoading, setTokensLoading] = (0, import_react10.useState)(true);
-  const [detailsExpanded, setDetailsExpanded] = (0, import_react10.useState)(false);
-  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react10.useState)(false);
-  const [tokenSelectorOpen, setTokenSelectorOpen] = (0, import_react10.useState)(false);
+  const [supportedTokens, setSupportedTokens] = (0, import_react11.useState)([]);
+  const [tokensLoading, setTokensLoading] = (0, import_react11.useState)(true);
+  const [detailsExpanded, setDetailsExpanded] = (0, import_react11.useState)(false);
+  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react11.useState)(false);
+  const [tokenSelectorOpen, setTokenSelectorOpen] = (0, import_react11.useState)(false);
   const allChainsMap = /* @__PURE__ */ new Map();
   supportedTokens.forEach((t5) => {
     t5.chains.forEach((c) => {
@@ -4012,9 +4259,9 @@ function TransferCryptoSingleInput({
     (c) => c.chain_type === currentChainCombo.chainType && c.chain_id === currentChainCombo.chainId
   );
   const currentChainType = currentChainData?.chain_type || "ethereum";
-  const currentWallet = (0, import_core10.getWalletByChainType)(wallets, currentChainType);
+  const currentWallet = (0, import_core12.getWalletByChainType)(wallets, currentChainType);
   const depositAddress = currentWallet?.address || "";
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     async function fetchSupportedTokens() {
       try {
         setTokensLoading(true);
@@ -4023,7 +4270,7 @@ function TransferCryptoSingleInput({
           destination_chain_id: destinationChainId,
           destination_chain_type: destinationChainType
         } : void 0;
-        const response = await (0, import_core10.getSupportedDepositTokens)(
+        const response = await (0, import_core12.getSupportedDepositTokens)(
           publishableKey,
           options
         );
@@ -4086,12 +4333,12 @@ function TransferCryptoSingleInput({
     destinationChainId,
     destinationChainType
   ]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (onExecutionsChange) {
       onExecutionsChange(depositExecutions);
     }
   }, [depositExecutions, onExecutionsChange]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (externalWallets?.length) {
       setLoading(false);
       return;
@@ -4106,7 +4353,7 @@ function TransferCryptoSingleInput({
       if (isCancelled) return;
       setLoading(true);
       try {
-        const response = await (0, import_core10.createDepositAddress)(
+        const response = await (0, import_core12.createDepositAddress)(
           {
             external_user_id: userId,
             recipient_address: recipientAddress,
@@ -4148,7 +4395,7 @@ function TransferCryptoSingleInput({
     publishableKey,
     externalWallets
   ]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!supportedTokens.length) return;
     const currentToken = supportedTokens.find((t5) => t5.symbol === token);
     if (!currentToken || currentToken.chains.length === 0) return;
@@ -4526,7 +4773,7 @@ function TransferCryptoSingleInput({
 }
 
 // src/components/deposits/TransferCryptoDoubleInput.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_lucide_react14 = require("lucide-react");
 
 // src/components/shared/select.tsx
@@ -4651,7 +4898,7 @@ var SelectSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/deposits/TransferCryptoDoubleInput.tsx
-var import_core11 = require("@unifold/core");
+var import_core13 = require("@unifold/core");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var t3 = i18n.transferCrypto;
 var getChainKey2 = (chainId, chainType) => {
@@ -4675,13 +4922,13 @@ function TransferCryptoDoubleInput({
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
-  const [token, setToken] = (0, import_react11.useState)("USDC");
-  const [chain, setChain] = (0, import_react11.useState)("solana:mainnet");
-  const [copied, setCopied] = (0, import_react11.useState)(false);
-  const [internalWallets, setInternalWallets] = (0, import_react11.useState)([]);
-  const [loading, setLoading] = (0, import_react11.useState)(!externalWallets?.length);
+  const [token, setToken] = (0, import_react12.useState)("USDC");
+  const [chain, setChain] = (0, import_react12.useState)("solana:mainnet");
+  const [copied, setCopied] = (0, import_react12.useState)(false);
+  const [internalWallets, setInternalWallets] = (0, import_react12.useState)([]);
+  const [loading, setLoading] = (0, import_react12.useState)(!externalWallets?.length);
   const wallets = externalWallets?.length ? externalWallets : internalWallets;
-  const [error, setError] = (0, import_react11.useState)(null);
+  const [error, setError] = (0, import_react12.useState)(null);
   const { executions: depositExecutions, isPolling } = useDepositPolling({
     userId,
     publishableKey,
@@ -4689,10 +4936,10 @@ function TransferCryptoDoubleInput({
     onDepositSuccess,
     onDepositError
   });
-  const [supportedTokens, setSupportedTokens] = (0, import_react11.useState)([]);
-  const [tokensLoading, setTokensLoading] = (0, import_react11.useState)(true);
-  const [detailsExpanded, setDetailsExpanded] = (0, import_react11.useState)(false);
-  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react11.useState)(false);
+  const [supportedTokens, setSupportedTokens] = (0, import_react12.useState)([]);
+  const [tokensLoading, setTokensLoading] = (0, import_react12.useState)(true);
+  const [detailsExpanded, setDetailsExpanded] = (0, import_react12.useState)(false);
+  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react12.useState)(false);
   const allChainsMap = /* @__PURE__ */ new Map();
   supportedTokens.forEach((t5) => {
     t5.chains.forEach((c) => {
@@ -4708,9 +4955,9 @@ function TransferCryptoDoubleInput({
     (c) => c.chain_type === currentChainCombo.chainType && c.chain_id === currentChainCombo.chainId
   );
   const currentChainType = currentChainData?.chain_type || "ethereum";
-  const currentWallet = (0, import_core11.getWalletByChainType)(wallets, currentChainType);
+  const currentWallet = (0, import_core13.getWalletByChainType)(wallets, currentChainType);
   const depositAddress = currentWallet?.address || "";
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     async function fetchSupportedTokens() {
       try {
         setTokensLoading(true);
@@ -4719,7 +4966,7 @@ function TransferCryptoDoubleInput({
           destination_chain_id: destinationChainId,
           destination_chain_type: destinationChainType
         } : void 0;
-        const response = await (0, import_core11.getSupportedDepositTokens)(
+        const response = await (0, import_core13.getSupportedDepositTokens)(
           publishableKey,
           options
         );
@@ -4753,12 +5000,12 @@ function TransferCryptoDoubleInput({
     destinationChainId,
     destinationChainType
   ]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (onExecutionsChange) {
       onExecutionsChange(depositExecutions);
     }
   }, [depositExecutions, onExecutionsChange]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (externalWallets?.length) {
       setLoading(false);
       return;
@@ -4773,7 +5020,7 @@ function TransferCryptoDoubleInput({
       if (isCancelled) return;
       setLoading(true);
       try {
-        const response = await (0, import_core11.createDepositAddress)(
+        const response = await (0, import_core13.createDepositAddress)(
           {
             external_user_id: userId,
             recipient_address: recipientAddress,
@@ -4815,7 +5062,7 @@ function TransferCryptoDoubleInput({
     publishableKey,
     externalWallets
   ]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!supportedTokens.length) return;
     const currentToken = supportedTokens.find((t5) => t5.symbol === token);
     if (!currentToken || currentToken.chains.length === 0) return;
@@ -5266,26 +5513,27 @@ function DepositModal({
   destinationChainId,
   destinationTokenAddress,
   hideDepositTracker = false,
+  showBalanceHeader = false,
   transferInputVariant = "double_input",
   onDepositSuccess,
   onDepositError,
   theme = "dark"
 }) {
-  const { colors: colors2 } = useTheme();
-  const [view, setView] = (0, import_react12.useState)("main");
-  const [cardView, setCardView] = (0, import_react12.useState)(
+  const { colors: colors2, fonts } = useTheme();
+  const [view, setView] = (0, import_react13.useState)("main");
+  const [cardView, setCardView] = (0, import_react13.useState)(
     "amount"
   );
-  const [quotesCount, setQuotesCount] = (0, import_react12.useState)(0);
-  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react12.useState)(false);
-  const [depositExecutions, setDepositExecutions] = (0, import_react12.useState)([]);
-  const [projectConfig, setProjectConfig] = (0, import_react12.useState)(null);
-  const [wallets, setWallets] = (0, import_react12.useState)([]);
-  const [walletsLoading, setWalletsLoading] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => {
+  const [quotesCount, setQuotesCount] = (0, import_react13.useState)(0);
+  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react13.useState)(false);
+  const [depositExecutions, setDepositExecutions] = (0, import_react13.useState)([]);
+  const [projectConfig, setProjectConfig] = (0, import_react13.useState)(null);
+  const [wallets, setWallets] = (0, import_react13.useState)([]);
+  const [walletsLoading, setWalletsLoading] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
     setProjectConfig(null);
   }, [publishableKey]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setWallets([]);
   }, [
     userId,
@@ -5295,10 +5543,10 @@ function DepositModal({
     destinationTokenAddress,
     publishableKey
   ]);
-  const [resolvedTheme, setResolvedTheme] = (0, import_react12.useState)(
+  const [resolvedTheme, setResolvedTheme] = (0, import_react13.useState)(
     theme === "auto" ? "dark" : theme
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (theme === "auto") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
       setResolvedTheme(mediaQuery.matches ? "dark" : "light");
@@ -5311,9 +5559,9 @@ function DepositModal({
       setResolvedTheme(theme);
     }
   }, [theme]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (open && !projectConfig) {
-      (0, import_core12.getProjectConfig)(publishableKey).then(setProjectConfig).catch(console.error);
+      (0, import_core14.getProjectConfig)(publishableKey).then(setProjectConfig).catch(console.error);
     }
   }, [open, publishableKey, projectConfig]);
   const {
@@ -5321,7 +5569,29 @@ function DepositModal({
     isLoading: isCountryLoading,
     error: countryError
   } = useAllowedCountry(publishableKey);
-  (0, import_react12.useEffect)(() => {
+  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);
+  };
+  (0, import_react13.useEffect)(() => {
     if (!open || wallets.length > 0) return;
     let retryTimeout = null;
     let isCancelled = false;
@@ -5329,7 +5599,7 @@ function DepositModal({
       if (isCancelled) return;
       setWalletsLoading(true);
       try {
-        const response = await (0, import_core12.createDepositAddress)(
+        const response = await (0, import_core14.createDepositAddress)(
           {
             external_user_id: userId,
             recipient_address: recipientAddress,
@@ -5405,10 +5675,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__ */ (0, import_jsx_runtime23.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || !projectConfig ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || isAddressValidationLoading || !projectConfig ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SkeletonButton, { variant: "with-icons" }),
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SkeletonButton, { variant: "with-icons" }),
             !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SkeletonButton, {})
@@ -5426,6 +5702,16 @@ function DepositModal({
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: getAddressValidationErrorMessage(
+                addressFailureCode,
+                addressFailureMetadata
+              ) })
+            ] })
           ) : (
             /* Normal deposit options */
             /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [