@pollar/react 0.10.0-rc.8 → 0.10.1-rc.0

package/dist/index.js

@@ -1035,7 +1035,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.10.0-rc.8"
+        "0.10.1-rc.0"
       ] })
     ] })
   ] });
@@ -1855,12 +1855,39 @@ var GoogleButton = ({ disabled, onClick }) => {
 function WalletAdapterButtons({
   walletAdapters,
   onConnect,
-  isLoading
+  isLoading,
+  variant = "list"
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-wallet-list", children: walletAdapters.map((a) => /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", disabled: isLoading, className: "pollar-wallet-list-btn", onClick: () => onConnect(a.id), children: [
-    a.meta.iconUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: a.meta.iconUrl, alt: a.meta.label, className: "pollar-wallet-list-icon" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-wallet-list-name", children: a.meta.label })
-  ] }, a.id)) });
+  if (variant === "entry") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: walletAdapters.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: isLoading,
+        className: "pollar-wallet-entry-btn",
+        onClick: () => onConnect(a.id),
+        children: [
+          a.meta.iconUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: a.meta.iconUrl, alt: a.meta.label, className: "pollar-wallet-icon" }),
+          a.meta.label
+        ]
+      },
+      a.id
+    )) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-wallet-list", children: walletAdapters.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: isLoading,
+      className: "pollar-wallet-list-btn",
+      onClick: () => onConnect(a.id),
+      children: [
+        a.meta.iconUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: a.meta.iconUrl, alt: a.meta.label, className: "pollar-wallet-list-icon" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-wallet-list-name", children: a.meta.label })
+      ]
+    },
+    a.id
+  )) });
 }
 var AUTH_STATE_MESSAGES = {
   idle: "",
@@ -1917,7 +1944,6 @@ function LoginModalTemplate({
   onWalletConnect,
   onLoginSmartWallet,
   onCreateSmartWallet,
-  renderWallets,
   authState,
   codeInputKey,
   onCodeSubmit,
@@ -1925,10 +1951,19 @@ function LoginModalTemplate({
   onCancel,
   onRetry
 }) {
-  const [showWalletPicker, setShowWalletPicker] = react.useState(false);
   const [showPasskeyChooser, setShowPasskeyChooser] = react.useState(false);
+  const [activeGroup, setActiveGroup] = react.useState(null);
   const isDark = theme === "dark";
   const enabledSocial = Object.entries(providers).filter(([, enabled]) => enabled);
+  const rootAdapters = walletAdapters.filter((a) => !a.meta.group);
+  const walletGroups = walletAdapters.filter((a) => a.meta.group).reduce((acc, a) => {
+    const label = a.meta.group;
+    const existing = acc.find((g) => g.label === label);
+    if (existing) existing.adapters.push(a);
+    else acc.push({ label, adapters: [a] });
+    return acc;
+  }, []);
+  const activeGroupAdapters = walletGroups.find((g) => g.label === activeGroup)?.adapters ?? [];
   const cssVars = {
     "--pollar-accent": accentColor,
     "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
@@ -1992,11 +2027,17 @@ function LoginModalTemplate({
       /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: onBack }),
       /* @__PURE__ */ jsxRuntime.jsx(EmailCodeInput, { email, onSubmit: onCodeSubmit ?? (() => {
       }) }, codeInputKey)
-    ] }) : showWalletPicker ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: () => setShowWalletPicker(false) }),
-      renderWallets ? renderWallets({ onConnect: onWalletConnect ?? (() => {
-      }), authState }) : /* @__PURE__ */ jsxRuntime.jsx(WalletAdapterButtons, { walletAdapters, onConnect: onWalletConnect ?? (() => {
-      }), isLoading })
+    ] }) : activeGroup ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: () => setActiveGroup(null) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        WalletAdapterButtons,
+        {
+          walletAdapters: activeGroupAdapters,
+          onConnect: onWalletConnect ?? (() => {
+          }),
+          isLoading
+        }
+      )
     ] }) : showPasskeyChooser ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: () => setShowPasskeyChooser(false) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-wallet-section", children: [
@@ -2038,32 +2079,45 @@ function LoginModalTemplate({
         enabledSocial.some(([key]) => key === "github") && /* @__PURE__ */ jsxRuntime.jsx(GithubButton, { disabled: isLoading, onClick: () => onSocialLogin?.("github") })
       ] }),
       (embeddedWallets || smartWallet) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-wallet-section", children: [
-        embeddedWallets && /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            disabled: isLoading,
-            className: "pollar-wallet-entry-btn",
-            onClick: () => setShowWalletPicker(true),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  width: "18",
-                  height: "20",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" })
-                }
-              ),
-              "Wallet"
-            ]
-          }
-        ),
+        embeddedWallets && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          walletGroups.map((g) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: isLoading,
+              className: "pollar-wallet-entry-btn",
+              onClick: () => setActiveGroup(g.label),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "18",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" })
+                  }
+                ),
+                g.label
+              ]
+            },
+            g.label
+          )),
+          rootAdapters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            WalletAdapterButtons,
+            {
+              walletAdapters: rootAdapters,
+              onConnect: onWalletConnect ?? (() => {
+              }),
+              isLoading,
+              variant: "entry"
+            }
+          )
+        ] }),
         smartWallet && /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -2104,13 +2158,142 @@ function LoginModalTemplate({
     /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
   ] });
 }
