@livo-build/kit 0.1.1 → 0.2.0

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.2.0",
   "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",