@pollar/react 0.3.9 → 0.4.0

package/dist/index.js

@@ -12,6 +12,19 @@ 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 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.0"
+      ] })
+    ] })
+  ] });
+};
 function EmailCodeInput({ email, onSubmit }) {
   const [digits, setDigits] = react.useState(["", "", "", "", "", ""]);
   const inputRefs = react.useRef([]);
@@ -119,6 +132,7 @@ 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" },
@@ -246,21 +260,11 @@ 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(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 +276,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 +359,163 @@ 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,
+  buildResult,
+  submitResult,
+  isLoading,
+  onClose,
+  onSignAndSend,
+  onRetry
+}) {
+  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 phase = phaseFromStateCode(stateCode, submitResult);
+  const title = TX_TITLES[stateCode] || "";
+  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" }) }) })
+    ] }),
+    buildResult && phase !== "building" && /* @__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 })
+      ] })
+    ] }),
+    phase === "success" && submitResult && /* @__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" })
+      ] })
+    ] }),
+    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" }),
+    /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
+  ] });
+}
+var isTxBuildResponse = (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";
+};
+function TransactionModal({ onClose }) {
+  const {
+    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;
+  }
+  console.log({ transaction, buildResult });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+    TransactionModalTemplate,
+    {
+      theme,
+      accentColor,
+      stateCode,
+      buildResult,
+      submitResult,
+      isLoading,
+      onClose,
+      onSignAndSend: handleSignAndSend,
+      onRetry: () => {
+      }
+    }
+  ) });
+}
 var emptyResponse = {
   application: {
     name: ""
@@ -363,7 +524,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 +539,16 @@ 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,
+    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 +567,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 +576,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 +594,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(LoginModal, { onClose: () => setLoginModalOpen(false) }),
+    transactionModalOpen && /* @__PURE__ */ jsxRuntime.jsx(TransactionModal, { onClose: () => setTransactionModalOpen(false) })
   ] });
 }
 function usePollar() {