+function PrivyLoginSubmodal({
+  adapter,
+  theme,
+  accentColor,
+  logoUrl,
+  appName,
+  onBack,
+  onCancel,
+  onAuthenticated
+}) {
+  const options = react.useMemo(() => adapter.getAuthOptions(), [adapter]);
+  const [email, setEmail] = react.useState("");
+  const [view, setView] = react.useState("root");
+  const [status, setStatus] = react.useState("NONE");
+  const [message, setMessage] = react.useState("");
+  const isDark = theme === "dark";
+  const isLoading = status === "LOADING";
+  const cssVars = {
+    "--pollar-accent": accentColor,
+    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
+    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
+    "--pollar-text": isDark ? "#ffffff" : "#111827",
+    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
+    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
+    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
+    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--pollar-input-height": "44px",
+    "--pollar-input-border-radius": "0.5rem",
+    "--pollar-card-border-radius": "10px",
+    "--pollar-modal-padding": "2rem",
+    "--pollar-modal-heading-size": "1.375rem",
+    "--pollar-modal-subtitle-size": "0.9rem"
+  };
+  function fail(error) {
+    setStatus("ERROR");
+    setMessage(error instanceof Error ? error.message : "Something went wrong. Please try again.");
+  }
+  async function handleEmailSubmit() {
+    if (!email) return;
+    setStatus("LOADING");
+    setMessage("");
+    try {
+      await adapter.sendEmailCode(email);
+      setStatus("SUCCESS");
+      setMessage("Code sent \u2014 check your inbox");
+      setView("email-code");
+    } catch (error) {
+      fail(error);
+    }
+  }
+  async function handleCodeSubmit(code) {
+    setStatus("LOADING");
+    setMessage("Verifying\u2026");
+    try {
+      await adapter.verifyEmailCode(code);
+      onAuthenticated();
+    } catch (error) {
+      fail(error);
+    }
+  }
+  async function handleOAuth(provider) {
+    setStatus("LOADING");
+    setMessage("");
+    try {
+      await adapter.loginWithOAuth(provider);
+      onAuthenticated();
+    } catch (error) {
+      fail(error);
+    }
+  }
+  const BackButton = ({ onClick }) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-back-btn", onClick, "aria-label": "Back", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 19l-7-7 7-7" }) }) });
+  const showEmail = options.includes("email");
+  const showGoogle = options.includes("google");
+  const showGithub = options.includes("github");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-close-btn", onClick: onCancel, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-logo-wrap", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl ?? LOGO_POLLAR, alt: "Logo", className: "pollar-logo" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-title", children: appName }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-subtitle", children: adapter.meta.label })
+    ] }),
+    view === "email-code" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: () => setView("root") }),
+      /* @__PURE__ */ jsxRuntime.jsx(EmailCodeInput, { email, onSubmit: handleCodeSubmit })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: onBack }),
+      showEmail && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-email-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "email",
+            placeholder: "you@email.com",
+            value: email,
+            disabled: isLoading,
+            className: "pollar-email-input",
+            onChange: (e) => setEmail(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && handleEmailSubmit()
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled: isLoading || !email,
+            className: "pollar-btn-primary",
+            style: { marginTop: "0.75rem" },
+            onClick: handleEmailSubmit,
+            children: "Submit"
+          }
+        )
+      ] }),
+      showEmail && (showGoogle || showGithub) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-divider", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-divider-line" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-divider-label", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-divider-text", children: "or continue with" }) })
+      ] }),
+      (showGoogle || showGithub) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-social-list", children: [
+        showGoogle && /* @__PURE__ */ jsxRuntime.jsx(GoogleButton, { disabled: isLoading, onClick: () => handleOAuth("google") }),
+        showGithub && /* @__PURE__ */ jsxRuntime.jsx(GithubButton, { disabled: isLoading, onClick: () => handleOAuth("github") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ModalStatusBanner, { message, status, onCancel, onRetry: void 0 }),
+    /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
+  ] });
+}
 function LoginModal({ onClose }) {
   const [email, setEmail] = react.useState("");
-  const { getClient, styles, appConfig: config, renderWallets } = usePollar();
+  const { getClient, styles, appConfig: config } = usePollar();
   const [authState, setAuthState] = react.useState(() => getClient().getAuthState());
   const walletAdapters = react.useMemo(() => getClient().listWalletAdapters(), [getClient]);
   const [codeInputKey, setCodeInputKey] = react.useState(0);
   const pendingEmail = react.useRef(null);
+  const [interactiveAdapter, setInteractiveAdapter] = react.useState(null);
   const onCloseRef = react.useRef(onClose);
   onCloseRef.current = onClose;
   const autoCloseTimer = react.useRef(null);
@@ -2158,6 +2341,11 @@ function LoginModal({ onClose }) {
     getClient().login({ provider });
   }
   function handleWalletConnect(type) {
+    const adapter = getClient().getWalletAdapter(type);
+    if (core.isInteractiveAuthAdapter(adapter)) {
+      setInteractiveAdapter(adapter);
+      return;
+    }
     getClient().login({ provider: type });
   }
   function handleLoginSmartWallet() {
@@ -2179,7 +2367,26 @@ function LoginModal({ onClose }) {
       getClient().beginEmailLogin();
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+  function handleInteractiveAuthenticated() {
+    const provider = interactiveAdapter?.type;
+    setInteractiveAdapter(null);
+    if (provider) {
+      getClient().login({ provider });
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: handleClose, children: interactiveAdapter ? /* @__PURE__ */ jsxRuntime.jsx(
+    PrivyLoginSubmodal,
+    {
+      adapter: interactiveAdapter,
+      theme,
+      accentColor,
+      logoUrl: logoUrl ?? null,
+      appName: config.application?.name ?? "Pollar",
+      onBack: () => setInteractiveAdapter(null),
+      onCancel: handleClose,
+      onAuthenticated: handleInteractiveAuthenticated
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
     LoginModalTemplate,
     {
       theme,
@@ -2204,7 +2411,6 @@ function LoginModal({ onClose }) {
       onWalletConnect: handleWalletConnect,
       onLoginSmartWallet: handleLoginSmartWallet,
       onCreateSmartWallet: handleCreateSmartWallet,
-      ...renderWallets !== void 0 && { renderWallets },
       authState,
       codeInputKey,
       onCodeSubmit: handleVerifyCode,
@@ -2261,6 +2467,12 @@ var COUNTRY_CURRENCIES = {
   PE: "PEN",
   AR: "ARS"
 };
+var STATUS_LABEL = {
+  pending: "Pending",
+  processing: "Processing",
+  completed: "Completed",
+  failed: "Failed"
+};
 function RampWidgetTemplate({
   theme,
   accentColor,
@@ -2270,15 +2482,23 @@ function RampWidgetTemplate({
   currency,
   country,
   quotes,
-  paymentInstructions,
   isLoading,
+  provider,
+  txStatus,
+  kycUrl,
+  stellarTxHash,
+  canComplete,
+  completing,
+  errorMsg,
   onDirectionChange,
   onAmountChange,
   onCurrencyChange,
   onCountryChange,
   onFindRoute,
   onSelectQuote,
-  onCopy,
+  onOpenKyc,
+  onCompleteWithdraw,
+  onRetry,
   onClose
 }) {
   const isDark = theme === "dark";
@@ -2306,13 +2526,15 @@ function RampWidgetTemplate({
     input: direction === "onramp" ? "Buy crypto" : "Sell crypto",
     loading_quote: "Finding best route",
     select_route: "Select provider",
-    payment_instructions: "Payment instructions"
+    status: direction === "onramp" ? "Complete your deposit" : "Complete your withdrawal",
+    error: "Something went wrong"
   };
   const stepSubtitle = {
     input: direction === "onramp" ? "Enter the amount you want to deposit" : "Enter the amount you want to withdraw",
     loading_quote: "Comparing providers in real time\u2026",
     select_route: "All prices include fees",
-    payment_instructions: "Send the exact amount to complete your transaction"
+    status: `Finish the flow at ${provider || "the provider"} to continue`,
+    error: "Please try again"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-ramp-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-header", children: [
@@ -2408,183 +2630,183 @@ function RampWidgetTemplate({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-route-list", children: quotes.map((q, i) => /* @__PURE__ */ jsxRuntime.jsx(RouteDisplay, { quote: q, onSelect: onSelectQuote }, i)) }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: "Cancel" })
     ] }),
-    step === "payment_instructions" && paymentInstructions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-ramp-payment-title", children: paymentInstructions.type }),
+    step === "status" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-field", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: paymentInstructions.type === "CLABE" ? "CLABE number" : paymentInstructions.type === "PIX" ? "PIX key" : "Account number" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-value", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("code", { children: paymentInstructions.value }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-ramp-copy-btn", onClick: () => onCopy(paymentInstructions.value), children: "Copy" })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: "Provider" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-payment-value", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: provider }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-field", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: "Amount to send" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-value", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
-            paymentInstructions.amount.toLocaleString(),
-            " ",
-            paymentInstructions.currency
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: "pollar-ramp-copy-btn",
-              onClick: () => onCopy(`${paymentInstructions.amount} ${paymentInstructions.currency}`),
-              children: "Copy"
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: "Status" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-payment-value", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "code",
+          {
+            style: { color: txStatus === "completed" ? "var(--pollar-success-text)" : void 0 },
+            children: txStatus ? STATUS_LABEL[txStatus] : "Processing"
+          }
+        ) })
       ] }),
-      paymentInstructions.expiresAt && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "pollar-ramp-payment-note", children: [
-        "Instructions expire at ",
-        new Date(paymentInstructions.expiresAt).toLocaleTimeString()
+      stellarTxHash && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: "Stellar tx" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-payment-value", children: /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
+          stellarTxHash.slice(0, 8),
+          "\u2026",
+          stellarTxHash.slice(-8)
+        ] }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: onClose, children: "Done" })
+      kycUrl && txStatus !== "completed" && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "pollar-btn-primary", onClick: onOpenKyc, children: [
+        "Continue at ",
+        provider
+      ] }),
+      canComplete && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", disabled: completing, onClick: onCompleteWithdraw, children: completing ? "Submitting\u2026" : "I've completed KYC \u2014 withdraw" }),
+      errorMsg && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-ramp-payment-note", style: { color: "var(--pollar-error-text)" }, children: errorMsg }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: txStatus === "completed" ? "Done" : "Close" })
+    ] }),
+    step === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-ramp-payment-note", style: { color: "var(--pollar-error-text)" }, children: errorMsg ?? "Unexpected error." }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-actions", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: "Close" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: onRetry, children: "Try again" })
+      ] })
     ] })
   ] });
 }
