@pollar/react 0.4.5 → 0.5.2

package/dist/index.js

@@ -9,7 +9,6 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/constants.ts
 var LOGO_POLLAR = "https://pollar.xyz/assets/logo_pollar.png";
-var LOGO_GITHUB = "https://pollar.xyz/assets/GitHub_Invertocat_White.png";
 var LOGO_FREIGHTER = "https://pollar.xyz/assets/logo_freighter.png";
 var LOGO_ALBEDO = "https://pollar.xyz/assets/logo_albedo.svg";
 var ModalErrorBoundary = class extends react.Component {
@@ -39,40 +38,180 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.4.4"
+        "0.5.2"
       ] })
     ] })
   ] });
 };
-var TRANSACTION_CODE_MESSAGES = {
-  NONE: "",
-  BUILD_TRANSACTION_START: "Building transaction\u2026",
-  BUILD_TRANSACTION_SUCCESS: "Transaction built, ready to sign and send",
-  BUILD_TRANSACTION_ERROR: "Failed to build transaction",
-  BUILD_TRANSACTION_ERROR_NO_WALLET: "No wallet connected",
-  SIGN_SEND_TRANSACTION_START: "Signing and sending transaction\u2026",
-  SIGN_SEND_TRANSACTION_SUCCESS: "Transaction signed",
-  SIGN_SEND_TRANSACTION_ERROR: "Signing rejected"
-};
 function ModalStatusBanner({ message, status, onCancel, onRetry }) {
-  if (!message && status === core.StateStatus.NONE) {
+  if (!message && status === "NONE") {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-status" });
   }
-  const isLoading = status === core.StateStatus.LOADING;
+  const isLoading = status === "LOADING";
   const icon = status === "ERROR" ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "7", fill: "currentColor" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 4.5l5 5M9.5 4.5l-5 5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })
   ] }) : status === "SUCCESS" ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "7", fill: "currentColor" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 7l2.5 2.5 4.5-5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-  ] }) : status === "LOADING" ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeDasharray: "22 10" }) }) : null;
+  ] }) : status === "LOADING" ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-status", "data-kind": status, children: [
     icon,
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: message }),
     isLoading && onCancel && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-status-cancel", onClick: onCancel, children: "Cancel" }),
-    status === core.StateStatus.ERROR && onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-status-cancel", onClick: onRetry, children: "Retry" })
+    status === "ERROR" && onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-status-cancel", onClick: onRetry, children: "Retry" })
   ] });
 }
+var STATUS_CONFIG = {
+  none: { label: "Not started", color: "#6b7280", dot: false },
+  pending: { label: "Pending review", color: "#f59e0b", dot: true },
+  approved: { label: "Verified", color: "#10b981", dot: false },
+  rejected: { label: "Rejected", color: "#ef4444", dot: false }
+};
+function KycStatus({ status, className }) {
+  const config = STATUS_CONFIG[status] ?? STATUS_CONFIG.none;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `pollar-kyc-badge${className ? ` ${className}` : ""}`,
+      style: { "--pollar-kyc-color": config.color },
+      children: [
+        config.dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-kyc-badge-dot" }),
+        config.label
+      ]
+    }
+  );
+}
+function KycModalTemplate({
+  theme,
+  accentColor,
+  step,
+  providers,
+  selectedProvider,
+  session,
+  kycStatus,
+  isLoading,
+  onSelectProvider,
+  onDoneVerifying,
+  onClose
+}) {
+  const isDark = theme === "dark";
+  const cssVars = {
+    "--pollar-accent": accentColor,
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--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"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-kyc-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-kyc-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-kyc-title", children: "Identity verification" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "pollar-kyc-subtitle", children: [
+        step === "select_provider" && "Choose your verification provider",
+        step === "verifying" && `Verifying with ${selectedProvider?.name}`,
+        step === "polling" && "Waiting for verification result",
+        step === "done" && "Verification complete"
+      ] })
+    ] }),
+    step === "select_provider" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-kyc-providers", children: [
+      providers.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--pollar-muted)", textAlign: "center" }, children: "No providers available for your country." }),
+      providers.map((p) => /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "pollar-kyc-provider-btn", disabled: isLoading, onClick: () => onSelectProvider(p), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-kyc-provider-name", children: p.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-kyc-provider-flow", children: p.flow })
+      ] }, p.id))
+    ] }),
+    step === "verifying" && selectedProvider && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-kyc-iframe-wrap", children: session?.kycUrl ? /* @__PURE__ */ jsxRuntime.jsx("iframe", { className: "pollar-kyc-iframe", src: session.kycUrl, title: "KYC verification", allow: "camera; microphone" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-kyc-iframe-mock", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u{1F512}" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: selectedProvider.flow === "form" ? "Form-based KYC \u2014 fields will render here once backend is connected" : "KYC iframe will load here once backend is connected" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("code", { style: { fontSize: "0.7rem", opacity: 0.6 }, children: [
+          "provider: ",
+          selectedProvider.id
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-actions", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: onDoneVerifying, children: "I've completed verification" })
+      ] })
+    ] }),
+    step === "polling" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-kyc-polling", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-spinner" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-kyc-polling-text", children: "Checking verification status\u2026" })
+    ] }),
+    step === "done" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-kyc-result", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-kyc-result-icon", children: kycStatus === "approved" ? "\u2705" : "\u274C" }),
+      /* @__PURE__ */ jsxRuntime.jsx(KycStatus, { status: kycStatus }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-kyc-result-text", children: kycStatus === "approved" ? "Your identity has been verified successfully." : "Verification was not approved. Please try again." }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-actions", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: onClose, children: "Close" }) })
+    ] })
+  ] });
+}
+function KycModal({ onClose, country = "MX", level = "basic", onApproved }) {
+  const { getClient, styles } = usePollar();
+  const [step, setStep] = react.useState("select_provider");
+  const [providers, setProviders] = react.useState([]);
+  const [selectedProvider, setSelectedProvider] = react.useState(null);
+  const [session, setSession] = react.useState(null);
+  const [kycStatus, setKycStatus] = react.useState("none");
+  const [isLoading, setIsLoading] = react.useState(false);
+  const client = getClient();
+  const { theme = "light", accentColor = "#005DB4" } = styles;
+  react.useEffect(() => {
+    setIsLoading(true);
+    client.getKycProviders(country).then((result) => setProviders(result.providers)).catch(() => setProviders([])).finally(() => setIsLoading(false));
+  }, [country]);
+  async function handleSelectProvider(provider) {
+    setSelectedProvider(provider);
+    setIsLoading(true);
+    try {
+      const result = await client.resolveKyc(provider.id, level);
+      if (result.alreadyApproved) {
+        setKycStatus("approved");
+        setStep("done");
+        onApproved?.();
+        return;
+      }
+      setSession(result);
+      setStep("verifying");
+    } catch {
+      setStep("select_provider");
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  async function handleDoneVerifying() {
+    if (!selectedProvider) return;
+    setStep("polling");
+    try {
+      const finalStatus = await client.pollKycStatus(selectedProvider.id, { intervalMs: 3e3, timeoutMs: 12e4 });
+      setKycStatus(finalStatus);
+      setStep("done");
+      if (finalStatus === "approved") onApproved?.();
+    } catch {
+      setKycStatus("rejected");
+      setStep("done");
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+    KycModalTemplate,
+    {
+      theme,
+      accentColor,
+      step,
+      providers,
+      selectedProvider,
+      session,
+      kycStatus,
+      isLoading,
+      onSelectProvider: handleSelectProvider,
+      onDoneVerifying: handleDoneVerifying,
+      onClose
+    }
+  ) });
+}
 function EmailCodeInput({ email, onSubmit }) {
   const [digits, setDigits] = react.useState(["", "", "", "", "", ""]);
   const inputRefs = react.useRef([]);
@@ -126,8 +265,8 @@ function EmailCodeInput({ email, onSubmit }) {
 }
 var GithubButton = ({ disabled, onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "github-button", disabled, onClick, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_GITHUB, alt: "GitHub", className: "github-button-icon" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "github-button-contents", children: "Continue with GitHub" })
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "github-button-icon", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z", clipRule: "evenodd" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "github-button-contents", children: "GitHub" })
   ] });
 };
 var GoogleButton = ({ disabled, onClick }) => {
@@ -174,8 +313,8 @@ var GoogleButton = ({ disabled, onClick }) => {
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "gsi-material-button-contents", children: "Continue with Google" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "none" }, children: "Continue with Google" })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "gsi-material-button-contents", children: "Google" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "none" }, children: "Google" })
     ] })
   ] });
 };
