@pollar/react 0.4.4 → 0.4.5

package/dist/index.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { PollarClient, StellarClient, StateStatus, STATE_VAR_CODES, isValidSession, PollarStateVar, WalletType } from '@pollar/core';
+import { PollarClient, StellarClient, StateStatus, STATE_VAR_CODES, AUTH_ERROR_CODES, WalletType } from '@pollar/core';
 import { createContext, useState, useEffect, useMemo, useContext, useRef, Component } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -42,52 +42,21 @@ var PollarModalFooter = () => {
     ] })
   ] });
 };
-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" }
+var TRANSACTION_CODE_MESSAGES = {
+  NONE: "",
+  BUILD_TRANSACTION_START: "Building transaction\u2026",
+  BUILD_TRANSACTION_SUCCESS: "Transaction built, ready to sign and send",
+  BUILD_TRANSACTION_ERROR: "Failed to build transaction",
+  BUILD_TRANSACTION_ERROR_NO_WALLET: "No wallet connected",
+  SIGN_SEND_TRANSACTION_START: "Signing and sending transaction\u2026",
+  SIGN_SEND_TRANSACTION_SUCCESS: "Transaction signed",
+  SIGN_SEND_TRANSACTION_ERROR: "Signing rejected"
 };
-function ModalStatusBanner({ code, status, onCancel, onRetry }) {
-  if (!code) {
+function ModalStatusBanner({ message, status, onCancel, onRetry }) {
+  if (!message && status === StateStatus.NONE) {
     return /* @__PURE__ */ jsx("div", { className: "pollar-status" });
   }
-  const { text } = LOGIN_CODE_MESSAGES[code] || { text: "" };
-  const isLoading = status === "LOADING";
+  const isLoading = status === StateStatus.LOADING;
   const icon = status === "ERROR" ? /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: [
     /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "7", fill: "currentColor" }),
     /* @__PURE__ */ jsx("path", { d: "M4.5 4.5l5 5M9.5 4.5l-5 5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })
@@ -97,7 +66,7 @@ function ModalStatusBanner({ code, status, onCancel, onRetry }) {
   ] }) : status === "LOADING" ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeDasharray: "22 10" }) }) : null;
   return /* @__PURE__ */ jsxs("div", { className: "pollar-status", "data-kind": status, children: [
     icon,
-    /* @__PURE__ */ jsx("span", { children: text }),
+    /* @__PURE__ */ jsx("span", { children: message }),
     isLoading && onCancel && /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-status-cancel", onClick: onCancel, children: "Cancel" }),
     status === StateStatus.ERROR && onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-status-cancel", onClick: onRetry, children: "Retry" })
   ] });
@@ -208,6 +177,38 @@ var GoogleButton = ({ disabled, onClick }) => {
     ] })
   ] });
 };
