@pollar/react 0.11.0 → 0.11.1-rc.1

package/dist/index.d.mts

@@ -43,6 +43,15 @@ interface PollarContextValue {
     openSessionsModal: () => void;
     appConfig: PollarConfig;
     styles: PollarStyles;
+    /** Remote app-config load state. 'loading' while the initial fetch is in
+     *  flight, 'error' if it failed (styles fall back to empty defaults), 'ready'
+     *  once resolved — or immediately 'ready' when `appConfig` is passed as a prop.
+     *  The login modal shows a spinner/retry instead of an empty shell until this
+     *  is 'ready'. */
+    configStatus: 'loading' | 'ready' | 'error';
+    /** Re-run the remote app-config fetch after an error. No-op when `appConfig`
+     *  was supplied as a prop. */
+    retryConfig: () => void;
     openTxModal: () => void;
     tx: TransactionState;
     buildTx: (operation: TxBuildBody['operation'], params: TxBuildBody['params'], options?: TxBuildBody['options']) => Promise<BuildOutcome>;

package/dist/index.d.ts

@@ -43,6 +43,15 @@ interface PollarContextValue {
     openSessionsModal: () => void;
     appConfig: PollarConfig;
     styles: PollarStyles;
+    /** Remote app-config load state. 'loading' while the initial fetch is in
+     *  flight, 'error' if it failed (styles fall back to empty defaults), 'ready'
+     *  once resolved — or immediately 'ready' when `appConfig` is passed as a prop.
+     *  The login modal shows a spinner/retry instead of an empty shell until this
+     *  is 'ready'. */
+    configStatus: 'loading' | 'ready' | 'error';
+    /** Re-run the remote app-config fetch after an error. No-op when `appConfig`
+     *  was supplied as a prop. */
+    retryConfig: () => void;
     openTxModal: () => void;
     tx: TransactionState;
     buildTx: (operation: TxBuildBody['operation'], params: TxBuildBody['params'], options?: TxBuildBody['options']) => Promise<BuildOutcome>;

package/dist/index.js

@@ -1035,7 +1035,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.11.0"
+        "0.11.1-rc.1"
       ] })
     ] })
   ] });
@@ -2054,6 +2054,29 @@ function authStateToStatus(step) {
   if (error.includes(step)) return "ERROR";
   return "NONE";
 }
