@pollar/react 0.4.5 → 0.5.0

package/dist/index.js

@@ -39,26 +39,16 @@ 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.4.5"
       ] })
     ] })
   ] });
 };
-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" })
@@ -70,9 +60,159 @@ function ModalStatusBanner({ message, status, onCancel, onRetry }) {
     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([]);
@@ -206,10 +346,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,
@@ -248,7 +388,7 @@ 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];
@@ -343,7 +483,7 @@ function LoginModal({ onClose }) {
     getClient().beginEmailLogin();
   }
   function handleSocialLogin(provider) {
-    getClient().loginOAuth(provider);
+    getClient().login({ provider });
   }
   function handleWalletConnect(type) {
     getClient().loginWallet(type);
@@ -392,16 +532,316 @@ function LoginModal({ onClose }) {
     }
   ) });
 }
+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
+    }
+  ) });
+}
 function TransactionModalTemplate({
   theme,
   accentColor,
-  transactionStateCode,
-  status,
-  buildResult,
-  submitResult,
+  transaction,
   onClose,
-  onSignAndSend,
-  onRetrySignAndSend
+  onSignAndSend
 }) {
   const isDark = theme === "dark";
   const cssVars = {
@@ -418,37 +858,49 @@ function TransactionModalTemplate({
   };
   const [showXdr, setShowXdr] = react.useState(false);
   const [copied, setCopied] = react.useState(false);
+  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);
+  const explorerNetwork = buildData?.summary.network?.toLowerCase().includes("testnet") ? "testnet" : "public";
+  const explorerUrl = hash ? `https://stellar.expert/explorer/${explorerNetwork}/tx/${hash}` : null;
   function handleCopyHash() {
-    if (!submitResult) return;
-    navigator.clipboard.writeText(submitResult.hash).then(() => {
+    if (!hash) return;
+    navigator.clipboard.writeText(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 statusMessage = {
+    idle: "",
+    building: "Building transaction\u2026",
+    built: "Ready to sign and send",
+    signing: "Signing and sending transaction\u2026",
+    success: "Transaction sent successfully",
+    error: "Transaction failed"
+  };
   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" }) }) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: "Transaction" }),
+      /* @__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" }) }) })
     ] }),
-    isBuilt && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    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: [
@@ -467,111 +919,52 @@ 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: [
+    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.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(
-              "path",
-              {
-                d: "M3.5 7l2.5 2.5 4.5-5",
-                stroke: "white",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 7l2.5 2.5 4.5-5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
           ] }),
           "Copied!"
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 13 13", fill: "none", "aria-hidden": true, children: [
             /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "4", width: "8", height: "8", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                d: "M3 9H2a1 1 0 01-1-1V2a1 1 0 011-1h6a1 1 0 011 1v1",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round"
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 9H2a1 1 0 01-1-1V2a1 1 0 011-1h6a1 1 0 011 1v1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
           ] }),
           "Copy hash"
         ] }) }),
         explorerUrl && /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "pollar-tx-result-btn", href: explorerUrl, target: "_blank", rel: "noopener noreferrer", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 13 13", fill: "none", "aria-hidden": true, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                d: "M5 2H2a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                d: "M8 1h4m0 0v4m0-4L6 7",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 2H2a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 1h4m0 0v4m0-4L6 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
           ] }),
           "View on Explorer"
         ] })
       ] })
     ] }),
-    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" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ModalStatusBanner,
-      {
-        message: TRANSACTION_CODE_MESSAGES[transactionStateCode] ?? "",
-        status
-      }
-    ),
+    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 && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-btn-primary pollar-tx-sign-btn", disabled: true, children: "Signing & sending\u2026" }),
+    isSuccess && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-btn-primary pollar-tx-sign-btn", onClick: onClose, children: "Done" }),
+    /* @__PURE__ */ jsxRuntime.jsx(ModalStatusBanner, { message: statusMessage[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 } = usePollar();
   const { theme = "light", accentColor = "#005DB4" } = styles;
-  let buildResult = null;
-  const transactionStateCode = transaction.code;
-  const content = transaction.data?.content;
-  if (isTxBuildResponseContent(content)) {
-    buildResult = content;
-  }
-  let submitResult = null;
-  if (isTxSignSendResponseContent(content)) {
-    submitResult = content;
-  }
   async function handleSignAndSend() {
-    if (buildResult) {
-      await getClient().submitTx(buildResult.unsignedXdr);
+    if (transaction.step === "built") {
+      await getClient().signAndSubmitTx(transaction.buildData.unsignedXdr);
     }
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -579,64 +972,262 @@ function TransactionModal({ onClose }) {
     {
       theme,
       accentColor,
-      transactionStateCode,
-      status: transaction.status,
-      buildResult,
-      submitResult,
+      transaction,
       onClose,
-      onSignAndSend: handleSignAndSend,
-      onRetrySignAndSend: handleSignAndSend
+      onSignAndSend: handleSignAndSend
+    }
+  ) });
+}
+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 WalletBalanceModal({ onClose }) {
+  const { getBalance, walletAddress, styles } = usePollar();
+  const { theme = "light", accentColor = "#005DB4" } = styles;
+  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 [status, setStatus] = react.useState("loading");
+  const [data, setData] = react.useState(null);
+  async function load() {
+    setStatus("loading");
+    const result = await getBalance();
+    if (result) {
+      setData(result);
+      setStatus("loaded");
+    } else {
+      setStatus("error");
+    }
+  }
+  react.useEffect(() => {
+    void load();
+  }, []);
+  const isLoading = status === "loading";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__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: load, 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" }),
+    status === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: "Failed to load balances. Check your connection." }),
+    status === "loaded" && data && !data.exists && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-empty", children: [
+      "Account not found on ",
+      data.network,
+      "."
+    ] }),
+    status === "loaded" && data?.exists && data.balances.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "No balances found." }),
+    status === "loaded" && 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, {})
+  ] }) });
+}
 var emptyResponse = {
   application: {
     name: ""
   },
   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 stellarClient = react.useMemo(() => {
+    const network = networkState.step === "connected" ? networkState.network : "testnet";
+    return new core.StellarClient(network);
+  }, [networkState]);
   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 [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.onNetworkStateChange((state) => {
+      setNetworkState(state);
     });
   }, [pollarClient]);
   react.useEffect(() => {
@@ -649,7 +1240,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 +1251,62 @@ 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 || "",
       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: (signedXdr) => pollarClient.signAndSubmitTx(signedXdr),
       openTransactionModal: () => setTransactionModalOpen(true),
       openLoginModal: () => setLoginModalOpen(true),
+      openKycModal: (options = {}) => {
+        setKycModalOptions(options);
+        setKycModalOpen(true);
+      },
+      openRampWidget: () => setRampWidgetOpen(true),
+      txHistory,
+      openTxHistoryModal: () => setTxHistoryModalOpen(true),
+      openWalletBalanceModal: () => setWalletBalanceModalOpen(true),
+      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: [] };
-      }
+      getBalance: (publicKey) => pollarClient.getWalletBalance(publicKey)
     }),