-var MOCK_DEFAULT_QUOTES = [
-  {
-    quoteId: "meld-default",
-    provider: "Meld",
-    fee: 1.2,
-    feeCurrency: "USD",
-    rate: 1,
-    rail: "ACH",
-    protocol: "REST",
-    estimatedTime: "~20 min",
-    recommended: true
-  }
-];
-var MOCK_QUOTES = {
-  MX: [
-    {
-      quoteId: "etherfuse-mx",
-      provider: "Etherfuse",
-      fee: 0.5,
-      feeCurrency: "MXN",
-      rate: 17.2,
-      rail: "SPEI",
-      protocol: "SEP-24",
-      estimatedTime: "~10 min",
-      recommended: true
-    },
-    {
-      quoteId: "alfredpay-mx",
-      provider: "AlfredPay",
-      fee: 0.8,
-      feeCurrency: "MXN",
-      rate: 17.1,
-      rail: "SPEI",
-      protocol: "REST",
-      estimatedTime: "~15 min",
-      recommended: false
-    }
-  ],
-  BR: [
-    {
-      quoteId: "abroad-br",
-      provider: "Abroad",
-      fee: 0.6,
-      feeCurrency: "BRL",
-      rate: 5.1,
-      rail: "PIX",
-      protocol: "REST",
-      estimatedTime: "~5 min",
-      recommended: true
-    }
-  ],
-  CO: [
-    {
-      quoteId: "abroad-co",
-      provider: "Abroad",
-      fee: 0.7,
-      feeCurrency: "COP",
-      rate: 4100,
-      rail: "PSE",
-      protocol: "REST",
-      estimatedTime: "~10 min",
-      recommended: true
-    },
-    {
-      quoteId: "koywe-co",
-      provider: "Koywe",
-      fee: 0.9,
-      feeCurrency: "COP",
-      rate: 4095,
-      rail: "PSE",
-      protocol: "REST",
-      estimatedTime: "~15 min",
-      recommended: false
-    }
-  ],
-  DEFAULT: MOCK_DEFAULT_QUOTES
-};
-var MOCK_PAYMENT = {
-  type: "CLABE",
-  value: "646180157088723456",
-  amount: 1e3,
-  currency: "MXN",
-  expiresAt: new Date(Date.now() + 30 * 60 * 1e3).toISOString()
-};
+var TERMINAL = ["completed", "failed"];
 function RampWidget({ onClose }) {
-  const { getClient, wallet, styles } = usePollar();
+  const { getClient, signTx, wallet, styles } = usePollar();
   const walletAddress = wallet?.address ?? "";
+  const client = getClient();
+  const { theme = "light", accentColor = "#005DB4" } = styles;
   const [step, setStep] = react.useState("input");
   const [direction, setDirection] = react.useState("onramp");
   const [amount, setAmount] = react.useState("");
-  const [currency, setCurrency] = react.useState("MXN");
-  const [country, setCountry] = react.useState("MX");
+  const [currency, setCurrency] = react.useState("ARS");
+  const [country, setCountry] = react.useState("AR");
   const [quotes, setQuotes] = react.useState([]);
-  const [paymentInstructions, setPaymentInstructions] = react.useState(null);
   const [isLoading, setIsLoading] = react.useState(false);
-  const client = getClient();
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const [txId, setTxId] = react.useState(null);
+  const [provider, setProvider] = react.useState("");
+  const [kycUrl, setKycUrl] = react.useState(null);
+  const [txStatus, setTxStatus] = react.useState(null);
+  const [stellarTxHash, setStellarTxHash] = react.useState(null);
+  const [completing, setCompleting] = react.useState(false);
+  const [errorMsg, setErrorMsg] = react.useState(null);
+  const directionRef = react.useRef(direction);
+  directionRef.current = direction;
+  react.useEffect(() => {
+    if (step !== "status" || !txId) return;
+    if (txStatus && TERMINAL.includes(txStatus)) return;
+    let active = true;
+    const id = setInterval(async () => {
+      try {
+        const tx = await client.getRampTransaction(txId);
+        if (!active) return;
+        setTxStatus(tx.status);
+        if (tx.stellarTxHash) setStellarTxHash(tx.stellarTxHash);
+        if (tx.kycUrl) setKycUrl(tx.kycUrl);
+        if (TERMINAL.includes(tx.status)) clearInterval(id);
+      } catch {
+      }
+    }, 5e3);
+    return () => {
+      active = false;
+      clearInterval(id);
+    };
+  }, [step, txId, txStatus, client]);
+  function resetToInput() {
+    setStep("input");
+    setQuotes([]);
+    setTxId(null);
+    setProvider("");
+    setKycUrl(null);
+    setTxStatus(null);
+    setStellarTxHash(null);
+    setErrorMsg(null);
+  }
+  async function resumeWithSignature(id, ps) {
+    const outcome = await signTx(ps.unsignedXdr);
+    if (outcome.status !== "signed") {
+      setErrorMsg(outcome.message ?? outcome.details ?? "Signing was cancelled.");
+      setStep("error");
+      return;
+    }
+    const result = await client.submitRampSignature(id, {
+      signedXdr: outcome.signedXdr,
+      action: ps.action
+    });
+    await applyResult(result);
+  }
+  async function applyResult(result) {
+    setTxId(result.txId);
+    setProvider(result.provider);
+    if (result.pendingSignature) {
+      await resumeWithSignature(result.txId, result.pendingSignature);
+      return;
+    }
+    setKycUrl(result.kycUrl ?? null);
+    setTxStatus(result.status);
+    setStellarTxHash(result.stellarTxHash ?? null);
+    setStep("status");
+  }
   async function handleFindRoute() {
     setStep("loading_quote");
     setIsLoading(true);
+    setErrorMsg(null);
     try {
-      const result = await client.getRampsQuote({
-        country,
-        amount: Number(amount),
-        currency,
-        direction
-      });
-      if (result.quotes) setQuotes(result.quotes);
-    } catch {
-      await new Promise((r) => setTimeout(r, 1500));
-      setQuotes(MOCK_QUOTES[country] ?? MOCK_DEFAULT_QUOTES);
+      const result = await client.getRampsQuote({ country, amount: Number(amount), currency, direction });
+      const list = result.quotes ?? [];
+      if (list.length === 0) {
+        setErrorMsg(`No ramp providers available for ${country} yet.`);
+        setStep("error");
+        return;
+      }
+      setQuotes(list);
+      setStep("select_route");
+    } catch (e) {
+      setErrorMsg(e instanceof Error ? e.message : "Failed to fetch quotes.");
+      setStep("error");
     } finally {
       setIsLoading(false);
-      setStep("select_route");
     }
   }
   async function handleSelectQuote(quote) {
-    if (!walletAddress) return;
     setIsLoading(true);
-    const body = {
-      quoteId: `${quote.provider}-${Date.now()}`,
-      amount: Number(amount),
-      currency,
-      country,
-      walletAddress
-    };
+    setErrorMsg(null);
     try {
-      const result = await client.createOnRamp(body);
-      setPaymentInstructions(result.paymentInstructions);
-    } catch {
-      await new Promise((r) => setTimeout(r, 800));
-      setPaymentInstructions({ ...MOCK_PAYMENT, currency });
+      const base = { quoteId: quote.quoteId, amount: Number(amount), currency, country };
+      const result = direction === "onramp" ? await client.createOnRamp({ ...base, ...walletAddress ? { walletAddress } : {} }) : await client.createOffRamp({ ...base, ...walletAddress ? { walletAddress } : {} });
+      await applyResult(result);
+    } catch (e) {
+      setErrorMsg(e instanceof Error ? e.message : "Failed to start the ramp.");
+      setStep("error");
     } finally {
       setIsLoading(false);
-      setStep("payment_instructions");
     }
   }
-  function handleCopy(value) {
-    navigator.clipboard.writeText(value).catch(() => {
-    });
+  function handleOpenKyc() {
+    if (kycUrl) window.open(kycUrl, "_blank", "noopener,noreferrer");
+  }
+  async function handleCompleteWithdraw() {
+    if (!txId) return;
+    setCompleting(true);
+    setErrorMsg(null);
+    try {
+      const result = await client.completeWithdraw(txId);
+      if (result.pendingSignature) {
+        await resumeWithSignature(txId, result.pendingSignature);
+        return;
+      }
+      setTxStatus(result.status);
+      setStellarTxHash(result.stellarTxHash ?? null);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "";
+      setErrorMsg(
+        msg.includes("KYC") ? "Finish KYC at the provider first, then try again." : msg || "Failed to complete the withdrawal."
+      );
+    } finally {
+      setCompleting(false);
+    }
   }
+  const canComplete = direction === "offramp" && step === "status" && txStatus !== "completed" && !stellarTxHash;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     RampWidgetTemplate,
     {
@@ -2596,15 +2818,23 @@ function RampWidget({ onClose }) {
       currency,
       country,
       quotes,
-      paymentInstructions,
       isLoading,
+      provider,
+      txStatus,
+      kycUrl,
+      stellarTxHash,
+      canComplete,
+      completing,
+      errorMsg,
       onDirectionChange: setDirection,
       onAmountChange: setAmount,
       onCurrencyChange: setCurrency,
       onCountryChange: setCountry,
       onFindRoute: handleFindRoute,
       onSelectQuote: handleSelectQuote,
-      onCopy: handleCopy,
+      onOpenKyc: handleOpenKyc,
+      onCompleteWithdraw: handleCompleteWithdraw,
+      onRetry: resetToInput,
       onClose
     }
   ) });
