@pollar/react 0.5.0 → 0.5.2

package/dist/index.js

@@ -9,7 +9,6 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/constants.ts
 var LOGO_POLLAR = "https://pollar.xyz/assets/logo_pollar.png";
-var LOGO_GITHUB = "https://pollar.xyz/assets/GitHub_Invertocat_White.png";
 var LOGO_FREIGHTER = "https://pollar.xyz/assets/logo_freighter.png";
 var LOGO_ALBEDO = "https://pollar.xyz/assets/logo_albedo.svg";
 var ModalErrorBoundary = class extends react.Component {
@@ -39,7 +38,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.4.5"
+        "0.5.2"
       ] })
     ] })
   ] });
@@ -55,7 +54,7 @@ function ModalStatusBanner({ message, status, onCancel, onRetry }) {
   ] }) : status === "SUCCESS" ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "7", fill: "currentColor" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 7l2.5 2.5 4.5-5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-  ] }) : status === "LOADING" ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeDasharray: "22 10" }) }) : null;
+  ] }) : status === "LOADING" ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-status", "data-kind": status, children: [
     icon,
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: message }),
@@ -266,8 +265,8 @@ function EmailCodeInput({ email, onSubmit }) {
 }
 var GithubButton = ({ disabled, onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "github-button", disabled, onClick, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_GITHUB, alt: "GitHub", className: "github-button-icon" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "github-button-contents", children: "Continue with GitHub" })
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "github-button-icon", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z", clipRule: "evenodd" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "github-button-contents", children: "GitHub" })
   ] });
 };
 var GoogleButton = ({ disabled, onClick }) => {
@@ -314,8 +313,8 @@ var GoogleButton = ({ disabled, onClick }) => {
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "gsi-material-button-contents", children: "Continue with Google" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "none" }, children: "Continue with Google" })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "gsi-material-button-contents", children: "Google" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "none" }, children: "Google" })
     ] })
   ] });
 };
@@ -372,6 +371,7 @@ function LoginModalTemplate({
   onCancel,
   onRetry
 }) {
+  const [showWalletPicker, setShowWalletPicker] = react.useState(false);
   const isDark = theme === "dark";
   const enabledSocial = Object.entries(providers).filter(([, enabled]) => enabled);
   const cssVars = {
@@ -392,16 +392,48 @@ function LoginModalTemplate({
   const isEmailCodeError = authState.step === "error" && (authState.errorCode === core.AUTH_ERROR_CODES.EMAIL_CODE_EXPIRED || authState.errorCode === core.AUTH_ERROR_CODES.EMAIL_CODE_INVALID);
   const awaitingEmailCode = authState.step === "entering_code" || authState.step === "verifying_email_code" || isEmailCodeError;
   const statusMessage = authState.step === "error" ? authState.message : AUTH_STATE_MESSAGES[authState.step];
+  const BackButton = ({ onClick }) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-back-btn", onClick, "aria-label": "Back", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 19l-7-7 7-7" }) }) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-close-btn", onClick: onCancel, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-header", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-logo-wrap", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl ?? LOGO_POLLAR, alt: "Logo", className: "pollar-logo" }) }),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-title", children: appName }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-subtitle", children: "Log in or sign up" })
     ] }),
     awaitingEmailCode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-back-btn", onClick: onBack, children: "\u2190 Back" }),
+      /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: onBack }),
       /* @__PURE__ */ jsxRuntime.jsx(EmailCodeInput, { email, onSubmit: onCodeSubmit ?? (() => {
       }) }, codeInputKey)
