@unifold/connect-react 0.1.21 → 0.1.22

package/dist/index.js

@@ -1181,7 +1181,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/provider.tsx
-var import_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 
 // ../react-provider/dist/index.mjs
 var import_react = require("react");
@@ -6320,12 +6320,14 @@ async function getTokenChains() {
   return response.json();
 }
 function getChainName(chains, chainType, chainId) {
+  if (!chainType && !chainId) return "Unknown";
   const target = chains.find((c) => c.chain_id === chainId && c.chain_type === chainType);
   if (target) return target.chain_name;
   const byId = chains.find((c) => c.chain_id === chainId);
   if (byId) return byId.chain_name;
   const byType = chains.find((c) => c.chain_type === chainType);
   if (byType) return byType.chain_name;
+  if (!chainType) return chainId || "Unknown";
   return chainType.charAt(0).toUpperCase() + chainType.slice(1);
 }
 async function getProjectConfig(publishableKey) {
@@ -6359,6 +6361,49 @@ async function getIpAddress() {
   }
   return response.json();
 }
+async function getAddressBalance(address, chainType, chainId, tokenAddress, publishableKey) {
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  validatePublishableKey(pk);
+  const url = `${API_BASE_URL}/v1/public/addresses/balance`;
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      accept: "application/json",
+      "x-publishable-key": pk
+    },
+    body: JSON.stringify({
+      address,
+      chain_type: chainType,
+      chain_id: chainId,
+      token_address: tokenAddress
+    })
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch address balance: ${response.statusText}`);
+  }
+  const data = await response.json();
+  return data;
+}
+async function verifyRecipientAddress(request, publishableKey) {
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  validatePublishableKey(pk);
+  const response = await fetch(`${API_BASE_URL}/v1/public/addresses/verify`, {
+    method: "POST",
+    headers: {
+      accept: "application/json",
+      "x-publishable-key": pk,
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(request)
+  });
+  if (!response.ok) {
+    throw new Error(
+      `Failed to verify recipient address: ${response.statusText}`
+    );
+  }
+  return response.json();
+}
 function useUserIp() {
   const {
     data: userIpInfo,
@@ -6459,21 +6504,22 @@ var i18n = en_default;
 
 // ../ui-react/dist/index.mjs
 var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var React37 = __toESM(require("react"), 1);
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var import_react_query3 = require("@tanstack/react-query");
-var import_react11 = require("react");
 var import_react12 = require("react");
 var import_react13 = require("react");
 var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var React42 = __toESM(require("react"), 1);
 var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -6485,11 +6531,12 @@ var import_jsx_runtime32 = require("react/jsx-runtime");
 var React72 = __toESM(require("react"), 1);
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var import_react_query4 = require("@tanstack/react-query");
-var import_react16 = require("react");
+var import_react_query5 = require("@tanstack/react-query");
 var import_react17 = require("react");
+var import_react18 = require("react");
 var import_qr_code_styling = __toESM(require_qr_code_styling(), 1);
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var React82 = __toESM(require("react"), 1);
 
@@ -9231,7 +9278,7 @@ var Content22 = TooltipContent;
 // ../ui-react/dist/index.mjs
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var import_react19 = require("react");
+var import_react20 = require("react");
 var React92 = __toESM(require("react"), 1);
 
 // ../../node_modules/.pnpm/@radix-ui+react-select@2.2.6_@types+react-dom@19.2.3_@types+react@19.2.9__@types+react@19.2.9_5n4syhs66qrtkkphe44qzgdimq/node_modules/@radix-ui/react-select/dist/index.mjs
@@ -10620,6 +10667,29 @@ var import_jsx_runtime41 = require("react/jsx-runtime");
 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" : ""}`;
