@livo-build/kit 0.1.1 → 0.1.6

package/dist/telegram/miniapp.d.ts

@@ -0,0 +1,15 @@
+export interface MainButtonOptions {
+    text: string;
+    onClick: () => void;
+    show?: boolean;
+    enabled?: boolean;
+    progress?: boolean;
+}
+export declare function useTelegramMainButton(opts: MainButtonOptions): void;
+export declare function useTelegramBackButton(onClick: () => void, show?: boolean): void;
+export interface Haptics {
+    impact: (style?: "light" | "medium" | "heavy" | "rigid" | "soft") => void;
+    notification: (type?: "error" | "success" | "warning") => void;
+    selection: () => void;
+}
+export declare function useTelegramHaptics(): Haptics;

package/dist/telegram/miniapp.js

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+function webApp() {
+    if (typeof window === "undefined")
+        return undefined;
+    return window.Telegram?.WebApp;
+}
+// Drive the Telegram Mini App MainButton from React. No-op outside Telegram.
+export function useTelegramMainButton(opts) {
+    const cbRef = useRef(opts.onClick);
+    cbRef.current = opts.onClick;
+    useEffect(() => {
+        const mb = webApp()?.MainButton;
+        if (!mb)
+            return;
+        const handler = () => cbRef.current();
+        mb.setText(opts.text);
+        if (opts.enabled === false)
+            mb.disable();
+        else
+            mb.enable();
+        if (opts.progress)
+            mb.showProgress?.();
+        else
+            mb.hideProgress?.();
+        if (opts.show === false)
+            mb.hide();
+        else
+            mb.show();
+        mb.onClick(handler);
+        return () => {
+            mb.offClick(handler);
+            mb.hide();
+        };
+    }, [opts.text, opts.show, opts.enabled, opts.progress]);
+}
+// Drive the Telegram Mini App BackButton. No-op outside Telegram.
+export function useTelegramBackButton(onClick, show = true) {
+    const cbRef = useRef(onClick);
+    cbRef.current = onClick;
+    useEffect(() => {
+        const bb = webApp()?.BackButton;
+        if (!bb)
+            return;
+        const handler = () => cbRef.current();
+        bb.onClick(handler);
+        if (show)
+            bb.show();
+        else
+            bb.hide();
+        return () => {
+            bb.offClick(handler);
+            bb.hide();
+        };
+    }, [show]);
+}
+// Telegram haptic feedback helpers. Safely no-op outside Telegram.
+export function useTelegramHaptics() {
+    return {
+        impact: (style = "medium") => webApp()?.HapticFeedback?.impactOccurred(style),
+        notification: (type = "success") => webApp()?.HapticFeedback?.notificationOccurred(type),
+        selection: () => webApp()?.HapticFeedback?.selectionChanged(),
+    };
+}

package/dist/telegram/useTelegramTheme.d.ts

@@ -0,0 +1,2 @@
+import { type KitTheme } from "../theme";
+export declare function useTelegramTheme(): KitTheme | undefined;

package/dist/telegram/useTelegramTheme.js

@@ -0,0 +1,20 @@
+import {} from "../theme";
+// A KitTheme derived from the host Telegram Mini App's theme, or undefined outside
+// Telegram. Pass it to <LivoApp theme={…}> / <KitThemeProvider> so the kit matches
+// the user's Telegram colours automatically.
+export function useTelegramTheme() {
+    if (typeof window === "undefined")
+        return undefined;
+    const wa = window.Telegram?.WebApp;
+    const tp = wa?.themeParams;
+    if (!tp)
+        return undefined;
+    return {
+        accent: tp.button_color,
+        accentFg: tp.button_text_color,
+        bg: tp.bg_color,
+        fg: tp.text_color,
+        muted: tp.hint_color,
+        border: tp.secondary_bg_color,
+    };
+}

package/dist/tx/TxProgress.d.ts

