@pollar/react 0.6.0 → 0.7.0

package/dist/index.mjs

@@ -1028,7 +1028,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.6.0"
+        "0.7.0"
       ] })
     ] })
   ] });
@@ -2499,6 +2499,254 @@ function SendModal({ onClose }) {
     }
   ) });
 }
+function describeDevice(s) {
+  if (s.deviceLabel) return s.deviceLabel;
+  if (!s.userAgent) return "Unknown device";
+  return parseUserAgent(s.userAgent);
+}
+function detectBrowser(ua) {
+  if (/Edg\//.test(ua)) return "Edge";
+  if (/OPR\//.test(ua)) return "Opera";
+  if (/(Chrome|CriOS)\//.test(ua)) return "Chrome";
+  if (/(Firefox|FxiOS)\//.test(ua)) return "Firefox";
+  if (/Safari\//.test(ua)) return "Safari";
+  return null;
+}
+function detectOS(ua) {
+  if (/iPhone|iPad|iPod/.test(ua)) return "iOS";
+  if (/Android/.test(ua)) return "Android";
+  if (/Mac OS X/.test(ua)) return "macOS";
+  if (/Windows NT/.test(ua)) return "Windows";
+  if (/Linux/.test(ua)) return "Linux";
+  return null;
+}
+function parseUserAgent(ua) {
+  const browser = detectBrowser(ua);
+  const os = detectOS(ua);
+  if (browser && os) return `${os} \u2014 ${browser}`;
+  if (os) return os;
+  if (browser) return browser;
+  return ua.slice(0, 48);
+}
+function formatRelative(iso) {
+  if (!iso) return "\u2014";
+  const ts = new Date(iso).getTime();
+  if (!Number.isFinite(ts)) return "\u2014";
+  const diffSec = Math.round((Date.now() - ts) / 1e3);
+  if (diffSec < 0) return "just now";
+  if (diffSec < 60) return `${diffSec}s ago`;
+  const diffMin = Math.round(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.round(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDay = Math.round(diffHr / 24);
+  if (diffDay < 30) return `${diffDay}d ago`;
+  return new Date(iso).toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
+}
+function shortIp(hash) {
+  if (!hash) return "";
+  return hash.slice(0, 8);
+}
+function SessionsModalTemplate({
+  theme,
+  accentColor,
+  state,
+  revokingFamilyId,
+  signingOutEverywhere,
+  onRefresh,
+  onRevoke,
+  onLogoutEverywhere,
+  onClose
+}) {
+  const isDark = theme === "dark";
+  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"
+  };
+  const isLoading = state.step === "loading";
+  const sessions = state.step === "loaded" ? state.sessions : [];
+  const otherCount = sessions.filter((s) => !s.current).length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "pollar-modal-card pollar-sessions-modal",
+      "data-theme": theme,
+      style: cssVars,
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header", children: [
+          /* @__PURE__ */ jsx("h2", { className: "pollar-modal-title", children: "Active sessions" }),
+          /* @__PURE__ */ jsxs("div", { className: "pollar-modal-header-actions", children: [
+            /* @__PURE__ */ jsxs("button", { className: "pollar-modal-refresh-btn", onClick: onRefresh, disabled: isLoading, children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: `pollar-modal-refresh-icon${isLoading ? " spinning" : ""}`,
+                  width: "13",
+                  height: "13",
+                  viewBox: "0 0 13 13",
+                  fill: "none",
+                  "aria-hidden": true,
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M11.5 6.5a5 5 0 11-1.5-3.536", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M10 1v3h-3",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  ]
+                }
+              ),
+              "Refresh"
+            ] }),
+            /* @__PURE__ */ jsx("button", { className: "pollar-modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M2 2l12 12M14 2L2 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "pollar-sessions-list", children: [
+          state.step === "idle" && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
+          isLoading && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
+          state.step === "error" && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: state.message }),
+          state.step === "loaded" && sessions.length === 0 && /* @__PURE__ */ jsx("div", { className: "pollar-modal-empty", children: "No active sessions." }),
+          sessions.map((s) => {
+            const isRevoking = revokingFamilyId === s.familyId;
+            return /* @__PURE__ */ jsxs("div", { className: "pollar-sessions-item", "data-current": s.current || void 0, children: [
+              /* @__PURE__ */ jsxs("div", { className: "pollar-sessions-item-main", children: [
+                /* @__PURE__ */ jsx("span", { className: "pollar-sessions-item-device", children: describeDevice(s) }),
+                s.current && /* @__PURE__ */ jsx("span", { className: "pollar-sessions-item-badge", children: "This device" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "pollar-sessions-item-meta", children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Last used ",
+                  formatRelative(s.lastUsedAt ?? s.createdAt)
+                ] }),
+                s.ipHash && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+                  /* @__PURE__ */ jsxs("span", { title: `ip-hash ${s.ipHash}`, children: [
+                    "ip ",
+                    shortIp(s.ipHash)
+                  ] })
+                ] })
+              ] }),
+              !s.current && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "pollar-sessions-item-revoke",
+                  onClick: () => onRevoke(s.familyId),
+                  disabled: isRevoking || signingOutEverywhere,
+                  children: isRevoking ? "Revoking\u2026" : "Revoke"
+                }
+              )
+            ] }, s.familyId);
+          })
+        ] }),
+        state.step === "loaded" && sessions.length > 0 && /* @__PURE__ */ jsx("div", { className: "pollar-sessions-actions", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "pollar-sessions-logout-all",
+            onClick: onLogoutEverywhere,
+            disabled: signingOutEverywhere || otherCount === 0,
+            title: otherCount === 0 ? "No other devices to sign out" : void 0,
+            children: signingOutEverywhere ? "Signing out\u2026" : "Sign out everywhere"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PollarModalFooter, {})
+      ]
+    }
+  );
+}
+function SessionsModal({ onClose }) {
+  const { getClient, styles } = usePollar();
+  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const [state, setState] = useState({ step: "idle" });
+  const [revokingFamilyId, setRevokingFamilyId] = useState(null);
+  const [signingOutEverywhere, setSigningOutEverywhere] = useState(false);
+  const mountedRef = useRef(true);
+  useEffect(() => () => {
+    mountedRef.current = false;
+  }, []);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  useEffect(() => {
+    return getClient().onAuthStateChange((authState) => {
+      if (authState.step === "idle") onCloseRef.current();
+    });
+  }, [getClient]);
+  const load = useCallback(async () => {
+    setState({ step: "loading" });
+    try {
+      const sessions = await getClient().listSessions();
+      if (!mountedRef.current) return;
+      setState({ step: "loaded", sessions });
+    } catch (err) {
+      if (!mountedRef.current) return;
+      const message = err instanceof Error ? err.message : "Failed to load sessions";
+      setState({ step: "error", message });
+    }
+  }, [getClient]);
+  useEffect(() => {
+    void load();
+  }, [load]);
+  const handleRevoke = useCallback(
+    async (familyId) => {
+      setRevokingFamilyId(familyId);
+      try {
+        await getClient().revokeSession(familyId);
+        if (!mountedRef.current) return;
+        await load();
+      } catch {
+        if (!mountedRef.current) return;
+        setState(
+          (prev) => prev.step === "loaded" ? { step: "error", message: "Failed to revoke session" } : prev
+        );
+      } finally {
+        if (mountedRef.current) setRevokingFamilyId(null);
+      }
+    },
+    [getClient, load]
+  );
+  const handleLogoutEverywhere = useCallback(async () => {
+    setSigningOutEverywhere(true);
+    try {
+      await getClient().logoutEverywhere();
+      onClose();
+    } catch {
+      if (!mountedRef.current) return;
+      setSigningOutEverywhere(false);
+    }
+  }, [getClient, onClose]);
+  return /* @__PURE__ */ jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsx(
+    SessionsModalTemplate,
+    {
+      theme,
+      accentColor,
+      state,
+      revokingFamilyId,
+      signingOutEverywhere,
+      onRefresh: () => void load(),
+      onRevoke: (familyId) => void handleRevoke(familyId),
+      onLogoutEverywhere: () => void handleLogoutEverywhere(),
+      onClose
+    }
+  ) });
+}
 function TransactionModalTemplate({
   theme,
   accentColor,
@@ -2940,9 +3188,10 @@ function PollarProvider({ config, styles: propStyles, adapters, children }) {
   const [walletBalanceModalOpen, setWalletBalanceModalOpen] = useState(false);
   const [sendModalOpen, setSendModalOpen] = useState(false);
   const [receiveModalOpen, setReceiveModalOpen] = useState(false);
+  const [sessionsModalOpen, setSessionsModalOpen] = useState(false);
   const adaptersRef = useRef(adapters);
   adaptersRef.current = adapters;
-  const walletAddress = sessionState?.data?.providers?.wallet?.address || sessionState?.wallet?.publicKey || "";
+  const walletAddress = sessionState?.wallet?.publicKey || "";
   const getClient = useCallback(() => pollarClient, [pollarClient]);
   const refreshWalletBalance = useCallback(() => pollarClient.refreshBalance(walletAddress), [pollarClient, walletAddress]);
   const contextValue = useMemo(
@@ -2972,6 +3221,8 @@ function PollarProvider({ config, styles: propStyles, adapters, children }) {
       // send / receive
       openSendModal: () => setSendModalOpen(true),
       openReceiveModal: () => setReceiveModalOpen(true),
+      // sessions
+      openSessionsModal: () => setSessionsModalOpen(true),
       // network
       network: networkState.step === "connected" ? networkState.network : "testnet",
       setNetwork: (network) => pollarClient.setNetwork(network),
@@ -3006,7 +3257,8 @@ function PollarProvider({ config, styles: propStyles, adapters, children }) {
     txHistoryModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setTxHistoryModalOpen(false), children: /* @__PURE__ */ jsx(TxHistoryModal, { onClose: () => setTxHistoryModalOpen(false) }) }),
     walletBalanceModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setWalletBalanceModalOpen(false), children: /* @__PURE__ */ jsx(WalletBalanceModal, { onClose: () => setWalletBalanceModalOpen(false) }) }),
     sendModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setSendModalOpen(false), children: /* @__PURE__ */ jsx(SendModal, { onClose: () => setSendModalOpen(false) }) }),