+function buildModalCssVars(theme, accentColor) {
+  const isDark = theme === "dark";
+  return {
+    "--pollar-accent": accentColor,
+    "--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" : "#f9fafb",
+    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
+    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--pollar-input-height": "44px",
+    "--pollar-input-border-radius": "0.5rem",
+    "--pollar-card-border-radius": "10px",
+    "--pollar-modal-padding": "2rem",
+    "--pollar-modal-heading-size": "1.375rem",
+    "--pollar-modal-subtitle-size": "0.9rem"
+  };
+}
 function LoginModalTemplate({
   theme,
   accentColor,
@@ -2080,7 +2103,6 @@ function LoginModalTemplate({
 }) {
   const [showPasskeyChooser, setShowPasskeyChooser] = react.useState(false);
   const [activeGroup, setActiveGroup] = react.useState(null);
-  const isDark = theme === "dark";
   const enabledSocial = Object.entries(providers).filter(([, enabled]) => enabled);
   const rootAdapters = walletAdapters.filter((a) => !a.meta.group);
   const walletGroups = walletAdapters.filter((a) => a.meta.group).reduce((acc, a) => {
@@ -2091,26 +2113,7 @@ function LoginModalTemplate({
     return acc;
   }, []);
   const activeGroupAdapters = walletGroups.find((g) => g.label === activeGroup)?.adapters ?? [];
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--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" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px",
-    "--pollar-modal-padding": "2rem",
-    "--pollar-modal-heading-size": "1.375rem",
-    "--pollar-modal-subtitle-size": "0.9rem"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor);
   const status = authStateToStatus(authState.step);
   const isLoading = status === "LOADING";
   const isEmailCodeError = authState.step === "error" && (authState.errorCode === core.AUTH_ERROR_CODES.EMAIL_CODE_EXPIRED || authState.errorCode === core.AUTH_ERROR_CODES.EMAIL_CODE_INVALID);
@@ -2285,6 +2288,46 @@ function LoginModalTemplate({
     /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
   ] });
 }
+function LoginModalStatus({
+  status,
+  theme,
+  accentColor,
+  logoUrl,
+  appName,
+  onRetry,
+  onCancel
+}) {
+  const cssVars = buildModalCssVars(theme, accentColor);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card 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" })
+    ] }),
+    status === "loading" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-loading-block", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-spinner" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading..." })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-wallet-section", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-modal-error", children: "Could not load sign-in options. Check your connection and try again." }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: onRetry, children: "Try again" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
+  ] });
+}
 function PrivyLoginSubmodal({
   adapter,
   theme,
@@ -2441,7 +2484,7 @@ function PrivyLoginSubmodal({
 }
 function LoginModal({ onClose }) {
   const [email, setEmail] = react.useState("");
-  const { getClient, styles, appConfig: config } = usePollar();
+  const { getClient, styles, appConfig: config, configStatus, retryConfig } = usePollar();
   const [authState, setAuthState] = react.useState(() => getClient().getAuthState());
   const walletAdapters = react.useMemo(() => getClient().listWalletAdapters(), [getClient]);
   const [codeInputKey, setCodeInputKey] = react.useState(0);
@@ -2527,7 +2570,18 @@ function LoginModal({ onClose }) {
       getClient().login({ provider });
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: handleClose, children: interactiveAdapter ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: handleClose, children: configStatus !== "ready" ? /* @__PURE__ */ jsxRuntime.jsx(
+    LoginModalStatus,
+    {
+      status: configStatus === "error" ? "error" : "loading",
+      theme,
+      accentColor,
+      logoUrl: logoUrl ?? null,
+      appName: config.application?.name ?? "Pollar",
+      onRetry: retryConfig,
+      onCancel: handleClose
+    }
+  ) : interactiveAdapter ? /* @__PURE__ */ jsxRuntime.jsx(
     PrivyLoginSubmodal,
     {
       adapter: interactiveAdapter,
@@ -5863,6 +5917,11 @@ function PollarProvider({
   const [walletBalance, setWalletBalance] = react.useState({ step: "idle" });
   const [enabledAssets, setEnabledAssets] = react.useState({ step: "idle" });
   const [resolvedConfig, setResolvedConfig] = react.useState(() => appConfigProp ?? DEFAULT_APP_CONFIG);
+  const [configStatus, setConfigStatus] = react.useState(
+    appConfigProp !== void 0 ? "ready" : "loading"
+  );
+  const [configRetry, setConfigRetry] = react.useState(0);
+  const retryConfig = react.useCallback(() => setConfigRetry((n) => n + 1), []);
   react.useEffect(() => {
     return pollarClient.onTransactionStateChange(setTransaction);
   }, [pollarClient]);
@@ -5926,18 +5985,29 @@ function PollarProvider({
     setModalErrorLogger(pollarClient.getLogger());
   }, [pollarClient]);
   react.useEffect(() => {
-    if (appConfigProp !== void 0) return;
+    if (appConfigProp !== void 0) {
+      setConfigStatus("ready");
+      return;
+    }
     let cancelled = false;
+    setConfigStatus("loading");
     pollarClient.getAppConfig().then((fetched) => {
-      if (cancelled || !fetched) return;
+      if (cancelled) return;
+      if (!fetched) {
+        setConfigStatus("error");
+        return;
+      }
       setResolvedConfig(fetched);
+      setConfigStatus("ready");
     }).catch((err) => {
+      if (cancelled) return;
       pollarClient.getLogger().error("[PollarProvider] getAppConfig failed", err);
+      setConfigStatus("error");
     });
     return () => {
       cancelled = true;
     };
-  }, [pollarClient, appConfigProp]);
+  }, [pollarClient, appConfigProp, configRetry]);
   const [loginModalOpen, setLoginModalOpen] = react.useState(false);
   const [transactionModalOpen, setTransactionModalOpen] = react.useState(false);
   const [kycModalOpen, setKycModalOpen] = react.useState(false);
@@ -6039,6 +6109,8 @@ function PollarProvider({
       // config
       appConfig: resolvedConfig,
       styles,
+      configStatus,
+      retryConfig,
       adapters
     };
   }, [
@@ -6055,6 +6127,8 @@ function PollarProvider({
     refreshAssets,
     networkState,
     resolvedConfig,
+    configStatus,
+    retryConfig,
     adapters
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(PollarContext.Provider, { value: contextValue, children: [