+  }
+}
 var defaultColors = {
   light: {
     // Background colors
@@ -11061,10 +11131,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_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-pb-6", children: [
+  const [balance, setBalance] = (0, import_react11.useState)(null);
+  const [isLoadingBalance, setIsLoadingBalance] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-pb-6", children: [
     showBack ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "button",
       {
@@ -11074,8 +11217,32 @@ function DepositHeader({
         children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ArrowLeft, { className: "uf-w-5 uf-h-5" })
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-w-5 uf-h-5 uf-invisible" }),
-    badge ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center", children: [
+      badge ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          DialogTitle2,
+          {
+            className: "uf-text-center uf-text-base",
+            style: {
+              color: components.header.titleColor,
+              fontFamily: fonts.medium
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime20.jsx)(
         DialogTitle2,
         {
           className: "uf-text-center uf-text-base",
@@ -11086,29 +11253,19 @@ function DepositHeader({
           children: title
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      showBalance && (isLoadingBalance ? /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime20.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_runtime20.jsx)(
-      DialogTitle2,
-      {
-        className: "uf-text-center uf-text-base",
-        style: {
-          color: components.header.titleColor,
-          fontFamily: fonts.medium
-        },
-        children: title
-      }
-    ),
+      ) : null)
+    ] }),
     showClose ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "button",
       {
@@ -11118,7 +11275,7 @@ function DepositHeader({
         children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(X, { className: "uf-w-5 uf-h-5" })
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-w-5 uf-h-5 uf-invisible" })
-  ] });
+  ] }) });
 }
 function CurrencyListItem({
   currency,
@@ -11389,7 +11546,19 @@ var en_default2 = {
     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: {
@@ -11398,7 +11567,7 @@ var en_default2 = {
     },
     depositWithCard: {
       title: "Deposit with Card",
-      subtitle: "$50,000 limit \u2022 2 min"
+      subtitle: "$50,000 limit"
     },
     quotes: "Quotes"
   },
@@ -11414,6 +11583,13 @@ var en_default2 = {
   }
 };
 var i18n2 = en_default2;
+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}}}`;
+  });
+}
 function useDepositPolling({
   userId,
   publishableKey,
@@ -11421,14 +11597,14 @@ function useDepositPolling({
   onDepositSuccess,
   onDepositError
 }) {
-  const [executions, setExecutions] = (0, import_react11.useState)([]);
-  const [isPolling, setIsPolling] = (0, import_react11.useState)(false);
-  const pollingIntervalRef = (0, import_react11.useRef)(
+  const [executions, setExecutions] = (0, import_react12.useState)([]);
+  const [isPolling, setIsPolling] = (0, import_react12.useState)(false);
+  const pollingIntervalRef = (0, import_react12.useRef)(
     null
   );
-  const [modalOpenedAt] = (0, import_react11.useState)(/* @__PURE__ */ new Date());
-  const [trackedExecutions, setTrackedExecutions] = (0, import_react11.useState)(/* @__PURE__ */ new Map());
-  (0, import_react11.useEffect)(() => {
+  const [modalOpenedAt] = (0, import_react12.useState)(/* @__PURE__ */ new Date());
+  const [trackedExecutions, setTrackedExecutions] = (0, import_react12.useState)(/* @__PURE__ */ new Map());
+  (0, import_react12.useEffect)(() => {
     if (!userId || !modalOpenedAt || !enabled) return;
     const pollInterval = setInterval(async () => {
       try {
@@ -11539,12 +11715,12 @@ function formatCurrency(currency) {
 }
 function DepositDetailContent({ execution }) {
   const { colors: colors2, fonts, components } = useTheme();
-  const [chains, setChains] = (0, import_react14.useState)([]);
-  const [showNetworkDetails, setShowNetworkDetails] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
+  const [chains, setChains] = (0, import_react15.useState)([]);
+  const [showNetworkDetails, setShowNetworkDetails] = (0, import_react15.useState)(false);
+  (0, import_react15.useEffect)(() => {
     getTokenChains().then((response) => setChains(response.data)).catch((err) => console.error("Failed to fetch chains:", err));
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setShowNetworkDetails(false);
   }, [execution?.id]);
   const isPending = execution.status === ExecutionStatus.PENDING || execution.status === ExecutionStatus.WAITING || execution.status === ExecutionStatus.DELAYED;
@@ -11839,6 +12015,37 @@ function DepositDetailContent({ execution }) {
               ]
             }
           ),
+          isPending && /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(
+                  "span",
+                  {
+                    className: "uf-text-sm",
+                    style: {
+                      color: components.card.labelColor,
+                      fontFamily: fonts.regular
+                    },
+                    children: "Estimated delivery time"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  "span",
+                  {
+                    style: {
+                      color: components.card.titleColor,
+                      fontFamily: fonts.regular,
+                      fontSize: "14px"
+                    },
+                    children: formatEstimatedTime(execution?.estimated_processing_time)
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
@@ -12022,7 +12229,7 @@ function DepositSuccessToast({
   onClose,
   execution
 }) {
-  const [detailModalOpen, setDetailModalOpen] = (0, import_react13.useState)(false);
+  const [detailModalOpen, setDetailModalOpen] = (0, import_react14.useState)(false);
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isPending = status === ExecutionStatus.PENDING || status === ExecutionStatus.WAITING || status === ExecutionStatus.DELAYED;
   const formatDateTime = (timestamp) => {
@@ -12156,14 +12363,27 @@ function DepositSuccessToast({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-              "div",
-              {
-                className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
-                style: { color: colors2.background },
-                children: formatUsdAmount(sourceAmountUsd)
-              }
-            ),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "uf-flex-shrink-0 uf-text-right", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsxs)(
+                "p",
+                {
+                  className: "uf-text-xs",
+                  style: { color: colors2.foregroundMuted },
+                  children: [
+                    "Est. ",
+                    formatEstimatedTime(execution.estimated_processing_time)
+                  ]
+                }
+              )
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "button",
               {
@@ -12209,7 +12429,7 @@ function DepositPollingToasts({
   executions,
   horizontalPadding = "24px"
 }) {
-  const [closedExecutionIds, setClosedExecutionIds] = (0, import_react12.useState)(
+  const [closedExecutionIds, setClosedExecutionIds] = (0, import_react13.useState)(
     /* @__PURE__ */ new Set()
   );
   const handleClose = (executionId) => {
@@ -12962,6 +13182,20 @@ function BuyWithCard({
                     },
                     children: quotesError
                   }
+                ),
+                defaultToken?.estimated_processing_time && !quotesLoading && selectedProvider && /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)(
@@ -13405,9 +13639,9 @@ function DepositsModal({
   themeClass = ""
 }) {
   const { colors: colors2 } = useTheme();
-  const [allExecutions, setAllExecutions] = (0, import_react15.useState)(sessionExecutions);
-  const [selectedExecution, setSelectedExecution] = (0, import_react15.useState)(null);
-  (0, import_react15.useEffect)(() => {
+  const [allExecutions, setAllExecutions] = (0, import_react16.useState)(sessionExecutions);
+  const [selectedExecution, setSelectedExecution] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
     if (!open || !userId) return;
     const fetchExecutions = async () => {
       try {
@@ -13429,7 +13663,7 @@ function DepositsModal({
       clearInterval(pollInterval);
     };
   }, [open, userId, publishableKey, sessionExecutions]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!open) {
       setSelectedExecution(null);
     }
@@ -13788,6 +14022,60 @@ function useAllowedCountry(publishableKey) {
     error
   };
 }
+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_query5.useQuery)({
+    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
+  };
+}
 function StyledQRCode({
   value,
   size: size4 = 200,
@@ -13795,9 +14083,9 @@ function StyledQRCode({
   imageSize = 50,
   darkMode = false
 }) {
-  const ref = (0, import_react17.useRef)(null);
-  const qrCodeRef = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
+  const ref = (0, import_react18.useRef)(null);
+  const qrCodeRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useEffect)(() => {
     if (!ref.current) return;
     if (!qrCodeRef.current) {
       qrCodeRef.current = new import_qr_code_styling.default({
@@ -13837,7 +14125,7 @@ function StyledQRCode({
       qrCodeRef.current.append(ref.current);
     }
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (qrCodeRef.current) {
       qrCodeRef.current.update({
         data: value,
@@ -13931,13 +14219,13 @@ function TokenSelectorSheet({
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
-  const [searchQuery, setSearchQuery] = (0, import_react18.useState)("");
-  const [recentTokens, setRecentTokens] = (0, import_react18.useState)([]);
-  const [hoveredTokenKey, setHoveredTokenKey] = (0, import_react18.useState)(null);
-  (0, import_react18.useEffect)(() => {
+  const [searchQuery, setSearchQuery] = (0, import_react19.useState)("");
+  const [recentTokens, setRecentTokens] = (0, import_react19.useState)([]);
+  const [hoveredTokenKey, setHoveredTokenKey] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
     setRecentTokens(getRecentTokens());
   }, []);
-  const allOptions = (0, import_react18.useMemo)(() => {
+  const allOptions = (0, import_react19.useMemo)(() => {
     const options = [];
     tokens.forEach((token) => {
       token.chains.forEach((chain) => {
@@ -13946,7 +14234,7 @@ function TokenSelectorSheet({
     });
     return options;
   }, [tokens]);
-  const quickSelectOptions = (0, import_react18.useMemo)(() => {
+  const quickSelectOptions = (0, import_react19.useMemo)(() => {
     const result = [];
     const seen = /* @__PURE__ */ new Set();
     const addOption = (symbol, chainType, chainId, isRecent) => {
@@ -13978,7 +14266,7 @@ function TokenSelectorSheet({
     });
     setRecentTokens(updated);
   };
-  const filteredOptions = (0, import_react18.useMemo)(() => {
+  const filteredOptions = (0, import_react19.useMemo)(() => {
     if (!searchQuery.trim()) return allOptions;
     const query = searchQuery.toLowerCase();
     return allOptions.filter(
@@ -14363,13 +14651,13 @@ function TransferCryptoSingleInput({
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
-  const [token, setToken] = (0, import_react16.useState)("USDC");
-  const [chain, setChain] = (0, import_react16.useState)("solana:mainnet");
-  const [copied, setCopied] = (0, import_react16.useState)(false);
-  const [internalWallets, setInternalWallets] = (0, import_react16.useState)([]);
-  const [loading, setLoading] = (0, import_react16.useState)(!externalWallets?.length);
+  const [token, setToken] = (0, import_react17.useState)("USDC");
+  const [chain, setChain] = (0, import_react17.useState)("solana:mainnet");
+  const [copied, setCopied] = (0, import_react17.useState)(false);
+  const [internalWallets, setInternalWallets] = (0, import_react17.useState)([]);
+  const [loading, setLoading] = (0, import_react17.useState)(!externalWallets?.length);
   const wallets = externalWallets?.length ? externalWallets : internalWallets;
-  const [error, setError] = (0, import_react16.useState)(null);
+  const [error, setError] = (0, import_react17.useState)(null);
   const { executions: depositExecutions, isPolling } = useDepositPolling({
     userId,
     publishableKey,
@@ -14377,11 +14665,11 @@ function TransferCryptoSingleInput({
     onDepositSuccess,
     onDepositError
   });
-  const [supportedTokens, setSupportedTokens] = (0, import_react16.useState)([]);
-  const [tokensLoading, setTokensLoading] = (0, import_react16.useState)(true);
-  const [detailsExpanded, setDetailsExpanded] = (0, import_react16.useState)(false);
-  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react16.useState)(false);
-  const [tokenSelectorOpen, setTokenSelectorOpen] = (0, import_react16.useState)(false);
+  const [supportedTokens, setSupportedTokens] = (0, import_react17.useState)([]);
+  const [tokensLoading, setTokensLoading] = (0, import_react17.useState)(true);
+  const [detailsExpanded, setDetailsExpanded] = (0, import_react17.useState)(false);
+  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react17.useState)(false);
+  const [tokenSelectorOpen, setTokenSelectorOpen] = (0, import_react17.useState)(false);
   const allChainsMap = /* @__PURE__ */ new Map();
   supportedTokens.forEach((t5) => {
     t5.chains.forEach((c) => {
@@ -14399,7 +14687,7 @@ function TransferCryptoSingleInput({
   const currentChainType = currentChainData?.chain_type || "ethereum";
   const currentWallet = getWalletByChainType(wallets, currentChainType);
   const depositAddress = currentWallet?.address || "";
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     async function fetchSupportedTokens() {
       try {
         setTokensLoading(true);
@@ -14471,12 +14759,12 @@ function TransferCryptoSingleInput({
     destinationChainId,
     destinationChainType
   ]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (onExecutionsChange) {
       onExecutionsChange(depositExecutions);
     }
   }, [depositExecutions, onExecutionsChange]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (externalWallets?.length) {
       setLoading(false);
       return;
@@ -14533,7 +14821,7 @@ function TransferCryptoSingleInput({
     publishableKey,
     externalWallets
   ]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!supportedTokens.length) return;
     const currentToken = supportedTokens.find((t5) => t5.symbol === token);
     if (!currentToken || currentToken.chains.length === 0) return;
@@ -15045,13 +15333,13 @@ function TransferCryptoDoubleInput({
 }) {
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
-  const [token, setToken] = (0, import_react19.useState)("USDC");
-  const [chain, setChain] = (0, import_react19.useState)("solana:mainnet");
-  const [copied, setCopied] = (0, import_react19.useState)(false);
-  const [internalWallets, setInternalWallets] = (0, import_react19.useState)([]);
-  const [loading, setLoading] = (0, import_react19.useState)(!externalWallets?.length);
+  const [token, setToken] = (0, import_react20.useState)("USDC");
+  const [chain, setChain] = (0, import_react20.useState)("solana:mainnet");
+  const [copied, setCopied] = (0, import_react20.useState)(false);
+  const [internalWallets, setInternalWallets] = (0, import_react20.useState)([]);
+  const [loading, setLoading] = (0, import_react20.useState)(!externalWallets?.length);
   const wallets = externalWallets?.length ? externalWallets : internalWallets;
-  const [error, setError] = (0, import_react19.useState)(null);
+  const [error, setError] = (0, import_react20.useState)(null);
   const { executions: depositExecutions, isPolling } = useDepositPolling({
     userId,
     publishableKey,
@@ -15059,10 +15347,10 @@ function TransferCryptoDoubleInput({
     onDepositSuccess,
     onDepositError
   });
-  const [supportedTokens, setSupportedTokens] = (0, import_react19.useState)([]);
-  const [tokensLoading, setTokensLoading] = (0, import_react19.useState)(true);
-  const [detailsExpanded, setDetailsExpanded] = (0, import_react19.useState)(false);
-  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react19.useState)(false);
+  const [supportedTokens, setSupportedTokens] = (0, import_react20.useState)([]);
+  const [tokensLoading, setTokensLoading] = (0, import_react20.useState)(true);
+  const [detailsExpanded, setDetailsExpanded] = (0, import_react20.useState)(false);
+  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react20.useState)(false);
   const allChainsMap = /* @__PURE__ */ new Map();
   supportedTokens.forEach((t5) => {
     t5.chains.forEach((c) => {
@@ -15080,7 +15368,7 @@ function TransferCryptoDoubleInput({
   const currentChainType = currentChainData?.chain_type || "ethereum";
   const currentWallet = getWalletByChainType(wallets, currentChainType);
   const depositAddress = currentWallet?.address || "";
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     async function fetchSupportedTokens() {
       try {
         setTokensLoading(true);
@@ -15123,12 +15411,12 @@ function TransferCryptoDoubleInput({
     destinationChainId,
     destinationChainType
   ]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (onExecutionsChange) {
       onExecutionsChange(depositExecutions);
     }
   }, [depositExecutions, onExecutionsChange]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (externalWallets?.length) {
       setLoading(false);
       return;
@@ -15185,7 +15473,7 @@ function TransferCryptoDoubleInput({
     publishableKey,
     externalWallets
   ]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!supportedTokens.length) return;
     const currentToken = supportedTokens.find((t5) => t5.symbol === token);
     if (!currentToken || currentToken.chains.length === 0) return;
@@ -15633,12 +15921,13 @@ function DepositModal({
   destinationChainId,
   destinationTokenAddress,
   hideDepositTracker = false,
+  showBalanceHeader = false,
   transferInputVariant = "double_input",
   onDepositSuccess,
   onDepositError,
   theme = "dark"
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, fonts } = useTheme();
   const [view, setView] = (0, import_react8.useState)("main");
   const [cardView, setCardView] = (0, import_react8.useState)(
     "amount"
@@ -15688,6 +15977,28 @@ function DepositModal({
     isLoading: isCountryLoading,
     error: countryError
   } = useAllowedCountry(publishableKey);
+  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 = i18n2.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_react8.useEffect)(() => {
     if (!open || wallets.length > 0) return;
     let retryTimeout = null;
@@ -15772,10 +16083,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_runtime40.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || !projectConfig ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || isAddressValidationLoading || !projectConfig ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SkeletonButton, { variant: "with-icons" }),
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SkeletonButton, { variant: "with-icons" }),
             !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SkeletonButton, {})
@@ -15793,6 +16110,16 @@ function DepositModal({
               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
               /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.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_runtime40.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_runtime40.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
@@ -15974,12 +16301,12 @@ function UnifoldProvider2({
   publishableKey,
   config
 }) {
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
-  const [depositConfig, setDepositConfig] = (0, import_react20.useState)(
+  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+  const [depositConfig, setDepositConfig] = (0, import_react21.useState)(
     null
   );
-  const [resolvedTheme, setResolvedTheme] = import_react20.default.useState("dark");
-  import_react20.default.useEffect(() => {
+  const [resolvedTheme, setResolvedTheme] = import_react21.default.useState("dark");
+  import_react21.default.useEffect(() => {
     const appearance = config?.appearance || "dark";
     if (appearance === "auto") {
       const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -15994,9 +16321,9 @@ function UnifoldProvider2({
       setResolvedTheme(appearance);
     }
   }, [config?.appearance]);
-  const depositPromiseRef = import_react20.default.useRef(null);
-  const closeTimeoutRef = import_react20.default.useRef(null);
-  const beginDeposit = (0, import_react20.useCallback)((config2) => {
+  const depositPromiseRef = import_react21.default.useRef(null);
+  const closeTimeoutRef = import_react21.default.useRef(null);
+  const beginDeposit = (0, import_react21.useCallback)((config2) => {
     if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current);
       closeTimeoutRef.current = null;
@@ -16016,7 +16343,7 @@ function UnifoldProvider2({
     setIsOpen(true);
     return promise;
   }, []);
-  const closeDeposit = (0, import_react20.useCallback)(() => {
+  const closeDeposit = (0, import_react21.useCallback)(() => {
     if (depositPromiseRef.current) {
       depositPromiseRef.current.reject({
         message: "Deposit cancelled by user",
@@ -16030,7 +16357,7 @@ function UnifoldProvider2({
       closeTimeoutRef.current = null;
     }, 200);
   }, []);
-  const handleDepositSuccess = (0, import_react20.useCallback)((data) => {
+  const handleDepositSuccess = (0, import_react21.useCallback)((data) => {
     if (depositConfig?.onSuccess) {
       depositConfig.onSuccess(data);
     }
@@ -16039,7 +16366,7 @@ function UnifoldProvider2({
       depositPromiseRef.current = null;
     }
   }, [depositConfig]);
-  const handleDepositError = (0, import_react20.useCallback)((error) => {
+  const handleDepositError = (0, import_react21.useCallback)((error) => {
     console.error("[UnifoldProvider] Deposit error:", error);
     if (depositConfig?.onError) {
       depositConfig.onError(error);
@@ -16049,7 +16376,7 @@ function UnifoldProvider2({
       depositPromiseRef.current = null;
     }
   }, [depositConfig]);
-  const contextValue = (0, import_react20.useMemo)(
+  const contextValue = (0, import_react21.useMemo)(
     () => ({
       beginDeposit,
       closeDeposit,
@@ -16083,6 +16410,7 @@ function UnifoldProvider2({
             destinationChainId: depositConfig.destinationChainId,
             destinationTokenAddress: depositConfig.destinationTokenAddress,
             hideDepositTracker: config?.hideDepositTracker,
+            showBalanceHeader: config?.showBalanceHeader,
             transferInputVariant: config?.transferInputVariant,
             onDepositSuccess: handleDepositSuccess,
             onDepositError: handleDepositError,
@@ -16093,10 +16421,10 @@ function UnifoldProvider2({
     }
   ) }) });
 }
-var ConnectContext = import_react20.default.createContext(null);
+var ConnectContext = import_react21.default.createContext(null);
 function useUnifold2() {
   const baseContext = useUnifold();
-  const connectContext = import_react20.default.useContext(ConnectContext);
+  const connectContext = import_react21.default.useContext(ConnectContext);
   if (typeof window === "undefined") {
     return {
       publishableKey: "",