@@ -206,10 +345,10 @@ function authStateToStatus(step) {
   ];
   const success = ["authenticated", "entering_code"];
   const error = ["error", "wallet_not_installed"];
-  if (loading.includes(step)) return core.StateStatus.LOADING;
-  if (success.includes(step)) return core.StateStatus.SUCCESS;
-  if (error.includes(step)) return core.StateStatus.ERROR;
-  return core.StateStatus.NONE;
+  if (loading.includes(step)) return "LOADING";
+  if (success.includes(step)) return "SUCCESS";
+  if (error.includes(step)) return "ERROR";
+  return "NONE";
 }
 function LoginModalTemplate({
   theme,
@@ -232,6 +371,7 @@ function LoginModalTemplate({
   onCancel,
   onRetry
 }) {
+  const [showWalletPicker, setShowWalletPicker] = react.useState(false);
   const isDark = theme === "dark";
   const enabledSocial = Object.entries(providers).filter(([, enabled]) => enabled);
   const cssVars = {
@@ -248,20 +388,52 @@ function LoginModalTemplate({
     "--pollar-error-text": isDark ? "#f87171" : "#dc2626"
   };
   const status = authStateToStatus(authState.step);
-  const isLoading = status === core.StateStatus.LOADING;
+  const isLoading = status === "LOADING";
   const isEmailCodeError = authState.step === "error" && (authState.errorCode === core.AUTH_ERROR_CODES.EMAIL_CODE_EXPIRED || authState.errorCode === core.AUTH_ERROR_CODES.EMAIL_CODE_INVALID);
   const awaitingEmailCode = authState.step === "entering_code" || authState.step === "verifying_email_code" || isEmailCodeError;
   const statusMessage = authState.step === "error" ? authState.message : AUTH_STATE_MESSAGES[authState.step];
+  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" }) }) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "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: "Log in or sign up" })
     ] }),
     awaitingEmailCode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-back-btn", onClick: onBack, children: "\u2190 Back" }),
+      /* @__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) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-wallet-list", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: isLoading,
+            className: "pollar-wallet-list-btn",
+            onClick: onFreighterConnect,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_FREIGHTER, alt: "Freighter", className: "pollar-wallet-list-icon" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-wallet-list-name", children: "Freighter" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: isLoading,
+            className: "pollar-wallet-list-btn",
+            onClick: onAlbedoConnect,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_ALBEDO, alt: "Albedo", className: "pollar-wallet-list-icon" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-wallet-list-name", children: "Albedo" })
+            ]
+          }
+        )
+      ] })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       emailEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-email-section", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -286,17 +458,19 @@ function LoginModalTemplate({
         enabledSocial.some(([key]) => key === "google") && /* @__PURE__ */ jsxRuntime.jsx(GoogleButton, { disabled: isLoading, onClick: () => onSocialLogin?.("google") }),
         enabledSocial.some(([key]) => key === "github") && /* @__PURE__ */ jsxRuntime.jsx(GithubButton, { disabled: isLoading, onClick: () => onSocialLogin?.("github") })
       ] }),