-    receiveModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setReceiveModalOpen(false), children: /* @__PURE__ */ jsx(ReceiveModal, { onClose: () => setReceiveModalOpen(false) }) })
+    receiveModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setReceiveModalOpen(false), children: /* @__PURE__ */ jsx(ReceiveModal, { onClose: () => setReceiveModalOpen(false) }) }),
+    sessionsModalOpen && /* @__PURE__ */ jsx(ModalErrorBoundary, { onClose: () => setSessionsModalOpen(false), children: /* @__PURE__ */ jsx(SessionsModal, { onClose: () => setSessionsModalOpen(false) }) })
   ] });
 }
 function usePollar() {
@@ -3257,6 +3509,6 @@ function WalletButton() {
   );
 }
 
-export { KycModal, KycModalTemplate, KycStatus, LoginModalTemplate, PollarProvider, RampWidget, RampWidgetTemplate, ReceiveModal, ReceiveModalTemplate, RouteDisplay, SendModal, SendModalTemplate, TransactionModalTemplate, TxHistoryModalTemplate, TxStatusView, WalletBalanceModal, WalletBalanceModalTemplate, WalletButton, createPollarAdapterHook, usePollar };
+export { KycModal, KycModalTemplate, KycStatus, LoginModalTemplate, PollarProvider, RampWidget, RampWidgetTemplate, ReceiveModal, ReceiveModalTemplate, RouteDisplay, SendModal, SendModalTemplate, SessionsModal, SessionsModalTemplate, TransactionModalTemplate, TxHistoryModalTemplate, TxStatusView, WalletBalanceModal, WalletBalanceModalTemplate, WalletButton, createPollarAdapterHook, usePollar };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map