@@ -0,0 +1,13 @@
+import "./tx.css";
+import { type TxStatus } from "./useTx";
+export interface TxProgressProps {
+    status: TxStatus;
+    hash?: `0x${string}`;
+    error?: Error | null;
+    /** Block explorer base, e.g. "https://sepolia.etherscan.io". Links the hash when set. */
+    explorer?: string;
+    className?: string;
+    /** Hide when idle (default true). */
+    hideIdle?: boolean;
+}
+export declare function TxProgress({ status, hash, error, explorer, className, hideIdle }: TxProgressProps): import("react").JSX.Element | null;

package/dist/tx/TxProgress.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./tx.css";
+import {} from "./useTx";
+import { shortHash } from "../format";
+import { cx } from "../util";
+const LABELS = {
+    idle: "",
+    pending: "Confirm in your wallet…",
+    confirming: "Transaction submitted, confirming…",
+    success: "Confirmed",
+    error: "Failed",
+};
+// A neutral inline status line for a transaction lifecycle (pairs with useTx). Style
+// it via the .kit-txp* classes — see STYLING.md.
+export function TxProgress({ status, hash, error, explorer, className, hideIdle = true }) {
+    if (status === "idle" && hideIdle)
+        return null;
+    const label = status === "error" ? error?.message ?? LABELS.error : LABELS[status];
+    const busy = status === "pending" || status === "confirming";
+    return (_jsxs("div", { className: cx("kit-txp", `kit-txp-${status}`, className), role: "status", "aria-live": "polite", children: [busy && _jsx("span", { className: "kit-txp-spinner", "aria-hidden": "true" }), _jsx("span", { className: "kit-txp-label", children: label }), hash &&
+                (explorer ? (_jsx("a", { className: "kit-txp-hash", href: `${explorer}/tx/${hash}`, target: "_blank", rel: "noreferrer", children: shortHash(hash) })) : (_jsx("span", { className: "kit-txp-hash", children: shortHash(hash) })))] }));
+}

package/dist/tx/index.d.ts

@@ -1,3 +1,4 @@
 export { useTx, type UseTxOptions, type UseTxResult, type TxStatus } from "./useTx";
 export { TxButton, type TxButtonProps } from "./TxButton";
 export { decodeRevert } from "./revert";
+export { TxProgress, type TxProgressProps } from "./TxProgress";

package/dist/tx/index.js

@@ -1,3 +1,4 @@
 export { useTx } from "./useTx";
 export { TxButton } from "./TxButton";
 export { decodeRevert } from "./revert";
+export { TxProgress } from "./TxProgress";

package/dist/tx/tx.css

