@livo-build/kit 0.2.0 → 0.2.2

package/dist/data/index.d.ts

@@ -1,4 +1,4 @@
-export { useApi, apiClient, type QueryResult, type UseApiOptions } from "./useApi";
+export { useApi, apiClient, setApiAuthToken, type QueryResult, type UseApiOptions } from "./useApi";
 export { useSubgraph, type UseSubgraphArgs } from "./useSubgraph";
 export { Async, type AsyncProps, type AsyncQuery } from "./Async";
 export { useCollection, processCollection, type Collection, type CollectionConfig, type SortState, type SortDir, } from "./useCollection";

package/dist/data/index.js

@@ -1,4 +1,4 @@
-export { useApi, apiClient } from "./useApi";
+export { useApi, apiClient, setApiAuthToken } from "./useApi";
 export { useSubgraph } from "./useSubgraph";
 export { Async } from "./Async";
 export { useCollection, processCollection, } from "./useCollection";

package/dist/data/useApi.d.ts

@@ -5,6 +5,8 @@ export interface QueryResult<T> {
     isError: boolean;
     refetch: () => void;
 }
+/** Set (or clear, with null) the bearer token sent on every same-origin api call. */
+export declare function setApiAuthToken(token: string | null): void;
 export interface UseApiOptions {
     enabled?: boolean;
     init?: RequestInit;

package/dist/data/useApi.js

@@ -1,10 +1,25 @@
 import { useQuery } from "@tanstack/react-query";
+// A bearer token applied to every same-origin api call (set by useTelegramLogin /
+// any session hook). Sent as `Authorization: Bearer <token>` unless the call already
+// supplies that header. `setApiAuthToken(null)` clears it (on logout).
+let apiAuthToken = null;
+/** Set (or clear, with null) the bearer token sent on every same-origin api call. */
+export function setApiAuthToken(token) {
+    apiAuthToken = token;
+}
 // Call a Livo same-origin api/ backend ({slug}.livo.build/api/*). Paths are
 // resolved under /api, so `useApi("/health")` hits /api/health — zero CORS, keys
 // stay server-side. JSON in/out; a non-2xx throws with the body's `error` if present.
 async function apiFetch(path, init) {
     const p = path.startsWith("/api") ? path : "/api" + (path.startsWith("/") ? path : "/" + path);
-    const res = await fetch(p, init);
+    let finalInit = init;
+    if (apiAuthToken) {
+        const headers = new Headers(init?.headers);
+        if (!headers.has("authorization"))
+            headers.set("authorization", `Bearer ${apiAuthToken}`);
+        finalInit = { ...init, headers };
+    }
+    const res = await fetch(p, finalInit);
     const text = await res.text();
     let body = null;
     try {

package/dist/index.js

@@ -17,8 +17,9 @@
 //   hyperliquid/ — useHlPrice/Mids/Candles/OrderBook/Positions, PriceTicker (public market data, no key)
 //   account/   — Connected, Disconnected, RequireConnection, useIsConnected, Avatar, Identity
 //   ui/        — Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton, Countdown
-//   telegram/  — useTelegramMiniApp, useTelegramLink, LinkTelegramButton, useTelegramTheme,
-//                useTelegramMainButton/BackButton/Haptics (Mini App + wallet ↔ Telegram linking)
+//   telegram/  — useTelegramLogin/TelegramLoginButton (bot-driven web login, no wallet),
+//                useTelegramMiniApp, useTelegramLink, LinkTelegramButton, useTelegramTheme,
+//                useTelegramMainButton/BackButton/Haptics (login + Mini App + wallet ↔ Telegram linking)
 //   theme/     — KitThemeProvider (restyle the whole kit from one theme object)
 //   polymarket/ — useMarkets/useMarket/useMarketTrades/useOrderbook/usePriceHistory/usePlaceOrder,
 //                 MarketsList/MarketCard/OddsBar/OrderTicket (prediction markets via Livo's indexer)

package/dist/polymarket/client.d.ts

@@ -66,7 +66,12 @@ export interface PmHistoryPoint {
 export declare function pmSnapshot(opts?: PmFeedOptions): Promise<PmSnapshot>;
 /** Order-book depth for an outcome token (straight from the public CLOB). */
 export declare function pmBook(tokenId: string, opts?: PmFeedOptions): Promise<PmBook>;
-/** Price history points for charting an outcome token (public CLOB). */
+/**
+ * Price history points for charting an outcome token. Prefers Livo's indexer (`/candles`,
+ * server-side CLOB egress on a trusted domain — works where the browser can't reach
+ * `clob.polymarket.com` directly), falling back to the public CLOB. Returns ascending
+ * `{ t, p }` points (`p` = the bucket close).
+ */
 export declare function pmPriceHistory(tokenId: string, params?: {
     interval?: "1h" | "6h" | "1d" | "1w" | "max";
     fidelity?: number;

package/dist/polymarket/client.js

@@ -1,8 +1,11 @@
 // Frontend-safe Polymarket client. Reads Livo's Polymarket indexer
-// (polymarket.livo.build) for the normalized markets + odds + trades feed, and the
-// public Polymarket CLOB for order-book depth + price history (both CORS-open, no
-// key). For TRADING, route orders through your api/ Worker (usePlaceOrder), which
-// signs server-side with @livo-build/runtime — never ship a trading key to the browser.
+// (polymarket.livo.build) for the normalized markets + odds + trades feed AND for price
+// history (`/candles`, fetched server-side from a Polymarket-permitted region) — so the
+// browser never calls clob.polymarket.com directly, which fails on CORS / geoblocks /
+// TLS-cert errors in some networks/regions. Order-book DEPTH (`pmBook`) still reads the
+// public CLOB directly (the indexer exposes no per-token book), so it inherits those
+// limits. For TRADING, route orders through your api/ Worker (usePlaceOrder), which signs
+// server-side with @livo-build/runtime — never ship a trading key to the browser.
 export const POLYMARKET_FEED = "https://polymarket.livo.build";
 export const CLOB_HOST = "https://clob.polymarket.com";
 const feedBase = (o) => (o?.feedUrl ?? POLYMARKET_FEED).replace(/\/$/, "");
@@ -21,8 +24,29 @@ export function pmSnapshot(opts) {
 export function pmBook(tokenId, opts) {
     return getJson(`${clobBase(opts)}/book?token_id=${encodeURIComponent(tokenId)}`);
 }
-/** Price history points for charting an outcome token (public CLOB). */
+/** Span (seconds) of each `interval` preset — used to size the indexer `/candles` request. */
+const INTERVAL_SPAN_S = { "1h": 3600, "6h": 21600, "1d": 86400, "1w": 604800, max: 0 };
+/**
+ * Price history points for charting an outcome token. Prefers Livo's indexer (`/candles`,
+ * server-side CLOB egress on a trusted domain — works where the browser can't reach
+ * `clob.polymarket.com` directly), falling back to the public CLOB. Returns ascending
+ * `{ t, p }` points (`p` = the bucket close).
+ */
 export async function pmPriceHistory(tokenId, params = {}, opts) {
+    const bucket = Math.max(60, (params.fidelity ?? 60) * 60); // fidelity is in MINUTES
+    const span = INTERVAL_SPAN_S[params.interval ?? "1w"] ?? 604800;
+    const limit = span > 0 ? Math.max(1, Math.min(1000, Math.round(span / bucket))) : 1000; // "max" → cap at 1000
+    // 1) Livo indexer (trusted domain, server-side CLOB egress).
+    try {
+        const j = await getJson(`${feedBase(opts)}/candles?token_id=${encodeURIComponent(tokenId)}&interval=${bucket}&limit=${limit}`);
+        const candles = j.candles ?? [];
+        if (candles.length)
+            return candles.map((c) => ({ t: c.time, p: c.c }));
+    }
+    catch {
+        /* indexer miss — fall back to the public CLOB below */
+    }
+    // 2) Public CLOB fallback (direct — may fail in blocked networks/regions).
     const qs = new URLSearchParams({ market: tokenId, interval: params.interval ?? "1w" });
     if (params.fidelity)
         qs.set("fidelity", String(params.fidelity));

package/dist/telegram/TelegramGate.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { type UseTelegramLoginOptions, type TelegramLoginUser } from "./useTelegramLogin";
+export interface TelegramGateProps extends UseTelegramLoginOptions {
+    /** Shown once the visitor is signed in. A function receives the verified user. */
+    children: ReactNode | ((user: TelegramLoginUser | undefined) => ReactNode);
+    /** Optional override for the signed-out view (defaults to a <TelegramLoginButton />). */
+    fallback?: ReactNode;
+    className?: string;
+}
+export declare function TelegramGate({ children, fallback, className, ...opts }: TelegramGateProps): import("react").JSX.Element;

package/dist/telegram/TelegramGate.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useTelegramLogin } from "./useTelegramLogin";
+import { TelegramLoginButton } from "./TelegramLoginButton";
+// Drop-in "you must log in with Telegram to see this" wrapper — the whole flow in one
+// component. Renders `children` when the visitor is authenticated, otherwise a
+// "Continue with Telegram" button (or your `fallback`). For more control, build on
+// useTelegramLogin directly. Secure by default (HttpOnly cookie session).
+export function TelegramGate({ children, fallback, className, ...opts }) {
+    const { status, user } = useTelegramLogin(opts);
+    if (status === "authenticated") {
+        return _jsx(_Fragment, { children: typeof children === "function" ? children(user) : children });
+    }
+    return (_jsx("div", { className: className, "data-state": status, children: fallback ?? _jsx(TelegramLoginButton, { ...opts }) }));
+}

package/dist/telegram/TelegramLoginButton.d.ts

@@ -0,0 +1,15 @@
+import "./telegram.css";
+import { type UseTelegramLoginOptions } from "./useTelegramLogin";
+export interface TelegramLoginButtonProps extends UseTelegramLoginOptions {
+    className?: string;
+    labels?: {
+        login?: string;
+        starting?: string;
+        open?: string;
+        authenticated?: (user?: {
+            username?: string;
+            id: number;
+        }) => string;
+    };
+}
+export declare function TelegramLoginButton({ className, labels, ...opts }: TelegramLoginButtonProps): import("react").JSX.Element;

package/dist/telegram/TelegramLoginButton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./telegram.css";
+import { useTelegramLogin } from "./useTelegramLogin";
+import { cx } from "../util";
+// One button for the whole "Login with Telegram" lifecycle: "Continue with Telegram"
+// → (open web) an "Open Telegram" deep link plus the match code to confirm in the bot
+// → an authenticated chip (tap to sign out). Inside a Mini App it logs in instantly.
+// Neutral; style via .kit-tg / [data-state]. Build your own on useTelegramLogin for
+// full control.
+export function TelegramLoginButton({ className, labels, ...opts }) {
+    const { status, user, deepLink, matchCode, login, logout, error } = useTelegramLogin(opts);
+    if (status === "authenticated") {
+        const who = user?.username ? `@${user.username}` : user?.id ? `#${user.id}` : "";
+        return (_jsx("button", { className: cx("kit-tg", className), "data-state": "linked", onClick: () => logout(), children: labels?.authenticated ? labels.authenticated(user) : `Telegram ${who} ✓` }));
+    }
+    if (status === "awaiting" && deepLink) {
+        return (_jsxs("span", { className: cx("kit-tg-await", className), children: [_jsx("a", { className: "kit-tg", "data-state": "open", href: deepLink, target: "_blank", rel: "noreferrer", children: labels?.open ?? "Open Telegram to confirm" }), matchCode ? (_jsxs("small", { className: "kit-tg-code", children: ["Confirm code ", _jsx("code", { children: matchCode }), " in the bot"] })) : null] }));
+    }
+    const busy = status === "starting";
+    return (_jsx("button", { className: cx("kit-tg", className), "data-state": status === "error" ? "error" : status, disabled: busy, onClick: () => login(), title: error?.message, children: busy ? (labels?.starting ?? "Starting…") : (labels?.login ?? "Continue with Telegram") }));
+}

package/dist/telegram/index.d.ts

@@ -1,5 +1,8 @@
 export { useTelegramMiniApp, type TelegramMiniApp } from "./useTelegramMiniApp";
 export { useTelegramLink, type TelegramLinkState, type LinkStatus, type LinkedTelegram, type UseTelegramLinkOptions, } from "./useTelegramLink";
 export { LinkTelegramButton, type LinkTelegramButtonProps } from "./LinkTelegramButton";
+export { useTelegramLogin, type TelegramLoginState, type TelegramLoginStatus, type TelegramLoginUser, type TelegramSessionTransport, type UseTelegramLoginOptions, } from "./useTelegramLogin";
+export { TelegramLoginButton, type TelegramLoginButtonProps } from "./TelegramLoginButton";
+export { TelegramGate, type TelegramGateProps } from "./TelegramGate";
 export { useTelegramTheme } from "./useTelegramTheme";
 export { useTelegramMainButton, useTelegramBackButton, useTelegramHaptics, type MainButtonOptions, type Haptics, } from "./miniapp";

package/dist/telegram/index.js

@@ -1,5 +1,8 @@
 export { useTelegramMiniApp } from "./useTelegramMiniApp";
 export { useTelegramLink, } from "./useTelegramLink";
 export { LinkTelegramButton } from "./LinkTelegramButton";
+export { useTelegramLogin, } from "./useTelegramLogin";
+export { TelegramLoginButton } from "./TelegramLoginButton";
+export { TelegramGate } from "./TelegramGate";
 export { useTelegramTheme } from "./useTelegramTheme";
 export { useTelegramMainButton, useTelegramBackButton, useTelegramHaptics, } from "./miniapp";

package/dist/telegram/telegram.css

@@ -3,4 +3,8 @@
 .kit-tg:active{transform:translateY(1px)}
 .kit-tg:disabled{opacity:.6;cursor:default}
 .kit-tg[data-state="linked"]{background:var(--kit-row,#f3f4f6);color:var(--kit-fg,#111827)}
+.kit-tg[data-state="error"]{background:var(--kit-danger,#dc2626);color:#fff}
 @media (prefers-color-scheme:dark){.kit-tg[data-state="linked"]{--kit-row:#27272c;--kit-fg:#f5f5f7}}
+.kit-tg-await{display:inline-flex;flex-direction:column;align-items:center;gap:6px}
+.kit-tg-code{color:var(--kit-muted,#6b7280);font-size:12px}
+.kit-tg-code code{background:var(--kit-row,#f3f4f6);padding:1px 6px;border-radius:6px;font-weight:700;letter-spacing:1px}

package/dist/telegram/useTelegramLogin.d.ts

@@ -0,0 +1,43 @@
+export type TelegramLoginStatus = "anon" | "starting" | "awaiting" | "authenticated" | "error";
+export type TelegramSessionTransport = "cookie" | "bearer";
+export interface TelegramLoginUser {
+    id: number;
+    username?: string;
+    firstName?: string;
+}
+export interface TelegramLoginState {
+    status: TelegramLoginStatus;
+    /** The verified Telegram identity, once authenticated. */
+    user?: TelegramLoginUser;
+    /** The signed session token — bearer transport only (cookie mode never exposes it to JS). */
+    token?: string;
+    /** Open-web flow: the t.me deep link to open the bot. */
+    deepLink?: string;
+    /** Short code shown on this page — the user confirms it matches the one the bot shows. */
+    matchCode?: string;
+    /** Begin a login. On a normal website this opens the bot; inside Telegram it's instant. */
+    login: () => Promise<void>;
+    /** Sign out — clears the session (cookie or stored token). */
+    logout: () => void;
+    error?: Error;
+}
+export interface UseTelegramLoginOptions {
+    /** Base path for the login API (default "/api/telegram/login"). */
+    endpoint?: string;
+    /**
+     * How the session is delivered. "cookie" (default) keeps the token out of JS — the
+     * server sets an HttpOnly cookie and the hook hydrates via the `/me` route; immune to
+     * XSS token theft (needs the api same-origin with the page, true on Livo). "bearer"
+     * stores the token in localStorage and attaches it to useApi calls (works cross-origin).
+     */
+    transport?: TelegramSessionTransport;
+    /** "who am I" route for cookie-mode hydration (default `${endpoint}/me`). */
+    meEndpoint?: string;
+    /** localStorage key for the session (bearer transport only; default "livo.tg.session"). */
+    storageKey?: string;
+    /** Poll interval while waiting for the bot confirmation (default 2500ms). */
+    pollIntervalMs?: number;
+    /** Open the deep link automatically when login() starts (default true). */
+    autoOpen?: boolean;
+}
+export declare function useTelegramLogin(options?: UseTelegramLoginOptions): TelegramLoginState;

package/dist/telegram/useTelegramLogin.js

@@ -0,0 +1,184 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTelegramMiniApp } from "./useTelegramMiniApp";
+import { setApiAuthToken } from "../data/useApi";
+function loadSession(key) {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const raw = window.localStorage.getItem(key);
+        return raw ? JSON.parse(raw) : null;
+    }
+    catch {
+        return null;
+    }
+}
+// "Login with Telegram" for any web frontend — the user authenticates just by tapping
+// your bot; no wallet, no password. On a normal website it opens a t.me deep link and
+// polls until the user confirms in the bot (a match code defeats link-forwarding
+// hijacks); inside a Telegram Mini App it verifies the signed initData instantly. The
+// server (your api/) runs @livo-build/runtime's TelegramLogin and issues the session.
+//
+// Cookie transport (default) is the secure path: the session lives in an HttpOnly
+// cookie the page JS never sees, so it can't be stolen via XSS — the hook learns who
+// you are from the `/me` route. Switch to "bearer" only when the api is on a different
+// origin; then the token is stored in localStorage and auto-attached to useApi calls.
+export function useTelegramLogin(options = {}) {
+    const base = options.endpoint ?? "/api/telegram/login";
+    const transport = options.transport ?? "cookie";
+    const meEndpoint = options.meEndpoint ?? `${base}/me`;
+    const storageKey = options.storageKey ?? "livo.tg.session";
+    const pollMs = options.pollIntervalMs ?? 2500;
+    const autoOpen = options.autoOpen ?? true;
+    const mini = useTelegramMiniApp();
+    const [status, setStatus] = useState("anon");
+    const [user, setUser] = useState();
+    const [token, setToken] = useState();
+    const [deepLink, setDeepLink] = useState();
+    const [matchCode, setMatchCode] = useState();
+    const [error, setError] = useState();
+    const pollRef = useRef(null);
+    const stopPoll = () => {
+        if (pollRef.current) {
+            clearInterval(pollRef.current);
+            pollRef.current = null;
+        }
+    };
+    const authenticated = useCallback((who, tok) => {
+        stopPoll();
+        setUser(who);
+        setStatus("authenticated");
+        setDeepLink(undefined);
+        setMatchCode(undefined);
+        if (transport === "bearer" && tok) {
+            // Bearer: persist the token and attach it to every same-origin api call.
+            setApiAuthToken(tok);
+            setToken(tok);
+            if (typeof window !== "undefined") {
+                try {
+                    window.localStorage.setItem(storageKey, JSON.stringify({ token: tok, user: who }));
+                }
+                catch {
+                    /* storage may be unavailable (private mode) — session still lives in memory */
+                }
+            }
+        }
+        // Cookie: nothing to store — the HttpOnly cookie is already set by the server.
+    }, [transport, storageKey]);
+    // Restore a session on mount: cookie mode asks the server (/me); bearer reads storage.
+    useEffect(() => {
+        let cancelled = false;
+        if (transport === "cookie") {
+            (async () => {
+                try {
+                    const r = await fetch(meEndpoint, { credentials: "same-origin" });
+                    if (!r.ok)
+                        return;
+                    const j = (await r.json());
+                    if (!cancelled && j.user) {
+                        setUser(j.user);
+                        setStatus("authenticated");
+                    }
+                }
+                catch {
+                    /* not signed in / offline — stay anon */
+                }
+            })();
+        }
+        else {
+            const saved = loadSession(storageKey);
+            if (saved?.token) {
+                setApiAuthToken(saved.token);
+                setToken(saved.token);
+                setUser(saved.user);
+                setStatus("authenticated");
+            }
+        }
+        return () => {
+            cancelled = true;
+            stopPoll();
+        };
+    }, [transport, meEndpoint, storageKey]);
+    const logout = useCallback(() => {
+        stopPoll();
+        setUser(undefined);
+        setStatus("anon");
+        setDeepLink(undefined);
+        setMatchCode(undefined);
+        if (transport === "bearer") {
+            setApiAuthToken(null);
+            setToken(undefined);
+            if (typeof window !== "undefined") {
+                try {
+                    window.localStorage.removeItem(storageKey);
+                }
+                catch {
+                    /* ignore */
+                }
+            }
+        }
+        else {
+            // Cookie: ask the server to clear the HttpOnly cookie.
+            void fetch(`${base}/logout`, { method: "POST", credentials: "same-origin" }).catch(() => { });
+        }
+    }, [transport, base, storageKey]);
+    const login = useCallback(async () => {
+        setError(undefined);
+        setStatus("starting");
+        try {
+            // Inside Telegram (Mini App): we already have signed initData — verify it directly.
+            if (mini.available && mini.initData) {
+                const r = await fetch(`${base}/miniapp`, {
+                    method: "POST",
+                    credentials: "same-origin",
+                    headers: { "content-type": "application/json" },
+                    body: JSON.stringify({ initData: mini.initData }),
+                });
+                const j = (await r.json());
+                if (!r.ok || j.status !== "authenticated")
+                    throw new Error(j.error ?? "Telegram login failed");
+                authenticated(j.user, j.token);
+                return;
+            }
+            // Normal website: create a challenge, open the bot, poll until confirmed.
+            const startRes = await fetch(`${base}/start`, {
+                method: "POST",
+                credentials: "same-origin",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ origin: typeof window !== "undefined" ? window.location.origin : undefined }),
+            });
+            const start = (await startRes.json());
+            if (!startRes.ok || !start.code || !start.deepLink)
+                throw new Error(start.error ?? "Could not start login");
+            setDeepLink(start.deepLink);
+            setMatchCode(start.matchCode);
+            setStatus("awaiting");
+            if (autoOpen && typeof window !== "undefined")
+                window.open(start.deepLink, "_blank", "noopener");
+            const code = start.code;
+            stopPoll();
+            pollRef.current = setInterval(async () => {
+                try {
+                    const r = await fetch(`${base}/poll?code=${encodeURIComponent(code)}`, { credentials: "same-origin" });
+                    const j = (await r.json());
+                    if (j.status === "authenticated") {
+                        authenticated(j.user, j.token);
+                    }
+                    else if (j.status === "expired" || j.status === "unknown" || j.status === "used") {
+                        stopPoll();
+                        setStatus("error");
+                        setError(new Error("Login expired — tap to try again."));
+                    }
+                }
+                catch {
+                    /* transient network error — keep polling */
+                }
+            }, pollMs);
+        }
+        catch (e) {
+            stopPoll();
+            setError(e);
+            setStatus("error");
+        }
+    }, [base, mini.available, mini.initData, autoOpen, pollMs, authenticated]);
+    return { status, user, token, deepLink, matchCode, login, logout, error };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livo-build/kit",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Livo frontend kit — reusable React + wagmi v3 building blocks (wallet connect modal, providers, hooks) for web3 apps built on Livo.",
   "type": "module",
   "license": "UNLICENSED",