-      embeddedWallets && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-wallet-section", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-wallet-label", children: "Continue with a wallet" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", disabled: isLoading, className: "pollar-wallet-btn", onClick: onFreighterConnect, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_FREIGHTER, alt: "Freighter", className: "pollar-wallet-icon" }),
-          "Freighter"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", disabled: isLoading, className: "pollar-wallet-btn", onClick: onAlbedoConnect, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_ALBEDO, alt: "Albedo", className: "pollar-wallet-icon" }),
-          "Albedo"
-        ] })
-      ] })
+      embeddedWallets && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-wallet-section", children: /* @__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"
+          ]
+        }
+      ) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ModalStatusBanner,
@@ -343,7 +517,7 @@ function LoginModal({ onClose }) {
     getClient().beginEmailLogin();
   }
   function handleSocialLogin(provider) {
-    getClient().loginOAuth(provider);
+    getClient().login({ provider });
   }
   function handleWalletConnect(type) {
     getClient().loginWallet(type);
@@ -387,21 +561,336 @@ function LoginModal({ onClose }) {
       codeInputKey,
       onCodeSubmit: handleVerifyCode,
       onBack: handleBack,
-      onCancel: () => getClient().cancelLogin(),
+      onCancel: handleClose,
       onRetry: handleRetry
     }
   ) });
 }