@@ -11,3 +11,12 @@
 .kit-btn:hover:not(:disabled){opacity:.9}
 .kit-btn:active:not(:disabled){transform:translateY(1px)}
 @media (prefers-color-scheme:dark){.kit-btn{background:var(--kit-accent,#f5f5f7);color:var(--kit-accent-fg,#111827)}}
+
+/* Transaction status line (TxProgress). Neutral; restyle via these classes. */
+.kit-txp{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;color:var(--kit-muted,#6b7280)}
+.kit-txp-success{color:var(--kit-success,#15803d)}
+.kit-txp-error{color:var(--kit-danger,#b91c1c)}
+.kit-txp-hash{color:var(--kit-accent,#2563eb);text-decoration:none;font-variant-numeric:tabular-nums}
+.kit-txp-hash:hover{text-decoration:underline}
+.kit-txp-spinner{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:kit-txp-spin .7s linear infinite}
+@keyframes kit-txp-spin{to{transform:rotate(360deg)}}

package/dist/ui/index.d.ts

@@ -1 +1 @@
-export { Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton, Button, Badge, type DialogProps, type SkeletonProps, type EmptyStateProps, type CopyButtonProps, type ButtonProps, } from "./ui";
+export { Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton, Button, Badge, Countdown, type DialogProps, type SkeletonProps, type EmptyStateProps, type CopyButtonProps, type ButtonProps, type CountdownProps, } from "./ui";

package/dist/ui/index.js

@@ -1 +1 @@
-export { Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton, Button, Badge, } from "./ui";
+export { Dialog, Card, Skeleton, Spinner, EmptyState, CopyButton, Button, Badge, Countdown, } from "./ui";

package/dist/ui/ui.css

@@ -32,3 +32,10 @@
 @media (max-width:480px){.kit-dialog-root{align-items:flex-end}.kit-dialog{width:100%;max-width:100%;border-radius:16px 16px 0 0;animation:kit-up .22s cubic-bezier(.2,.9,.25,1)}}
 @keyframes kit-up{from{transform:translateY(100%)}to{transform:none}}
 @media (prefers-reduced-motion:reduce){.kit-dialog,.kit-dialog-overlay,.kit-skeleton,.kit-spinner{animation:none}}
+
+/* Countdown — neutral inline D:H:M:S. Restyle via these classes. */
+.kit-countdown{display:inline-flex;gap:10px;font:inherit;font-variant-numeric:tabular-nums}
+.kit-countdown-unit{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1}
+.kit-countdown-num{font-weight:700;font-size:20px;color:var(--kit-fg,#111827)}
+.kit-countdown-label{font-size:11px;color:var(--kit-muted,#6b7280);text-transform:uppercase;letter-spacing:.04em}
+@media (prefers-color-scheme:dark){.kit-countdown-num{color:var(--kit-fg,#f5f5f7)}}

package/dist/ui/ui.d.ts

@@ -1,5 +1,6 @@
 import "./ui.css";
 import { type ReactNode, type CSSProperties, type HTMLAttributes, type ButtonHTMLAttributes } from "react";
+import { type CountdownState } from "../hooks";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "ghost";
 }
@@ -43,3 +44,15 @@ export interface CopyButtonProps {
     className?: string;
 }
 export declare function CopyButton({ value, children, copiedLabel, className }: CopyButtonProps): import("react").JSX.Element;
+export interface CountdownProps {
+    /** Target time — Date, unix seconds, or ms. */
+    to: Date | number;
+    /** Hide leading zero days/hours. Default false (always D:H:M:S). */
+    trim?: boolean;
+    /** Rendered when the countdown reaches zero. */
+    whenDone?: ReactNode;
+    className?: string;
+    /** Custom render given the live countdown parts. */
+    children?: (c: CountdownState) => ReactNode;
+}
+export declare function Countdown({ to, trim, whenDone, className, children }: CountdownProps): import("react").JSX.Element;

package/dist/ui/ui.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./ui.css";
 import { useEffect, useRef, useState, } from "react";
 import { cx } from "../util";
+import { useCountdown } from "../hooks";
 export function Button({ variant = "secondary", className, ...rest }) {
     return _jsx("button", { className: cx("kit-button", "kit-button-" + variant, className), ...rest });
 }
@@ -61,3 +62,26 @@ export function CopyButton({ value, children, copiedLabel = "Copied", className
             }
         }, children: copied ? copiedLabel : (children ?? "Copy") }));
 }
+const pad = (n) => String(n).padStart(2, "0");
+// Live D:H:M:S countdown to a target time (e.g. a mint/sale window). Neutral —
+// style via .kit-countdown*, or pass `children` for a custom layout.
+export function Countdown({ to, trim = false, whenDone, className, children }) {
+    const c = useCountdown(to);
+    if (children)
+        return _jsx("span", { className: cx("kit-countdown", className), children: children(c) });
+    if (c.done && whenDone !== undefined)
+        return _jsx("span", { className: cx("kit-countdown", className), children: whenDone });
+    const parts = [
+        [c.days, "d"],
+        [c.hours, "h"],
+        [c.minutes, "m"],
+        [c.seconds, "s"],
+    ];
+    let started = !trim;
+    return (_jsx("span", { className: cx("kit-countdown", className), "data-done": c.done || undefined, role: "timer", children: parts.map(([v, label], i) => {
+            if (!started && v === 0 && i < 3)
+                return null; // trim leading zero units (never the seconds)
+            started = true;
+            return (_jsxs("span", { className: "kit-countdown-unit", children: [_jsx("span", { className: "kit-countdown-num", children: pad(v) }), _jsx("span", { className: "kit-countdown-label", children: label })] }, label));
+        }) }));
+}

package/dist/user/UserMenu.d.ts

@@ -0,0 +1,10 @@
+import "./user.css";
+import { type UseUserOptions } from "./useUser";
+export interface UserMenuProps extends UseUserOptions {
+    /** Show the Telegram link control in the menu. Default true. */
+    telegram?: boolean;
+    /** Show the Sign-In With Ethereum control. Default true. */
+    auth?: boolean;
+    className?: string;
+}
+export declare function UserMenu({ telegram, auth, className, ...opts }: UserMenuProps): import("react").JSX.Element;

package/dist/user/UserMenu.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "./user.css";
+import { useState } from "react";
+import { useUser } from "./useUser";
+import { Identity } from "../account/Identity";
+import { ConnectWallet } from "../wallet";
+import { LinkTelegramButton } from "../telegram/LinkTelegramButton";
+import { cx } from "../util";
+// A compact account control: a wallet-connect button when disconnected, otherwise
+// an identity pill that opens a menu with SIWE sign-in/out + Telegram linking +
+// disconnect. Neutral — style via .kit-user*. The one-stop user-management widget.
+export function UserMenu({ telegram = true, auth = true, className, ...opts }) {
+    const user = useUser(opts);
+    const [open, setOpen] = useState(false);
+    if (!user.isConnected || !user.address)
+        return _jsx(ConnectWallet, { className: className });
+    return (_jsxs("div", { className: cx("kit-user", className), "data-open": open || undefined, children: [_jsx("button", { className: "kit-user-trigger", onClick: () => setOpen((o) => !o), children: _jsx(Identity, { address: user.address, size: 24 }) }), open && (_jsxs(_Fragment, { children: [_jsx("div", { className: "kit-user-scrim", onClick: () => setOpen(false) }), _jsxs("div", { className: "kit-user-panel", role: "menu", children: [auth && (_jsxs("div", { className: "kit-user-row", children: [_jsx("span", { className: "kit-user-label", children: "Session" }), user.isSignedIn ? (_jsx("span", { className: "kit-user-action", "data-state": "on", children: "Signed in \u2713" })) : (_jsx("button", { className: "kit-user-action", onClick: () => void user.signIn(), children: "Sign in" }))] })), telegram && (_jsxs("div", { className: "kit-user-row", children: [_jsx("span", { className: "kit-user-label", children: "Telegram" }), _jsx(LinkTelegramButton, { endpoint: opts.telegramEndpoint })] })), _jsx("button", { className: "kit-user-disconnect", onClick: () => void user.signOut(), children: "Disconnect" })] })] }))] }));
+}

package/dist/user/index.d.ts

@@ -0,0 +1,2 @@
+export { useUser, type KitUser, type UseUserOptions } from "./useUser";
+export { UserMenu, type UserMenuProps } from "./UserMenu";

package/dist/user/index.js

@@ -0,0 +1,2 @@
+export { useUser } from "./useUser";
+export { UserMenu } from "./UserMenu";

package/dist/user/useUser.d.ts

@@ -0,0 +1,32 @@
+import { type SiweUser } from "../auth/useSiwe";
+import { type LinkedTelegram } from "../telegram/useTelegramLink";
+export interface UseUserOptions {
+    /** SIWE auth API base (default "/api/auth"). */
+    authEndpoint?: string;
+    /** Telegram link API base (default "/api/telegram"). */
+    telegramEndpoint?: string;
+    /** Skip the SIWE session check (wallet-only identity). Default false. */
+    noAuth?: boolean;
+    /** Skip the Telegram link check. Default false. */
+    noTelegram?: boolean;
+}
+export interface KitUser {
+    /** Connected wallet address (undefined if no wallet). */
+    address?: `0x${string}`;
+    isConnected: boolean;
+    /** Server-verified SIWE session user (undefined until signed in). */
+    session?: SiweUser;
+    isSignedIn: boolean;
+    /** Linked Telegram identity (undefined if not linked). */
+    telegram?: LinkedTelegram;
+    isTelegramLinked: boolean;
+    /** True while any underlying identity check is still loading. */
+    isLoading: boolean;
+    /** Run the SIWE sign-in flow. */
+    signIn: () => Promise<void>;
+    /** Sign out of the session AND disconnect the wallet. */
+    signOut: () => Promise<void>;
+    /** Re-check session + telegram link. */
+    refresh: () => void;
+}
+export declare function useUser(opts?: UseUserOptions): KitUser;

package/dist/user/useUser.js

@@ -0,0 +1,36 @@
+import { useConnection, useDisconnect } from "wagmi";
+import { useSiwe } from "../auth/useSiwe";
+import { useTelegramLink } from "../telegram/useTelegramLink";
+// One hook for "who is the current user", unifying the three identity surfaces a
+// Livo app has: the connected wallet, the SIWE session (your /api/auth), and the
+// linked Telegram account (your /api/telegram). The backbone of user management for
+// Telegram-connected apps.
+export function useUser(opts = {}) {
+    const { address, isConnected } = useConnection();
+    const { disconnect } = useDisconnect();
+    const siwe = useSiwe({ endpoint: opts.authEndpoint });
+    const tg = useTelegramLink({ endpoint: opts.telegramEndpoint });
+    const useAuth = !opts.noAuth;
+    const useTg = !opts.noTelegram;
+    return {
+        address,
+        isConnected: Boolean(isConnected),
+        session: useAuth ? siwe.user : undefined,
+        isSignedIn: useAuth ? siwe.status === "signed-in" : Boolean(isConnected),
+        telegram: useTg ? tg.telegram : undefined,
+        isTelegramLinked: useTg ? tg.status === "linked" : false,
+        isLoading: (useAuth && siwe.status === "loading") || (useTg && tg.status === "loading"),
+        signIn: siwe.signIn,
+        signOut: async () => {
+            if (useAuth)
+                await siwe.signOut();
+            disconnect();
+        },
+        refresh: () => {
+            if (useAuth)
+                siwe.refresh();
+            if (useTg)
+                tg.refresh();
+        },
+    };
+}

package/dist/user/user.css

@@ -0,0 +1,15 @@
+/* UserMenu — neutral account control + dropdown. Restyle via .kit-user*. */
+.kit-user{position:relative;display:inline-block;font:inherit}
+.kit-user-trigger{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--kit-border,#e5e7eb);background:transparent;color:inherit;border-radius:999px;padding:4px 12px 4px 4px;font:inherit;cursor:pointer}
+.kit-user-trigger:hover{border-color:var(--kit-muted,#9ca3af)}
+.kit-user-scrim{position:fixed;inset:0;z-index:40}
+.kit-user-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:41;min-width:240px;display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--kit-border,#e5e7eb);border-radius:14px;background:var(--kit-bg,#fff);box-shadow:0 12px 32px rgba(0,0,0,.12)}
+.kit-user-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px}
+.kit-user-label{color:var(--kit-muted,#6b7280);font-size:13px}
+.kit-user-action{font:inherit;font-size:13px;font-weight:600;color:var(--kit-accent,#111827);background:transparent;border:0;cursor:pointer;padding:0}
+.kit-user-action[data-state="on"]{color:var(--kit-up,#15803d);cursor:default}
+.kit-user-disconnect{margin-top:4px;border:0;border-top:1px solid var(--kit-border,#eceef1);background:transparent;color:var(--kit-down,#b91c1c);font:inherit;font-size:13px;text-align:left;padding:10px 6px 4px;cursor:pointer}
+@media (prefers-color-scheme:dark){
+  .kit-user-panel{--kit-border:#2c2e36;--kit-bg:#15171c}
+  .kit-user-trigger{--kit-border:#2c2e36}
+}

package/dist/web3/TokenAmount.d.ts

@@ -0,0 +1,16 @@
+import "./web3.css";
+import { type ReactNode } from "react";
+export interface TokenAmountProps {
+    /** Base-unit amount (e.g. wei). */
+    amount: bigint;
+    decimals?: number;
+    symbol?: string;
+    /** Max fractional digits to show (default 6). */
+    maxFractionDigits?: number;
+    /** USD price per whole token — when set, renders a secondary USD value. */
+    usdPrice?: number;
+    className?: string;
+    /** Render the symbol before the number (e.g. for "$"). */
+    symbolFirst?: boolean;
+}
+export declare function TokenAmount({ amount, decimals, symbol, maxFractionDigits, usdPrice, className, symbolFirst, }: TokenAmountProps): ReactNode;

package/dist/web3/TokenAmount.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./web3.css";
+import {} from "react";
+import { formatToken, formatUsd } from "../format";
+import { cx } from "../util";
+// Correctly-formatted on-chain amount display (handles BigInt + decimals). Neutral
+// markup — style via .kit-amt* classes.
+export function TokenAmount({ amount, decimals = 18, symbol, maxFractionDigits = 6, usdPrice, className, symbolFirst, }) {
+    const formatted = formatToken(amount, decimals, maxFractionDigits);
+    const sym = symbol ? _jsx("span", { className: "kit-amt-sym", children: symbol }) : null;
+    let usd = null;
+    if (usdPrice != null) {
+        const whole = Number(formatToken(amount, decimals, 18));
+        usd = _jsx("span", { className: "kit-amt-usd", children: formatUsd(whole * usdPrice) });
+    }
+    return (_jsxs("span", { className: cx("kit-amt", className), children: [symbolFirst && sym, _jsx("span", { className: "kit-amt-num", children: formatted }), !symbolFirst && sym, usd] }));
+}

package/dist/web3/index.d.ts

@@ -4,3 +4,4 @@ export { NetworkGuard, type NetworkGuardProps } from "./NetworkGuard";
 export { TokenAmountInput, type TokenAmountInputProps } from "./TokenAmountInput";
 export { ChainSwitcher, type ChainSwitcherProps } from "./ChainSwitcher";
 export { AddressInput, type AddressInputProps } from "./AddressInput";
+export { TokenAmount, type TokenAmountProps } from "./TokenAmount";

package/dist/web3/index.js

@@ -4,3 +4,4 @@ export { NetworkGuard } from "./NetworkGuard";
 export { TokenAmountInput } from "./TokenAmountInput";
 export { ChainSwitcher } from "./ChainSwitcher";
 export { AddressInput } from "./AddressInput";
+export { TokenAmount } from "./TokenAmount";

package/dist/web3/web3.css

@@ -19,4 +19,8 @@
 .kit-addr-input input{flex:1;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:15px;min-width:0;font-variant-numeric:tabular-nums}
 .kit-addr-input-resolved{color:var(--kit-muted,#6b7280);font-size:13px;font-variant-numeric:tabular-nums}
 .kit-async-error{color:var(--kit-error,#dc2626);font:inherit;font-size:14px}
+.kit-amt{display:inline-flex;align-items:baseline;gap:4px;font:inherit;font-variant-numeric:tabular-nums}
+.kit-amt-num{font-weight:600}
+.kit-amt-sym{color:var(--kit-muted,#6b7280)}
+.kit-amt-usd{color:var(--kit-muted,#6b7280);font-size:.85em}
 @media (prefers-color-scheme:dark){.kit-net,.kit-amount,.kit-chain,.kit-addr-input{--kit-border:#2c2e36}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livo-build/kit",
-  "version": "0.1.1",
+  "version": "0.1.6",
   "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",