+    ] }) : showWalletPicker ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: () => setShowWalletPicker(false) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-wallet-list", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: isLoading,
+            className: "pollar-wallet-list-btn",
+            onClick: onFreighterConnect,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_FREIGHTER, alt: "Freighter", className: "pollar-wallet-list-icon" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-wallet-list-name", children: "Freighter" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: isLoading,
+            className: "pollar-wallet-list-btn",
+            onClick: onAlbedoConnect,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_ALBEDO, alt: "Albedo", className: "pollar-wallet-list-icon" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-wallet-list-name", children: "Albedo" })
+            ]
+          }
+        )
+      ] })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       emailEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-email-section", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -426,17 +458,19 @@ function LoginModalTemplate({
         enabledSocial.some(([key]) => key === "google") && /* @__PURE__ */ jsxRuntime.jsx(GoogleButton, { disabled: isLoading, onClick: () => onSocialLogin?.("google") }),
         enabledSocial.some(([key]) => key === "github") && /* @__PURE__ */ jsxRuntime.jsx(GithubButton, { disabled: isLoading, onClick: () => onSocialLogin?.("github") })
       ] }),
-      embeddedWallets && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-wallet-section", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-wallet-label", children: "Continue with a wallet" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", disabled: isLoading, className: "pollar-wallet-btn", onClick: onFreighterConnect, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_FREIGHTER, alt: "Freighter", className: "pollar-wallet-icon" }),
-          "Freighter"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", disabled: isLoading, className: "pollar-wallet-btn", onClick: onAlbedoConnect, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_ALBEDO, alt: "Albedo", className: "pollar-wallet-icon" }),
-          "Albedo"
-        ] })
-      ] })
+      embeddedWallets && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-wallet-section", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: isLoading,
+          className: "pollar-wallet-entry-btn",
+          onClick: () => setShowWalletPicker(true),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) }),
+            "Wallet"
+          ]
+        }
+      ) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ModalStatusBanner,
@@ -527,7 +561,7 @@ function LoginModal({ onClose }) {
       codeInputKey,
       onCodeSubmit: handleVerifyCode,
       onBack: handleBack,
-      onCancel: () => getClient().cancelLogin(),
+      onCancel: handleClose,
       onRetry: handleRetry
     }
   ) });
@@ -836,12 +870,27 @@ function RampWidget({ onClose }) {
     }
   ) });
 }
+var STATUS_MESSAGES = {
+  idle: "",
+  building: "Building transaction\u2026",
+  built: "Ready to sign and send",
+  signing: "Signing and sending transaction\u2026",
+  success: "Transaction sent successfully",
+  error: "Transaction failed"
+};
 function TransactionModalTemplate({
   theme,
   accentColor,
   transaction,
+  showXdr,
+  copied,
+  explorerUrl,
+  walletType,
   onClose,
-  onSignAndSend
+  onSignAndSend,
+  onToggleXdr,
+  onCopyHash,
+  onRetry
 }) {
   const isDark = theme === "dark";
   const cssVars = {
@@ -856,8 +905,6 @@ function TransactionModalTemplate({
     "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
     "--pollar-success-text": isDark ? "#4ade80" : "#16a34a"
   };
-  const [showXdr, setShowXdr] = react.useState(false);
-  const [copied, setCopied] = react.useState(false);
   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;
@@ -866,28 +913,23 @@ function TransactionModalTemplate({
   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 (!hash) return;
-    navigator.clipboard.writeText(hash).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    });
-  }
-  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-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" }) }) })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-header", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: "Transaction" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-close-btn", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+      }
+    ) }),
     showDetails && buildData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-summary", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-tx-summary-title", children: "Details" }),
@@ -904,7 +946,7 @@ function TransactionModalTemplate({
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-xdr", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "pollar-tx-xdr-toggle", onClick: () => setShowXdr((v) => !v), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "pollar-tx-xdr-toggle", onClick: onToggleXdr, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
@@ -922,48 +964,147 @@ function TransactionModalTemplate({
         showXdr && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "pollar-tx-xdr-content", children: buildData.unsignedXdr })
       ] })
     ] }),