-    [sessionState, remoteConfig, styles, pollarClient, state]
+    [sessionState, remoteConfig, styles, pollarClient, transaction, txHistory, networkState, stellarClient]
   );
   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() {
@@ -711,7 +1324,7 @@ 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 { getClient, walletAddress, styles, openLoginModal, openTxHistoryModal, openWalletBalanceModal } = usePollar();
   const [open, setOpen] = react.useState(false);
   const [copied, setCopied] = react.useState(false);
   const wrapperRef = react.useRef(null);
@@ -783,6 +1396,72 @@ function WalletButton() {
         ),
         copied ? "Copied!" : "Copy address"
       ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          className: "wallet-dropdown-item",
+          style: { color: itemColor },
+          onClick: () => {
+            setOpen(false);
+            openWalletBalanceModal();
+          },
+          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: () => {
+            setOpen(false);
+            openTxHistoryModal();
+          },
+          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: handleLogout, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
@@ -808,7 +1487,11 @@ function WalletButton() {
   ] });
 }
 
+exports.KycModal = KycModal;
+exports.KycStatus = KycStatus;
 exports.PollarProvider = PollarProvider;
+exports.RampWidget = RampWidget;
+exports.RouteDisplay = RouteDisplay;
 exports.WalletButton = WalletButton;
 exports.usePollar = usePollar;
 //# sourceMappingURL=index.js.map