+var RAIL_LABELS = {
+  SPEI: "SPEI (Mexico)",
+  PIX: "PIX (Brazil)",
+  PSE: "PSE (Colombia)",
+  ACH: "ACH (US)"
+};
+function RouteDisplay({ quote, onSelect }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "pollar-ramp-route-card",
+      "data-recommended": quote.recommended,
+      role: "button",
+      tabIndex: 0,
+      onClick: () => onSelect(quote),
+      onKeyDown: (e) => e.key === "Enter" && onSelect(quote),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-route-left", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-route-provider", children: quote.provider }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-ramp-route-meta", children: [
+            RAIL_LABELS[quote.rail] ?? quote.rail,
+            " \xB7 ",
+            quote.protocol,
+            " \xB7 ",
+            quote.estimatedTime
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-route-right", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-ramp-route-fee", children: [
+            quote.fee,
+            "% fee"
+          ] }),
+          quote.recommended && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-route-badge", children: "Best rate" })
+        ] })
+      ]
+    }
+  );
+}
+var LOADING_STEPS = ["Detecting your country\u2026", "Consulting providers\u2026", "Route found!"];
+var COUNTRY_CURRENCIES = {
+  MX: "MXN",
+  BR: "BRL",
+  CO: "COP",
+  CL: "CLP",
+  PE: "PEN",
+  AR: "ARS"
+};
+function RampWidgetTemplate({
+  theme,
+  accentColor,
+  step,
+  direction,
+  amount,
+  currency,
+  country,
+  quotes,
+  paymentInstructions,
+  isLoading,
+  onDirectionChange,
+  onAmountChange,
+  onCurrencyChange,
+  onCountryChange,
+  onFindRoute,
+  onSelectQuote,
+  onCopy,
+  onClose
+}) {
+  const isDark = theme === "dark";
+  const cssVars = {
+    "--pollar-accent": accentColor,
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--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"
+  };
+  const stepTitle = {
+    input: direction === "onramp" ? "Buy crypto" : "Sell crypto",
+    loading_quote: "Finding best route",
+    select_route: "Select provider",
+    payment_instructions: "Payment instructions"
+  };
+  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"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-ramp-title", children: stepTitle[step] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-ramp-subtitle", children: stepSubtitle[step] })
+    ] }),
+    step === "input" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-tabs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-ramp-tab", "data-active": direction === "onramp", onClick: () => onDirectionChange("onramp"), children: "Buy" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-ramp-tab", "data-active": direction === "offramp", onClick: () => onDirectionChange("offramp"), children: "Sell" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-input-row", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-field", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-ramp-label", children: "Amount" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "number",
+              className: "pollar-ramp-input",
+              placeholder: "0.00",
+              value: amount,
+              min: "0",
+              onChange: (e) => onAmountChange(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-field", style: { maxWidth: 90 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-ramp-label", children: "Currency" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              className: "pollar-ramp-input",
+              placeholder: "MXN",
+              value: currency,
+              maxLength: 5,
+              onChange: (e) => onCurrencyChange(e.target.value.toUpperCase())
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-ramp-label", children: "Country" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            className: "pollar-ramp-input",
+            value: country,
+            onChange: (e) => {
+              const c = e.target.value;
+              onCountryChange(c);
+              if (COUNTRY_CURRENCIES[c]) onCurrencyChange(COUNTRY_CURRENCIES[c]);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "MX", children: "\u{1F1F2}\u{1F1FD} Mexico" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "BR", children: "\u{1F1E7}\u{1F1F7} Brazil" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "CO", children: "\u{1F1E8}\u{1F1F4} Colombia" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "CL", children: "\u{1F1E8}\u{1F1F1} Chile" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "PE", children: "\u{1F1F5}\u{1F1EA} Peru" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "AR", children: "\u{1F1E6}\u{1F1F7} Argentina" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-actions", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", disabled: !amount || isLoading, onClick: onFindRoute, children: "Find best route" })
+      ] })
+    ] }),
+    step === "loading_quote" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-loading", children: LOADING_STEPS.map((text, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-loading-row", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-loading-dot" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: text })
+    ] }, i)) }),
+    step === "select_route" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__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 }),
+      /* @__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.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"
+            }
+          )
+        ] })
+      ] }),
+      paymentInstructions.expiresAt && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "pollar-ramp-payment-note", children: [
+        "Instructions expire at ",
+        new Date(paymentInstructions.expiresAt).toLocaleTimeString()
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: onClose, children: "Done" })
+    ] })
+  ] });
+}
+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()
+};
+function RampWidget({ onClose }) {
+  const { getClient, walletAddress, styles } = usePollar();
+  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 [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;
+  async function handleFindRoute() {
+    setStep("loading_quote");
+    setIsLoading(true);
+    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);
+    } 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
+    };
+    try {
+      const result = await client.createOnRamp(body);
+      setPaymentInstructions(result.paymentInstructions);
+    } catch {
+      await new Promise((r) => setTimeout(r, 800));
+      setPaymentInstructions({ ...MOCK_PAYMENT, currency });
+    } finally {
+      setIsLoading(false);
+      setStep("payment_instructions");
+    }
+  }
+  function handleCopy(value) {
+    navigator.clipboard.writeText(value).catch(() => {
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+    RampWidgetTemplate,
+    {
+      theme,
+      accentColor,
+      step,
+      direction,
+      amount,
+      currency,
+      country,
+      quotes,
+      paymentInstructions,
+      isLoading,
+      onDirectionChange: setDirection,
+      onAmountChange: setAmount,
+      onCurrencyChange: setCurrency,
+      onCountryChange: setCountry,
+      onFindRoute: handleFindRoute,
+      onSelectQuote: handleSelectQuote,
+      onCopy: handleCopy,
+      onClose
+    }
+  ) });
+}
+var STATUS_MESSAGES = {
+  idle: "",
+  building: "Building transaction\u2026",
+  built: "Ready to sign and send",
+  signing: "Signing and sending transaction\u2026",
+  success: "Transaction sent successfully",
+  error: "Transaction failed"
+};
 function TransactionModalTemplate({
   theme,
   accentColor,
-  transactionStateCode,
-  status,
-  buildResult,
-  submitResult,
+  transaction,
+  showXdr,
+  copied,
+  explorerUrl,
+  walletType,
   onClose,
   onSignAndSend,
-  onRetrySignAndSend
+  onToggleXdr,
+  onCopyHash,
+  onRetry
 }) {
   const isDark = theme === "dark";
   const cssVars = {
@@ -416,43 +905,48 @@ function TransactionModalTemplate({
     "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
     "--pollar-success-text": isDark ? "#4ade80" : "#16a34a"
   };
-  const [showXdr, setShowXdr] = react.useState(false);
-  const [copied, setCopied] = react.useState(false);
-  function handleCopyHash() {
-    if (!submitResult) return;
-    navigator.clipboard.writeText(submitResult.hash).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    });
-  }
-  const explorerNetwork = buildResult?.summary.network?.toLowerCase().includes("testnet") ? "testnet" : "public";
-  const explorerUrl = submitResult ? `https://stellar.expert/explorer/${explorerNetwork}/tx/${submitResult.hash}` : null;
-  transactionStateCode.includes("ERROR");
-  transactionStateCode.includes("SUCCESS");
-  const isBuilt = buildResult && transactionStateCode === "BUILD_TRANSACTION_SUCCESS";
-  const isDone = submitResult && transactionStateCode === "SIGN_SEND_TRANSACTION_START";
+  const buildData = "buildData" in transaction ? transaction.buildData : null;
+  const hash = transaction.step === "success" ? transaction.hash : null;
+  const errorDetails = transaction.step === "error" ? transaction.details ?? null : null;
+  const isBuilt = transaction.step === "built";
+  const isSigning = transaction.step === "signing";
+  const isSuccess = transaction.step === "success";
+  const isError = transaction.step === "error";
+  const showDetails = buildData !== null && (isBuilt || isSigning || isSuccess);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-header", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-tx-title", children: "Transaction" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-tx-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" }) }) })
-    ] }),
-    isBuilt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-header", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: "Transaction" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-close-btn", onClick: onClose, "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",
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+      }
+    ) }),
+    showDetails && buildData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-summary", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-tx-summary-title", children: "Details" }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "pollar-tx-summary-lines", children: buildResult.summary.lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "pollar-tx-summary-line", children: line }, i)) })
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "pollar-tx-summary-lines", children: buildData.summary.lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "pollar-tx-summary-line", children: line }, i)) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-meta", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-meta-item", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-tx-meta-label", children: "Network" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-tx-meta-value", children: buildResult.summary.network })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-tx-meta-value", children: buildData.summary.network })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-meta-item", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-tx-meta-label", children: "Fee" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-tx-meta-value", children: buildResult.summary.fee })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-tx-meta-value", children: buildData.summary.fee })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-xdr", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "pollar-tx-xdr-toggle", onClick: () => setShowXdr((v) => !v), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "pollar-tx-xdr-toggle", onClick: onToggleXdr, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
@@ -467,14 +961,61 @@ function TransactionModalTemplate({
           ),
           "Raw transaction (XDR)"
         ] }),
-        showXdr && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "pollar-tx-xdr-content", children: buildResult.unsignedXdr })
+        showXdr && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "pollar-tx-xdr-content", children: buildData.unsignedXdr })
       ] })
     ] }),
-    submitResult && transactionStateCode === "SIGN_SEND_TRANSACTION_SUCCESS" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-result", children: [
+    isError && errorDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-error-details", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-tx-error-details-label", children: "Error details" }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "pollar-tx-error-details-content", children: errorDetails })
+    ] }),
+    isBuilt && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-btn-primary pollar-tx-sign-btn", onClick: onSignAndSend, children: "Sign & Send" }),
+    (isSigning || isSuccess || isError) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-wallet-spinner", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-spinner-ring", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            viewBox: "0 0 88 88",
+            width: "88",
+            height: "88",
+            className: `pollar-tx-spinner-svg${isSigning ? " pollar-tx-spinner-rotating" : ""}`,
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "44", cy: "44", r: "36", fill: "none", stroke: "var(--pollar-border)", strokeWidth: "3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: "44",
+                  cy: "44",
+                  r: "36",
+                  fill: "none",
+                  stroke: isSuccess ? "var(--pollar-success-text)" : isError ? "var(--pollar-error-text)" : "var(--pollar-accent)",
+                  strokeWidth: "3",
+                  strokeLinecap: "round",
+                  strokeDasharray: isSigning ? "169.6 56.6" : "999 0",
+                  transform: "rotate(-90 44 44)",
+                  style: { transition: isSigning ? "none" : "stroke 400ms, stroke-dasharray 400ms" }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-tx-wallet-icon", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: walletType === core.WalletType.FREIGHTER ? LOGO_FREIGHTER : walletType === core.WalletType.ALBEDO ? LOGO_ALBEDO : LOGO_POLLAR,
+            alt: walletType === core.WalletType.FREIGHTER ? "Freighter" : walletType === core.WalletType.ALBEDO ? "Albedo" : "Pollar",
+            className: "pollar-tx-wallet-img"
+          }
+        ) })
+      ] }),
+      isSigning && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-tx-spinner-label", children: walletType === core.WalletType.FREIGHTER ? "Waiting for Freighter\u2026" : walletType === core.WalletType.ALBEDO ? "Waiting for Albedo\u2026" : "Signing and sending\u2026" }),
+      isError && onRetry && "buildData" in transaction && transaction.buildData && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-btn-secondary pollar-tx-retry-btn", onClick: onRetry, children: "Try again" })
+    ] }),
+    isSuccess && hash && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-result", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-tx-result-label", children: "Transaction hash" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-tx-result-hash", children: submitResult.hash }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-tx-result-hash", children: hash }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-result-actions", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-tx-result-btn", onClick: handleCopyHash, children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-tx-result-btn", onClick: onCopyHash, children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: [
             /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "7", fill: "currentColor" }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -530,48 +1071,41 @@ function TransactionModalTemplate({
         ] })
       ] })
     ] }),
-    isBuilt && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-tx-sign-btn", onClick: onSignAndSend, children: "Sign & Send" }),
-    isDone && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-tx-sign-btn", onClick: onClose, children: "Done" }),
+    isSuccess && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-btn-primary pollar-tx-sign-btn", onClick: onClose, children: "Done" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ModalStatusBanner,
       {
-        message: TRANSACTION_CODE_MESSAGES[transactionStateCode] ?? "",
-        status
+        message: STATUS_MESSAGES[transaction.step],
+        status: isError ? "ERROR" : isSigning || transaction.step === "building" ? "LOADING" : isSuccess ? "SUCCESS" : "NONE"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
   ] });
 }
-var isTxBuildResponseContent = (data) => {
-  if (!data || typeof data !== "object") return false;
-  const d = data;
-  return typeof d.unsignedXdr === "string" && typeof d.networkPassphrase === "string" && typeof d.estimatedFee === "string" && d.summary !== null && typeof d.summary === "object";
-};
-var isTxSignSendResponseContent = (data) => {
-  if (!data || typeof data !== "object") return false;
-  const d = data;
-  return typeof d.hash === "string" && (d.status === "PENDING" || d.status === "SUCCESS" || d.status === "FAILED");
-};
 function TransactionModal({ onClose }) {
-  const {
-    getClient,
-    styles,
-    state: { transaction }
-  } = usePollar();
+  const { getClient, styles, transaction, network, walletType } = usePollar();
   const { theme = "light", accentColor = "#005DB4" } = styles;
-  let buildResult = null;
-  const transactionStateCode = transaction.code;
-  const content = transaction.data?.content;
-  if (isTxBuildResponseContent(content)) {
-    buildResult = content;
+  const [showXdr, setShowXdr] = react.useState(false);
+  const [copied, setCopied] = react.useState(false);
+  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" : "public";
+  const explorerUrl = hash ? `https://stellar.expert/explorer/${explorerNetwork}/tx/${hash}` : null;
+  function handleSignAndSend() {
+    if (transaction.step === "built") {
+      void getClient().signAndSubmitTx(transaction.buildData.unsignedXdr);
+    }
   }
-  let submitResult = null;
-  if (isTxSignSendResponseContent(content)) {
-    submitResult = content;
+  function handleCopyHash() {
+    if (!hash) return;
+    navigator.clipboard.writeText(hash).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
   }
-  async function handleSignAndSend() {
-    if (buildResult) {
-      await getClient().submitTx(buildResult.unsignedXdr);
+  async function handleRetry() {
+    if (transaction.step === "error" && transaction.buildData) {
+      await getClient().signAndSubmitTx(transaction.buildData.unsignedXdr);
     }
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -579,13 +1113,243 @@ function TransactionModal({ onClose }) {
     {
       theme,
       accentColor,
-      transactionStateCode,
-      status: transaction.status,
-      buildResult,
-      submitResult,
+      transaction,
+      showXdr,
+      copied,
+      explorerUrl,
+      walletType,
       onClose,
       onSignAndSend: handleSignAndSend,
-      onRetrySignAndSend: handleSignAndSend
+      onToggleXdr: () => setShowXdr((v) => !v),
+      onCopyHash: handleCopyHash,
+      onRetry: handleRetry
+    }
+  ) });
+}
+var PAGE_SIZE = 10;
+function StatusBadge({ status }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-hist-item-badge", "data-status": status, children: status });
+}
+function formatDate(iso) {
+  return new Date(iso).toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
+}
+function TxHistoryModalTemplate({
+  theme,
+  accentColor,
+  txHistory,
+  offset,
+  onRefresh,
+  onPrev,
+  onNext,
+  onClose
+}) {
+  const isDark = theme === "dark";
+  const cssVars = {
+    "--pollar-accent": accentColor,
+    "--pollar-buttons-border-radius": "8px",
+    "--pollar-buttons-height": "44px",
+    "--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" : "rgba(0,0,0,0.04)",
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a"
+  };
+  const isLoading = txHistory.step === "loading";
+  const records = txHistory.step === "loaded" ? txHistory.data.records : [];
+  const total = txHistory.step === "loaded" ? txHistory.data.total : 0;
+  const hasPrev = offset > 0;
+  const hasNext = offset + PAGE_SIZE < total;
+  const showPagination = txHistory.step === "loaded" && total > PAGE_SIZE;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: "Transaction History" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header-actions", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "pollar-modal-refresh-btn", onClick: onRefresh, disabled: isLoading, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: `pollar-modal-refresh-icon${isLoading ? " spinning" : ""}`,
+              width: "13",
+              height: "13",
+              viewBox: "0 0 13 13",
+              fill: "none",
+              "aria-hidden": true,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M11.5 6.5a5 5 0 11-1.5-3.536",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 1v3h-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+              ]
+            }
+          ),
+          "Refresh"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("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" }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-list", children: [
+      txHistory.step === "idle" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "Click Refresh to load transactions." }),
+      isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
+      txHistory.step === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: txHistory.message }),
+      txHistory.step === "loaded" && records.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "No transactions yet." }),
+      records.map((record) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-hist-item-summary", children: record.summary }),
+        /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: record.status }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-hist-item-meta", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: record.operation }),
+          record.feeXlm && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "\xB7 ",
+            record.feeXlm,
+            " XLM"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "\xB7 ",
+            formatDate(record.createdAt)
+          ] })
+        ] })
+      ] }, record.id))
+    ] }),
+    showPagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-pagination", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-hist-pagination-info", children: [
+        offset + 1,
+        "\u2013",
+        Math.min(offset + PAGE_SIZE, total),
+        " of ",
+        total
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-pagination-btns", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-hist-page-btn", onClick: onPrev, disabled: !hasPrev, children: "\u2190 Prev" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-hist-page-btn", onClick: onNext, disabled: !hasNext, children: "Next \u2192" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
+  ] });
+}
+var PAGE_SIZE2 = 10;
+function TxHistoryModal({ onClose }) {
+  const { getClient, styles, txHistory } = usePollar();
+  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const [offset, setOffset] = react.useState(0);
+  function load(nextOffset) {
+    setOffset(nextOffset);
+    void getClient().fetchTxHistory({ limit: PAGE_SIZE2, offset: nextOffset });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+    TxHistoryModalTemplate,
+    {
+      theme,
+      accentColor,
+      txHistory,
+      offset,
+      onRefresh: () => load(offset),
+      onPrev: () => load(Math.max(0, offset - PAGE_SIZE2)),
+      onNext: () => load(offset + PAGE_SIZE2),
+      onClose
+    }
+  ) });
+}
+function formatBalance(balance) {
+  const n = parseFloat(balance);
+  return isNaN(n) ? balance : n.toLocaleString(void 0, { maximumFractionDigits: 7 });
+}
+function cropAddress(address) {
+  if (address.length <= 16) return address;
+  return `${address.slice(0, 8)}...${address.slice(-8)}`;
+}
+function BalanceItem({ record }) {
+  const balanceDiffers = record.balance !== record.available;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-bal-item", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-bal-asset", children: record.code }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-bal-amounts", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-bal-amount", children: formatBalance(record.balance) }),
+      balanceDiffers && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-bal-available", children: [
+        formatBalance(record.available),
+        " available"
+      ] })
+    ] })
+  ] });
+}
+function WalletBalanceModalTemplate({
+  theme,
+  accentColor,
+  walletBalance,
+  walletAddress,
+  onRefresh,
+  onClose
+}) {
+  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" : "rgba(0,0,0,0.04)",
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626"
+  };
+  const isLoading = walletBalance.step === "loading";
+  const data = walletBalance.step === "loaded" ? walletBalance.data : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-bal-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: "Wallet Balance" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header-actions", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "pollar-modal-refresh-btn", onClick: onRefresh, disabled: isLoading, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: `pollar-modal-refresh-icon${isLoading ? " spinning" : ""}`,
+              width: "13",
+              height: "13",
+              viewBox: "0 0 13 13",
+              fill: "none",
+              "aria-hidden": true,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.5 6.5a5 5 0 11-1.5-3.536", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 1v3h-3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+              ]
+            }
+          ),
+          "Refresh"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("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" }) }) })
+      ] })
+    ] }),
+    walletAddress && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-bal-address", children: cropAddress(walletAddress) }),
+    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
+    walletBalance.step === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: walletBalance.message }),
+    data && !data.exists && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-empty", children: [
+      "Account not found on ",
+      data.network,
+      "."
+    ] }),
+    data?.exists && data.balances.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "No balances found." }),
+    data?.exists && data.balances.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-bal-list", children: data.balances.map((b) => /* @__PURE__ */ jsxRuntime.jsx(BalanceItem, { record: b }, b.code + (b.issuer ?? ""))) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
+  ] });
+}
+function WalletBalanceModal({ onClose }) {
+  const { walletBalance, refreshBalance, walletAddress, styles } = usePollar();
+  const { theme = "light", accentColor = "#005DB4" } = styles;
+  react.useEffect(() => {
+    void refreshBalance();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+    WalletBalanceModalTemplate,
+    {
+      theme,
+      accentColor,
+      walletBalance,
+      walletAddress,
+      onRefresh: () => refreshBalance(),
+      onClose
     }
   ) });
 }