+    isError && errorDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-error-details", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-tx-error-details-label", children: "Error details" }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "pollar-tx-error-details-content", children: errorDetails })
+    ] }),
+    isBuilt && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-btn-primary pollar-tx-sign-btn", onClick: onSignAndSend, children: "Sign & Send" }),
+    (isSigning || isSuccess || isError) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-wallet-spinner", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-spinner-ring", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            viewBox: "0 0 88 88",
+            width: "88",
+            height: "88",
+            className: `pollar-tx-spinner-svg${isSigning ? " pollar-tx-spinner-rotating" : ""}`,
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "44", cy: "44", r: "36", fill: "none", stroke: "var(--pollar-border)", strokeWidth: "3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: "44",
+                  cy: "44",
+                  r: "36",
+                  fill: "none",
+                  stroke: isSuccess ? "var(--pollar-success-text)" : isError ? "var(--pollar-error-text)" : "var(--pollar-accent)",
+                  strokeWidth: "3",
+                  strokeLinecap: "round",
+                  strokeDasharray: isSigning ? "169.6 56.6" : "999 0",
+                  transform: "rotate(-90 44 44)",
+                  style: { transition: isSigning ? "none" : "stroke 400ms, stroke-dasharray 400ms" }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-tx-wallet-icon", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: walletType === core.WalletType.FREIGHTER ? LOGO_FREIGHTER : walletType === core.WalletType.ALBEDO ? LOGO_ALBEDO : LOGO_POLLAR,
+            alt: walletType === core.WalletType.FREIGHTER ? "Freighter" : walletType === core.WalletType.ALBEDO ? "Albedo" : "Pollar",
+            className: "pollar-tx-wallet-img"
+          }
+        ) })
+      ] }),
+      isSigning && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-tx-spinner-label", children: walletType === core.WalletType.FREIGHTER ? "Waiting for Freighter\u2026" : walletType === core.WalletType.ALBEDO ? "Waiting for Albedo\u2026" : "Signing and sending\u2026" }),
+      isError && onRetry && "buildData" in transaction && transaction.buildData && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-btn-secondary pollar-tx-retry-btn", onClick: onRetry, children: "Try again" })
+    ] }),
     isSuccess && hash && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-result", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-tx-result-label", children: "Transaction hash" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-tx-result-hash", children: hash }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-result-actions", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-tx-result-btn", onClick: handleCopyHash, children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "pollar-tx-result-btn", onClick: onCopyHash, children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: [
             /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "7", fill: "currentColor" }),
-            /* @__PURE__ */ jsxRuntime.jsx("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"
         ] })
       ] })
     ] }),
-    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(
+      ModalStatusBanner,
+      {
+        message: STATUS_MESSAGES[transaction.step],
+        status: isError ? "ERROR" : isSigning || transaction.step === "building" ? "LOADING" : isSuccess ? "SUCCESS" : "NONE"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
   ] });
 }
 function TransactionModal({ onClose }) {
-  const { getClient, styles, transaction } = usePollar();
+  const { getClient, styles, transaction, network, walletType } = usePollar();
   const { theme = "light", accentColor = "#005DB4" } = styles;
-  async function handleSignAndSend() {
+  const [showXdr, setShowXdr] = react.useState(false);
+  const [copied, setCopied] = react.useState(false);
+  const hash = transaction.step === "success" ? transaction.hash : null;
+  const buildData = "buildData" in transaction ? transaction.buildData : null;
+  const explorerNetwork = buildData?.summary.network?.toLowerCase().includes("testnet") ? "testnet" : "public";
+  const explorerUrl = hash ? `https://stellar.expert/explorer/${explorerNetwork}/tx/${hash}` : null;
+  function handleSignAndSend() {
     if (transaction.step === "built") {
+      void getClient().signAndSubmitTx(transaction.buildData.unsignedXdr);
+    }
+  }
+  function handleCopyHash() {
+    if (!hash) return;
+    navigator.clipboard.writeText(hash).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
+  }
+  async function handleRetry() {
+    if (transaction.step === "error" && transaction.buildData) {
       await getClient().signAndSubmitTx(transaction.buildData.unsignedXdr);
     }
   }
@@ -973,8 +1114,15 @@ function TransactionModal({ onClose }) {
       theme,
       accentColor,
       transaction,
+      showXdr,
+      copied,
+      explorerUrl,
+      walletType,
       onClose,
-      onSignAndSend: handleSignAndSend
+      onSignAndSend: handleSignAndSend,
+      onToggleXdr: () => setShowXdr((v) => !v),
+      onCopyHash: handleCopyHash,
+      onRetry: handleRetry
     }
   ) });
 }
