// ── Veritee · app shell (nav · tabs · footer · tweaks) ─────────────────────
const { useState: useStateApp, useEffect: useEffectApp, useReducer: useReducerApp } = React;
// The Explorer is the landing tab (Docker-Hub-style: land on the registry).
// "What is Veritee" is the merged Overview + TEE Guarantees page. Status is
// not in the tab group — it is a button beside GitHub — but it is still a
// tab as far as state and the #status hash are concerned.
const TABS = [
{ k: "explorer", label: "Explorer" },
{ k: "about", label: "What is Veritee" },
{ k: "team", label: "Team" },
];
const ALL_TABS = [...TABS.map((t) => t.k), "status"];
// Old deep links keep working: the retired tabs map onto their new homes.
const LEGACY_TABS = { overview: "about", guarantees: "about", developers: "about", stats: "status", transparency: "status" };
const REPO_URL = "https://github.com/input-output-hk/veritee-vm";
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "#10A0A8",
"dither": true,
"density": "comfortable"
}/*EDITMODE-END*/;
function Nav({ tab, go }) {
const statusOn = tab === "status";
const navBtn = {
display: "inline-flex", alignItems: "center", gap: 8, fontWeight: 600, cursor: "pointer", textDecoration: "none",
border: "var(--v-border)", padding: "8px 14px", fontSize: 13, fontFamily: "var(--font-sans)", whiteSpace: "nowrap",
background: "var(--v-surface)", color: "var(--v-ink)", boxShadow: "var(--v-shadow-btn)",
};
return (
);
}
function Footer({ go, dither }) {
const link = { fontSize: 14, color: "var(--v-canvas)", textDecoration: "none" };
const head = { fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--v-teal-tint)", marginBottom: 4 };
const tabLink = (k, label) => (
{ e.preventDefault(); go(k); }} style={link}>{label}
);
return (
);
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Read the tab from the hash up front: the Explorer (a child, so its effects
// run first) mirrors its own state into the hash on mount, which would wipe
// a #status / #about deep link before an App-level effect could read it.
const [tab, setTab] = useStateApp(() => {
const raw = (window.location.hash || "").replace("#", "").split("/")[0];
const h = LEGACY_TABS[raw] || raw;
return ALL_TABS.includes(h) ? h : "explorer";
});
const go = (k) => { setTab(k); window.scrollTo(0, 0); };
// Re-render when live data lands (data.jsx fetches the contract async).
const [, bump] = useReducerApp((n) => n + 1, 0);
useEffectApp(() => {
window.addEventListener("veritee:data", bump);
return () => window.removeEventListener("veritee:data", bump);
}, []);
// apply accent to CSS vars
useEffectApp(() => {
document.documentElement.style.setProperty("--tem-accent", t.accent);
document.documentElement.style.setProperty("--v-teal", t.accent);
}, [t.accent]);
// Deep-link via hash. The first segment is the tab; the Explorer owns any
// sub-path after it (#explorer/reg/, #explorer/app/) — so only
// rewrite the hash when the tab itself actually changed, or a shared link's
// sub-path would be wiped before the Explorer reads it.
useEffectApp(() => {
const cur = (window.location.hash || "").replace("#", "");
if (cur === tab || cur.startsWith(tab + "/")) return;
window.history.replaceState(null, "", "#" + tab);
}, [tab]);
return (
{/* private-beta notice band */}
Veritee is live on-chain in private beta, with access limited to select customers.