@livo-build/kit 0.1.0

package/dist/wallet/wallet.css

@@ -0,0 +1,64 @@
+/* Livo wallet modal — NEUTRAL defaults on purpose. The kit owns the structure +
+   behaviour; the LOOK is yours. Style it any of three ways:
+     1. override the CSS variables below (on :root or a parent),
+     2. pass `classNames={{ ... }}` to <ConnectWallet> / <WalletModal>,
+     3. target the stable class hooks / [data-*] attributes in your own CSS.
+   Defaults inherit the app font and lean grayscale so sites don't all look alike. */
+.wm-root{
+  --wm-accent:#111827; --wm-accent-fg:#fff;
+  --wm-bg:#fff; --wm-fg:#111827; --wm-muted:#6b7280;
+  --wm-row:#f3f4f6; --wm-row-hover:#e9eaee; --wm-border:#e5e7eb;
+  --wm-overlay:rgba(17,24,39,.5);
+  --wm-radius:18px; --wm-row-radius:12px;
+  --wm-shadow:0 20px 60px rgba(0,0,0,.25);
+  font-family:inherit;
+  position:fixed; inset:0; z-index:2147483000;
+  display:flex; align-items:center; justify-content:center;
+}
+@media (prefers-color-scheme:dark){.wm-root:not(.wm-light){
+  --wm-accent:#f5f5f7; --wm-accent-fg:#111827;
+  --wm-bg:#1b1b1f; --wm-fg:#f5f5f7; --wm-muted:#9b9ba4;
+  --wm-row:#27272c; --wm-row-hover:#313137; --wm-border:#2c2c31; --wm-overlay:rgba(0,0,0,.6);
+}}
+.wm-overlay{position:absolute;inset:0;background:var(--wm-overlay);animation:wm-fade .16s ease}
+.wm-sheet{position:relative;width:360px;max-width:calc(100vw - 28px);background:var(--wm-bg);color:var(--wm-fg);border-radius:var(--wm-radius);box-shadow:var(--wm-shadow);padding:18px 18px 14px;animation:wm-pop .2s cubic-bezier(.2,.9,.25,1);outline:none}
+.wm-handle{display:none}
+.wm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
+.wm-title{margin:0;font-size:17px;font-weight:600}
+.wm-close{width:30px;height:30px;border:0;border-radius:50%;background:var(--wm-row);color:var(--wm-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,color .12s}
+.wm-close:hover{background:var(--wm-row-hover);color:var(--wm-fg)}
+.wm-list{display:flex;flex-direction:column;gap:6px;max-height:min(54vh,360px);overflow-y:auto}
+.wm-wallet{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 14px;border:0;border-radius:var(--wm-row-radius);background:var(--wm-row);color:var(--wm-fg);cursor:pointer;font:inherit;font-size:15px;font-weight:500;text-align:left;transition:background .12s}
+.wm-wallet:hover{background:var(--wm-row-hover)}
+.wm-wallet:disabled{opacity:.55;cursor:default}
+.wm-wname{flex:1}
+.wm-wicon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
+.wm-wicon img{width:28px;height:28px;border-radius:7px;object-fit:cover}
+.wm-wfallback{width:28px;height:28px;border-radius:7px;background:var(--wm-accent);color:var(--wm-accent-fg);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
+.wm-spin{position:absolute;inset:-4px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;opacity:.5;animation:wm-spin .7s linear infinite}
+.wm-empty{color:var(--wm-muted);font-size:14px;text-align:center;padding:18px 8px;margin:0}
+.wm-error{background:var(--wm-row);color:var(--wm-fg);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px;display:flex;justify-content:space-between;gap:8px;align-items:center}
+.wm-error button{border:0;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
+.wm-foot{color:var(--wm-muted);font-size:12px;text-align:center;margin:12px 4px 2px}
+.wm-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:0;border-radius:11px;background:var(--wm-accent);color:var(--wm-accent-fg);font:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:opacity .12s,transform .08s}
+.wm-cta:hover{opacity:.9}
+.wm-cta:active{transform:translateY(1px)}
+.wm-account-wrap{position:relative;display:inline-block}
+.wm-account{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 7px;border:1px solid var(--wm-border);border-radius:999px;background:var(--wm-bg);color:var(--wm-fg);font:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:border-color .12s}
+.wm-account:hover{border-color:var(--wm-muted)}
+.wm-avatar{width:22px;height:22px;border-radius:50%;background-size:cover}
+.wm-menu-backdrop{position:fixed;inset:0;z-index:1}
+.wm-menu{position:absolute;z-index:2;top:calc(100% + 6px);right:0;min-width:180px;background:var(--wm-bg);border:1px solid var(--wm-border);border-radius:12px;box-shadow:var(--wm-shadow);padding:6px;animation:wm-pop .14s ease}
+.wm-menu button{display:block;width:100%;text-align:left;padding:9px 10px;border:0;background:transparent;color:var(--wm-fg);border-radius:8px;font:inherit;font-size:14px;cursor:pointer}
+.wm-menu button:hover{background:var(--wm-row)}
+@keyframes wm-fade{from{opacity:0}to{opacity:1}}
+@keyframes wm-pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
+@keyframes wm-spin{to{transform:rotate(360deg)}}
+@media (max-width:480px){
+  .wm-root{align-items:flex-end}
+  .wm-sheet{width:100%;max-width:100%;border-radius:18px 18px 0 0;padding-bottom:24px;animation:wm-up .22s cubic-bezier(.2,.9,.25,1)}
+  .wm-handle{display:block;width:40px;height:4px;border-radius:2px;background:var(--wm-border);margin:0 auto 12px}
+  .wm-wallet{padding:15px}
+}
+@keyframes wm-up{from{transform:translateY(100%)}to{transform:none}}
+@media (prefers-reduced-motion:reduce){.wm-overlay,.wm-sheet,.wm-menu{animation:none}}

package/dist/web3/Address.d.ts

@@ -0,0 +1,12 @@
+import "./web3.css";
+export interface AddressProps {
+    address: `0x${string}`;
+    /** Resolve + show an ENS name when available (mainnet). Default true. */
+    ens?: boolean;
+    /** Show a copy button. Default true. */
+    copy?: boolean;
+    /** Show an explorer link (uses the connected chain's explorer). Default false. */
+    explorer?: boolean;
+    className?: string;
+}
+export declare function Address({ address, ens, copy, explorer, className }: AddressProps): import("react").JSX.Element;

package/dist/web3/Address.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./web3.css";
+import { useState } from "react";
+import { useEnsName, useConnection } from "wagmi";
+import { shortAddress } from "../format";
+import { cx } from "../util";
+// Display an address: short form (or ENS), with optional copy + explorer link.
+// Neutral; style via .kit-addr / [data-ens] or className.
+export function Address({ address, ens = true, copy = true, explorer = false, className }) {
+    const { data: name } = useEnsName({ address, query: { enabled: ens } });
+    const { chain } = useConnection();
+    const explorerUrl = chain?.blockExplorers?.default?.url;
+    const [copied, setCopied] = useState(false);
+    const label = name || shortAddress(address);
+    return (_jsxs("span", { className: cx("kit-addr", className), "data-ens": name ? "" : undefined, children: [_jsx("span", { children: label }), copy ? (_jsx("button", { className: "kit-addr-btn", "aria-label": "Copy address", onClick: () => {
+                    try {
+                        navigator.clipboard.writeText(address);
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 1200);
+                    }
+                    catch {
+                        /* clipboard unavailable */
+                    }
+                }, children: copied ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M3 8.5l3 3 7-7", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) })) : (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [_jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "8", rx: "2", stroke: "currentColor", strokeWidth: "1.4" }), _jsx("path", { d: "M10.5 5.5V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h1.5", stroke: "currentColor", strokeWidth: "1.4" })] })) })) : null, explorer && explorerUrl ? (_jsx("a", { className: "kit-addr-btn", href: explorerUrl + "/address/" + address, target: "_blank", rel: "noreferrer", "aria-label": "View on explorer", children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M6 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-2M9 3h4v4M13 3l-6 6", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : null] }));
+}

package/dist/web3/Balance.d.ts

@@ -0,0 +1,14 @@
+import "./web3.css";
+export interface BalanceProps {
+    /** Account to read. Omit to render the placeholder. */
+    address?: `0x${string}`;
+    /** ERC-20 token address. Omit for the native balance. */
+    token?: `0x${string}`;
+    decimals?: number;
+    symbol?: string;
+    precision?: number;
+    className?: string;
+    /** Shown while loading / when no address. Default "—". */
+    placeholder?: string;
+}
+export declare function Balance({ address, token, decimals, symbol, precision, className, placeholder }: BalanceProps): import("react").JSX.Element;

package/dist/web3/Balance.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./web3.css";
+import { useBalance, useReadContract } from "wagmi";
+import { erc20Abi } from "viem";
+import { formatToken } from "../format";
+import { cx } from "../util";
+// Show a native or ERC-20 balance, decimals handled correctly. (wagmi v3's
+// useBalance is native-only; ERC-20 reads balanceOf/decimals/symbol.) Neutral.
+export function Balance({ address, token, decimals, symbol, precision = 4, className, placeholder = "—" }) {
+    const native = useBalance({ address, query: { enabled: Boolean(address) && !token } });
+    const bal = useReadContract({ address: token, abi: erc20Abi, functionName: "balanceOf", args: address ? [address] : undefined, query: { enabled: Boolean(address && token) } });
+    const dec = useReadContract({ address: token, abi: erc20Abi, functionName: "decimals", query: { enabled: Boolean(token) && decimals === undefined } });
+    const sym = useReadContract({ address: token, abi: erc20Abi, functionName: "symbol", query: { enabled: Boolean(token) && symbol === undefined } });
+    const value = token ? bal.data : native.data?.value;
+    const d = decimals ?? (token ? dec.data : native.data?.decimals);
+    const s = symbol ?? (token ? sym.data : native.data?.symbol) ?? "";
+    const loading = token ? bal.isLoading || (decimals === undefined && dec.isLoading) : native.isLoading;
+    if (!address || loading || value === undefined || d === undefined) {
+        return (_jsx("span", { className: cx("kit-balance", className), "data-state": "loading", children: placeholder }));
+    }
+    return (_jsxs("span", { className: cx("kit-balance", className), "data-state": "ready", children: [formatToken(value, d, precision), " ", s] }));
+}

package/dist/web3/NetworkGuard.d.ts

@@ -0,0 +1,12 @@
+import "./web3.css";
+import { type ReactNode } from "react";
+export interface NetworkGuardProps {
+    /** The chain the children require. */
+    chainId: number;
+    /** Friendly chain name for the prompt (e.g. "Sepolia"). */
+    name?: string;
+    children: ReactNode;
+    /** Render this instead of the default switch prompt when on the wrong chain. */
+    fallback?: ReactNode;
+}
+export declare function NetworkGuard({ chainId, name, children, fallback }: NetworkGuardProps): import("react").JSX.Element;

package/dist/web3/NetworkGuard.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./web3.css";
+import {} from "react";
+import { useChainId, useSwitchChain } from "wagmi";
+// Render children only on the right chain; otherwise a neutral switch prompt. Style
+// via .kit-net / [data-state="wrong-network"], or pass your own `fallback`.
+export function NetworkGuard({ chainId, name, children, fallback }) {
+    const current = useChainId();
+    const { switchChain, isPending } = useSwitchChain();
+    if (current === chainId)
+        return _jsx(_Fragment, { children: children });
+    if (fallback !== undefined)
+        return _jsx(_Fragment, { children: fallback });
+    return (_jsxs("div", { className: "kit-net", "data-state": "wrong-network", role: "alert", children: [_jsxs("span", { children: ["Wrong network", name ? ` — switch to ${name}` : "", "."] }), _jsx("button", { disabled: isPending, onClick: () => switchChain({ chainId }), children: isPending ? "Switching…" : "Switch" })] }));
+}

package/dist/web3/TokenAmountInput.d.ts

@@ -0,0 +1,13 @@
+import "./web3.css";
+export interface TokenAmountInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** Decimals to clamp the fractional part to. Default 18. */
+    decimals?: number;
+    /** Human max (e.g. a balance); shows a "Max" button that sets it. */
+    max?: string;
+    symbol?: string;
+    placeholder?: string;
+    className?: string;
+}
+export declare function TokenAmountInput({ value, onChange, decimals, max, symbol, placeholder, className }: TokenAmountInputProps): import("react").JSX.Element;

package/dist/web3/TokenAmountInput.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./web3.css";
+import { cx } from "../util";
+// A decimals-safe token amount input (controlled). Sanitizes to a valid decimal
+// string clamped to `decimals` fractional digits — pair with parseToken(value,
+// decimals) for the BigInt. Neutral; style via .kit-amount.
+export function TokenAmountInput({ value, onChange, decimals = 18, max, symbol, placeholder = "0.0", className }) {
+    const sanitize = (s) => {
+        let v = s.replace(/[^0-9.]/g, "");
+        const parts = v.split(".");
+        if (parts.length > 2)
+            v = parts[0] + "." + parts.slice(1).join("");
+        const [w, f] = v.split(".");
+        if (f !== undefined && f.length > decimals)
+            v = w + "." + f.slice(0, decimals);
+        return v;
+    };
+    return (_jsxs("div", { className: cx("kit-amount", className), children: [_jsx("input", { inputMode: "decimal", autoComplete: "off", spellCheck: false, placeholder: placeholder, value: value, onChange: (e) => onChange(sanitize(e.target.value)) }), symbol ? _jsx("span", { className: "kit-amount-sym", children: symbol }) : null, max !== undefined ? (_jsx("button", { type: "button", className: "kit-amount-max", onClick: () => onChange(max), children: "Max" })) : null] }));
+}

package/dist/web3/index.d.ts

@@ -0,0 +1,4 @@
+export { Address, type AddressProps } from "./Address";
+export { Balance, type BalanceProps } from "./Balance";
+export { NetworkGuard, type NetworkGuardProps } from "./NetworkGuard";
+export { TokenAmountInput, type TokenAmountInputProps } from "./TokenAmountInput";

package/dist/web3/index.js

@@ -0,0 +1,4 @@
+export { Address } from "./Address";
+export { Balance } from "./Balance";
+export { NetworkGuard } from "./NetworkGuard";
+export { TokenAmountInput } from "./TokenAmountInput";

package/dist/web3/web3.css

@@ -0,0 +1,15 @@
+/* Neutral defaults — override the variables / class hooks / [data-state] to restyle. */
+.kit-addr{display:inline-flex;align-items:center;gap:6px;font:inherit;font-variant-numeric:tabular-nums}
+.kit-addr-btn{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--kit-muted,#6b7280);cursor:pointer;padding:0;width:16px;height:16px;text-decoration:none}
+.kit-addr-btn:hover{color:inherit}
+.kit-balance{font:inherit;font-variant-numeric:tabular-nums}
+.kit-net{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border:1px solid var(--kit-border,#e5e7eb);border-radius:10px;font:inherit;font-size:14px}
+.kit-net button{border:0;background:var(--kit-accent,#111827);color:var(--kit-accent-fg,#fff);border-radius:8px;padding:6px 12px;font:inherit;font-weight:600;cursor:pointer}
+.kit-net button:disabled{opacity:.6;cursor:default}
+.kit-amount{display:flex;align-items:center;gap:8px;border:1px solid var(--kit-border,#e5e7eb);border-radius:10px;padding:8px 10px;font:inherit}
+.kit-amount:focus-within{border-color:var(--kit-muted,#6b7280)}
+.kit-amount input{flex:1;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:16px;min-width:0}
+.kit-amount-sym{color:var(--kit-muted,#6b7280);font-size:14px}
+.kit-amount-max{border:0;background:transparent;color:var(--kit-muted,#6b7280);font:inherit;font-weight:600;font-size:12px;letter-spacing:.02em;text-transform:uppercase;cursor:pointer}
+.kit-amount-max:hover{color:inherit}
+@media (prefers-color-scheme:dark){.kit-net,.kit-amount{--kit-border:#2c2e36}}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@livo-build/kit",
+  "version": "0.1.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",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/wallet/wallet.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "STYLING.md"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "livo",
+    "web3",
+    "wagmi",
+    "react",
+    "wallet",
+    "connect"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/livo-projects/livo-mcp.git",
+    "directory": "packages/kit"
+  },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.build.json && node ./scripts/copy-css.mjs",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "viem": "^2",
+    "wagmi": "^3"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.56.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.7.0",
+    "viem": "^2.52.2",
+    "vitest": "^2.1.0",
+    "wagmi": "^3.0.0"
+  }
+}