@@ -1129,9 +1277,14 @@ function BalanceItem({ record }) {
     ] })
   ] });
 }
-function WalletBalanceModal({ onClose }) {
-  const { getBalance, walletAddress, styles } = usePollar();
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+function WalletBalanceModalTemplate({
+  theme,
+  accentColor,
+  walletBalance,
+  walletAddress,
+  onRefresh,
+  onClose
+}) {
   const isDark = theme === "dark";
   const cssVars = {
     "--pollar-accent": accentColor,
@@ -1142,27 +1295,13 @@ function WalletBalanceModal({ onClose }) {
     "--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: [
+  const isLoading = walletBalance.step === "loading";
+  const data = walletBalance.step === "loaded" ? walletBalance.data : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-bal-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: "Wallet Balance" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header-actions", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "pollar-modal-refresh-btn", onClick: load, disabled: isLoading, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "pollar-modal-refresh-btn", onClick: onRefresh, disabled: isLoading, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "svg",
             {
@@ -1185,16 +1324,34 @@ function WalletBalanceModal({ onClose }) {
     ] }),
     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: [
+    walletBalance.step === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: walletBalance.message }),
+    data && !data.exists && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-empty", children: [
       "Account not found on ",
       data.network,
       "."
     ] }),
-    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 ?? ""))) }),
+    data?.exists && data.balances.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "No balances found." }),
+    data?.exists && data.balances.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-bal-list", children: data.balances.map((b) => /* @__PURE__ */ jsxRuntime.jsx(BalanceItem, { record: b }, b.code + (b.issuer ?? ""))) }),
     /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