@@ -3268,6 +3498,494 @@ function SendModal({ onClose }) {
     }
   ) });
 }
+function assetOptionKey(o) {
+  return `${o.code}:${o.issuer ?? "native"}`;
+}
+var PROVIDER_LABELS = {
+  auto: "Best price (auto)",
+  aquarius: "Aquarius",
+  soroswap: "Soroswap",
+  sdex: "Stellar DEX"
+};
+function formatAmount2(value) {
+  const n = parseFloat(value);
+  return isNaN(n) ? value : n.toLocaleString(void 0, { maximumFractionDigits: 7 });
+}
+function SwapModalTemplate({
+  theme,
+  accentColor,
+  step,
+  txTitle,
+  sellOptions,
+  buyOptions,
+  selectedSell,
+  selectedBuy,
+  amount,
+  provider,
+  providers,
+  quote,
+  quoteLoading,
+  quoteError,
+  formError,
+  isLoadingData,
+  smartUnsupported,
+  configLoading,
+  swapUnavailable,
+  buyNeedsTrustline,
+  transaction,
+  showXdr,
+  copied,
+  explorerUrl,
+  walletType,
+  showBack,
+  isInProgress,
+  onClose,
+  onBack,
+  onRefresh,
+  onSelectSell,
+  onSelectBuy,
+  onAmountChange,
+  onProviderChange,
+  onSwap,
+  onToggleXdr,
+  onCopyHash,
+  onRetry,
+  onDone
+}) {
+  const isDark = theme === "dark";
+  const cssVars = {
+    "--pollar-accent": accentColor,
+    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
+    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
+    "--pollar-text": isDark ? "#ffffff" : "#111827",
+    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
+    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
+    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
+    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--pollar-input-height": "44px",
+    "--pollar-input-border-radius": "0.5rem",
+    "--pollar-card-border-radius": "10px"
+  };
+  const sellKey = selectedSell ? assetOptionKey(selectedSell) : "";
+  const buyKey = selectedBuy ? assetOptionKey(selectedBuy) : "";
+  const canSwap = !smartUnsupported && !!selectedSell && !!selectedBuy && !!amount && !!quote && !quoteLoading && !isLoadingData;
+  const title = step === "form" ? "Swap" : txTitle;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-send-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-send-header-left", children: [
+        showBack && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-modal-close", onClick: onBack, "aria-label": "Back", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 3L5 8l5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: title })
+      ] }),
+      !isInProgress && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header-actions", children: [
+        step === "form" && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "pollar-modal-close",
+            onClick: onRefresh,
+            disabled: configLoading || isLoadingData,
+            "aria-label": "Refresh",
+            title: "Refresh balances and options",
+            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2.5v3h-3",
+                stroke: "currentColor",
+                strokeWidth: "1.6",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 2l12 12M14 2L2 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
+      ] })
+    ] }),
+    step === "form" && configLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-send-hint", children: "Loading swap options\u2026" }),
+    step === "form" && !configLoading && swapUnavailable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: "Swap is not available for this app." }),
+    step === "form" && !configLoading && !swapUnavailable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      smartUnsupported && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: "Swaps are not yet available for smart (passkey) wallets." }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-send-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-send-label", children: "You pay" }),
+        isLoadingData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-send-skeleton" }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            className: "pollar-input pollar-send-select",
+            value: sellKey,
+            onChange: (e) => {
+              const found = sellOptions.find((o) => assetOptionKey(o) === e.target.value);
+              if (found) onSelectSell(found);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select asset to sell" }),
+              sellOptions.map((o) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: assetOptionKey(o), children: [
+                o.code,
+                o.available !== void 0 ? ` \u2014 ${formatAmount2(o.available)} available` : ""
+              ] }, assetOptionKey(o)))
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-send-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-send-label-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-send-label", children: "Amount" }),
+          selectedSell?.available !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-send-hint", children: [
+            "Available: ",
+            formatAmount2(selectedSell.available),
+            " ",
+            selectedSell.code
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            className: "pollar-input",
+            type: "text",
+            inputMode: "decimal",
+            placeholder: "0.00",
+            value: amount,
+            onChange: (e) => onAmountChange(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-send-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-send-label", children: "You receive" }),
+        isLoadingData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-send-skeleton" }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            className: "pollar-input pollar-send-select",
+            value: buyKey,
+            onChange: (e) => {
+              const found = buyOptions.find((o) => assetOptionKey(o) === e.target.value);
+              if (found) onSelectBuy(found);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select asset to buy" }),
+              buyOptions.map((o) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: assetOptionKey(o), children: [
+                o.code,
+                o.enabledInApp ? "" : " (external)"
+              ] }, assetOptionKey(o)))
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-send-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-send-label", children: "Route" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            className: "pollar-input pollar-send-select",
+            value: provider,
+            onChange: (e) => onProviderChange(e.target.value),
+            children: providers.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p, children: PROVIDER_LABELS[p] }, p))
+          }
+        )
+      ] }),
+      quoteLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-send-hint", children: "Fetching best price\u2026" }),
+      !quoteLoading && quoteError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: quoteError }),
+      !quoteLoading && !quoteError && quote && selectedBuy && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-swap-quote", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-swap-quote-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-hint", children: "You receive" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "~ ",
+            formatAmount2(quote.amountOut),
+            " ",
+            selectedBuy.code
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-swap-quote-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-hint", children: "Minimum received" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            formatAmount2(quote.minReceived),
+            " ",
+            selectedBuy.code
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-swap-quote-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-hint", children: "Price impact" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            quote.priceImpactPct,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-swap-quote-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-hint", children: "Route" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: PROVIDER_LABELS[quote.provider] })
+        ] })
+      ] }),
+      !quoteLoading && !quoteError && !quote && selectedSell && selectedBuy && !!amount && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-send-hint", children: "No route found for this pair." }),
+      buyNeedsTrustline && selectedBuy && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-swap-trustline-notice", children: [
+        "To receive ",
+        selectedBuy.code,
+        " your wallet needs a trustline. Swapping will create it first (~0.5 XLM reserve, refundable if you later remove it)."
+      ] }),
+      formError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: formError }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-actions", children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-btn-primary", onClick: onSwap, disabled: !canSwap, children: buyNeedsTrustline ? "Create trustline & swap" : "Swap" }) })
+    ] }),
+    step === "tx" && /* @__PURE__ */ jsxRuntime.jsx(
+      TxStatusView,
+      {
+        transaction,
+        showXdr,
+        copied,
+        explorerUrl,
+        walletType,
+        onSignAndSend: () => {
+        },
+        onToggleXdr,
+        onCopyHash,
+        onRetry,
+        onDone
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
+  ] });
+}
+var QUOTE_DEBOUNCE_MS = 400;
+function toRef(a) {
+  if (a.type === "native") return { type: "native" };
+  if (a.type === "credit_alphanum4") return { type: "credit_alphanum4", code: a.code, issuer: a.issuer };
+  return { type: "credit_alphanum12", code: a.code, issuer: a.issuer };
+}
+function catalogRef(code, issuer) {
+  return code.length <= 4 ? { type: "credit_alphanum4", code, issuer } : { type: "credit_alphanum12", code, issuer };
+}
+function SwapModal({ onClose }) {
+  const {
+    getSwapConfig,
+    getSwapTokens,
+    getSwapQuote,
+    swap,
+    walletBalance,
+    refreshWalletBalance,
+    enabledAssets,
+    refreshAssets,
+    tx: transaction,
+    wallet,
+    network,
+    styles
+  } = usePollar();
+  const walletType = wallet?.custody === "external" ? wallet.provider : null;
+  const smartUnsupported = wallet?.custody === "smart";
+  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const [step, setStep] = react.useState("form");
+  const [selectedSell, setSelectedSell] = react.useState(null);
+  const [selectedBuy, setSelectedBuy] = react.useState(null);
+  const [amount, setAmount] = react.useState("");
+  const [provider, setProvider] = react.useState("auto");
+  const [venues, setVenues] = react.useState(null);
+  const [catalogTokens, setCatalogTokens] = react.useState([]);
+  const [quotes, setQuotes] = react.useState([]);
+  const [quoteLoading, setQuoteLoading] = react.useState(false);
+  const [quoteError, setQuoteError] = react.useState("");
+  const [formError, setFormError] = react.useState("");
+  const [showXdr, setShowXdr] = react.useState(false);
+  const [copied, setCopied] = react.useState(false);
+  const copyTimerRef = react.useRef(null);
+  const slippageBps = 50;
+  react.useEffect(() => {
+    void refreshWalletBalance();
+    void refreshAssets();
+  }, [refreshWalletBalance, refreshAssets]);
+  const loadConfig = react.useCallback(() => {
+    setVenues(null);
+    return getSwapConfig().then(setVenues).catch(() => setVenues([]));
+  }, [getSwapConfig]);
+  react.useEffect(() => {
+    void loadConfig();
+  }, [loadConfig]);
+  const loadCatalog = react.useCallback(
+    () => getSwapTokens().then(setCatalogTokens).catch(() => setCatalogTokens([])),
+    [getSwapTokens]
+  );
+  react.useEffect(() => {
+    void loadCatalog();
+  }, [loadCatalog]);
+  function handleRefresh() {
+    void refreshWalletBalance();
+    void refreshAssets();
+    void loadConfig();
+    void loadCatalog();
+  }
+  react.useEffect(
+    () => () => {
+      if (copyTimerRef.current !== null) clearTimeout(copyTimerRef.current);
+    },
+    []
+  );
+  const balances = walletBalance.step === "loaded" ? walletBalance.data.balances : [];
+  const assetRecords = enabledAssets.step === "loaded" ? enabledAssets.data.assets : [];
+  const isLoadingData = walletBalance.step === "loading" || enabledAssets.step === "loading";
+  const sellOptions = balances.filter((b) => parseFloat(b.available) > 0).map((b) => ({ ref: toRef(b), code: b.code, issuer: b.issuer, available: b.available, enabledInApp: b.enabledInApp }));
+  const buyKeyOfSell = selectedSell ? `${selectedSell.code}:${selectedSell.issuer ?? "native"}` : "";
+  const optKey = (o) => `${o.code}:${o.issuer ?? "native"}`;
+  const enabledBuy = assetRecords.map((a) => ({
+    ref: toRef(a),
+    code: a.code,
+    issuer: a.issuer,
+    enabledInApp: a.enabledInApp
+  }));
+  const enabledKeys = new Set(enabledBuy.map(optKey));
+  const catalogBuy = catalogTokens.map((tk) => ({
+    ref: catalogRef(tk.code, tk.issuer),
+    code: tk.code,
+    issuer: tk.issuer,
+    enabledInApp: false
+  })).filter((o) => !enabledKeys.has(optKey(o)));
+  const buyOptions = [...enabledBuy, ...catalogBuy].filter((o) => optKey(o) !== buyKeyOfSell);
+  const buyNeedsTrustline = (() => {
+    if (!selectedBuy || smartUnsupported) return false;
+    if (selectedBuy.ref.type === "native") return false;
+    const rec = assetRecords.find((a) => a.code === selectedBuy.code && a.issuer === selectedBuy.issuer);
+    return !rec?.trustlineEstablished;
+  })();
+  const configLoading = venues === null;
+  const swapUnavailable = venues !== null && venues.length === 0;
+  const providers = venues && venues.length > 0 ? ["auto", ...venues] : [];
+  const quote = quotes[0] ?? null;
+  react.useEffect(() => {
+    if (step !== "form" || swapUnavailable || configLoading || !selectedSell || !selectedBuy || !amount || parseFloat(amount) <= 0) {
+      setQuotes([]);
+      setQuoteError("");
+      setQuoteLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setQuoteLoading(true);
+    setQuoteError("");
+    const t = setTimeout(async () => {
+      try {
+        const qs = await getSwapQuote({
+          sellAsset: selectedSell.ref,
+          buyAsset: selectedBuy.ref,
+          amount,
+          provider,
+          slippageBps
+        });
+        if (!cancelled) setQuotes(qs);
+      } catch (e) {
+        if (!cancelled) {
+          setQuotes([]);
+          setQuoteError(e instanceof Error ? e.message : "Failed to fetch quote");
+        }
+      } finally {
+        if (!cancelled) setQuoteLoading(false);
+      }
+    }, QUOTE_DEBOUNCE_MS);
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+    };
+  }, [step, swapUnavailable, configLoading, selectedSell, selectedBuy, amount, provider, getSwapQuote]);
+  const hash = transaction.step === "success" ? transaction.hash : null;
+  const buildData = "buildData" in transaction ? transaction.buildData : null;
+  const explorerNetwork = buildData?.summary.network?.toLowerCase().includes("testnet") ? "testnet" : buildData ? "public" : network === "testnet" ? "testnet" : "public";
+  const explorerUrl = hash ? `https://stellar.expert/explorer/${explorerNetwork}/tx/${hash}` : null;
+  const IN_FLIGHT_STEPS2 = [
+    "building",
+    "signing",
+    "submitting",
+    "submitted",
+    "signing-submitting",
+    "building-signing-submitting"
+  ];
+  const isInProgress = IN_FLIGHT_STEPS2.includes(transaction.step);
+  const showBack = step === "tx" && (transaction.step === "error" || transaction.step === "success") && !isInProgress;
+  const txTitle = isInProgress ? "Swapping\u2026" : transaction.step === "success" ? "Swapped!" : transaction.step === "error" ? "Swap failed" : "Confirm Swap";
+  async function handleSwap() {
+    setFormError("");
+    if (smartUnsupported) {
+      setFormError("Swaps are not yet supported for smart (passkey) wallets");
+      return;
+    }
+    if (!selectedSell || !selectedBuy) {
+      setFormError("Select both assets");
+      return;
+    }
+    const parsed = parseFloat(amount);
+    if (!amount || isNaN(parsed) || parsed <= 0) {
+      setFormError("Enter a valid amount");
+      return;
+    }
+    if (selectedSell.available !== void 0 && parsed > parseFloat(selectedSell.available)) {
+      setFormError("Insufficient balance");
+      return;
+    }
+    if (!quote) {
+      setFormError("No route available for this pair");
+      return;
+    }
+    setStep("tx");
+    await swap(quote);
+  }
+  async function handleRetry() {
+    if (transaction.step === "error" && quote) await swap(quote);
+  }
+  function handleCopyHash() {
+    if (!hash) return;
+    navigator.clipboard.writeText(hash).then(() => {
+      setCopied(true);
+      if (copyTimerRef.current !== null) clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => {
+        copyTimerRef.current = null;
+        setCopied(false);
+      }, 2e3);
+    });
+  }
+  function handleBack() {
+    setStep("form");
+    setShowXdr(false);
+    setCopied(false);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: !isInProgress ? onClose : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+    SwapModalTemplate,
+    {
+      theme,
+      accentColor,
+      step,
+      txTitle,
+      sellOptions,
+      buyOptions,
+      selectedSell,
+      selectedBuy,
+      amount,
+      provider,
+      providers,
+      quote,
+      quoteLoading,
+      quoteError,
+      formError,
+      isLoadingData,
+      smartUnsupported,
+      configLoading,
+      swapUnavailable,
+      buyNeedsTrustline,
+      transaction,
+      showXdr,
+      copied,
+      explorerUrl,
+      walletType,
+      showBack,
+      isInProgress,
+      onClose,
+      onBack: handleBack,
+      onRefresh: handleRefresh,
+      onSelectSell: setSelectedSell,
+      onSelectBuy: setSelectedBuy,
+      onAmountChange: setAmount,
+      onProviderChange: setProvider,
+      onSwap: () => void handleSwap(),
+      onToggleXdr: () => setShowXdr((v) => !v),
+      onCopyHash: handleCopyHash,
+      onRetry: () => void handleRetry(),
+      onDone: onClose
+    }
+  ) });
+}
 function describeDevice(s) {
   if (s.deviceLabel) return s.deviceLabel;
   if (!s.userAgent) return "Unknown device";
@@ -3962,7 +4680,6 @@ var PollarContext = react.createContext(null);
 function PollarProvider({
   client,
   appConfig: appConfigProp,
-  ui,
   adapters,
   onStorageDegrade,
   children
@@ -3970,6 +4687,18 @@ function PollarProvider({
   const [pollarClient] = react.useState(
     () => client instanceof core.PollarClient ? client : new core.PollarClient({ passkey: browserPasskeyCeremony, passkeySign: browserPasskeySigner, ...client })
   );
+  const ownsClientRef = react.useRef(!(client instanceof core.PollarClient));
+  const destroyTimerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!ownsClientRef.current) return;
+    if (destroyTimerRef.current) {
+      clearTimeout(destroyTimerRef.current);
+      destroyTimerRef.current = null;
+    }
+    return () => {
+      destroyTimerRef.current = setTimeout(() => pollarClient.destroy(), 0);
+    };
+  }, [pollarClient]);
   const [networkState, setNetworkState] = react.useState(() => pollarClient.getNetworkState());
   const [sessionState, setSessionState] = react.useState(null);
   const [verified, setVerified] = react.useState(false);
@@ -4014,6 +4743,30 @@ function PollarProvider({
       }
     });
   }, [pollarClient]);
