@unifold/ui-react 0.1.1

package/dist/index.js

@@ -0,0 +1,2847 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  BuyWithCard: () => BuyWithCard,
+  CurrencyListItem: () => CurrencyListItem,
+  CurrencyListSection: () => CurrencyListSection,
+  CurrencyModal: () => CurrencyModal,
+  DepositExecutionItem: () => DepositExecutionItem,
+  DepositHeader: () => DepositHeader,
+  DepositModal: () => DepositModal,
+  DepositSuccessToast: () => DepositSuccessToast,
+  DepositTrackerButton: () => DepositTrackerButton,
+  DepositWithCardButton: () => DepositWithCardButton,
+  DepositsModal: () => DepositsModal,
+  Dialog: () => Dialog,
+  DialogClose: () => DialogClose,
+  DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader,
+  DialogOverlay: () => DialogOverlay,
+  DialogPortal: () => DialogPortal,
+  DialogTitle: () => DialogTitle,
+  DialogTrigger: () => DialogTrigger,
+  ExecutionStatus: () => ExecutionStatus,
+  SOLANA_USDC_ADDRESS: () => SOLANA_USDC_ADDRESS,
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectGroup: () => SelectGroup,
+  SelectItem: () => SelectItem,
+  SelectLabel: () => SelectLabel,
+  SelectScrollDownButton: () => SelectScrollDownButton,
+  SelectScrollUpButton: () => SelectScrollUpButton,
+  SelectSeparator: () => SelectSeparator,
+  SelectTrigger: () => SelectTrigger,
+  SelectValue: () => SelectValue,
+  StyledQRCode: () => StyledQRCode,
+  ThemeProvider: () => ThemeProvider,
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipProvider: () => TooltipProvider,
+  TooltipTrigger: () => TooltipTrigger,
+  TransferCrypto: () => TransferCrypto,
+  TransferCrypto2: () => TransferCrypto2,
+  TransferCryptoBase: () => TransferCryptoBase,
+  TransferCryptoButton: () => TransferCryptoButton,
+  buttonVariants: () => buttonVariants,
+  cn: () => cn,
+  createEOA: () => createEOA,
+  createMeldSession: () => createMeldSession,
+  getApiBaseUrl: () => getApiBaseUrl,
+  getFiatCurrencies: () => getFiatCurrencies,
+  getIconUrl: () => getIconUrl,
+  getMeldQuotes: () => getMeldQuotes,
+  getSupportedDepositTokens: () => getSupportedDepositTokens,
+  getWalletByChainType: () => getWalletByChainType,
+  i18n: () => i18n,
+  queryExecutions: () => queryExecutions,
+  setApiConfig: () => setApiConfig,
+  useTheme: () => useTheme,
+  useUserIp: () => useUserIp
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/deposits/DepositModal.tsx
+var import_react6 = require("react");
+
+// src/components/shared/dialog.tsx
+var React2 = __toESM(require("react"));
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
+var import_lucide_react = require("lucide-react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/context/ThemeContext.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = React.createContext({ themeClass: "" });
+function ThemeProvider({
+  children,
+  themeClass
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { themeClass }, children });
+}
+function useTheme() {
+  return React.useContext(ThemeContext);
+}
+
+// src/components/shared/dialog.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => {
+  const { themeClass } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    DialogPrimitive.Overlay,
+    {
+      ref,
+      className: cn(
+        themeClass,
+        "uf-fixed uf-inset-0 uf-z-50 uf-bg-black/40 data-[state=open]:uf-animate-in data-[state=closed]:uf-animate-out data-[state=closed]:uf-fade-out-0 data-[state=open]:uf-fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(DialogPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DialogOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        // Mobile: bottom-aligned, full-width
+        "uf-fixed uf-bottom-0 uf-left-0 uf-right-0 uf-z-50 uf-grid uf-w-full uf-max-w-full",
+        // Mobile: rounded top corners only
+        "uf-rounded-t-3xl",
+        // Desktop: centered modal (no default max-width, let parent specify)
+        "sm:uf-left-[50%] sm:uf-top-[50%] sm:uf-bottom-auto sm:uf-right-auto sm:uf-translate-x-[-50%] sm:uf-translate-y-[-50%]",
+        // Desktop: rounded all corners
+        "sm:uf-rounded-3xl",
+        // Common styles
+        "uf-gap-4 uf-border uf-bg-background uf-p-6 uf-shadow-lg uf-duration-200",
+        // Animations - mobile slides from bottom
+        "data-[state=open]:uf-animate-in data-[state=closed]:uf-animate-out",
+        "data-[state=closed]:uf-fade-out-0 data-[state=open]:uf-fade-in-0",
+        "data-[state=closed]:uf-slide-out-to-bottom data-[state=open]:uf-slide-in-from-bottom",
+        // Desktop animations - center zoom
+        "sm:data-[state=closed]:uf-zoom-out-95 sm:data-[state=open]:uf-zoom-in-95",
+        "sm:data-[state=closed]:uf-slide-out-to-left-1/2 sm:data-[state=closed]:uf-slide-out-to-top-[48%]",
+        "sm:data-[state=open]:uf-slide-in-from-left-1/2 sm:data-[state=open]:uf-slide-in-from-top-[48%]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(DialogPrimitive.Close, { className: "uf-absolute uf-right-6 uf-top-6 uf-rounded-sm uf-opacity-70 uf-ring-offset-background uf-transition-opacity hover:uf-opacity-100 focus:uf-outline-none focus:uf-ring-2 focus:uf-ring-ring focus:uf-ring-offset-2 disabled:uf-pointer-events-none data-[state=open]:uf-bg-accent data-[state=open]:uf-text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.X, { className: "uf-h-6 uf-w-6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "uf-sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "div",
+  {
+    className: cn(
+      "uf-flex uf-flex-col uf-space-y-1.5 uf-text-center sm:uf-text-left",
+      className
+    ),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "div",
+  {
+    className: cn(
+      "uf-flex uf-flex-col-reverse sm:uf-flex-row sm:uf-justify-end sm:uf-space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn(
+      "uf-text-lg uf-font-semibold uf-leading-none uf-tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("uf-text-sm uf-text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/components/deposits/TransferCryptoBase.tsx
+var import_react3 = require("react");
+var import_lucide_react5 = require("lucide-react");
+
+// src/components/deposits/StyledQRCode.tsx
+var import_react = require("react");
+var import_qr_code_styling = __toESM(require("qr-code-styling"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function StyledQRCode({
+  value,
+  size = 200,
+  imageUrl,
+  imageSize = 50,
+  darkMode = false
+}) {
+  const ref = (0, import_react.useRef)(null);
+  const qrCodeRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!ref.current) return;
+    if (!qrCodeRef.current) {
+      qrCodeRef.current = new import_qr_code_styling.default({
+        type: "svg",
+        width: size,
+        height: size,
+        data: value,
+        margin: 0,
+        qrOptions: {
+          typeNumber: 0,
+          mode: "Byte",
+          errorCorrectionLevel: "H"
+        },
+        imageOptions: {
+          hideBackgroundDots: true,
+          imageSize: imageSize / size,
+          margin: 4,
+          crossOrigin: "anonymous"
+        },
+        dotsOptions: {
+          type: "dots",
+          color: darkMode ? "#ffffff" : "#000000"
+        },
+        backgroundOptions: {
+          color: darkMode ? "#1a1a1a" : "#ffffff"
+        },
+        image: imageUrl,
+        cornersSquareOptions: {
+          type: "extra-rounded",
+          color: darkMode ? "#ffffff" : "#000000"
+        },
+        cornersDotOptions: {
+          type: "dot",
+          color: darkMode ? "#ffffff" : "#000000"
+        }
+      });
+      qrCodeRef.current.append(ref.current);
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (qrCodeRef.current) {
+      qrCodeRef.current.update({
+        data: value,
+        image: imageUrl,
+        width: size,
+        height: size,
+        dotsOptions: {
+          type: "dots",
+          color: darkMode ? "#ffffff" : "#000000"
+        },
+        backgroundOptions: {
+          color: darkMode ? "#1a1a1a" : "#ffffff"
+        },
+        cornersSquareOptions: {
+          type: "extra-rounded",
+          color: darkMode ? "#ffffff" : "#000000"
+        },
+        cornersDotOptions: {
+          type: "dot",
+          color: darkMode ? "#ffffff" : "#000000"
+        }
+      });
+    }
+  }, [value, size, imageUrl, imageSize, darkMode]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref,
+      style: {
+        width: size,
+        height: size,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }
+  );
+}
+
+// src/components/deposits/DepositsModal.tsx
+var import_react2 = require("react");
+
+// src/components/deposits/DepositHeader.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function DepositHeader({
+  title,
+  showBack = false,
+  showClose = true,
+  onBack,
+  onClose,
+  badge
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-pb-2", children: [
+    showBack ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        onClick: onBack,
+        className: "hover:uf-bg-secondary uf-rounded-lg uf-p-1 uf-transition-colors",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ArrowLeft, { className: "uf-w-5 uf-h-5" })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "uf-w-5 uf-h-5 uf-invisible" }),
+    badge ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogTitle, { className: "uf-text-center uf-text-base uf-font-light uf-text-foreground", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "uf-bg-secondary uf-px-2 uf-py-0.5 uf-rounded-full uf-text-[10px] uf-text-muted-foreground", children: badge.count })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogTitle, { className: "uf-text-center uf-text-base uf-font-light uf-text-foreground", children: title }),
+    showClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        onClick: onClose,
+        className: "hover:uf-bg-secondary uf-rounded-lg uf-p-1 uf-transition-colors",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { className: "uf-w-5 uf-h-5" })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "uf-w-5 uf-h-5 uf-invisible" })
+  ] });
+}
+
+// src/components/deposits/DepositExecutionItem.tsx
+var import_lucide_react3 = require("lucide-react");
+
+// src/lib/api.ts
+var API_BASE_URL = "http://localhost:3002";
+var DEFAULT_PUBLISHABLE_KEY = "pk_test_123";
+var DEFAULT_CONFIG = {};
+function setApiConfig(config) {
+  if (config.baseUrl) {
+    API_BASE_URL = config.baseUrl;
+  }
+  if (config.publishableKey) {
+    DEFAULT_PUBLISHABLE_KEY = config.publishableKey;
+  }
+  if (config.defaultConfig) {
+    DEFAULT_CONFIG = config.defaultConfig;
+  }
+}
+function getApiBaseUrl() {
+  return API_BASE_URL;
+}
+function getIconUrl(iconPath) {
+  const normalizedPath = iconPath.startsWith("/") ? iconPath : `/${iconPath}`;
+  return `${API_BASE_URL}/api/public${normalizedPath}`;
+}
+async function createEOA(overrides, publishableKey) {
+  if (!overrides?.user_id) {
+    throw new Error("user_id is required");
+  }
+  const payload = {
+    user_id: overrides.user_id,
+    destination_chain_type: overrides?.destination_chain_type || "ethereum",
+    destination_chain_id: overrides?.destination_chain_id || DEFAULT_CONFIG.destinationChainId || "8453",
+    destination_token_address: overrides?.destination_token_address || DEFAULT_CONFIG.destinationTokenAddress || "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
+    recipient_address: overrides?.recipient_address || DEFAULT_CONFIG.recipientAddress || "0x309a4154a2CD4153Da886E780890C9cb5161553C",
+    client_metadata: overrides?.client_metadata || {}
+  };
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  const response = await fetch(`${API_BASE_URL}/v1/public/deposit_addresses`, {
+    method: "POST",
+    headers: {
+      accept: "application/json",
+      "x-publishable-key": pk,
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(payload)
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to create EOA: ${response.statusText}`);
+  }
+  return response.json();
+}
+function getWalletByChainType(wallets, chainType) {
+  return wallets.find((wallet) => wallet.chain_type === chainType);
+}
+var ExecutionStatus = /* @__PURE__ */ ((ExecutionStatus2) => {
+  ExecutionStatus2["DELAYED"] = "delayed";
+  ExecutionStatus2["FAILED"] = "failed";
+  ExecutionStatus2["PENDING"] = "pending";
+  ExecutionStatus2["REFUNDED"] = "refunded";
+  ExecutionStatus2["SUCCEEDED"] = "succeeded";
+  ExecutionStatus2["WAITING"] = "waiting";
+  return ExecutionStatus2;
+})(ExecutionStatus || {});
+var SOLANA_USDC_ADDRESS = "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v";
+async function queryExecutions(externalUserId, publishableKey) {
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  const response = await fetch(
+    `${API_BASE_URL}/v1/public/direct_executions/query`,
+    {
+      method: "POST",
+      headers: {
+        accept: "application/json",
+        "x-publishable-key": pk,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        external_user_id: externalUserId
+      })
+    }
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to query executions: ${response.statusText}`);
+  }
+  return response.json();
+}
+async function getSupportedDepositTokens(publishableKey) {
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  const response = await fetch(
+    `${API_BASE_URL}/v1/public/tokens/supported_deposit_tokens`,
+    {
+      method: "GET",
+      headers: {
+        accept: "application/json",
+        "x-publishable-key": pk
+      }
+    }
+  );
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch supported deposit tokens: ${response.statusText}`
+    );
+  }
+  return response.json();
+}
+async function getMeldQuotes(request, publishableKey) {
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  const response = await fetch(
+    `${API_BASE_URL}/v1/public/onramps/meld/quotes`,
+    {
+      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 fetch Meld quotes: ${response.statusText}`);
+  }
+  return response.json();
+}
+async function createMeldSession(request, publishableKey) {
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  const response = await fetch(
+    `${API_BASE_URL}/v1/public/onramps/meld/sessions`,
+    {
+      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 create Meld session: ${response.statusText}`);
+  }
+  return response.json();
+}
+async function getFiatCurrencies(publishableKey) {
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  const response = await fetch(
+    `${API_BASE_URL}/v1/public/onramps/fiat_currencies`,
+    {
+      method: "GET",
+      headers: {
+        accept: "application/json",
+        "x-publishable-key": pk
+      }
+    }
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to fetch fiat currencies: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+// src/components/deposits/DepositExecutionItem.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function DepositExecutionItem({
+  execution,
+  showCloseButton = false,
+  onClose
+}) {
+  const isPending = execution.status === "pending" /* PENDING */ || execution.status === "waiting" /* WAITING */ || execution.status === "delayed" /* DELAYED */;
+  const formatTxHash = (hash) => {
+    if (hash.length <= 12) return hash;
+    return `${hash.slice(0, 16)}...${hash.slice(-8)}`;
+  };
+  const formatDateTime = (timestamp) => {
+    try {
+      const date = new Date(timestamp);
+      return date.toLocaleDateString("en-US", { month: "short", day: "numeric" }) + " \xB7 " + date.toLocaleTimeString("en-US", {
+        hour: "numeric",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false
+      });
+    } catch {
+      return timestamp;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uf-bg-card uf-border uf-border-border uf-rounded-xl uf-overflow-hidden uf-p-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uf-flex uf-items-start uf-justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2.5 uf-flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uf-relative uf-flex-shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "img",
+            {
+              src: execution.source_token_metadata?.icon_url || getIconUrl("/icons/tokens/usdc.svg"),
+              alt: "Token",
+              width: 32,
+              height: 32,
+              className: "uf-rounded-full"
+            }
+          ),
+          isPending ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "uf-absolute uf--bottom-0.5 uf--right-0.5 uf-bg-yellow-500 uf-rounded-full uf-p-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "svg",
+            {
+              width: "10",
+              height: "10",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              className: "uf-animate-spin",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "path",
+                {
+                  d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
+                  stroke: "white",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "uf-absolute uf--bottom-0.5 uf--right-0.5 uf-bg-green-500 uf-rounded-full uf-p-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "path",
+            {
+              d: "M10 3L4.5 8.5L2 6",
+              stroke: "white",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mb-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "uf-text-foreground uf-font-medium uf-text-sm", children: isPending ? "Deposit received" : "Deposit completed" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "uf-text-muted-foreground uf-text-xs uf-whitespace-nowrap uf-ml-2", children: formatDateTime(execution.created_at || (/* @__PURE__ */ new Date()).toISOString()) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "uf-text-muted-foreground uf-text-xs", children: isPending ? "Your account will be credited shortly." : "Your account has been credited successfully." })
+        ] })
+      ] }),
+      showCloseButton && onClose && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          onClick: onClose,
+          className: "uf-text-muted-foreground hover:uf-text-foreground uf-transition-colors uf-p-0.5 uf-flex-shrink-0 uf-ml-2",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.X, { className: "uf-w-4 uf-h-4" })
+        }
+      )
+    ] }),
+    !isPending && execution.explorer_url && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-2 uf-pt-2 uf-border-t uf-border-secondary uf-text-xs uf-ml-[42px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "uf-text-muted-foreground", children: "Deposit tx:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "a",
+        {
+          href: execution.explorer_url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "uf-flex uf-items-center uf-gap-1 uf-text-blue-400 hover:uf-text-blue-300 uf-transition-colors uf-font-mono",
+          children: [
+            formatTxHash(execution.transaction_hash),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.ExternalLink, { className: "uf-w-3 uf-h-3" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/deposits/DepositsModal.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function DepositsModal({
+  open,
+  onOpenChange,
+  executions: sessionExecutions,
+  userId,
+  publishableKey,
+  themeClass = ""
+}) {
+  const [allExecutions, setAllExecutions] = (0, import_react2.useState)(sessionExecutions);
+  (0, import_react2.useEffect)(() => {
+    if (!open || !userId) return;
+    const fetchExecutions = async () => {
+      try {
+        const response = await 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;
+          return timeB - timeA;
+        });
+        setAllExecutions(sorted);
+      } catch (error) {
+        console.error("Failed to fetch executions:", error);
+        setAllExecutions(sessionExecutions);
+      }
+    };
+    fetchExecutions();
+    const pollInterval = setInterval(fetchExecutions, 1e4);
+    return () => {
+      clearInterval(pollInterval);
+    };
+  }, [open, userId, publishableKey, sessionExecutions]);
+  const handleClose = () => {
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DialogContent, { className: `sm:uf-max-w-[400px] !uf-bg-card uf-border-secondary uf-text-foreground uf-p-0 uf-gap-0 [&>button]:uf-hidden ${themeClass}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DepositHeader, { title: "Deposit Tracker", onClose: handleClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "uf-max-h-[500px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "uf-space-y-3", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "uf-text-muted-foreground uf-text-sm", children: "No deposits yet" }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: allExecutions.map((execution) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DepositExecutionItem, { execution }, execution.id)) }) }) })
+  ] }) });
+}
+
+// src/components/deposits/DepositSuccessToast.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function DepositSuccessToast({
+  depositTx,
+  completionTx,
+  orderSubmittedAt,
+  orderFilledAt,
+  explorerUrl,
+  completionExplorerUrl,
+  status,
+  tokenIconUrl,
+  onClose
+}) {
+  const execution = {
+    id: depositTx,
+    transaction_hash: depositTx,
+    explorer_url: explorerUrl,
+    destination_transaction_hashes: completionTx ? [completionTx] : void 0,
+    status,
+    created_at: orderSubmittedAt,
+    updated_at: orderFilledAt,
+    source_token_metadata: tokenIconUrl ? { icon_url: tokenIconUrl } : void 0
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "uf-w-full uf-animate-in uf-slide-in-from-bottom-2 uf-duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    DepositExecutionItem,
+    {
+      execution,
+      showCloseButton: true,
+      onClose
+    }
+  ) });
+}
+
+// src/components/shared/select.tsx
+var React3 = __toESM(require("react"));
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "uf-flex uf-h-10 uf-w-full uf-items-center uf-justify-between uf-rounded-md uf-border uf-border-border !uf-bg-secondary uf-px-3 uf-py-2 uf-text-sm uf-text-foreground uf-ring-offset-background placeholder:uf-text-muted-foreground focus:uf-outline-none focus:uf-ring-2 focus:uf-ring-ring focus:uf-ring-offset-2 disabled:uf-cursor-not-allowed disabled:uf-opacity-50 [&>span]:uf-line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronDown, { className: "uf-h-4 uf-w-4 uf-opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "uf-flex uf-cursor-default uf-items-center uf-justify-center uf-py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronUp, { className: "uf-h-4 uf-w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "uf-flex uf-cursor-default uf-items-center uf-justify-center uf-py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronDown, { className: "uf-h-4 uf-w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+  const { themeClass } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    SelectPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        themeClass,
+        "uf-relative uf-z-50 uf-max-h-96 uf-min-w-[8rem] uf-overflow-hidden uf-rounded-lg uf-border uf-border-border !uf-bg-popover uf-text-popover-foreground uf-shadow-lg data-[state=open]:uf-animate-in data-[state=closed]:uf-animate-out data-[state=closed]:uf-fade-out-0 data-[state=open]:uf-fade-in-0 data-[state=closed]:uf-zoom-out-95 data-[state=open]:uf-zoom-in-95 data-[side=bottom]:uf-slide-in-from-top-2 data-[side=left]:uf-slide-in-from-right-2 data-[side=right]:uf-slide-in-from-left-2 data-[side=top]:uf-slide-in-from-bottom-2",
+        position === "popper" && "data-[side=bottom]:uf-translate-y-1 data-[side=left]:uf--translate-x-1 data-[side=right]:uf-translate-x-1 data-[side=top]:uf--translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "uf-p-1",
+              position === "popper" && "uf-h-[var(--radix-select-trigger-height)] uf-w-full uf-min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("uf-py-1.5 uf-pl-8 uf-pr-2 uf-text-sm uf-font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "uf-relative uf-flex uf-w-full uf-cursor-default uf-select-none uf-items-center uf-rounded-sm uf-py-1.5 uf-pl-8 uf-pr-2 uf-text-sm uf-text-foreground uf-outline-none focus:uf-bg-accent focus:uf-text-accent-foreground data-[disabled]:uf-pointer-events-none data-[disabled]:uf-opacity-50 hover:uf-bg-accent",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uf-absolute uf-left-2 uf-flex uf-h-3.5 uf-w-3.5 uf-items-center uf-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.Check, { className: "uf-h-4 uf-w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("uf--mx-1 uf-my-1 uf-h-px uf-bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/components/shared/button.tsx
+var React4 = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "uf-inline-flex uf-items-center uf-justify-center uf-whitespace-nowrap uf-rounded-md uf-text-sm uf-font-medium uf-ring-offset-background uf-transition-colors focus-visible:uf-outline-none focus-visible:uf-ring-2 focus-visible:uf-ring-ring focus-visible:uf-ring-offset-2 disabled:uf-pointer-events-none disabled:uf-opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "uf-bg-primary uf-text-primary-foreground hover:uf-bg-primary/90",
+        destructive: "uf-bg-destructive uf-text-destructive-foreground hover:uf-bg-destructive/90",
+        outline: "uf-border uf-border-input uf-bg-background hover:uf-bg-accent hover:uf-text-accent-foreground",
+        secondary: "uf-bg-secondary uf-text-secondary-foreground hover:uf-bg-secondary/80",
+        ghost: "hover:uf-bg-accent hover:uf-text-accent-foreground",
+        link: "uf-text-primary uf-underline-offset-4 hover:uf-underline"
+      },
+      size: {
+        default: "uf-h-10 uf-px-4 uf-py-2",
+        sm: "uf-h-9 uf-rounded-md uf-px-3",
+        lg: "uf-h-11 uf-rounded-md uf-px-8",
+        icon: "uf-h-10 uf-w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React4.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/shared/tooltip.tsx
+var React5 = __toESM(require("react"));
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+  const { themeClass } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        themeClass,
+        "uf-z-[9999] uf-w-[calc(100vw-2rem)] uf-max-w-[280px] uf-overflow-hidden uf-rounded-lg uf-bg-popover uf-px-3 uf-py-2 uf-text-xs uf-text-popover-foreground uf-shadow-lg uf-border uf-border-border uf-animate-in uf-fade-in-0 uf-zoom-in-95 data-[state=closed]:uf-animate-out data-[state=closed]:uf-fade-out-0 data-[state=closed]:uf-zoom-out-95 data-[side=bottom]:uf-slide-in-from-top-2 data-[side=left]:uf-slide-in-from-right-2 data-[side=right]:uf-slide-in-from-left-2 data-[side=top]:uf-slide-in-from-bottom-2",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/lib/i18n/en.json
+var en_default = {
+  transferCrypto: {
+    priceImpact: {
+      label: "Price impact",
+      tooltip: "Price impact reflects the difference between the expected price and the final execution price, influenced by trade size and available liquidity. Larger trades may move the market price during execution.",
+      finalCost: "The final cost reflects price impact and may vary depending on market and network conditions. Larger trade sizes typically benefit from lower relative costs."
+    },
+    slippage: {
+      label: "Max slippage",
+      auto: "Auto",
+      tooltip: "Slippage represents price changes that can occur while a transaction is being processed. Slippage is dynamically adjusted per trading pair to support reliable execution during market movements.",
+      finalCost: "The final cost includes any slippage and may change based on real-time network conditions. Costs are generally reduced for larger transaction amounts."
+    },
+    processingTime: {
+      label: "Processing time",
+      lessThanMinutes: "< {{minutes}} min",
+      lessThanHours: "< {{hours}} hr"
+    },
+    minDeposit: {
+      label: "min",
+      tooltip: "The minimum amount you can deposit on the selected network."
+    },
+    help: {
+      needHelp: "Need help?",
+      contactSupport: "Contact support"
+    },
+    terms: {
+      termsApply: "Terms apply"
+    },
+    supportedToken: "Supported token",
+    supportedChain: "Supported chain",
+    depositAddress: {
+      label: "Your deposit address",
+      tooltip: "Send any supported token to this address, and it will be automatically converted to {{token}} in your account."
+    },
+    copyAddress: "Copy address",
+    copied: "Copied!",
+    loading: "Loading...",
+    loadingQRCode: "Loading QR Code...",
+    noAddressAvailable: "No address available",
+    noChainsAvailable: "No chains available for this token"
+  },
+  depositModal: {
+    transferCrypto: {
+      title: "Transfer Crypto",
+      subtitle: "No limit \u2022 Instant"
+    },
+    depositWithCard: {
+      title: "Deposit with Card",
+      subtitle: "$50,000 limit \u2022 2 min"
+    },
+    quotes: "Quotes"
+  },
+  buyWithCard: {
+    onramp: {
+      completeTransaction: "Complete transaction with {{provider}}",
+      canCloseModal: "You can close this modal.",
+      youUse: "You use",
+      youBuy: "You buy",
+      youReceive: "You receive",
+      intentAddressNote: "The wallet address displayed in the payment provider is a temporary deposit address. Your funds will be automatically converted and deposited into your account."
+    }
+  }
+};
+
+// src/lib/i18n.ts
+var i18n = en_default;
+
+// src/components/deposits/TransferCryptoBase.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var t = i18n.transferCrypto;
+var getChainKey = (chainId, chainType) => {
+  return `${chainType}:${chainId}`;
+};
+var parseChainKey = (chainKey) => {
+  const [chainType, chainId] = chainKey.split(":");
+  return { chainType, chainId };
+};
+function TransferCryptoBase({
+  userId,
+  publishableKey,
+  recipientAddress,
+  destinationChainId,
+  destinationTokenAddress,
+  copyButtonMode = "compact",
+  layoutVariant = "horizontal",
+  showDetailedDropdowns = false,
+  onExecutionsChange,
+  onDepositSuccess,
+  onDepositError
+}) {
+  const { themeClass } = useTheme();
+  const isDarkMode = themeClass.includes("uf-dark");
+  const [token, setToken] = (0, import_react3.useState)("USDC");
+  const [chain, setChain] = (0, import_react3.useState)("solana:mainnet");
+  const [copied, setCopied] = (0, import_react3.useState)(false);
+  const [wallets, setWallets] = (0, import_react3.useState)([]);
+  const [loading, setLoading] = (0, import_react3.useState)(true);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const [depositExecutions, setDepositExecutions] = (0, import_react3.useState)([]);
+  const [trackedExecutions, setTrackedExecutions] = (0, import_react3.useState)(/* @__PURE__ */ new Map());
+  const [modalOpenedAt, setModalOpenedAt] = (0, import_react3.useState)(null);
+  const [supportedTokens, setSupportedTokens] = (0, import_react3.useState)([]);
+  const [tokensLoading, setTokensLoading] = (0, import_react3.useState)(true);
+  const [detailsExpanded, setDetailsExpanded] = (0, import_react3.useState)(false);
+  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react3.useState)(false);
+  const allChainsMap = /* @__PURE__ */ new Map();
+  supportedTokens.forEach((t4) => {
+    t4.chains.forEach((c) => {
+      const comboKey = `${c.chain_type}:${c.chain_id}`;
+      if (!allChainsMap.has(comboKey)) {
+        allChainsMap.set(comboKey, c);
+      }
+    });
+  });
+  const allAvailableChains = Array.from(allChainsMap.values());
+  const currentChainCombo = parseChainKey(chain);
+  const currentChainData = allAvailableChains.find(
+    (c) => c.chain_type === currentChainCombo.chainType && c.chain_id === currentChainCombo.chainId
+  );
+  const currentChainType = currentChainData?.chain_type || "ethereum";
+  const currentWallet = getWalletByChainType(wallets, currentChainType);
+  const depositAddress = currentWallet?.address || "";
+  (0, import_react3.useEffect)(() => {
+    setModalOpenedAt(/* @__PURE__ */ new Date());
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    async function fetchSupportedTokens() {
+      try {
+        setTokensLoading(true);
+        const response = await getSupportedDepositTokens(publishableKey);
+        setSupportedTokens(response.data);
+        if (response.data.length > 0) {
+          const allChains = /* @__PURE__ */ new Set();
+          response.data.forEach((t4) => {
+            t4.chains.forEach((c) => {
+              allChains.add(getChainKey(c.chain_id, c.chain_type));
+            });
+          });
+          if (!allChains.has(chain)) {
+            const firstToken = response.data[0];
+            if (firstToken.chains.length > 0) {
+              const firstChain = firstToken.chains[0];
+              setChain(getChainKey(firstChain.chain_id, firstChain.chain_type));
+            }
+          }
+        }
+      } catch (err) {
+        console.error("Error fetching supported tokens:", err);
+      } finally {
+        setTokensLoading(false);
+      }
+    }
+    fetchSupportedTokens();
+  }, [publishableKey, chain]);
+  (0, import_react3.useEffect)(() => {
+    if (onExecutionsChange) {
+      onExecutionsChange(depositExecutions);
+    }
+  }, [depositExecutions, onExecutionsChange]);
+  (0, import_react3.useEffect)(() => {
+    async function fetchWallets() {
+      try {
+        setLoading(true);
+        const response = await createEOA(
+          {
+            user_id: userId,
+            recipient_address: recipientAddress,
+            destination_chain_id: destinationChainId,
+            destination_token_address: destinationTokenAddress
+          },
+          publishableKey
+        );
+        setWallets(response.data);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load wallets");
+        console.error("Error fetching wallets:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchWallets();
+  }, [
+    userId,
+    recipientAddress,
+    destinationChainId,
+    destinationTokenAddress,
+    publishableKey
+  ]);
+  (0, import_react3.useEffect)(() => {
+    if (!supportedTokens.length) return;
+    const currentToken = supportedTokens.find((t4) => t4.symbol === token);
+    if (!currentToken || currentToken.chains.length === 0) return;
+    const isChainAvailable = currentToken.chains.some((c) => {
+      const key = getChainKey(c.chain_id, c.chain_type);
+      return key === chain;
+    });
+    if (!isChainAvailable) {
+      const firstChain = currentToken.chains[0];
+      const newChain = getChainKey(firstChain.chain_id, firstChain.chain_type);
+      setChain(newChain);
+    }
+  }, [token, supportedTokens, chain]);
+  (0, import_react3.useEffect)(() => {
+    if (!userId || !modalOpenedAt) return;
+    const pollInterval = setInterval(async () => {
+      try {
+        const response = await queryExecutions(userId, publishableKey);
+        let executionToShow = null;
+        for (const execution of response.data) {
+          const executionTime = execution.created_at ? new Date(execution.created_at) : null;
+          if (!executionTime || executionTime <= modalOpenedAt) {
+            continue;
+          }
+          const trackedStatus = trackedExecutions.get(execution.id);
+          if (!trackedStatus) {
+            executionToShow = execution;
+            break;
+          }
+          const inProgressStatuses = [
+            "pending" /* PENDING */,
+            "waiting" /* WAITING */,
+            "delayed" /* DELAYED */
+          ];
+          if (inProgressStatuses.includes(trackedStatus) && execution.status === "succeeded" /* SUCCEEDED */) {
+            executionToShow = execution;
+            break;
+          }
+        }
+        if (executionToShow) {
+          const execution = executionToShow;
+          setDepositExecutions((prev) => {
+            const existingIndex = prev.findIndex((e) => e.id === execution.id);
+            if (existingIndex >= 0) {
+              const updated = [...prev];
+              updated[existingIndex] = execution;
+              return updated;
+            } else {
+              return [...prev, execution];
+            }
+          });
+          setTrackedExecutions((prev) => {
+            const updated = new Map(prev);
+            updated.set(execution.id, execution.status);
+            return updated;
+          });
+          if (onDepositSuccess) {
+            const isCompleted = execution.status === "succeeded" /* SUCCEEDED */;
+            if (isCompleted) {
+              onDepositSuccess({
+                message: "Deposit completed successfully",
+                transaction: execution,
+                executionId: execution.id
+              });
+            }
+          }
+        }
+      } catch (err) {
+        console.error("Error polling executions:", err);
+        if (onDepositError) {
+          onDepositError({
+            message: "Failed to check deposit status",
+            error: err,
+            code: "POLLING_ERROR"
+          });
+        }
+      }
+    }, 5e3);
+    return () => clearInterval(pollInterval);
+  }, [
+    userId,
+    trackedExecutions,
+    modalOpenedAt,
+    publishableKey,
+    onDepositSuccess,
+    onDepositError
+  ]);
+  const selectedToken = supportedTokens.find((t4) => t4.symbol === token);
+  const availableChainsForToken = selectedToken?.chains || [];
+  const currentChainFromBackend = availableChainsForToken.find((c) => {
+    const key = getChainKey(c.chain_id, c.chain_type);
+    return key === chain;
+  }) || allAvailableChains.find((c) => {
+    const key = getChainKey(c.chain_id, c.chain_type);
+    return key === chain;
+  });
+  const handleCopyAddress = () => {
+    navigator.clipboard.writeText(depositAddress);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  const formatProcessingTime = (seconds) => {
+    if (seconds === null) {
+      return t.processingTime.lessThanMinutes.replace("{{minutes}}", "1");
+    }
+    const minutes = Math.ceil(seconds / 60);
+    if (minutes < 60) {
+      return t.processingTime.lessThanMinutes.replace(
+        "{{minutes}}",
+        String(minutes)
+      );
+    }
+    const hours = Math.ceil(minutes / 60);
+    return t.processingTime.lessThanHours.replace("{{hours}}", String(hours));
+  };
+  const priceImpact = currentChainFromBackend?.estimated_price_impact_percent ?? 0;
+  const maxSlippage = currentChainFromBackend?.max_slippage_percent ?? 0.25;
+  const processingTime = currentChainFromBackend?.estimated_processing_time ?? null;
+  const minDepositUsd = currentChainFromBackend?.minimum_deposit_amount_usd ?? 3;
+  const renderTokenItem = (tokenData) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "img",
+        {
+          src: tokenData.icon_url,
+          alt: tokenData.symbol,
+          width: 20,
+          height: 20,
+          className: "uf-rounded-full uf-flex-shrink-0"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol }),
+      showDetailedDropdowns && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "uf-text-xs uf-text-muted-foreground", children: tokenData.name })
+    ] });
+  };
+  const renderChainItem = (chainData) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "img",
+        {
+          src: chainData.icon_url,
+          alt: chainData.chain_name,
+          width: 20,
+          height: 20,
+          className: "uf-rounded-full uf-flex-shrink-0"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name }),
+      showDetailedDropdowns && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "uf-text-xs uf-text-muted-foreground uf-capitalize", children: chainData.chain_type })
+    ] });
+  };
+  const selectContainerClass = layoutVariant === "horizontal" ? "uf-grid uf-grid-cols-2 uf-gap-2.5" : "uf-space-y-3";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipProvider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: selectContainerClass, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: t.supportedToken }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          Select,
+          {
+            value: token,
+            onValueChange: setToken,
+            disabled: tokensLoading || supportedTokens.length === 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectTrigger, { className: "uf-bg-secondary uf-border-none uf-rounded-lg uf-h-10 hover:uf-bg-accent uf-text-foreground focus:uf-ring-1 focus:uf-ring-ring disabled:uf-opacity-50", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectValue, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t.loading }) }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "uf-text-xs uf-font-normal", children: token }) }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectContent, { className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]", children: supportedTokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                SelectItem,
+                {
+                  value: tokenData.symbol,
+                  className: "focus:uf-bg-accent focus:uf-text-foreground",
+                  children: renderTokenItem(tokenData)
+                },
+                tokenData.symbol
+              )) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: [
+          t.supportedChain,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "uf-text-[10px]", children: [
+            "$",
+            minDepositUsd,
+            " ",
+            t.minDeposit.label
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "span",
+              {
+                className: "uf-inline-flex uf-cursor-pointer uf-transition-colors hover:uf-text-foreground",
+                tabIndex: 0,
+                role: "button",
+                "aria-label": "Minimum deposit information",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Info, { className: "uf-w-3 uf-h-3" })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              TooltipContent,
+              {
+                side: "left",
+                align: "center",
+                className: "uf-max-w-[200px]",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: t.minDeposit.tooltip })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          Select,
+          {
+            value: chain,
+            onValueChange: setChain,
+            disabled: tokensLoading || availableChainsForToken.length === 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectTrigger, { className: "uf-bg-secondary uf-border-none uf-rounded-lg uf-h-10 hover:uf-bg-accent uf-text-foreground focus:uf-ring-1 focus:uf-ring-ring disabled:uf-opacity-50", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectValue, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t.loading }) }) : currentChainFromBackend ? renderChainItem(currentChainFromBackend) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chain }) }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectContent, { className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]", children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-px-2 uf-py-3 uf-text-xs uf-text-muted-foreground uf-text-center", children: t.noChainsAvailable }) : availableChainsForToken.map((chainData) => {
+                const chainKey = getChainKey(
+                  chainData.chain_id,
+                  chainData.chain_type
+                );
+                return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  SelectItem,
+                  {
+                    value: chainKey,
+                    className: "focus:uf-bg-accent focus:uf-text-foreground",
+                    children: renderChainItem(chainData)
+                  },
+                  `${chainData.chain_id}-${chainData.chain_type}`
+                );
+              }) })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-flex uf-justify-center uf-py-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-bg-card uf-p-4 uf-rounded-2xl uf-shadow-lg uf-border uf-border-border", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        className: "uf-flex uf-items-center uf-justify-center",
+        style: { width: 180, height: 180 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-text-foreground uf-text-sm", children: t.loadingQRCode })
+      }
+    ) : depositAddress ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      StyledQRCode,
+      {
+        value: depositAddress,
+        size: 180,
+        imageUrl: currentChainData?.icon_url || currentChainFromBackend?.icon_url || getIconUrl("/icons/networks/ethereum.svg"),
+        imageSize: 45,
+        darkMode: isDarkMode
+      },
+      `qr-${depositAddress}-${chain}`
+    ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        className: "uf-flex uf-items-center uf-justify-center",
+        style: { width: 180, height: 180 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-text-red-400 uf-text-sm", children: t.noAddressAvailable })
+      }
+    ) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
+          t.depositAddress.label,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "span",
+              {
+                className: "uf-inline-flex uf-cursor-pointer uf-transition-colors hover:uf-text-foreground",
+                tabIndex: 0,
+                role: "button",
+                "aria-label": "Deposit address information",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Info, { className: "uf-w-3 uf-h-3" })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              TooltipContent,
+              {
+                side: "top",
+                align: "center",
+                className: "uf-max-w-[240px]",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: t.depositAddress.tooltip.replace("{{token}}", token) })
+              }
+            )
+          ] })
+        ] }),
+        copyButtonMode === "compact" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            onClick: handleCopyAddress,
+            disabled: loading || !depositAddress,
+            className: "uf-flex uf-items-center uf-gap-1 uf-text-xs uf-text-muted-foreground hover:uf-text-foreground uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
+            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Check, { className: "uf-w-3 uf-h-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: t.copied })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Copy, { className: "uf-w-3 uf-h-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: t.copyAddress })
+            ] })
+          }
+        )
+      ] }),
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-bg-secondary uf-rounded-lg uf-px-3 uf-py-2.5 uf-text-xs uf-text-muted-foreground uf-animate-pulse", children: t.loading }) : error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-bg-secondary uf-rounded-lg uf-px-3 uf-py-2.5 uf-text-xs uf-text-red-400", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-bg-secondary uf-rounded-lg uf-px-3 uf-py-2.5 uf-text-xs uf-font-mono uf-break-all", children: depositAddress || t.noAddressAvailable })
+    ] }),
+    copyButtonMode === "fullWidth" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Button,
+      {
+        onClick: handleCopyAddress,
+        disabled: loading || !depositAddress,
+        className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-text-foreground uf-rounded-lg uf-h-9 uf-text-sm uf-font-medium disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
+        children: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Check, { className: "uf-w-4 uf-h-4 uf-mr-2" }),
+          t.copied
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Copy, { className: "uf-w-4 uf-h-4 uf-mr-2" }),
+          t.copyAddress
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-border-t uf-border-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "button",
+        {
+          onClick: () => setDetailsExpanded(!detailsExpanded),
+          className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-bg-secondary uf-rounded-full uf-p-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.DollarSign, { className: "uf-w-3 uf-h-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "uf-text-xs", children: [
+                t.priceImpact.label,
+                ":",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "uf-text-foreground", children: [
+                  priceImpact.toFixed(2),
+                  "%"
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Tooltip, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "span",
+                  {
+                    className: "uf-inline-flex uf-cursor-pointer uf-text-muted-foreground uf-transition-colors hover:uf-text-foreground",
+                    onClick: (e) => e.stopPropagation(),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.stopPropagation();
+                      }
+                    },
+                    tabIndex: 0,
+                    role: "button",
+                    "aria-label": "Price impact information",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Info, { className: "uf-w-3 uf-h-3" })
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  TooltipContent,
+                  {
+                    side: "top",
+                    align: "center",
+                    className: "uf-max-w-[240px]",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: t.priceImpact.tooltip })
+                  }
+                )
+              ] })
+            ] }),
+            detailsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.ChevronUp, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.ChevronDown, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground" })
+          ]
+        }
+      ),
+      detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-bg-secondary uf-rounded-full uf-p-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.ShieldCheck, { className: "uf-w-3 uf-h-3" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "uf-text-xs", children: [
+            t.slippage.label,
+            ":",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "uf-text-foreground", children: [
+              t.slippage.auto,
+              " \u2022 ",
+              maxSlippage.toFixed(2),
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "span",
+              {
+                className: "uf-inline-flex uf-cursor-pointer uf-text-muted-foreground uf-transition-colors hover:uf-text-foreground",
+                tabIndex: 0,
+                role: "button",
+                "aria-label": "Slippage information",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Info, { className: "uf-w-3 uf-h-3" })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              TooltipContent,
+              {
+                side: "top",
+                align: "center",
+                className: "uf-max-w-[240px]",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: t.slippage.tooltip })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-bg-secondary uf-rounded-full uf-p-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Clock, { className: "uf-w-3 uf-h-3" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "uf-text-xs", children: [
+            t.processingTime.label,
+            ":",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "uf-text-foreground", children: formatProcessingTime(processingTime) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-bg-secondary uf-rounded-full uf-p-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.FileText, { className: "uf-w-3 uf-h-3" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "uf-text-xs", children: [
+            t.help.needHelp,
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "a",
+              {
+                href: "#",
+                className: "uf-text-foreground uf-underline hover:uf-text-muted-foreground uf-transition-colors",
+                children: t.help.contactSupport
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "a",
+          {
+            href: "#",
+            className: "uf-text-muted-foreground uf-underline hover:uf-text-foreground uf-transition-colors",
+            children: t.terms.termsApply
+          }
+        ),
+        depositExecutions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "button",
+          {
+            onClick: () => setDepositsModalOpen(true),
+            className: "uf-flex uf-items-center uf-gap-1 uf-text-muted-foreground hover:uf-text-foreground uf-transition-colors uf-animate-in uf-fade-in uf-slide-in-from-right-8 uf-duration-1000",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Clock, { className: "uf-w-3.5 uf-h-3.5" }),
+              "Track deposits (",
+              depositExecutions.length,
+              ")",
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.ChevronRight, { className: "uf-w-3 uf-h-3" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    depositExecutions.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uf-fixed uf-bottom-4 uf-left-1/2 uf--translate-x-1/2 uf-w-[360px] uf-max-w-[calc(100vw-2rem)] uf-z-[100]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      DepositSuccessToast,
+      {
+        depositTx: depositExecutions[0].transaction_hash,
+        completionTx: depositExecutions[0].destination_transaction_hashes?.[0] || (depositExecutions[0].status === "succeeded" /* SUCCEEDED */ ? depositExecutions[0].transaction_hash : void 0),
+        orderSubmittedAt: depositExecutions[0].created_at || (/* @__PURE__ */ new Date()).toISOString(),
+        orderFilledAt: depositExecutions[0].updated_at || (/* @__PURE__ */ new Date()).toISOString(),
+        explorerUrl: depositExecutions[0].explorer_url,
+        completionExplorerUrl: depositExecutions[0].destination_transaction_hashes?.[0] ? `https://polygonscan.com/tx/${depositExecutions[0].destination_transaction_hashes[0]}` : depositExecutions[0].status === "succeeded" /* SUCCEEDED */ ? depositExecutions[0].explorer_url : void 0,
+        status: depositExecutions[0].status,
+        tokenIconUrl: depositExecutions[0].source_token_metadata?.icon_url,
+        onClose: () => setDepositExecutions([])
+      },
+      depositExecutions[0].id
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      DepositsModal,
+      {
+        open: depositsModalOpen,
+        onOpenChange: setDepositsModalOpen,
+        executions: depositExecutions,
+        userId,
+        publishableKey,
+        themeClass
+      }
+    )
+  ] }) });
+}
+
+// src/components/deposits/TransferCrypto.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function TransferCrypto(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    TransferCryptoBase,
+    {
+      ...props,
+      layoutVariant: "horizontal",
+      showDetailedDropdowns: false
+    }
+  );
+}
+
+// src/components/deposits/BuyWithCard.tsx
+var import_react5 = require("react");
+var import_lucide_react8 = require("lucide-react");
+
+// src/components/deposits/CurrencyModal.tsx
+var import_react4 = require("react");
+var import_lucide_react7 = require("lucide-react");
+
+// src/components/currency/CurrencyListItem.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function CurrencyListItem({
+  currency,
+  isSelected,
+  onSelect
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "button",
+    {
+      onClick: () => onSelect(currency.currency_code),
+      className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "uf-w-10 uf-h-10 uf-flex uf-items-center uf-justify-center uf-flex-shrink-0 uf-rounded-full uf-overflow-hidden uf-bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "img",
+            {
+              src: currency.icon_url,
+              alt: currency.name,
+              width: 40,
+              height: 40,
+              className: "uf-w-full uf-h-full uf-object-cover uf-rounded-full"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "uf-text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "uf-text-sm uf-font-normal uf-text-foreground", children: currency.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "uf-text-xs uf-text-muted-foreground uf-font-light", children: currency.currency_code.toUpperCase() })
+          ] })
+        ] }),
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Check, { className: "uf-w-4 uf-h-4 uf-text-foreground" })
+      ]
+    }
+  );
+}
+
+// src/components/currency/CurrencyListSection.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function CurrencyListSection({
+  title,
+  currencies,
+  selectedCurrency,
+  onSelect
+}) {
+  if (currencies.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uf-px-1 uf-pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: title }) }),
+    currencies.map((currency) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      CurrencyListItem,
+      {
+        currency,
+        isSelected: selectedCurrency.toLowerCase() === currency.currency_code.toLowerCase(),
+        onSelect
+      },
+      currency.currency_code
+    ))
+  ] });
+}
+
+// src/components/deposits/CurrencyModal.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function CurrencyModal({
+  open,
+  onOpenChange,
+  currencies,
+  preferredCurrencyCodes,
+  selectedCurrency,
+  onSelectCurrency,
+  themeClass = ""
+}) {
+  const [searchQuery, setSearchQuery] = (0, import_react4.useState)("");
+  const preferredCurrencies = preferredCurrencyCodes.map(
+    (code) => currencies.find(
+      (currency) => currency.currency_code.toLowerCase() === code.toLowerCase()
+    )
+  ).filter((currency) => currency !== void 0);
+  const otherCurrencies = currencies.filter(
+    (currency) => !preferredCurrencyCodes.includes(currency.currency_code.toLowerCase())
+  );
+  const filterCurrencies = (currencyList) => {
+    if (!searchQuery) return currencyList;
+    const query = searchQuery.toLowerCase();
+    return currencyList.filter(
+      (currency) => currency.name.toLowerCase().includes(query) || currency.currency_code.toLowerCase().includes(query)
+    );
+  };
+  const filteredPreferred = filterCurrencies(preferredCurrencies);
+  const filteredOther = filterCurrencies(otherCurrencies);
+  const handleSelect = (currencyCode) => {
+    onSelectCurrency(currencyCode);
+    onOpenChange(false);
+    setSearchQuery("");
+  };
+  const handleClose = () => {
+    onOpenChange(false);
+    setSearchQuery("");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DialogContent, { className: `sm:uf-max-w-[400px] !uf-bg-card uf-border-secondary uf-text-foreground uf-p-0 uf-gap-0 [&>button]:uf-hidden ${themeClass}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      DepositHeader,
+      {
+        title: "Currency",
+        showBack: true,
+        onBack: handleClose,
+        onClose: handleClose
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "uf-relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.Search, { className: "uf-absolute uf-left-4 uf-top-1/2 uf--translate-y-1/2 uf-w-4 uf-h-4 uf-text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "input",
+        {
+          type: "text",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          placeholder: "Search",
+          className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-pl-11 uf-pr-4 uf-py-2.5 uf-text-sm uf-text-foreground uf-placeholder-muted-foreground uf-outline-none focus:uf-ring-2 focus:uf-ring-ring/30"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "uf-max-h-[500px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "uf-space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        CurrencyListSection,
+        {
+          title: "Popular currencies",
+          currencies: filteredPreferred,
+          selectedCurrency,
+          onSelect: handleSelect
+        }
+      ),
+      filteredPreferred.length > 0 && filteredOther.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "uf-h-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        CurrencyListSection,
+        {
+          title: "All currencies",
+          currencies: filteredOther,
+          selectedCurrency,
+          onSelect: handleSelect
+        }
+      ),
+      filteredPreferred.length === 0 && filteredOther.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "uf-text-center uf-py-8 uf-text-muted-foreground uf-text-sm", children: "No currencies found" })
+    ] }) })
+  ] }) });
+}
+
+// src/hooks/use-user-ip.ts
+var import_react_query = require("@tanstack/react-query");
+async function getIpViaMoonpay(moonpayApiKey) {
+  const url = `https://api.moonpay.com/v3/ip_address?apiKey=${moonpayApiKey}`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Moonpay IP API failed: ${response.statusText}`);
+  }
+  const data = await response.json();
+  return {
+    alpha2: data.alpha2.toLowerCase(),
+    state: data.state?.toLowerCase()
+  };
+}
+async function getIpViaIpApi() {
+  const url = "https://ipapi.co/json";
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`ipapi.co failed: ${response.statusText}`);
+  }
+  const data = await response.json();
+  return {
+    alpha2: data.country_code.toLowerCase(),
+    state: data.region_code?.toLowerCase()
+  };
+}
+function useUserIp(moonpayApiKey) {
+  const {
+    data: userIpInfo,
+    isLoading,
+    error
+  } = (0, import_react_query.useQuery)({
+    queryKey: ["getUserIpInfo"],
+    queryFn: async () => {
+      if (moonpayApiKey) {
+        try {
+          const moonpayIpData = await getIpViaMoonpay(moonpayApiKey);
+          console.log("IP detected via Moonpay:", moonpayIpData);
+          return moonpayIpData;
+        } catch (error2) {
+          console.warn("Moonpay IP API failed, trying fallback:", error2);
+        }
+      }
+      try {
+        const ipApiData = await getIpViaIpApi();
+        console.log("IP detected via ipapi.co:", ipApiData);
+        return ipApiData;
+      } catch (ipApiError) {
+        console.error("All IP detection methods failed:", ipApiError);
+        throw ipApiError;
+      }
+    },
+    // Cache configuration to reduce API calls
+    refetchOnMount: false,
+    refetchOnReconnect: true,
+    refetchOnWindowFocus: false,
+    // Optional: Increase cache duration to 1 hour for even better rate limit protection
+    staleTime: 1e3 * 60 * 60,
+    // 1 hour - data considered fresh for 1 hour
+    gcTime: 1e3 * 60 * 60 * 24
+    // 24 hours - keep in cache for 24 hours
+  });
+  return {
+    userIpInfo,
+    isLoading,
+    error
+  };
+}
+
+// src/components/deposits/BuyWithCard.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var t2 = i18n.buyWithCard;
+var QUICK_AMOUNTS = [100, 500, 1e3];
+function getCurrencySymbol(currencyCode) {
+  try {
+    return new Intl.NumberFormat("en", {
+      style: "currency",
+      currency: currencyCode.toUpperCase(),
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }).format(0).replace(/\d/g, "").trim();
+  } catch {
+    return currencyCode.toUpperCase();
+  }
+}
+function BuyWithCard({
+  userId,
+  publishableKey,
+  view: externalView,
+  onViewChange,
+  maxAmountUsd = 5e4,
+  accentColor = "#0052FF",
+  destinationTokenSymbol,
+  recipientAddress,
+  destinationChainId,
+  destinationTokenAddress,
+  themeClass = ""
+}) {
+  const [amount, setAmount] = (0, import_react5.useState)("500.00");
+  const [currency, setCurrency] = (0, import_react5.useState)("usd");
+  const [showCurrencyModal, setShowCurrencyModal] = (0, import_react5.useState)(false);
+  const [quotes, setQuotes] = (0, import_react5.useState)([]);
+  const [quotesLoading, setQuotesLoading] = (0, import_react5.useState)(false);
+  const [quotesError, setQuotesError] = (0, import_react5.useState)(null);
+  const [internalView, setInternalView] = (0, import_react5.useState)("amount");
+  const { userIpInfo, isLoading: isLoadingIp } = useUserIp();
+  const [onrampSession, setOnrampSession] = (0, import_react5.useState)(
+    null
+  );
+  const currentView = externalView ?? internalView;
+  const showQuotesView = currentView === "quotes";
+  const showOnrampView = currentView === "onramp";
+  (0, import_react5.useEffect)(() => {
+    if (externalView) {
+      setInternalView(externalView);
+    }
+  }, [externalView]);
+  const handleViewChange = (newView) => {
+    setInternalView(newView);
+    if (newView === "quotes") {
+      onViewChange?.(newView, quotes.length);
+    } else {
+      onViewChange?.(newView);
+    }
+  };
+  const [selectedProvider, setSelectedProvider] = (0, import_react5.useState)(
+    null
+  );
+  const [isAutoSelected, setIsAutoSelected] = (0, import_react5.useState)(true);
+  const [autoSelectedProvider, setAutoSelectedProvider] = (0, import_react5.useState)(null);
+  const [hasManualSelection, setHasManualSelection] = (0, import_react5.useState)(false);
+  const [wallets, setWallets] = (0, import_react5.useState)([]);
+  const [walletsLoading, setWalletsLoading] = (0, import_react5.useState)(true);
+  const [countdown, setCountdown] = (0, import_react5.useState)(60);
+  const [fiatCurrencies, setFiatCurrencies] = (0, import_react5.useState)([]);
+  const [preferredCurrencyCodes, setPreferredCurrencyCodes] = (0, import_react5.useState)([]);
+  const [currenciesLoading, setCurrenciesLoading] = (0, import_react5.useState)(true);
+  const [supportedTokens, setSupportedTokens] = (0, import_react5.useState)([]);
+  const destinationWallet = getWalletByChainType(wallets, "ethereum");
+  const walletDestinationChainId = destinationWallet?.destination_chain_id;
+  const resolvedDestinationChainId = destinationChainId || walletDestinationChainId;
+  const displayTokenSymbol = destinationTokenSymbol || supportedTokens[0]?.symbol || "USDC";
+  const destinationToken = supportedTokens[0];
+  const destinationChain = destinationToken?.chains.find(
+    (c) => c.chain_id === resolvedDestinationChainId
+  );
+  (0, import_react5.useEffect)(() => {
+    async function fetchFiatCurrencies() {
+      try {
+        const response = await getFiatCurrencies(publishableKey);
+        setFiatCurrencies(response.data);
+        setPreferredCurrencyCodes(response.preferred || []);
+      } catch (err) {
+        console.error("Error fetching fiat currencies:", err);
+      } finally {
+        setCurrenciesLoading(false);
+      }
+    }
+    fetchFiatCurrencies();
+  }, [publishableKey]);
+  (0, import_react5.useEffect)(() => {
+    async function fetchWallets() {
+      try {
+        const response = await createEOA(
+          {
+            user_id: userId,
+            recipient_address: recipientAddress,
+            destination_chain_id: destinationChainId,
+            destination_token_address: destinationTokenAddress
+          },
+          publishableKey
+        );
+        setWallets(response.data);
+      } catch (err) {
+        console.error("Error fetching wallets:", err);
+        setQuotesError("Failed to load wallet addresses");
+      } finally {
+        setWalletsLoading(false);
+      }
+    }
+    fetchWallets();
+  }, [userId, recipientAddress, destinationChainId, destinationTokenAddress, publishableKey]);
+  (0, import_react5.useEffect)(() => {
+    async function fetchSupportedTokens() {
+      try {
+        const response = await getSupportedDepositTokens(publishableKey);
+        setSupportedTokens(response.data);
+      } catch (err) {
+        console.error("Error fetching supported tokens:", err);
+      }
+    }
+    fetchSupportedTokens();
+  }, [publishableKey]);
+  (0, import_react5.useEffect)(() => {
+    const amountNum = parseFloat(amount);
+    if (isNaN(amountNum) || amountNum <= 0) {
+      setQuotes([]);
+      return;
+    }
+    if (isLoadingIp || !userIpInfo) {
+      return;
+    }
+    if (currency.toLowerCase() === "usd" && amountNum > maxAmountUsd) {
+      setQuotes([]);
+      setQuotesError(
+        `Maximum amount is ${getCurrencySymbol("usd")}${maxAmountUsd.toLocaleString()}`
+      );
+      return;
+    }
+    const timer = setTimeout(() => {
+      fetchQuotes(amountNum);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [amount, currency, maxAmountUsd, userIpInfo, isLoadingIp, publishableKey]);
+  const fetchQuotes = async (sourceAmount) => {
+    if (!userIpInfo?.alpha2) {
+      setQuotesError("Detecting your location...");
+      return;
+    }
+    setQuotesLoading(true);
+    setQuotesError(null);
+    try {
+      const request = {
+        country_code: userIpInfo.alpha2.toUpperCase(),
+        destination_currency_code: "usdc_polygon",
+        source_amount: sourceAmount.toString(),
+        source_currency_code: currency.toLowerCase()
+      };
+      const response = await getMeldQuotes(request, publishableKey);
+      setQuotes(response.data);
+      if (hasManualSelection && selectedProvider) {
+        const manualProviderStillExists = response.data.find(
+          (q) => q.service_provider === selectedProvider.service_provider
+        );
+        if (manualProviderStillExists) {
+          setSelectedProvider(manualProviderStillExists);
+          const bestProvider = response.data.reduce(
+            (best, current) => current.destination_amount > best.destination_amount ? current : best
+          );
+          if (!autoSelectedProvider) {
+            setAutoSelectedProvider(bestProvider.service_provider);
+          }
+          setIsAutoSelected(
+            manualProviderStillExists.service_provider === autoSelectedProvider
+          );
+        } else {
+          const bestProvider = response.data.reduce(
+            (best, current) => current.destination_amount > best.destination_amount ? current : best
+          );
+          setSelectedProvider(bestProvider);
+          setAutoSelectedProvider(bestProvider.service_provider);
+          setIsAutoSelected(true);
+          setHasManualSelection(false);
+        }
+      } else {
+        if (response.data.length > 0) {
+          const bestProvider = response.data.reduce(
+            (best, current) => current.destination_amount > best.destination_amount ? current : best
+          );
+          setSelectedProvider(bestProvider);
+          setAutoSelectedProvider(bestProvider.service_provider);
+          setIsAutoSelected(true);
+        }
+      }
+      setCountdown(60);
+    } catch (error) {
+      console.error("Failed to fetch quotes:", error);
+      setQuotesError("Failed to fetch quotes");
+      setQuotes([]);
+    } finally {
+      setQuotesLoading(false);
+    }
+  };
+  (0, import_react5.useEffect)(() => {
+    if (quotes.length === 0) return;
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          const amountNum = parseFloat(amount);
+          if (!isNaN(amountNum) && amountNum > 0) {
+            fetchQuotes(amountNum);
+          }
+          return 60;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [quotes.length, amount]);
+  const handleAmountChange = (value) => {
+    const regex = /^\d*\.?\d{0,2}$/;
+    if (regex.test(value) || value === "") {
+      setAmount(value);
+    }
+  };
+  const handleQuickAmount = (quickAmount) => {
+    setAmount(quickAmount.toFixed(2));
+  };
+  const calculateUSDC = () => {
+    if (!selectedProvider) return "0.000000";
+    return selectedProvider.destination_amount.toFixed(6);
+  };
+  const selectedCurrencyData = fiatCurrencies.find(
+    (c) => c.currency_code.toLowerCase() === currency.toLowerCase()
+  );
+  const handleContinue = async () => {
+    if (!selectedProvider) return;
+    try {
+      const wallet = getWalletByChainType(wallets, "ethereum");
+      if (!wallet?.address) {
+        setQuotesError("Wallet address not available");
+        return;
+      }
+      const sessionRequest = {
+        service_provider: selectedProvider.service_provider,
+        country_code: selectedProvider.country_code.toUpperCase(),
+        destination_currency_code: selectedProvider.destination_currency_code,
+        source_currency_code: selectedProvider.source_currency_code,
+        wallet_address: wallet.address,
+        source_amount: amount
+      };
+      const session = await createMeldSession(sessionRequest, publishableKey);
+      setOnrampSession({
+        provider: selectedProvider,
+        sourceCurrency: currency,
+        sourceAmount: amount
+      });
+      window.open(session.widget_url, "_blank");
+      handleViewChange("onramp");
+    } catch (error) {
+      console.error("Failed to create session:", error);
+      setQuotesError("Failed to start payment flow");
+    }
+  };
+  const getProviderBadges = (quote, allQuotes) => {
+    const badges = [];
+    const maxDestination = Math.max(
+      ...allQuotes.map((q) => q.destination_amount)
+    );
+    if (quote.destination_amount === maxDestination) {
+      badges.push("Best price");
+    }
+    return badges;
+  };
+  const sortedQuotes = [...quotes].sort(
+    (a, b) => b.destination_amount - a.destination_amount
+  );
+  const currencySymbol = getCurrencySymbol(currency);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-pb-1 uf-relative uf-overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "div",
+      {
+        className: `uf-transition-all uf-duration-300 ${showQuotesView || showOnrampView ? "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0" : "uf-opacity-100"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-mb-6 uf-pt-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-flex uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              "button",
+              {
+                onClick: () => setShowCurrencyModal(true),
+                disabled: currenciesLoading,
+                className: "uf-flex uf-items-center uf-gap-1.5 uf-px-3 uf-py-1.5 uf-rounded-lg uf-bg-secondary hover:uf-bg-accent uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
+                children: [
+                  selectedCurrencyData && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-w-4 uf-h-4 uf-rounded-full uf-overflow-hidden uf-flex uf-items-center uf-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    "img",
+                    {
+                      src: selectedCurrencyData.icon_url,
+                      alt: selectedCurrencyData.name,
+                      width: 16,
+                      height: 16,
+                      className: "uf-w-full uf-h-full uf-object-cover uf-rounded-full"
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-sm uf-text-foreground uf-font-medium", children: currency.toUpperCase() }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.ChevronDown, { className: "uf-w-3.5 uf-h-3.5 uf-text-muted-foreground" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-text-center uf-mb-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-mb-2 uf-px-8", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex uf-items-center uf-max-w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "span",
+                  {
+                    className: "uf-font-normal uf-text-foreground uf-flex-shrink-0 uf-mr-1",
+                    style: {
+                      fontSize: `${Math.max(3.75 - amount.length * 0.15, 2)}rem`
+                    },
+                    children: currencySymbol
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: amount,
+                    onChange: (e) => handleAmountChange(e.target.value),
+                    className: "uf-font-normal uf-text-foreground uf-bg-transparent uf-text-left uf-outline-none uf-min-w-[1ch]",
+                    placeholder: "0",
+                    style: {
+                      caretColor: "currentColor",
+                      fontSize: `${Math.max(3.75 - amount.length * 0.15, 2)}rem`,
+                      width: `${Math.max(amount.length || 1, 1)}ch`
+                    }
+                  }
+                )
+              ] }) }),
+              quotesLoading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-flex uf-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-h-4 uf-bg-muted uf-rounded uf-w-40 uf-animate-pulse" }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-text-sm uf-text-muted-foreground uf-font-normal", children: [
+                calculateUSDC(),
+                " USDC (Perps)"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-flex uf-gap-3 uf-justify-center", children: QUICK_AMOUNTS.map((quickAmount) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              "button",
+              {
+                onClick: () => handleQuickAmount(quickAmount),
+                className: "uf-w-24 uf-py-2 uf-rounded-lg uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-text-sm uf-text-foreground uf-font-medium",
+                children: [
+                  getCurrencySymbol(currency),
+                  quickAmount.toLocaleString()
+                ]
+              },
+              quickAmount
+            )) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-mb-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-font-medium uf-mb-2 uf-px-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-foreground", children: "Provider" }),
+              quotes.length > 0 && !quotesLoading && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "uf-text-[10px] uf-text-foreground uf-font-normal", children: [
+                "Refreshing in ",
+                countdown,
+                "s"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "button",
+              {
+                onClick: () => handleViewChange("quotes"),
+                disabled: quotesLoading || quotes.length === 0,
+                className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-4 uf-group disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
+                children: quotesLoading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-text-left uf-w-full uf-animate-pulse", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-h-3 uf-bg-muted uf-rounded uf-w-28 uf-mb-3" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-w-8 uf-h-8 uf-bg-muted uf-rounded-full" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-h-4 uf-bg-muted uf-rounded uf-w-32" })
+                  ] })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-w-full uf-text-left", children: [
+                  isAutoSelected && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-text-xs uf-text-muted-foreground uf-font-normal uf-mb-2", children: "Auto-picked for you" }),
+                  selectedProvider && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      "img",
+                      {
+                        src: selectedProvider.icon_url,
+                        alt: selectedProvider.service_provider,
+                        width: 32,
+                        height: 32,
+                        className: "uf-rounded-full uf-flex-shrink-0"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-text-sm uf-text-foreground uf-font-medium", children: selectedProvider.service_provider_display_name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
+                        isAutoSelected && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-[10px] uf-text-green-400 uf-font-normal", children: "Best price" }),
+                        isAutoSelected && selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground", children: "\u2022" }),
+                        selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" })
+                      ] })
+                    ] }),
+                    quotes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors uf-flex-shrink-0" })
+                  ] })
+                ] })
+              }
+            ),
+            quotesError && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-text-xs uf-text-red-400 uf-mt-2 uf-px-1", children: quotesError })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              onClick: handleContinue,
+              disabled: quotesLoading || walletsLoading || isLoadingIp || !selectedProvider || parseFloat(amount) <= 0 || currency.toLowerCase() === "usd" && parseFloat(amount) > maxAmountUsd,
+              style: {
+                backgroundColor: accentColor
+              },
+              className: "uf-w-full disabled:uf-cursor-not-allowed disabled:!uf-bg-muted uf-text-white uf-rounded-xl uf-py-4 uf-font-medium uf-text-base uf-transition-all hover:uf-opacity-90 disabled:uf-opacity-50 disabled:uf-text-muted-foreground",
+              children: isLoadingIp ? "Detecting location..." : walletsLoading ? "Loading..." : "Continue"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        className: `uf-transition-all uf-duration-300 ${showQuotesView && !showOnrampView ? "uf-opacity-100" : "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-space-y-2 uf-pt-2", children: sortedQuotes.map((quote, index) => {
+          const badges = getProviderBadges(quote, sortedQuotes);
+          const displayName = quote.service_provider_display_name;
+          const isSelected = selectedProvider?.service_provider === quote.service_provider;
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            "button",
+            {
+              onClick: () => {
+                setSelectedProvider(quote);
+                setHasManualSelection(true);
+                setIsAutoSelected(
+                  quote.service_provider === autoSelectedProvider
+                );
+                handleViewChange("amount");
+              },
+              className: `uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-group ${isSelected ? "uf-ring-2 uf-ring-inset uf-ring-primary" : ""}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-w-10 uf-h-10 uf-flex uf-items-center uf-justify-center uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    "img",
+                    {
+                      src: quote.icon_url,
+                      alt: displayName,
+                      width: 40,
+                      height: 40,
+                      className: "uf-rounded-full"
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-text-left", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-text-sm uf-font-medium uf-text-foreground", children: displayName }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
+                      badges.map((badge, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                        "span",
+                        {
+                          className: "uf-text-[10px] uf-text-green-400 uf-font-normal",
+                          children: [
+                            badge,
+                            i < badges.length - 1 && ","
+                          ]
+                        },
+                        i
+                      )),
+                      quote.low_kyc === false && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground", children: "\u2022" }),
+                      quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-text-right", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-text-sm uf-font-medium uf-text-foreground", children: [
+                    quote.destination_amount.toFixed(2),
+                    " USDC"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-text-xs uf-text-muted-foreground uf-font-normal", children: [
+                    currencySymbol,
+                    " ",
+                    amount
+                  ] })
+                ] })
+              ]
+            },
+            index
+          );
+        }) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        className: `uf-transition-all uf-duration-300 ${showOnrampView ? "uf-opacity-100" : "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0"}`,
+        children: onrampSession && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-6 uf-pb-4 uf-px-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "img",
+            {
+              src: onrampSession.provider.icon_url,
+              alt: onrampSession.provider.service_provider_display_name,
+              width: 64,
+              height: 64,
+              className: "uf-rounded-2xl"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { className: "uf-text-xl uf-font-medium uf-text-foreground uf-mb-2", children: t2.onramp.completeTransaction.replace(
+            "{{provider}}",
+            onrampSession.provider.service_provider_display_name
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-mb-8", children: t2.onramp.canCloseModal }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-4 uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex-1 uf-flex uf-flex-col uf-items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2 uf-mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                "img",
+                {
+                  src: getIconUrl(
+                    `/icons/currencies/${onrampSession.sourceCurrency.toLowerCase()}.svg`
+                  ),
+                  alt: onrampSession.sourceCurrency.toUpperCase(),
+                  width: 28,
+                  height: 28,
+                  className: "uf-rounded-full"
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground", children: t2.onramp.youUse }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-sm uf-font-medium uf-text-foreground", children: onrampSession.sourceCurrency.toUpperCase() })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-text-muted-foreground uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.ChevronRight, { className: "uf-w-5 uf-h-5" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex-1 uf-flex uf-flex-col uf-items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2 uf-mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-relative", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "img",
+                  {
+                    src: getIconUrl("/icons/tokens/usdc.svg"),
+                    alt: "USDC",
+                    width: 28,
+                    height: 28,
+                    className: "uf-rounded-full"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "img",
+                  {
+                    src: getIconUrl("/icons/networks/polygon.svg"),
+                    alt: "Polygon",
+                    width: 14,
+                    height: 14,
+                    className: "uf-absolute uf--bottom-0.5 uf--right-0.5 uf-rounded-full"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground", children: t2.onramp.youBuy }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-sm uf-font-medium uf-text-foreground", children: "USDC" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-text-muted-foreground uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.ChevronRight, { className: "uf-w-5 uf-h-5" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-flex-1 uf-flex uf-flex-col uf-items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2 uf-mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-relative", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "img",
+                  {
+                    src: destinationToken?.icon_url || getIconUrl("/icons/tokens/usdc.svg"),
+                    alt: displayTokenSymbol,
+                    width: 28,
+                    height: 28,
+                    className: "uf-rounded-full"
+                  }
+                ),
+                destinationChain?.icon_url && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "img",
+                  {
+                    src: destinationChain.icon_url,
+                    alt: destinationChain.chain_name,
+                    width: 14,
+                    height: 14,
+                    className: "uf-absolute uf--bottom-0.5 uf--right-0.5 uf-rounded-full"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground", children: t2.onramp.youReceive }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "uf-text-sm uf-font-medium uf-text-foreground", children: displayTokenSymbol })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-4", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t2.onramp.intentAddressNote }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      CurrencyModal,
+      {
+        open: showCurrencyModal,
+        onOpenChange: setShowCurrencyModal,
+        currencies: fiatCurrencies,
+        preferredCurrencyCodes,
+        selectedCurrency: currency,
+        onSelectCurrency: (currencyCode) => {
+          setCurrency(currencyCode.toLowerCase());
+        },
+        themeClass
+      }
+    )
+  ] });
+}
+
+// src/components/deposits/buttons/TransferCryptoButton.tsx
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function TransferCryptoButton({
+  onClick,
+  title,
+  subtitle
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "button",
+    {
+      onClick,
+      className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.Zap, { className: "uf-w-5 uf-h-5" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-text-sm uf-font-normal uf-mb-0.5 uf-text-foreground", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-text-muted-foreground uf-text-xs uf-font-light", children: subtitle })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf--space-x-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "img",
+              {
+                src: getIconUrl("/icons/networks/ethereum.svg"),
+                alt: "ETH",
+                width: 20,
+                height: 20,
+                className: "uf-rounded-full uf-border-2 uf-border-secondary"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "img",
+              {
+                src: getIconUrl("/icons/networks/optimism.svg"),
+                alt: "OP",
+                width: 20,
+                height: 20,
+                className: "uf-rounded-full uf-border-2 uf-border-secondary"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "img",
+              {
+                src: getIconUrl("/icons/networks/polygon.svg"),
+                alt: "MATIC",
+                width: 20,
+                height: 20,
+                className: "uf-rounded-full uf-border-2 uf-border-secondary"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "img",
+              {
+                src: getIconUrl("/icons/networks/arbitrum.svg"),
+                alt: "ARB",
+                width: 20,
+                height: 20,
+                className: "uf-rounded-full uf-border-2 uf-border-secondary"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "img",
+              {
+                src: getIconUrl("/icons/tokens/usdc.svg"),
+                alt: "USDC",
+                width: 20,
+                height: 20,
+                className: "uf-rounded-full uf-border-2 uf-border-secondary"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "img",
+              {
+                src: getIconUrl("/icons/networks/solana.svg"),
+                alt: "SOL",
+                width: 20,
+                height: 20,
+                className: "uf-rounded-full uf-border-2 uf-border-secondary"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "img",
+              {
+                src: getIconUrl("/icons/tokens/avax.svg"),
+                alt: "AVAX",
+                width: 20,
+                height: 20,
+                className: "uf-rounded-full uf-border-2 uf-border-secondary"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "img",
+              {
+                src: getIconUrl("/icons/networks/bitcoin.svg"),
+                alt: "BTC",
+                width: 20,
+                height: 20,
+                className: "uf-rounded-full uf-border-2 uf-border-secondary"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/deposits/buttons/DepositWithCardButton.tsx
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function DepositWithCardButton({
+  onClick,
+  title,
+  subtitle
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "button",
+    {
+      onClick,
+      className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.CreditCard, { className: "uf-w-5 uf-h-5" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "uf-text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uf-text-sm uf-font-normal uf-mb-0.5 uf-text-foreground", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uf-text-muted-foreground uf-text-xs uf-font-light", children: subtitle })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "img",
+              {
+                src: getIconUrl("/icons/networks/mastercard.svg"),
+                alt: "Mastercard",
+                width: 32,
+                height: 32,
+                className: "uf-rounded"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "img",
+              {
+                src: getIconUrl("/icons/networks/visa.svg"),
+                alt: "Visa",
+                width: 32,
+                height: 32,
+                className: "uf-rounded"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/deposits/buttons/DepositTrackerButton.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function DepositTrackerButton({
+  onClick,
+  title,
+  subtitle,
+  badge
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "button",
+    {
+      onClick,
+      className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uf-bg-muted uf-rounded-lg uf-p-2 uf-relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.Clock, { className: "uf-w-5 uf-h-5" }),
+            badge !== void 0 && badge > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uf-absolute -uf-top-1 -uf-right-1 uf-bg-blue-500 uf-text-primary-foreground uf-text-[10px] uf-font-semibold uf-rounded-full uf-min-w-[18px] uf-h-[18px] uf-flex uf-items-center uf-justify-center uf-px-1", children: badge > 99 ? "99+" : badge })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uf-text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uf-text-sm uf-font-normal uf-mb-0.5 uf-text-foreground", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uf-text-muted-foreground uf-text-xs uf-font-light", children: subtitle })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors" })
+      ]
+    }
+  );
+}
+
+// src/components/deposits/DepositModal.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var t3 = i18n.depositModal;
+function DepositModal({
+  open,
+  onOpenChange,
+  userId,
+  publishableKey,
+  modalTitle,
+  destinationTokenSymbol,
+  recipientAddress,
+  destinationChainId,
+  destinationTokenAddress,
+  hideDepositTracker = false,
+  onDepositSuccess,
+  onDepositError,
+  theme = "dark"
+}) {
+  const [view, setView] = (0, import_react6.useState)("main");
+  const [cardView, setCardView] = (0, import_react6.useState)(
+    "amount"
+  );
+  const [quotesCount, setQuotesCount] = (0, import_react6.useState)(0);
+  const [depositsModalOpen, setDepositsModalOpen] = (0, import_react6.useState)(false);
+  const [depositExecutions, setDepositExecutions] = (0, import_react6.useState)([]);
+  const [resolvedTheme, setResolvedTheme] = (0, import_react6.useState)(theme === "auto" ? "dark" : theme);
+  (0, import_react6.useEffect)(() => {
+    if (theme === "auto") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      setResolvedTheme(mediaQuery.matches ? "dark" : "light");
+      const handler = (e) => {
+        setResolvedTheme(e.matches ? "dark" : "light");
+      };
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    } else {
+      setResolvedTheme(theme);
+    }
+  }, [theme]);
+  const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
+  const handleClose = () => {
+    onOpenChange(false);
+    setTimeout(() => {
+      setView("main");
+      setCardView("amount");
+    }, 200);
+  };
+  const handleBack = () => {
+    if (view === "card" && cardView === "quotes") {
+      setCardView("amount");
+    } else if (view === "card" && cardView === "onramp") {
+      setCardView("amount");
+    } else {
+      setView("main");
+      setCardView("amount");
+    }
+  };
+  const handleCardViewChange = (newView, count) => {
+    setCardView(newView);
+    if (count !== void 0) {
+      setQuotesCount(count);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ThemeProvider, { themeClass, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Dialog, { open, onOpenChange: handleClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      DialogContent,
+      {
+        className: `sm:uf-max-w-[400px] !uf-bg-card uf-border-secondary uf-text-foreground uf-p-0 uf-gap-0 uf-overflow-visible [&>button]:uf-hidden ${themeClass}`,
+        onPointerDownOutside: (e) => e.preventDefault(),
+        onInteractOutside: (e) => e.preventDefault(),
+        children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            DepositHeader,
+            {
+              title: modalTitle || "Deposit",
+              onClose: handleClose
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-pb-4 uf-space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              TransferCryptoButton,
+              {
+                onClick: () => setView("transfer"),
+                title: t3.transferCrypto.title,
+                subtitle: t3.transferCrypto.subtitle
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              DepositWithCardButton,
+              {
+                onClick: () => setView("card"),
+                title: t3.depositWithCard.title,
+                subtitle: t3.depositWithCard.subtitle
+              }
+            ),
+            !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              DepositTrackerButton,
+              {
+                onClick: () => setDepositsModalOpen(true),
+                title: "Deposit Tracker",
+                subtitle: "Track your deposit progress",
+                badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
+              }
+            )
+          ] })
+        ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            DepositHeader,
+            {
+              title: t3.transferCrypto.title,
+              showBack: true,
+              onBack: handleBack,
+              onClose: handleClose
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            TransferCrypto,
+            {
+              userId,
+              publishableKey,
+              recipientAddress,
+              destinationChainId,
+              destinationTokenAddress,
+              onExecutionsChange: setDepositExecutions,
+              onDepositSuccess,
+              onDepositError
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            DepositHeader,
+            {
+              title: cardView === "quotes" ? t3.quotes : modalTitle || "Deposit",
+              showBack: true,
+              onBack: handleBack,
+              onClose: handleClose,
+              badge: cardView === "quotes" ? { count: quotesCount } : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            BuyWithCard,
+            {
+              userId,
+              publishableKey,
+              view: cardView,
+              onViewChange: handleCardViewChange,
+              destinationTokenSymbol,
+              recipientAddress,
+              destinationChainId,
+              destinationTokenAddress,
+              onDepositSuccess,
+              onDepositError,
+              themeClass
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      DepositsModal,
+      {
+        open: depositsModalOpen,
+        onOpenChange: setDepositsModalOpen,
+        executions: depositExecutions,
+        userId,
+        publishableKey,
+        themeClass
+      }
+    )
+  ] }) });
+}
+
+// src/components/deposits/TransferCrypto2.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function TransferCrypto2(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    TransferCryptoBase,
+    {
+      ...props,
+      layoutVariant: "vertical",
+      showDetailedDropdowns: true
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  BuyWithCard,
+  CurrencyListItem,
+  CurrencyListSection,
+  CurrencyModal,
+  DepositExecutionItem,
+  DepositHeader,
+  DepositModal,
+  DepositSuccessToast,
+  DepositTrackerButton,
+  DepositWithCardButton,
+  DepositsModal,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  ExecutionStatus,
+  SOLANA_USDC_ADDRESS,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  StyledQRCode,
+  ThemeProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  TransferCrypto,
+  TransferCrypto2,
+  TransferCryptoBase,
+  TransferCryptoButton,
+  buttonVariants,
+  cn,
+  createEOA,
+  createMeldSession,
+  getApiBaseUrl,
+  getFiatCurrencies,
+  getIconUrl,
+  getMeldQuotes,
+  getSupportedDepositTokens,
+  getWalletByChainType,
+  i18n,
+  queryExecutions,
+  setApiConfig,
+  useTheme,
+  useUserIp
+});