-  ] }) });
+  ] });
+}
+function WalletBalanceModal({ onClose }) {
+  const { walletBalance, refreshBalance, walletAddress, styles } = usePollar();
+  const { theme = "light", accentColor = "#005DB4" } = styles;
+  react.useEffect(() => {
+    void refreshBalance();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+    WalletBalanceModalTemplate,
+    {
+      theme,
+      accentColor,
+      walletBalance,
+      walletAddress,
+      onRefresh: () => refreshBalance(),
+      onClose
+    }
+  ) });
 }
 var emptyResponse = {
   application: {
@@ -1210,13 +1367,10 @@ var PollarContext = react.createContext(null);
 function PollarProvider({ config, styles: propStyles, children }) {
   const [pollarClient] = react.useState(() => new core.PollarClient(config));
   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 [transaction, setTransaction] = react.useState({ step: "idle" });
   const [txHistory, setTxHistory] = react.useState({ step: "idle" });
+  const [walletBalance, setWalletBalance] = react.useState({ step: "idle" });
   const [remoteConfig, setRemoteConfig] = react.useState(emptyResponse);
   const [styles, setStyles] = react.useState(propStyles ?? {});
   react.useEffect(() => {
@@ -1225,6 +1379,9 @@ function PollarProvider({ config, styles: propStyles, children }) {
   react.useEffect(() => {
     return pollarClient.onTxHistoryStateChange(setTxHistory);
   }, [pollarClient]);
+  react.useEffect(() => {
+    return pollarClient.onWalletBalanceStateChange(setWalletBalance);
+  }, [pollarClient]);
   react.useEffect(() => {
     return pollarClient.onNetworkStateChange((state) => {
       setNetworkState(state);
@@ -1265,14 +1422,15 @@ function PollarProvider({ config, styles: propStyles, children }) {
   const [walletBalanceModalOpen, setWalletBalanceModalOpen] = react.useState(false);
   const contextValue = react.useMemo(
     () => ({
-      walletAddress: sessionState?.wallet?.publicKey || "",
+      walletAddress: sessionState?.data?.providers?.wallet?.address || sessionState?.wallet?.publicKey || "",
       getClient: () => pollarClient,
       transaction,
       login: (options) => pollarClient.login(options),
       logout: () => pollarClient.logout(),
       isAuthenticated: !!sessionState?.wallet?.publicKey,
       buildTx: (operation, params, options) => pollarClient.buildTx(operation, params, options),
-      signAndSubmitTx: (signedXdr) => pollarClient.signAndSubmitTx(signedXdr),
+      signAndSubmitTx: (unsignedXdr) => pollarClient.signAndSubmitTx(unsignedXdr),
+      walletType: pollarClient.getWalletType(),
       openTransactionModal: () => setTransactionModalOpen(true),
       openLoginModal: () => setLoginModalOpen(true),
       openKycModal: (options = {}) => {
@@ -1283,13 +1441,14 @@ function PollarProvider({ config, styles: propStyles, children }) {
       txHistory,
       openTxHistoryModal: () => setTxHistoryModalOpen(true),
       openWalletBalanceModal: () => setWalletBalanceModalOpen(true),
+      walletBalance,
+      refreshBalance: (publicKey) => pollarClient.refreshBalance(publicKey),
       network: networkState.step === "connected" ? networkState.network : "testnet",
       setNetwork: (network) => pollarClient.setNetwork(network),
       config: remoteConfig,
-      styles,
-      getBalance: (publicKey) => pollarClient.getWalletBalance(publicKey)
+      styles
     }),
-    [sessionState, remoteConfig, styles, pollarClient, transaction, txHistory, networkState, stellarClient]
+    [sessionState, remoteConfig, styles, pollarClient, transaction, txHistory, networkState, walletBalance]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(PollarContext.Provider, { value: contextValue, children: [
     children,
@@ -1316,50 +1475,37 @@ function usePollar() {
   }
   return ctx;
 }
+function ButtonLogo() {
+  return /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_POLLAR, alt: "Pollar", width: 22, height: 22, className: "wallet-btn-logo" });
+}
 function cropWallet(address) {
   if (address.length <= 12) return address;
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
-function ButtonLogo() {
-  return /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_POLLAR, alt: "Pollar", width: 22, height: 22, className: "wallet-btn-logo" });
-}
-function WalletButton() {
-  const { getClient, walletAddress, styles, openLoginModal, openTxHistoryModal, openWalletBalanceModal } = usePollar();
-  const [open, setOpen] = react.useState(false);
-  const [copied, setCopied] = react.useState(false);
-  const wrapperRef = react.useRef(null);
-  const { theme = "light", accentColor = "#005DB4" } = styles;
-  const isDark = theme === "dark";
-  const dropdownBg = isDark ? "#18181b" : "#fff";
-  const dropdownBorder = isDark ? "#3f3f46" : "#e4e4e7";
-  const itemColor = isDark ? "#fafafa" : "#18181b";
-  react.useEffect(() => {
-    function handleClickOutside(e) {
-      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  async function handleCopy() {
-    if (!walletAddress) return;
-    await navigator.clipboard.writeText(walletAddress);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  }
-  function handleLogout() {
-    setOpen(false);
-    getClient().logout();
-  }
+function WalletButtonTemplate({
+  walletAddress,
+  accentColor,
+  open,
+  copied,
+  dropdownBg,
+  dropdownBorder,
+  itemColor,
+  wrapperRef,
+  onToggleOpen,
+  onCopy,
+  onWalletBalance,
+  onTxHistory,
+  onLogout,
+  onLogin
+}) {
   if (!walletAddress) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "wallet-login-btn", style: { backgroundColor: accentColor }, onClick: openLoginModal, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "wallet-login-btn", style: { backgroundColor: accentColor }, onClick: onLogin, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ButtonLogo, {}),
       "Login with Pollar"
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wallet-wrapper", ref: wrapperRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-btn", style: { backgroundColor: accentColor }, onClick: () => setOpen((v) => !v), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-btn", style: { backgroundColor: accentColor }, onClick: onToggleOpen, children: [
       cropWallet(walletAddress),
       /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
@@ -1376,7 +1522,7 @@ function WalletButton() {
       )
     ] }),
     open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wallet-dropdown", style: { backgroundColor: dropdownBg, borderColor: dropdownBorder }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: handleCopy, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onCopy, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
@@ -1401,10 +1547,7 @@ function WalletButton() {
         {
           className: "wallet-dropdown-item",
           style: { color: itemColor },
-          onClick: () => {
-            setOpen(false);
-            openWalletBalanceModal();
-          },
+          onClick: onWalletBalance,
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "svg",
@@ -1433,10 +1576,7 @@ function WalletButton() {
         {
           className: "wallet-dropdown-item",
           style: { color: itemColor },
-          onClick: () => {
-            setOpen(false);
-            openTxHistoryModal();
-          },
+          onClick: onTxHistory,
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "svg",
@@ -1462,7 +1602,7 @@ function WalletButton() {
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item danger", onClick: handleLogout, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item danger", onClick: onLogout, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
@@ -1486,12 +1626,76 @@ function WalletButton() {
     ] })
   ] });
 }
+function WalletButton() {
+  const { getClient, walletAddress, styles, openLoginModal, openTxHistoryModal, openWalletBalanceModal } = usePollar();
+  const [open, setOpen] = react.useState(false);
+  const [copied, setCopied] = react.useState(false);
+  const wrapperRef = react.useRef(null);
+  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const isDark = theme === "dark";
+  const dropdownBg = isDark ? "#18181b" : "#fff";
+  const dropdownBorder = isDark ? "#3f3f46" : "#e4e4e7";
+  const itemColor = isDark ? "#fafafa" : "#18181b";
+  react.useEffect(() => {
+    function handleClickOutside(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  async function handleCopy() {
+    if (!walletAddress) return;
+    await navigator.clipboard.writeText(walletAddress);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }
+  function handleLogout() {
+    setOpen(false);
+    getClient().logout();
+  }
+  function handleWalletBalance() {
+    setOpen(false);
+    openWalletBalanceModal();
+  }
+  function handleTxHistory() {
+    setOpen(false);
+    openTxHistoryModal();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    WalletButtonTemplate,
+    {
+      walletAddress: walletAddress ?? null,
+      accentColor,
+      open,
+      copied,
+      dropdownBg,
+      dropdownBorder,
+      itemColor,
+      wrapperRef,
+      onToggleOpen: () => setOpen((v) => !v),
+      onCopy: handleCopy,
+      onWalletBalance: handleWalletBalance,
+      onTxHistory: handleTxHistory,
+      onLogout: handleLogout,
+      onLogin: openLoginModal
+    }
+  );
+}
 
 exports.KycModal = KycModal;
+exports.KycModalTemplate = KycModalTemplate;
 exports.KycStatus = KycStatus;
+exports.LoginModalTemplate = LoginModalTemplate;
 exports.PollarProvider = PollarProvider;
 exports.RampWidget = RampWidget;
+exports.RampWidgetTemplate = RampWidgetTemplate;
 exports.RouteDisplay = RouteDisplay;
+exports.TransactionModalTemplate = TransactionModalTemplate;
+exports.TxHistoryModalTemplate = TxHistoryModalTemplate;
+exports.WalletBalanceModal = WalletBalanceModal;
+exports.WalletBalanceModalTemplate = WalletBalanceModalTemplate;
 exports.WalletButton = WalletButton;
 exports.usePollar = usePollar;
 //# sourceMappingURL=index.js.map