/* global React */ const { useState, useEffect, useRef, useMemo } = React; // ── Shared API constants ────────────────────────────────────────────────────── const IS_LOCAL = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"; const CHAT_API = IS_LOCAL ? "http://localhost:3001/api/chat" : "/api/chat"; const BLOCKFROST_API = IS_LOCAL ? "http://localhost:3001/api/blockfrost" : "/api/blockfrost"; // Beni is live on Cardano mainnet — used to pick the right explorer + copy everywhere. const CARDANO_NETWORK = "Mainnet"; const EXPLORER_BASE = CARDANO_NETWORK === "Mainnet" ? "https://cardanoscan.io" : "https://preview.cardanoscan.io"; // ── Shared utilities ────────────────────────────────────────────────────────── function fmtAda(ada) { if (ada == null) return "·"; return ada.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } function shortenAddr(addr) { if (!addr) return "·"; return addr.slice(0, 12) + "…" + addr.slice(-6); } function timeAgo(unixTs) { const diff = Math.floor(Date.now() / 1000 - unixTs); if (diff < 60) return `${diff}s ago`; if (diff < 3600) return `${Math.floor(diff / 60)}m ago`; if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`; return new Date(unixTs * 1000).toLocaleDateString(); } // ── Supported CIP-30 wallets ────────────────────────────────────────────────── const WALLET_PROVIDERS = [ { key: "eternl", label: "Eternl" }, { key: "nami", label: "Nami" }, { key: "lace", label: "Lace" }, { key: "flint", label: "Flint" }, { key: "vespr", label: "Vespr" }, { key: "gerowallet", label: "Gero" }, { key: "typhoncip30", label: "Typhon" }, ]; // ── App-wide wallet hook (CIP-30) ───────────────────────────────────────────── function useWallet() { const [state, setState] = useState({ connected: false, connecting: false, address: null, addrShort: null, balanceAda: null, txCount: null, txs: [], walletName: null, walletIcon: null, error: null, }); async function connect(walletKey, afterConnect) { setState(s => ({ ...s, connecting: true, error: null })); try { const api = await window.cardano[walletKey].enable(); window.__beniCip30 = api; // kept for signing (e.g. deploy fee) later const rawAddr = await api.getChangeAddress(); const hexAddr = rawAddr.replace(//g, "").replace(/[^0-9a-fA-F]/g, ""); const [addrRes, txRes] = await Promise.all([ fetch(`${BLOCKFROST_API}?action=address&addr=${hexAddr}`), fetch(`${BLOCKFROST_API}?action=txs&addr=${hexAddr}`), ]); const addrData = await addrRes.json(); if (addrData.error) throw new Error(addrData.error); const txData = await txRes.json(); const bech32Addr = addrData.address || addrData.bech32; const lovelace = parseInt( (addrData.amount || []).find(a => a.unit === "lovelace")?.quantity || "0" ); setState({ connected: true, connecting: false, address: bech32Addr, addrShort: bech32Addr ? shortenAddr(bech32Addr) : "—", balanceAda: lovelace / 1_000_000, txCount: addrData.tx_count || 0, txs: Array.isArray(txData) ? txData.slice(0, 10) : [], walletName: walletKey, walletIcon: window.cardano[walletKey]?.icon || null, error: null, }); if (typeof afterConnect === "function") afterConnect(); } catch (err) { setState(s => ({ ...s, connecting: false, error: err.message })); } } function disconnect() { window.__beniCip30 = null; setState({ connected: false, connecting: false, address: null, addrShort: null, balanceAda: null, txCount: null, txs: [], walletName: null, walletIcon: null, error: null, }); } return { ...state, connect, disconnect }; } // ── Wallet connect dropdown (used in nav + landing page) ────────────────────── function WalletConnect({ wallet, afterConnect, label = "Connect Wallet", ghost = false }) { const [open, setOpen] = useState(false); const available = WALLET_PROVIDERS.filter(w => Boolean(window.cardano?.[w.key])); if (wallet.connected) { return (
{wallet.walletIcon && ( {wallet.walletName} )}
{wallet.walletName?.toUpperCase()} · CONNECTED
{wallet.addrShort}
); } return (
{open && (
Select your wallet
{available.length === 0 ? (
no wallet found
Install{" "} Eternl {" "}or{" "} Nami {" "}to connect.
) : ( available.map((w, i) => ( )) )} {wallet.error && (
⚠ {wallet.error}
)}
)}
); } /* ============ GLOBAL SVG DEFS — wobble filter, patterns ============ */ function GlobalDefs() { return ( ); } /* ============ HAND-DRAWN PRIMITIVES ============ */ function Sketchbox({ w = "100%", h = "100%", fill = "none", stroke = "var(--ink)", sw = 1.6, dashed = false, style = {}, children, rounded = 6, double = false }) { return (
{double && ( )}
{children}
); } function ScribbleUnder({ width = 220, color = "var(--accent)", thick = 3 }) { return ( ); } function HandArrow({ dir = "right", w = 80, h = 40, color = "var(--ink)" }) { const paths = { right: "M4 20 C 20 18, 50 26, 70 20", "down-right":"M4 6 C 24 8, 48 28, 72 36", "up-right": "M4 34 C 24 32, 48 12, 72 6", down: "M40 4 C 36 18, 44 28, 40 36", left: "M76 20 C 60 22, 30 14, 4 20", }; const heads = { right: "M70 20 l-10 -6 M70 20 l-10 6", "down-right":"M72 36 l-2 -10 M72 36 l-10 -2", "up-right": "M72 6 l-10 -2 M72 6 l-2 10", down: "M40 36 l-6 -8 M40 36 l6 -8", left: "M4 20 l10 -6 M4 20 l10 6", }; return ( ); } function Star({ size = 22, color = "var(--ink)" }) { return ( ); } function Asterisk({ size = 20, color = "var(--ink)" }) { return ( ); } function Dot({ size = 6, color = "var(--ink)" }) { return ; } function Check({ size = 18, color = "var(--ink)" }) { return ( ); } function Cross({ size = 18, color = "var(--ink)" }) { return ( ); } /* ============ BENI LOGO ============ */ // A small "ⓘ" that reveals a plain-language explanation on hover/focus, via // the browser's native title tooltip. Used to keep technical labels (PKH, // thread token, validator version) visible for people who want them without // forcing everyone else to already know what they mean. function InfoDot({ text }) { return ( i ); } // The Beni mark — the letter "B" in DM Serif Display. // Used for icon-only contexts (small buttons, app icon, favicon, hero tiles). function BeniMark({ size = 36, color = "var(--ink)" }) { return ( B ); } // The full wordmark — "Beni" in DM Serif Display + terracotta dot at the baseline. // Matches the reference exactly: typographic text + 39×39 circle at the base of the i. // Used in TopNav, Footer, and any full-logo context. function Wordmark({ size = 32, color = "var(--ink)" }) { const dotSize = Math.max(5, Math.round(size * 0.18)); const gap = Math.max(3, Math.round(dotSize * 0.55)); const lift = Math.round(size * 0.08); // align dot with text baseline, not the font-box floor return (
Beni
); } /* ============ ICON SET ============ */ const SK = (props, paths) => ( {paths} ); const Icon = { shield: (p = {}) => SK(p, <>), lock: (p = {}) => SK(p, <>), bolt: (p = {}) => SK(p, <>), spark: (p = {}) => SK(p, <>), eye: (p = {}) => SK(p, <>), freeze: (p = {}) => SK(p, <>), flow: (p = {}) => SK(p, <>), chat: (p = {}) => SK(p, <>), user: (p = {}) => SK(p, <>), list: (p = {}) => SK(p, <>), bell: (p = {}) => SK(p, <>), send: (p = {}) => SK(p, <>), code: (p = {}) => SK(p, <>), github: (p = {}) => SK(p, <>), plus: (p = {}) => SK(p, <>), arrow: (p = {}) => SK(p, <>), search: (p = {}) => SK(p, <>), wallet: (p = {}) => SK(p, <>), ada: (p = {}) => SK(p, <>), ai: (p = {}) => SK(p, <>), }; /* ============ TOP NAV ============ */ function TopNav({ page, setPage, wallet }) { // Security + Docs live in the footer now — the top nav stays a slim, single-purpose bar. // On the dashboard itself the CTA is redundant (you're already there), so it's hidden. // On the landing page, it's also redundant while the hero's own CTA row is on screen — // watch for that row and hide the header's copy until it scrolls out of view. const [heroCtaVisible, setHeroCtaVisible] = useState(page === "landing"); useEffect(() => { if (page !== "landing") return; const target = document.getElementById("hero-cta-row"); if (!target) { setHeroCtaVisible(false); return; } const HEADER_HEIGHT = 84; function check() { const bottom = target.getBoundingClientRect().bottom; setHeroCtaVisible(bottom > HEADER_HEIGHT); } check(); window.addEventListener("scroll", check, { passive: true }); window.addEventListener("resize", check); return () => { window.removeEventListener("scroll", check); window.removeEventListener("resize", check); }; }, [page]); const showCta = page !== "dashboard" && !(page === "landing" && heroCtaVisible); return (
{/* LEFT: Logo — always links home */}
{/* RIGHT: "Open Beni" — hidden on the dashboard, and on the landing page while the hero's own Open Beni button is already visible on screen */} {showCta && ( )}
); } /* ============ FOOTER ============ */ function Footer({ setPage }) { return (
{[ { t: "Product", items: [ { label: "Overview", action: () => setPage("landing") }, { label: "Dashboard", action: () => setPage("dashboard") }, ]}, { t: "Developers", items: [ { label: "Read the docs", action: () => setPage("docs") }, { label: "GitHub", action: () => window.open("https://github.com/IamHarrie-Labs/beni", "_blank") }, ]}, { t: "Security", items: [ { label: "How it's safe", action: () => setPage("security") }, ]}, ].map(col => (
{col.t}
    {col.items.map(item => (
    • ))}
))}
© 2026 Beni Labs
Built on Cardano
v0.4 · {CARDANO_NETWORK}
); } // ── Wallet connect modal — shown when a user tries to open Beni without a wallet ─ function WalletModal({ wallet, onClose }) { return (
e.stopPropagation()} style={{ background: "var(--paper)", border: "1.5px solid var(--ink)", padding: "48px 48px 36px", maxWidth: 440, width: "90%", boxShadow: "8px 8px 0 var(--ink)", }} >
Beni
Connect your wallet
to continue.

Beni reads your address and on-chain history from the Cardano mainnet. No funds are moved during connection.

{/* The WalletConnect component — afterConnect handled by App's useEffect */} {wallet.error && (
⚠ {wallet.error}
)}
); } Object.assign(window, { // Wallet (shared app-wide) useWallet, WalletConnect, WalletModal, fmtAda, shortenAddr, timeAgo, CHAT_API, BLOCKFROST_API, WALLET_PROVIDERS, // Primitives GlobalDefs, Sketchbox, ScribbleUnder, HandArrow, Star, Asterisk, Dot, Check, Cross, BeniMark, Wordmark, Icon, InfoDot, // Layout TopNav, Footer, // Network CARDANO_NETWORK, EXPLORER_BASE, });