@@ -595,48 +1359,32 @@ var emptyResponse = {
   },
   styles: {}
 };
-async function fetchRemoteConfig(api) {
-  try {
-    const { data, error } = await api.GET(`/applications/config`);
-    if (!data || error) {
-      return emptyResponse;
-    }
-    return data.content;
-  } catch {
-    return emptyResponse;
-  }
+async function fetchRemoteConfig(client) {
+  const content = await client.getAppConfig();
+  return content ?? emptyResponse;
 }
 var PollarContext = react.createContext(null);
 function PollarProvider({ config, styles: propStyles, children }) {
   const [pollarClient] = react.useState(() => new core.PollarClient(config));
-  const [stellarClient] = react.useState(() => new core.StellarClient(config.stellarNetwork || "testnet"));
+  const [networkState, setNetworkState] = react.useState(() => pollarClient.getNetworkState());
   const [sessionState, setSessionState] = react.useState(null);
-  const [state, setState] = react.useState({
-    network: {
-      var: "network",
-      code: core.STATE_VAR_CODES.network.NONE,
-      status: core.StateStatus.NONE,
-      level: "info",
-      ts: 0
-    },
-    transaction: {
-      var: "transaction",
-      code: core.STATE_VAR_CODES.transaction.NONE,
-      status: core.StateStatus.NONE,
-      level: "info",
-      ts: 0
-    }
-  });
+  const [transaction, setTransaction] = react.useState({ step: "idle" });
+  const [txHistory, setTxHistory] = react.useState({ step: "idle" });
+  const [walletBalance, setWalletBalance] = react.useState({ step: "idle" });
   const [remoteConfig, setRemoteConfig] = react.useState(emptyResponse);
   const [styles, setStyles] = react.useState(propStyles ?? {});
   react.useEffect(() => {
-    return pollarClient.onStateChange((stateEntry) => {
-      setState((prevState) => {
-        if (JSON.stringify(prevState[stateEntry.var]) !== JSON.stringify(stateEntry)) {
-          return { ...prevState, [stateEntry.var]: stateEntry };
-        }
-        return prevState;
-      });
+    return pollarClient.onTransactionStateChange(setTransaction);
+  }, [pollarClient]);
+  react.useEffect(() => {
+    return pollarClient.onTxHistoryStateChange(setTxHistory);
+  }, [pollarClient]);
+  react.useEffect(() => {
+    return pollarClient.onWalletBalanceStateChange(setWalletBalance);
+  }, [pollarClient]);
+  react.useEffect(() => {
+    return pollarClient.onNetworkStateChange((state) => {
+      setNetworkState(state);
     });
   }, [pollarClient]);
   react.useEffect(() => {
@@ -649,7 +1397,7 @@ function PollarProvider({ config, styles: propStyles, children }) {
     });
   }, [pollarClient]);
   react.useEffect(() => {
-    fetchRemoteConfig(pollarClient.getApi()).then((fetched) => {
+    fetchRemoteConfig(pollarClient).then((fetched) => {
       setRemoteConfig(fetched);
       setStyles({
         ...fetched.styles,
@@ -660,40 +1408,64 @@ function PollarProvider({ config, styles: propStyles, children }) {
       setStyles(propStyles ?? {});
     });
   }, [pollarClient]);
+  react.useEffect(() => {
+    if (transaction.step !== "idle") {
+      setTransactionModalOpen(true);
+    }
+  }, [transaction.step]);
   const [loginModalOpen, setLoginModalOpen] = react.useState(false);
   const [transactionModalOpen, setTransactionModalOpen] = react.useState(false);
+  const [kycModalOpen, setKycModalOpen] = react.useState(false);
+  const [kycModalOptions, setKycModalOptions] = react.useState({});
+  const [rampWidgetOpen, setRampWidgetOpen] = react.useState(false);
+  const [txHistoryModalOpen, setTxHistoryModalOpen] = react.useState(false);
+  const [walletBalanceModalOpen, setWalletBalanceModalOpen] = react.useState(false);
   const contextValue = react.useMemo(
     () => ({
-      walletAddress: sessionState?.wallet?.publicKey || "",
+      walletAddress: sessionState?.data?.providers?.wallet?.address || sessionState?.wallet?.publicKey || "",
       getClient: () => pollarClient,
-      state,
+      transaction,
       login: (options) => pollarClient.login(options),
       logout: () => pollarClient.logout(),
-      isAuthenticated: pollarClient.isAuthenticated(),
+      isAuthenticated: !!sessionState?.wallet?.publicKey,
       buildTx: (operation, params, options) => pollarClient.buildTx(operation, params, options),
-      submitTx: (signedXdr) => pollarClient.submitTx(signedXdr),
-      sendTransaction: (operation, params, options) => {
-        void pollarClient.buildTx(operation, params, options);
-        setTransactionModalOpen(true);
-      },
+      signAndSubmitTx: (unsignedXdr) => pollarClient.signAndSubmitTx(unsignedXdr),
+      walletType: pollarClient.getWalletType(),
       openTransactionModal: () => setTransactionModalOpen(true),
       openLoginModal: () => setLoginModalOpen(true),
+      openKycModal: (options = {}) => {
+        setKycModalOptions(options);
+        setKycModalOpen(true);
+      },
+      openRampWidget: () => setRampWidgetOpen(true),
+      txHistory,
+      openTxHistoryModal: () => setTxHistoryModalOpen(true),
+      openWalletBalanceModal: () => setWalletBalanceModalOpen(true),
+      walletBalance,
+      refreshBalance: (publicKey) => pollarClient.refreshBalance(publicKey),
+      network: networkState.step === "connected" ? networkState.network : "testnet",
+      setNetwork: (network) => pollarClient.setNetwork(network),
       config: remoteConfig,
-      styles,
-      async getBalance(publicKey) {
-        const pk = publicKey || sessionState?.wallet?.publicKey;
-        if (pk) {
-          return await stellarClient.getBalances(pk);
-        }
-        return { success: false, errorCode: "NO_WALLET_FOUND", balances: [] };
-      }
+      styles
     }),
-    [sessionState, remoteConfig, styles, pollarClient, state]
+    [sessionState, remoteConfig, styles, pollarClient, transaction, txHistory, networkState, walletBalance]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(PollarContext.Provider, { value: contextValue, children: [
     children,
     loginModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setLoginModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(LoginModal, { onClose: () => setLoginModalOpen(false) }) }),
-    transactionModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setTransactionModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(TransactionModal, { onClose: () => setTransactionModalOpen(false) }) })
+    transactionModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setTransactionModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(TransactionModal, { onClose: () => setTransactionModalOpen(false) }) }),
+    kycModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setKycModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(
+      KycModal,
+      {
+        onClose: () => setKycModalOpen(false),
+        ...kycModalOptions.country !== void 0 && { country: kycModalOptions.country },
+        ...kycModalOptions.level !== void 0 && { level: kycModalOptions.level },
+        ...kycModalOptions.onApproved !== void 0 && { onApproved: kycModalOptions.onApproved }
+      }
+    ) }),
+    rampWidgetOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setRampWidgetOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(RampWidget, { onClose: () => setRampWidgetOpen(false) }) }),
+    txHistoryModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setTxHistoryModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(TxHistoryModal, { onClose: () => setTxHistoryModalOpen(false) }) }),
+    walletBalanceModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setWalletBalanceModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(WalletBalanceModal, { onClose: () => setWalletBalanceModalOpen(false) }) })
   ] });
 }
 function usePollar() {
@@ -703,50 +1475,37 @@ function usePollar() {
   }
   return ctx;
 }
