@pollar/react 0.3.9 → 0.4.1

package/dist/index.js

@@ -12,6 +12,97 @@ 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 {
+  constructor() {
+    super(...arguments);
+    this.state = { crashed: false };
+  }
+  static getDerivedStateFromError() {
+    return { crashed: true };
+  }
+  componentDidCatch(error) {
+    console.error("[Pollar] Modal crashed:", error);
+  }
+  render() {
+    if (this.state.crashed) {
+      this.props.onClose();
+      return null;
+    }
+    return this.props.children;
+  }
+};
+var PollarModalFooter = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-footer", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-protected", children: "Protected by" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-footer-brand", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_POLLAR, alt: "Pollar", className: "pollar-footer-logo" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
+        "v",
+        "0.4.1"
+      ] })
+    ] })
+  ] });
+};
+var LOGIN_CODE_MESSAGES = {
+  NONE: { text: "" },
+  LOGOUT: { text: "Logged out" },
+  CREATE_SESSION_START: { text: "Starting session\u2026" },
+  CREATE_SESSION_ERROR: { text: "Failed to start session" },
+  CREATE_SESSION_SUCCESS: { text: "Session ready" },
+  EMAIL_AUTH_START: { text: "Sending code\u2026" },
+  EMAIL_AUTH_START_ERROR: { text: "Failed to send code" },
+  EMAIL_AUTH_START_SUCCESS: { text: "Code sent \u2014 check your inbox" },
+  EMAIL_AUTH_CODE_ERROR: { text: "Invalid code \u2014 try again" },
+  EMAIL_AUTH_CODE_SUCCESS: { text: "Code verified!" },
+  WALLET_AUTH_START: { text: "Connecting wallet\u2026" },
+  WALLET_AUTH_FREIGHTER_NOT_INSTALLED: { text: "Freighter is not installed" },
+  WALLET_AUTH_ALBEDO_NOT_INSTALLED: { text: "Albedo is not installed" },
+  WALLET_AUTH_CONNECTED: { text: "Wallet connected" },
+  WALLET_AUTH_LOGIN_START: { text: "Signing in with wallet\u2026" },
+  WALLET_AUTH_LOGIN_START_SUCCESS: { text: "Wallet signed in" },
+  WALLET_AUTH_LOGIN_START_ERROR: { text: "Failed to sign in with wallet" },
+  WALLET_AUTH_ERROR: { text: "Unknow wallet error" },
+  STREAM_POLL_START: { text: "Waiting for authentication\u2026" },
+  STREAM_POLL_EVENT: { text: "Waiting for authentication\u2026" },
+  STREAM_POLL_READY: { text: "Authenticated!" },
+  FETCH_SESSION_START: { text: "Loading session\u2026" },
+  FETCH_SESSION_SUCCESS: { text: "Welcome back!" },
+  FETCH_SESSION_ERROR: { text: "Failed to load session" },
+  RESTORED_SESSION_SUCCESS: { text: "Session restored" },
+  RESTORED_SESSION_ERROR: { text: "Failed to restore session" },
+  SESSION_STORED: { text: "Session saved" },
+  ERROR_UNKNOWN: { text: "Something went wrong" },
+  ABORTED: { text: "Login cancelled" },
+  // transaction
+  BUILD_TRANSACTION_START: { text: "Building transaction\u2026" },
+  BUILD_TRANSACTION_SUCCESS: { text: "Transaction built, ready to sign and send" },
+  BUILD_TRANSACTION_ERROR: { text: "Failed to build transaction" },
+  BUILD_TRANSACTION_ERROR_NO_WALLET: { text: "No wallet connected" },
+  SIGN_SEND_TRANSACTION_START: { text: "Signing and sending transaction\u2026" },
+  SIGN_SEND_TRANSACTION_SUCCESS: { text: "Transaction signed" },
+  SIGN_SEND_TRANSACTION_ERROR: { text: "Signing rejected" }
+};
+function ModalStatusBanner({ code, status, onCancel, onRetry }) {
+  if (!code) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-status" });
+  }
+  const { text } = LOGIN_CODE_MESSAGES[code] || { text: "" };
+  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;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-status", "data-kind": status, children: [
+    icon,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: text }),
+    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" })
+  ] });
+}
 function EmailCodeInput({ email, onSubmit }) {
   const [digits, setDigits] = react.useState(["", "", "", "", "", ""]);
   const inputRefs = react.useRef([]);
@@ -118,51 +209,6 @@ var GoogleButton = ({ disabled, onClick }) => {
     ] })
   ] });
 };
