@pollar/react 0.11.0 → 0.11.1-rc.1

package/dist/index.mjs

@@ -1033,7 +1033,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.11.0"
+        "0.11.1-rc.1"
       ] })
     ] })
   ] });
@@ -2052,6 +2052,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,
@@ -2078,7 +2101,6 @@ function LoginModalTemplate({
 }) {
   const [showPasskeyChooser, setShowPasskeyChooser] = useState(false);
   const [activeGroup, setActiveGroup] = 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) => {
@@ -2089,26 +2111,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 === AUTH_ERROR_CODES.EMAIL_CODE_EXPIRED || authState.errorCode === AUTH_ERROR_CODES.EMAIL_CODE_INVALID);
@@ -2283,6 +2286,46 @@ function LoginModalTemplate({
     /* @__PURE__ */ jsx(PollarModalFooter, {})
   ] });
 }
+function LoginModalStatus({
+  status,
+  theme,
+  accentColor,
+  logoUrl,
+  appName,
+  onRetry,
+  onCancel
+}) {
+  const cssVars = buildModalCssVars(theme, accentColor);
+  return /* @__PURE__ */ jsxs("div", { className: "pollar-modal-card pollar-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-close-btn", onClick: onCancel, "aria-label": "Close", children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+      }
+    ) }),
+    /* @__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" })
+    ] }),
+    status === "loading" ? /* @__PURE__ */ jsxs("div", { className: "pollar-loading-block", children: [
+      /* @__PURE__ */ jsx("div", { className: "pollar-spinner" }),
+      /* @__PURE__ */ jsx("span", { children: "Loading..." })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "pollar-wallet-section", children: [
+      /* @__PURE__ */ jsx("p", { className: "pollar-modal-error", children: "Could not load sign-in options. Check your connection and try again." }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-btn-primary", onClick: onRetry, children: "Try again" })
+    ] }),
+    /* @__PURE__ */ jsx(PollarModalFooter, {})
+  ] });
+}
 function PrivyLoginSubmodal({
   adapter,
   theme,
@@ -2439,7 +2482,7 @@ function PrivyLoginSubmodal({
 }
 function LoginModal({ onClose }) {
   const [email, setEmail] = useState("");
-  const { getClient, styles, appConfig: config } = usePollar();
+  const { getClient, styles, appConfig: config, configStatus, retryConfig } = usePollar();
   const [authState, setAuthState] = useState(() => getClient().getAuthState());
   const walletAdapters = useMemo(() => getClient().listWalletAdapters(), [getClient]);
   const [codeInputKey, setCodeInputKey] = useState(0);
@@ -2525,7 +2568,18 @@ function LoginModal({ onClose }) {
       getClient().login({ provider });
     }
   }
-  return /* @__PURE__ */ jsx("div", { className: "pollar-overlay", onClick: handleClose, children: interactiveAdapter ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "pollar-overlay", onClick: handleClose, children: configStatus !== "ready" ? /* @__PURE__ */ jsx(
+    LoginModalStatus,
+    {
+      status: configStatus === "error" ? "error" : "loading",
+      theme,
+      accentColor,
+      logoUrl: logoUrl ?? null,
+      appName: config.application?.name ?? "Pollar",
+      onRetry: retryConfig,
+      onCancel: handleClose
+    }
+  ) : interactiveAdapter ? /* @__PURE__ */ jsx(
     PrivyLoginSubmodal,
     {
       adapter: interactiveAdapter,
@@ -5861,6 +5915,11 @@ function PollarProvider({
   const [walletBalance, setWalletBalance] = useState({ step: "idle" });
   const [enabledAssets, setEnabledAssets] = useState({ step: "idle" });
   const [resolvedConfig, setResolvedConfig] = useState(() => appConfigProp ?? DEFAULT_APP_CONFIG);
+  const [configStatus, setConfigStatus] = useState(
+    appConfigProp !== void 0 ? "ready" : "loading"
+  );
+  const [configRetry, setConfigRetry] = useState(0);
+  const retryConfig = useCallback(() => setConfigRetry((n) => n + 1), []);
   useEffect(() => {
     return pollarClient.onTransactionStateChange(setTransaction);
   }, [pollarClient]);
@@ -5924,18 +5983,29 @@ function PollarProvider({
     setModalErrorLogger(pollarClient.getLogger());
   }, [pollarClient]);
   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] = useState(false);
   const [transactionModalOpen, setTransactionModalOpen] = useState(false);
   const [kycModalOpen, setKycModalOpen] = useState(false);
@@ -6037,6 +6107,8 @@ function PollarProvider({
       // config
       appConfig: resolvedConfig,
       styles,
+      configStatus,
+      retryConfig,
       adapters
     };
   }, [
@@ -6053,6 +6125,8 @@ function PollarProvider({
     refreshAssets,
     networkState,
     resolvedConfig,
+    configStatus,
+    retryConfig,
     adapters
   ]);
   return /* @__PURE__ */ jsxs(PollarContext.Provider, { value: contextValue, children: [