+  const sessionRef = react.useRef(sessionState);
+  sessionRef.current = sessionState;
+  react.useEffect(() => {
+    const unsubscribes = [];
+    for (const { id } of pollarClient.listWalletAdapters()) {
+      const adapter = pollarClient.getWalletAdapter(id);
+      if (!core.isInteractiveAuthAdapter(adapter) || !adapter.onProviderAuthChange) continue;
+      let triggered = false;
+      unsubscribes.push(
+        adapter.onProviderAuthChange((state) => {
+          if (!state.authenticated || !state.address) {
+            triggered = false;
+            return;
+          }
+          if (triggered || sessionRef.current?.wallet?.address) return;
+          triggered = true;
+          pollarClient.login({ provider: id });
+        })
+      );
+    }
+    return () => {
+      for (const unsubscribe of unsubscribes) unsubscribe();
+    };
+  }, [pollarClient]);
   react.useEffect(() => {
     setModalErrorLogger(pollarClient.getLogger());
   }, [pollarClient]);
@@ -4039,6 +4792,7 @@ function PollarProvider({
   const [walletBalanceModalOpen, setWalletBalanceModalOpen] = react.useState(false);
   const [enabledAssetsModalOpen, setEnabledAssetsModalOpen] = react.useState(false);
   const [sendModalOpen, setSendModalOpen] = react.useState(false);
+  const [swapModalOpen, setSwapModalOpen] = react.useState(false);
   const [receiveModalOpen, setReceiveModalOpen] = react.useState(false);
   const [sessionsModalOpen, setSessionsModalOpen] = react.useState(false);
   const [distributionRulesModalOpen, setDistributionRulesModalOpen] = react.useState(false);
@@ -4046,7 +4800,6 @@ function PollarProvider({
   const getClient = react.useCallback(() => pollarClient, [pollarClient]);
   const refreshWalletBalance = react.useCallback(() => pollarClient.refreshBalance(), [pollarClient, walletAddress]);
   const refreshAssets = react.useCallback(() => pollarClient.refreshAssets(), [pollarClient, walletAddress]);
-  const renderWallets = ui?.renderWallets;
   const contextValue = react.useMemo(() => {
     const styles = resolvedConfig.styles ?? {};
     return {
@@ -4084,6 +4837,12 @@ function PollarProvider({
       // send / receive
       openSendModal: () => setSendModalOpen(true),
       openReceiveModal: () => setReceiveModalOpen(true),
+      // swap
+      getSwapConfig: () => pollarClient.getSwapConfig(),
+      getSwapTokens: () => pollarClient.getSwapTokens(),
+      getSwapQuote: (params) => pollarClient.getSwapQuote(params),
+      swap: (quote, opts) => pollarClient.swap(quote, opts),
+      openSwapModal: () => setSwapModalOpen(true),
       // sessions
       sessions,
       openSessionsModal: () => setSessionsModalOpen(true),
@@ -4102,7 +4861,6 @@ function PollarProvider({
       // config
       appConfig: resolvedConfig,
       styles,
-      renderWallets,
       adapters
     };
   }, [
@@ -4119,8 +4877,7 @@ function PollarProvider({
     refreshAssets,
     networkState,
     resolvedConfig,
-    adapters,
-    renderWallets
+    adapters
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(PollarContext.Provider, { value: contextValue, children: [
     children,
@@ -4140,6 +4897,7 @@ function PollarProvider({
     walletBalanceModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setWalletBalanceModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(WalletBalanceModal, { onClose: () => setWalletBalanceModalOpen(false) }) }),
     enabledAssetsModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setEnabledAssetsModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(EnabledAssetsModal, { onClose: () => setEnabledAssetsModalOpen(false) }) }),
     sendModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSendModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SendModal, { onClose: () => setSendModalOpen(false) }) }),
+    swapModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSwapModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SwapModal, { onClose: () => setSwapModalOpen(false) }) }),
     receiveModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setReceiveModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(ReceiveModal, { onClose: () => setReceiveModalOpen(false) }) }),
     sessionsModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSessionsModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SessionsModal, { onClose: () => setSessionsModalOpen(false) }) }),
     distributionRulesModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setDistributionRulesModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(DistributionRulesModal, { onClose: () => setDistributionRulesModalOpen(false) }) })
@@ -4606,6 +5364,8 @@ exports.SendModal = SendModal;
 exports.SendModalTemplate = SendModalTemplate;
 exports.SessionsModal = SessionsModal;
 exports.SessionsModalTemplate = SessionsModalTemplate;
+exports.SwapModal = SwapModal;
+exports.SwapModalTemplate = SwapModalTemplate;
 exports.TransactionModalTemplate = TransactionModalTemplate;
 exports.TxHistoryModalTemplate = TxHistoryModalTemplate;
 exports.TxStatusView = TxStatusView;