-var LOGIN_CODE_MESSAGES = {
-  LOGOUT: { text: "Logged out" },
-  CREATE_SESSION_START: { text: "Starting session\u2026" },
-  CREATE_SESSION_ERROR: { text: "Failed to start session" },
-  CREATE_SESSION_SUCCESS: { text: "Session ready" },
-  EMAIL_AUTH_START: { text: "Sending code\u2026" },
-  EMAIL_AUTH_START_ERROR: { text: "Failed to send code" },
-  EMAIL_AUTH_START_SUCCESS: { text: "Code sent \u2014 check your inbox" },
-  EMAIL_AUTH_CODE_ERROR: { text: "Invalid code \u2014 try again" },
-  EMAIL_AUTH_CODE_SUCCESS: { text: "Code verified!" },
-  WALLET_AUTH_START: { text: "Connecting wallet\u2026" },
-  WALLET_AUTH_FREIGHTER_NOT_INSTALLED: { text: "Freighter is not installed" },
-  WALLET_AUTH_ALBEDO_NOT_INSTALLED: { text: "Albedo is not installed" },
-  WALLET_AUTH_CONNECTED: { text: "Wallet connected" },
-  WALLET_AUTH_LOGIN_START: { text: "Signing in with wallet\u2026" },
-  WALLET_AUTH_LOGIN_START_SUCCESS: { text: "Wallet signed in" },
-  WALLET_AUTH_LOGIN_START_ERROR: { text: "Failed to sign in with wallet" },
-  WALLET_AUTH_ERROR: { text: "Unknow wallet error" },
-  STREAM_POLL_START: { text: "Waiting for authentication\u2026" },
-  STREAM_POLL_EVENT: { text: "Waiting for authentication\u2026" },
-  STREAM_POLL_READY: { text: "Authenticated!" },
-  FETCH_SESSION_START: { text: "Loading session\u2026" },
-  FETCH_SESSION_SUCCESS: { text: "Welcome back!" },
-  FETCH_SESSION_ERROR: { text: "Failed to load session" },
-  ERROR_UNKNOWN: { text: "Something went wrong" },
-  ABORTED: { text: "Login cancelled" }
-};
-function LoginStatusBanner({ code, status, onCancel, onRetry }) {
-  if (!code) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-status" });
-  const { text } = LOGIN_CODE_MESSAGES[code] || { text: "" };
-  const isLoading = status === core.StateStatus.LOADING;
-  const icon = status === core.StateStatus.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 === core.StateStatus.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 === core.StateStatus.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;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-status", "data-kind": status, children: [
-    icon,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: text }),
-    isLoading && onCancel && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-status-cancel", onClick: onCancel, children: "Cancel" }),
-    status === core.StateStatus.ERROR && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-status-cancel", onClick: onRetry, children: "Retry" })
-  ] });
-}
 function LoginModalTemplate({
   theme,
   accentColor,
@@ -245,22 +291,12 @@ function LoginModalTemplate({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(LoginStatusBanner, { code: loginStateCode, status, onCancel: () => cancelLoginRef.current?.(), onRetry }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-footer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-protected", children: "Protected by" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-footer-brand", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_POLLAR, alt: "Pollar", className: "pollar-footer-logo" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
-          "v",
-          "0.3.9"
-        ] })
-      ] })
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(ModalStatusBanner, { code: loginStateCode, status, onCancel: () => cancelLoginRef.current?.(), onRetry }),
+    /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
   ] });
 }
 function isLoginCode(code) {
-  return Object.values(core.STATE_VAR_CODES[core.PollarStateVar.LOGIN]).includes(code);
+  return Object.values(core.STATE_VAR_CODES[core.PollarStateVar.AUTHENTICATION]).includes(code);
 }
 function LoginModal({ onClose }) {
   const [email, setEmail] = react.useState("");
@@ -272,20 +308,20 @@ function LoginModal({ onClose }) {
   const [clientSessionId, setClientSessionId] = react.useState(null);
   react.useEffect(() => {
     return getClient().onStateChange((stateEntry) => {
-      if (stateEntry.var === core.PollarStateVar.LOGIN && isLoginCode(stateEntry.code)) {
+      if (stateEntry.var === core.PollarStateVar.AUTHENTICATION && isLoginCode(stateEntry.code)) {
         setLoginStateCode(stateEntry.code);
         setStatus(stateEntry.status);
-        if (stateEntry.code === core.STATE_VAR_CODES[core.PollarStateVar.LOGIN].STREAM_POLL_START) {
+        if (stateEntry.code === core.STATE_VAR_CODES[core.PollarStateVar.AUTHENTICATION].STREAM_POLL_START) {
           const data = stateEntry.data;
           setClientSessionId(data.clientSessionId);
         }
-        if (stateEntry.code === core.STATE_VAR_CODES[core.PollarStateVar.LOGIN].STREAM_POLL_EVENT) {
+        if (stateEntry.code === core.STATE_VAR_CODES[core.PollarStateVar.AUTHENTICATION].STREAM_POLL_EVENT) {
           const data = stateEntry.data;
           if (data?.status === "AWAITING_EMAIL") {
             setAwaitingEmailCode(true);
           }
         }
-        if (stateEntry.code === core.STATE_VAR_CODES[core.PollarStateVar.LOGIN].FETCH_SESSION_SUCCESS) {
+        if (stateEntry.code === core.STATE_VAR_CODES[core.PollarStateVar.AUTHENTICATION].FETCH_SESSION_SUCCESS) {
           setAwaitingEmailCode(false);
           setTimeout(onClose, 1e3);
         }
@@ -355,6 +391,203 @@ function LoginModal({ onClose }) {
     }
   ) });
 }
+function TransactionModalTemplate({
+  theme,
+  accentColor,
+  transactionStateCode,
+  status,
+  buildResult,
+  submitResult,
+  onClose,
+  onSignAndSend,
+  onRetrySignAndSend
+}) {
+  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 [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";
+  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.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.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.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.jsxs("div", { className: "pollar-tx-xdr", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "pollar-tx-xdr-toggle", onClick: () => setShowXdr((v) => !v), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              "aria-hidden": true,
+              style: { transform: showXdr ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 150ms" },
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 2l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+            }
+          ),
+          "Raw transaction (XDR)"
+        ] }),
+        showXdr && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "pollar-tx-xdr-content", children: buildResult.unsignedXdr })
+      ] })
+    ] }),
+    submitResult && transactionStateCode === "SIGN_SEND_TRANSACTION_SUCCESS" && /* @__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.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"
+              }
+            )
+          ] }),
+          "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"
+              }
+            )
+          ] }),
+          "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"
+              }
+            )
+          ] }),
+          "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,
+      {
+        code: transactionStateCode,
+        status
+      }
+    ),
+    /* @__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 { 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);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+    TransactionModalTemplate,
+    {
+      theme,
+      accentColor,
+      transactionStateCode,
+      status: transaction.status,
+      buildResult,
+      submitResult,
+      onClose,
+      onSignAndSend: handleSignAndSend,
+      onRetrySignAndSend: handleSignAndSend
+    }
+  ) });
+}
 var emptyResponse = {
   application: {
     name: ""
@@ -363,7 +596,7 @@ var emptyResponse = {
 };
 async function fetchRemoteConfig(api) {
   try {
-    const { data, error } = await api.GET(`/config`);
+    const { data, error } = await api.GET(`/applications/config`);
     if (!data || error) {
       return emptyResponse;
     }
@@ -378,16 +611,23 @@ function PollarProvider({ config, styles: propStyles, children }) {
   const [stellarClient] = react.useState(() => new core.StellarClient(config.stellarNetwork || "testnet"));
   const [sessionState, setSessionState] = react.useState(null);
   const [state, setState] = react.useState({
-    [core.PollarStateVar.LOGIN]: {
-      var: core.PollarStateVar.LOGIN,
-      code: core.STATE_VAR_CODES[core.PollarStateVar.LOGIN].NONE,
+    network: {
+      var: "network",
+      code: core.STATE_VAR_CODES.network.NONE,
+      status: core.StateStatus.NONE,
+      level: "info",
+      ts: 0
+    },
+    authentication: {
+      var: "authentication",
+      code: core.STATE_VAR_CODES.authentication.NONE,
       status: core.StateStatus.NONE,
       level: "info",
       ts: 0
     },
-    [core.PollarStateVar.WALLET_ADDRESS]: {
-      var: core.PollarStateVar.WALLET_ADDRESS,
-      code: core.STATE_VAR_CODES[core.PollarStateVar.WALLET_ADDRESS].NONE,
+    transaction: {
+      var: "transaction",
+      code: core.STATE_VAR_CODES.transaction.NONE,
       status: core.StateStatus.NONE,
       level: "info",
       ts: 0
@@ -406,8 +646,8 @@ function PollarProvider({ config, styles: propStyles, children }) {
         }
         return prevState;
       });
-      if (stateEntry.var === core.PollarStateVar.WALLET_ADDRESS) {
-        if (stateEntry.code === core.STATE_VAR_CODES[core.PollarStateVar.WALLET_ADDRESS].UPDATED_ADDRESS && core.isValidSession(stateEntry.data)) {
+      if (stateEntry.var === "authentication") {
+        if ((stateEntry.code === core.STATE_VAR_CODES.authentication.SESSION_STORED || core.STATE_VAR_CODES.authentication.RESTORED_SESSION_SUCCESS) && core.isValidSession(stateEntry.data)) {
           setSessionState((prevState) => {
             if (JSON.stringify(prevState) !== JSON.stringify(stateEntry.data)) {
               return stateEntry.data;
@@ -415,9 +655,9 @@ function PollarProvider({ config, styles: propStyles, children }) {
             return prevState;
           });
         }
-      }
-      if (stateEntry.var === core.PollarStateVar.WALLET_ADDRESS && stateEntry.code === core.STATE_VAR_CODES[core.PollarStateVar.WALLET_ADDRESS].REMOVED_ADDRESS || stateEntry.var === core.PollarStateVar.LOGIN && stateEntry.code === core.STATE_VAR_CODES[core.PollarStateVar.LOGIN].LOGOUT) {
-        setSessionState(null);
+        if (stateEntry.code === core.STATE_VAR_CODES.authentication.LOGOUT) {
+          setSessionState(null);
+        }
       }
     });
   }, [pollarClient]);
@@ -433,31 +673,43 @@ function PollarProvider({ config, styles: propStyles, children }) {
       setStyles(propStyles ?? {});
     });
   }, [pollarClient]);
-  const [modalOpen, setModalOpen] = react.useState(false);
+  const [loginModalOpen, setLoginModalOpen] = react.useState(false);
+  const [transactionModalOpen, setTransactionModalOpen] = react.useState(false);
   const contextValue = react.useMemo(
     () => ({
       walletAddress: sessionState?.wallet?.publicKey || "",
       getClient: () => pollarClient,
-      openLoginModal: () => setModalOpen(true),
-      isAuthenticated: pollarClient.isAuthenticated(),
+      // client
+      state,
       login: (options) => pollarClient.login(options),
       logout: () => pollarClient.logout(),
+      isAuthenticated: pollarClient.isAuthenticated(),
+      buildTx: (operation, params, options) => pollarClient.buildTx(operation, params, options),
+      submitTx: (signedXdr) => pollarClient.submitTx(signedXdr),
+      // react
+      sendTransaction: (operation, params, options) => {
+        void pollarClient.buildTx(operation, params, options);
+        setTransactionModalOpen(true);
+      },
+      openTransactionModal: () => setTransactionModalOpen(true),
+      openLoginModal: () => setLoginModalOpen(true),
       config: remoteConfig,
-      state,
       styles,
+      // stellar
       async getBalance(publicKey) {
         const pk = publicKey || sessionState?.wallet?.publicKey;
         if (pk) {
-          return stellarClient.getBalances(pk);
+          return await stellarClient.getBalances(pk);
         }
-        return null;
+        return { success: false, errorCode: "NO_WALLET_FOUND", balances: [] };
       }
     }),
     [sessionState, remoteConfig, styles, pollarClient, state]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(PollarContext.Provider, { value: contextValue, children: [
     children,
-    modalOpen && /* @__PURE__ */ jsxRuntime.jsx(LoginModal, { onClose: () => setModalOpen(false) })
+    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) }) })
   ] });
 }
 function usePollar() {