+var AUTH_STATE_MESSAGES = {
+  idle: "",
+  creating_session: "Initializing\u2026",
+  entering_email: "",
+  sending_email: "Sending\u2026",
+  entering_code: "Code sent \u2014 check your inbox",
+  verifying_email_code: "Verifying\u2026",
+  opening_oauth: "Redirecting\u2026",
+  connecting_wallet: "Connecting wallet\u2026",
+  wallet_not_installed: "Wallet not installed",
+  authenticating_wallet: "Signing in with wallet\u2026",
+  authenticating: "Authenticating\u2026",
+  authenticated: "Welcome!",
+  error: ""
+};
+function authStateToStatus(step) {
+  const loading = [
+    "creating_session",
+    "sending_email",
+    "verifying_email_code",
+    "opening_oauth",
+    "connecting_wallet",
+    "authenticating_wallet",
+    "authenticating"
+  ];
+  const success = ["authenticated", "entering_code"];
+  const error = ["error", "wallet_not_installed"];
+  if (loading.includes(step)) return StateStatus.LOADING;
+  if (success.includes(step)) return StateStatus.SUCCESS;
+  if (error.includes(step)) return StateStatus.ERROR;
+  return StateStatus.NONE;
+}
 function LoginModalTemplate({
   theme,
   accentColor,
@@ -217,17 +218,16 @@ function LoginModalTemplate({
   providers,
   appName,
   email = "",
-  status,
-  error,
   onEmailChange,
   onEmailSubmit,
   onSocialLogin,
   onFreighterConnect,
   onAlbedoConnect,
-  loginStateCode,
-  awaitingEmailCode = false,
+  authState,
+  codeInputKey,
   onCodeSubmit,
-  cancelLoginRef,
+  onBack,
+  onCancel,
   onRetry
 }) {
   const isDark = theme === "dark";
@@ -245,16 +245,22 @@ function LoginModalTemplate({
     "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
     "--pollar-error-text": isDark ? "#f87171" : "#dc2626"
   };
+  const status = authStateToStatus(authState.step);
   const isLoading = status === StateStatus.LOADING;
+  const isEmailCodeError = authState.step === "error" && (authState.errorCode === AUTH_ERROR_CODES.EMAIL_CODE_EXPIRED || authState.errorCode === 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];
   return /* @__PURE__ */ jsxs("div", { className: "pollar-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxs("div", { className: "pollar-header", children: [
       /* @__PURE__ */ jsx("div", { className: "pollar-logo-wrap", children: /* @__PURE__ */ jsx("img", { src: logoUrl ?? LOGO_POLLAR, alt: "Logo", className: "pollar-logo" }) }),
       /* @__PURE__ */ jsx("h2", { className: "pollar-title", children: appName }),
       /* @__PURE__ */ jsx("p", { className: "pollar-subtitle", children: "Log in or sign up" })
     ] }),
-    awaitingEmailCode ? /* @__PURE__ */ jsx(EmailCodeInput, { email, onSubmit: onCodeSubmit ?? (() => {
-    }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      error && /* @__PURE__ */ jsx("div", { className: "pollar-error", children: error }),
+    awaitingEmailCode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-back-btn", onClick: onBack, children: "\u2190 Back" }),
+      /* @__PURE__ */ jsx(EmailCodeInput, { email, onSubmit: onCodeSubmit ?? (() => {
+      }) }, codeInputKey)
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       emailEnabled && /* @__PURE__ */ jsxs("div", { className: "pollar-email-section", children: [
         /* @__PURE__ */ jsx(
           "input",
@@ -290,74 +296,68 @@ function LoginModalTemplate({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(ModalStatusBanner, { code: loginStateCode, status, onCancel: () => cancelLoginRef.current?.(), onRetry }),
+    /* @__PURE__ */ jsx(
+      ModalStatusBanner,
+      {
+        message: statusMessage,
+        status,
+        onCancel,
+        onRetry: isEmailCodeError ? void 0 : onRetry
+      }
+    ),
     /* @__PURE__ */ jsx(PollarModalFooter, {})
   ] });
 }
-function isLoginCode(code) {
-  return Object.values(STATE_VAR_CODES[PollarStateVar.AUTHENTICATION]).some((c) => code.startsWith(c));
-}
 function LoginModal({ onClose }) {
   const [email, setEmail] = useState("");
   const { getClient, styles, config } = usePollar();
-  const [status, setStatus] = useState(StateStatus.NONE);
-  const [error, setError] = useState(null);
-  const [loginStateCode, setLoginStateCode] = useState(null);
-  const [awaitingEmailCode, setAwaitingEmailCode] = useState(false);
-  const [clientSessionId, setClientSessionId] = useState(null);
+  const [authState, setAuthState] = useState(() => getClient().getAuthState());
+  const [codeInputKey, setCodeInputKey] = useState(0);
+  const pendingEmail = useRef(null);
   useEffect(() => {
-    return getClient().onStateChange((stateEntry) => {
-      if (stateEntry.var === PollarStateVar.AUTHENTICATION && isLoginCode(stateEntry.code)) {
-        setLoginStateCode(stateEntry.code);
-        setStatus(stateEntry.status);
-        if (stateEntry.code === STATE_VAR_CODES[PollarStateVar.AUTHENTICATION].STREAM_POLL_START) {
-          const data = stateEntry.data;
-          setClientSessionId(data.clientSessionId);
-        }
-        if (stateEntry.code === STATE_VAR_CODES[PollarStateVar.AUTHENTICATION].EMAIL_AUTH_START_SUCCESS) {
-          const data = stateEntry.data;
-          if (data?.code === "SDK_EMAIL_CODE_SENT") {
-            setAwaitingEmailCode(true);
-            setClientSessionId(data?.content?.clientSessionId);
-          }
-        }
-        if (stateEntry.code === STATE_VAR_CODES[PollarStateVar.AUTHENTICATION].FETCH_SESSION_SUCCESS) {
-          setAwaitingEmailCode(false);
-          setTimeout(onClose, 1e3);
-        }
+    return getClient().onAuthStateChange((next) => {
+      setAuthState(next);
+      if (next.step === "entering_email" && pendingEmail.current) {
+        getClient().sendEmailCode(pendingEmail.current);
+        pendingEmail.current = null;
+      }
+      if (next.step === "error" && next.errorCode === AUTH_ERROR_CODES.EMAIL_CODE_INVALID) {
+        setCodeInputKey((k) => k + 1);
+      }
+      if (next.step === "authenticated") {
+        setTimeout(onClose, 1e3);
       }
     });
   }, []);
   const { theme = "light", accentColor = "#005DB4", logoUrl, emailEnabled, embeddedWallets, providers } = styles;
   function handleClose() {
     setEmail("");
-    setError(null);
-    setAwaitingEmailCode(false);
-    setClientSessionId(null);
+    getClient().cancelLogin();
     onClose();
   }
-  const cancelLoginRef = useRef(null);
-  function handleEmail() {
-    if (!email) {
-      return;
-    }
-    const { cancelLogin } = getClient().login({ provider: "email", email });
-    cancelLoginRef.current = cancelLogin;
+  function handleEmailSubmit() {
+    if (!email) return;
+    pendingEmail.current = email;
+    getClient().beginEmailLogin();
   }
   function handleSocialLogin(provider) {
-    const { cancelLogin } = getClient().login({ provider });
-    cancelLoginRef.current = cancelLogin;
+    getClient().loginOAuth(provider);
   }
   function handleWalletConnect(type) {
-    const { cancelLogin } = getClient().login({ provider: "wallet", type });
-    cancelLoginRef.current = cancelLogin;
+    getClient().loginWallet(type);
   }
-  async function handleVerifyCode(code) {
-    if (!clientSessionId) return;
-    void getClient().verifyEmailCode(clientSessionId, code);
+  function handleVerifyCode(code) {
+    getClient().verifyEmailCode(code);
+  }
+  function handleBack() {
+    setEmail("");
+    getClient().cancelLogin();
   }
   function handleRetry() {
     getClient().logout();
+    if (styles.emailEnabled) {
+      getClient().beginEmailLogin();
+    }
   }
   return /* @__PURE__ */ jsx("div", { className: "pollar-overlay", onClick: handleClose, children: /* @__PURE__ */ jsx(
     LoginModalTemplate,
@@ -376,17 +376,16 @@ function LoginModal({ onClose }) {
       },
       appName: config.application?.name ?? "Pollar",
       email,
-      status,
-      error,
       onEmailChange: setEmail,
-      onEmailSubmit: handleEmail,
+      onEmailSubmit: handleEmailSubmit,
       onSocialLogin: handleSocialLogin,
       onFreighterConnect: () => handleWalletConnect(WalletType.FREIGHTER),
       onAlbedoConnect: () => handleWalletConnect(WalletType.ALBEDO),
-      loginStateCode,
-      awaitingEmailCode,
+      authState,
+      codeInputKey,
       onCodeSubmit: handleVerifyCode,
-      cancelLoginRef,
+      onBack: handleBack,
+      onCancel: () => getClient().cancelLogin(),
       onRetry: handleRetry
     }
   ) });
@@ -534,7 +533,7 @@ function TransactionModalTemplate({
     /* @__PURE__ */ jsx(
       ModalStatusBanner,
       {
-        code: transactionStateCode,
+        message: TRANSACTION_CODE_MESSAGES[transactionStateCode] ?? "",
         status
       }
     ),
@@ -618,13 +617,6 @@ function PollarProvider({ config, styles: propStyles, children }) {
       level: "info",
       ts: 0
     },
-    authentication: {
-      var: "authentication",
-      code: STATE_VAR_CODES.authentication.NONE,
-      status: StateStatus.NONE,
-      level: "info",
-      ts: 0
-    },
     transaction: {
       var: "transaction",
       code: STATE_VAR_CODES.transaction.NONE,
@@ -639,25 +631,18 @@ function PollarProvider({ config, styles: propStyles, children }) {
     return pollarClient.onStateChange((stateEntry) => {
       setState((prevState) => {
         if (JSON.stringify(prevState[stateEntry.var]) !== JSON.stringify(stateEntry)) {
-          return {
-            ...prevState,
-            [stateEntry.var]: stateEntry
-          };
+          return { ...prevState, [stateEntry.var]: stateEntry };
         }
         return prevState;
       });
-      if (stateEntry.var === "authentication") {
-        if ((stateEntry.code === STATE_VAR_CODES.authentication.SESSION_STORED || STATE_VAR_CODES.authentication.RESTORED_SESSION_SUCCESS) && isValidSession(stateEntry.data)) {
-          setSessionState((prevState) => {
-            if (JSON.stringify(prevState) !== JSON.stringify(stateEntry.data)) {
-              return stateEntry.data;
-            }
-            return prevState;
-          });
-        }
-        if (stateEntry.code === STATE_VAR_CODES.authentication.LOGOUT) {
-          setSessionState(null);
-        }
+    });
+  }, [pollarClient]);
+  useEffect(() => {
+    return pollarClient.onAuthStateChange((authState) => {
+      if (authState.step === "authenticated") {
+        setSessionState((prev) => JSON.stringify(prev) !== JSON.stringify(authState.session) ? authState.session : prev);
+      } else if (authState.step === "idle") {
+        setSessionState(null);
       }
     });
   }, [pollarClient]);
@@ -679,14 +664,12 @@ function PollarProvider({ config, styles: propStyles, children }) {
     () => ({
       walletAddress: sessionState?.wallet?.publicKey || "",
       getClient: () => pollarClient,
-      // 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);
@@ -695,7 +678,6 @@ function PollarProvider({ config, styles: propStyles, children }) {
       openLoginModal: () => setLoginModalOpen(true),
       config: remoteConfig,
       styles,
-      // stellar
       async getBalance(publicKey) {
         const pk = publicKey || sessionState?.wallet?.publicKey;
         if (pk) {