@pollar/react 0.10.1 → 0.11.1-rc.1

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.10.1"
+        "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,
@@ -3880,7 +3934,7 @@ function SendModal({ onClose }) {
     []
   );
   const balanceData = walletBalance.step === "loaded" ? walletBalance.data : null;
-  const allAssets = balanceData?.balances ?? [];
+  const allAssets = (balanceData?.balances ?? []).filter((b) => b.chain === void 0 || b.chain === "STELLAR");
   const sortedAssets = [
     ...allAssets.filter((b) => b.enabledInApp),
     ...allAssets.filter((b) => !b.enabledInApp && (b.type === "native" || parseFloat(b.balance) > 0))
@@ -4385,7 +4439,9 @@ function SwapModal({ onClose }) {
   const balances = walletBalance.step === "loaded" ? walletBalance.data.balances : [];
   const assetRecords = enabledAssets.step === "loaded" ? enabledAssets.data.assets : [];
   const isLoadingData = walletBalance.step === "loading" || enabledAssets.step === "loading";
-  const sellOptions = balances.filter((b) => b.type === "native" || !b.trustlineRemoved).map((b) => ({ ref: toRef(b), code: b.code, issuer: b.issuer, available: b.available, enabledInApp: b.enabledInApp }));
+  const sellOptions = balances.filter(
+    (b) => b.type != null && (b.type === "native" || !b.trustlineRemoved)
+  ).map((b) => ({ ref: toRef(b), code: b.code, issuer: b.issuer, available: b.available, enabledInApp: b.enabledInApp }));
   const buyKeyOfSell = selectedSell ? `${selectedSell.code}:${selectedSell.issuer ?? "native"}` : "";
   const optKey = (o) => `${o.code}:${o.issuer ?? "native"}`;
   const enabledBuy = assetRecords.map((a) => ({
@@ -5631,11 +5687,23 @@ function cropAddress2(address) {
   if (address.length <= 16) return address;
   return `${address.slice(0, 8)}...${address.slice(-8)}`;
 }
-function BalanceItem({ record }) {
+var CHAIN_TAG = {
+  STELLAR: { label: "Stellar", color: "#7d00ff" },
+  POLYGON: { label: "Polygon", color: "#8247e5" },
+  SOLANA: { label: "Solana", color: "#14f195" }
+};
+function ChainTag({ chain }) {
+  const tag = CHAIN_TAG[chain] ?? { label: chain, color: "#6b7280" };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-bal-chain-tag", style: { "--pollar-chain-color": tag.color }, children: tag.label });
+}
+function BalanceItem({ record, showChain }) {
   const balanceDiffers = record.balance !== record.available;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-bal-item", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-bal-asset-info", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-bal-asset", children: record.code }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-bal-asset-code-row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-bal-asset", children: record.code }),
+        showChain && record.chain && /* @__PURE__ */ jsxRuntime.jsx(ChainTag, { chain: record.chain })
+      ] }),
       record.issuer && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-bal-issuer", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-bal-issuer-addr", children: cropAddress2(record.issuer) }),
         /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: record.issuer, label: "Copy issuer address", className: "pollar-copy-btn-sm" })
@@ -5732,7 +5800,7 @@ function WalletBalanceModalTemplate({
       "."
     ] }),
     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 ?? ""))) }),
+    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, showChain: data.multichain === true }, (b.chain ?? "") + b.code + (b.issuer ?? ""))) }),
     /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
   ] });
 }
@@ -5849,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]);
@@ -5912,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);
@@ -6025,6 +6109,8 @@ function PollarProvider({
       // config
       appConfig: resolvedConfig,
       styles,
+      configStatus,
+      retryConfig,
       adapters
     };
   }, [
@@ -6041,6 +6127,8 @@ function PollarProvider({
     refreshAssets,
     networkState,
     resolvedConfig,
+    configStatus,
+    retryConfig,
     adapters
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(PollarContext.Provider, { value: contextValue, children: [