+function ButtonLogo() {
+  return /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_POLLAR, alt: "Pollar", width: 22, height: 22, className: "wallet-btn-logo" });
+}
 function cropWallet(address) {
   if (address.length <= 12) return address;
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
-function ButtonLogo() {
-  return /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_POLLAR, alt: "Pollar", width: 22, height: 22, className: "wallet-btn-logo" });
-}
-function WalletButton() {
-  const { getClient, walletAddress, styles, openLoginModal } = usePollar();
-  const [open, setOpen] = react.useState(false);
-  const [copied, setCopied] = react.useState(false);
-  const wrapperRef = react.useRef(null);
-  const { theme = "light", accentColor = "#005DB4" } = styles;
-  const isDark = theme === "dark";
-  const dropdownBg = isDark ? "#18181b" : "#fff";
-  const dropdownBorder = isDark ? "#3f3f46" : "#e4e4e7";
-  const itemColor = isDark ? "#fafafa" : "#18181b";
-  react.useEffect(() => {
-    function handleClickOutside(e) {
-      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  async function handleCopy() {
-    if (!walletAddress) return;
-    await navigator.clipboard.writeText(walletAddress);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  }
-  function handleLogout() {
-    setOpen(false);
-    getClient().logout();
-  }
+function WalletButtonTemplate({
+  walletAddress,
+  accentColor,
+  open,
+  copied,
+  dropdownBg,
+  dropdownBorder,
+  itemColor,
+  wrapperRef,
+  onToggleOpen,
+  onCopy,
+  onWalletBalance,
+  onTxHistory,
+  onLogout,
+  onLogin
+}) {
   if (!walletAddress) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "wallet-login-btn", style: { backgroundColor: accentColor }, onClick: openLoginModal, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "wallet-login-btn", style: { backgroundColor: accentColor }, onClick: onLogin, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ButtonLogo, {}),
       "Login with Pollar"
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wallet-wrapper", ref: wrapperRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-btn", style: { backgroundColor: accentColor }, onClick: () => setOpen((v) => !v), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-btn", style: { backgroundColor: accentColor }, onClick: onToggleOpen, children: [
       cropWallet(walletAddress),
       /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
@@ -763,7 +1522,7 @@ function WalletButton() {
       )
     ] }),
     open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wallet-dropdown", style: { backgroundColor: dropdownBg, borderColor: dropdownBorder }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: handleCopy, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onCopy, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
@@ -783,7 +1542,67 @@ function WalletButton() {
         ),
         copied ? "Copied!" : "Copy address"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item danger", onClick: handleLogout, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          className: "wallet-dropdown-item",
+          style: { color: itemColor },
+          onClick: onWalletBalance,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "2", ry: "2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "12", r: "2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 8H12" })
+                ]
+              }
+            ),
+            "Wallet balance"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          className: "wallet-dropdown-item",
+          style: { color: itemColor },
+          onClick: onTxHistory,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14,2 14,8 20,8" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "10,9 9,9 8,9" })
+                ]
+              }
+            ),
+            "Transaction history"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item danger", onClick: onLogout, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
@@ -807,8 +1626,76 @@ function WalletButton() {
     ] })
   ] });
 }
