@pollar/react 0.4.0 → 0.4.2

package/dist/index.js

@@ -12,6 +12,25 @@ 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" }),
@@ -20,11 +39,71 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.4.0"
+        "0.4.2"
       ] })
     ] })
   ] });
 };
+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" },
+  NO_RESTORED_SESSION: { text: "" },
+  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([]);
@@ -131,52 +210,6 @@ var GoogleButton = ({ disabled, onClick }) => {
     ] })
   ] });
 };
-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" },
-  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,
@@ -259,7 +292,7 @@ function LoginModalTemplate({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(LoginStatusBanner, { code: loginStateCode, status, onCancel: () => cancelLoginRef.current?.(), onRetry }),
+    /* @__PURE__ */ jsxRuntime.jsx(ModalStatusBanner, { code: loginStateCode, status, onCancel: () => cancelLoginRef.current?.(), onRetry }),
     /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
   ] });
 }
@@ -359,37 +392,16 @@ function LoginModal({ onClose }) {
     }
   ) });
 }
-function phaseFromStateCode(stateCode, submitResult) {
-  if (stateCode === core.STATE_VAR_CODES.transaction.BUILD_TRANSACTION_ERROR || stateCode === core.STATE_VAR_CODES.transaction.BUILD_TRANSACTION_ERROR_NO_WALLET || stateCode === core.STATE_VAR_CODES.transaction.SIGN_TRANSACTION_ERROR || stateCode === core.STATE_VAR_CODES.transaction.SEND_TRANSACTION_ERROR)
-    return "error";
-  if (stateCode === core.STATE_VAR_CODES.transaction.SEND_TRANSACTION_SUCCESS || submitResult) return "success";
-  if (stateCode === core.STATE_VAR_CODES.transaction.BUILD_TRANSACTION_SUCCESS || stateCode === core.STATE_VAR_CODES.transaction.SIGN_TRANSACTION_START || stateCode === core.STATE_VAR_CODES.transaction.SIGN_TRANSACTION_SUCCESS || stateCode === core.STATE_VAR_CODES.transaction.SEND_TRANSACTION_START)
-    return "ready";
-  return "building";
-}
-var TX_TITLES = {
-  NONE: "Preparing transaction\u2026",
-  BUILD_TRANSACTION_START: "Building transaction\u2026",
-  BUILD_TRANSACTION_SUCCESS: "Confirm Transaction",
-  BUILD_TRANSACTION_ERROR: "Transaction failed",
-  BUILD_TRANSACTION_ERROR_NO_WALLET: "No wallet connected",
-  SIGN_TRANSACTION_START: "Waiting for wallet\u2026",
-  SIGN_TRANSACTION_SUCCESS: "Signed \u2014 submitting\u2026",
-  SIGN_TRANSACTION_ERROR: "Signing failed",
-  SEND_TRANSACTION_START: "Submitting transaction\u2026",
-  SEND_TRANSACTION_SUCCESS: "Transaction sent",
-  SEND_TRANSACTION_ERROR: "Transaction failed"
-};
 function TransactionModalTemplate({
   theme,
   accentColor,
-  stateCode,
+  transactionStateCode,
+  status,
   buildResult,
   submitResult,
-  isLoading,
   onClose,
   onSignAndSend,
-  onRetry
+  onRetrySignAndSend
 }) {
   const isDark = theme === "dark";
   const cssVars = {
@@ -405,14 +417,26 @@ function TransactionModalTemplate({
     "--pollar-success-text": isDark ? "#4ade80" : "#16a34a"
   };
   const [showXdr, setShowXdr] = react.useState(false);
-  const phase = phaseFromStateCode(stateCode, submitResult);
-  const title = TX_TITLES[stateCode] || "";
+  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: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-tx-close", onClick: onClose, disabled: isLoading, "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.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" }) }) })
     ] }),
-    buildResult && phase !== "building" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    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)) })
@@ -446,73 +470,122 @@ function TransactionModalTemplate({
         showXdr && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "pollar-tx-xdr-content", children: buildResult.unsignedXdr })
       ] })
     ] }),
-    phase === "success" && submitResult && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-result", children: [
+    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-status", "data-kind": phase === "error" ? "ERROR" : phase === "success" ? "SUCCESS" : "LOADING", children: [
-      isLoading && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "pollar-tx-spinner", 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"
-        }
-      ) }),
-      phase === "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" })
-      ] }),
-      phase === "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" })
+      /* @__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"
+        ] })
       ] })
     ] }),
-    phase === "ready" && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-tx-sign-btn", onClick: onSignAndSend, children: "Sign & Send" }),
-    phase === "error" && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-tx-sign-btn", onClick: onRetry, children: "Retry" }),
-    phase === "success" && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-tx-sign-btn", onClick: onClose, children: "Done" }),
+    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 isTxBuildResponse = (data) => {
+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;
-  const [submitResult, setSubmitResult] = react.useState(null);
-  console.log({ transaction });
-  async function handleSignAndSend() {
-  }
-  const isLoading = transaction.status === "LOADING";
   let buildResult = null;
-  const stateCode = transaction.code;
-  if (isTxBuildResponse(transaction.data)) {
-    buildResult = transaction.data;
+  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);
+    }
   }
-  console.log({ transaction, buildResult });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     TransactionModalTemplate,
     {
       theme,
       accentColor,
-      stateCode,
+      transactionStateCode,
+      status: transaction.status,
       buildResult,
       submitResult,
-      isLoading,
       onClose,
       onSignAndSend: handleSignAndSend,
-      onRetry: () => {
-      }
+      onRetrySignAndSend: handleSignAndSend
     }
   ) });
 }
@@ -539,6 +612,13 @@ 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({
+    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,
@@ -629,8 +709,8 @@ function PollarProvider({ config, styles: propStyles, children }) {
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(PollarContext.Provider, { value: contextValue, children: [
     children,
-    loginModalOpen && /* @__PURE__ */ jsxRuntime.jsx(LoginModal, { onClose: () => setLoginModalOpen(false) }),
-    transactionModalOpen && /* @__PURE__ */ jsxRuntime.jsx(TransactionModal, { onClose: () => setTransactionModalOpen(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() {