+function WalletButton() {
+  const { getClient, walletAddress, styles, openLoginModal, openTxHistoryModal, openWalletBalanceModal } = usePollar();
+  const [open, setOpen] = react.useState(false);
+  const [copied, setCopied] = react.useState(false);
+  const wrapperRef = react.useRef(null);
+  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const isDark = theme === "dark";
+  const dropdownBg = isDark ? "#18181b" : "#fff";
+  const dropdownBorder = isDark ? "#3f3f46" : "#e4e4e7";
+  const itemColor = isDark ? "#fafafa" : "#18181b";
+  react.useEffect(() => {
+    function handleClickOutside(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  async function handleCopy() {
+    if (!walletAddress) return;
+    await navigator.clipboard.writeText(walletAddress);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }
+  function handleLogout() {
+    setOpen(false);
+    getClient().logout();
+  }
+  function handleWalletBalance() {
+    setOpen(false);
+    openWalletBalanceModal();
+  }
+  function handleTxHistory() {
+    setOpen(false);
+    openTxHistoryModal();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    WalletButtonTemplate,
+    {
+      walletAddress: walletAddress ?? null,
+      accentColor,
+      open,
+      copied,
+      dropdownBg,
+      dropdownBorder,
+      itemColor,
+      wrapperRef,
+      onToggleOpen: () => setOpen((v) => !v),
+      onCopy: handleCopy,
+      onWalletBalance: handleWalletBalance,
+      onTxHistory: handleTxHistory,
+      onLogout: handleLogout,
+      onLogin: openLoginModal
+    }
+  );
+}
 
+exports.KycModal = KycModal;
+exports.KycModalTemplate = KycModalTemplate;
+exports.KycStatus = KycStatus;
+exports.LoginModalTemplate = LoginModalTemplate;
 exports.PollarProvider = PollarProvider;
+exports.RampWidget = RampWidget;
+exports.RampWidgetTemplate = RampWidgetTemplate;
+exports.RouteDisplay = RouteDisplay;
+exports.TransactionModalTemplate = TransactionModalTemplate;
+exports.TxHistoryModalTemplate = TxHistoryModalTemplate;
+exports.WalletBalanceModal = WalletBalanceModal;
+exports.WalletBalanceModalTemplate = WalletBalanceModalTemplate;
 exports.WalletButton = WalletButton;
 exports.usePollar = usePollar;
 //# sourceMappingURL=index.js.map