/* hackathon-page.jsx - /hackathon: the Private Sprint hub. Reuses Nav/Footer/Reveal/Frame + global CSS vars, same as build-page.jsx. v1 is deliberately thin: the project grid renders from a flat projects.json produced by a cron job in the strk20-hackathon repo. No auth, no DB, no webhooks. Ordering is `pushed_at` descending straight from the GitHub API - a weighted activity score, AI change summaries, mainnet badges and the click-to-expand detail view all land post-launch, tuned against real data. */ /* The registration repo. Projects register by PR against registry.json here; the cron in that same repo resolves each entry through the GitHub API and commits projects.json, which this page fetches at runtime. Fetching from raw githubusercontent (CORS-open) instead of committing into this repo means the grid updates without a website deploy. */ const HACK_ORG = "starkience"; const HACK_REPO = "strk20-hackathon"; const HACK_REPO_URL = `https://github.com/${HACK_ORG}/${HACK_REPO}`; /* The explicit refs/heads path avoids the stale edge cache of the shorter raw.githubusercontent.com/.../main URL while keeping the direct CORS-enabled raw host (the github.com raw route redirects without CORS headers). */ const HACK_PROJECTS_URL = `https://raw.githubusercontent.com/${HACK_ORG}/${HACK_REPO}/refs/heads/main/projects.json`; /* Served from this repo so the page still renders before the hackathon repo exists, and if raw.githubusercontent is unreachable mid-event. It also holds the preview projects used while designing the page. NOTE: empty this file to [] before the sprint opens. While it has entries, any moment the live registry is empty - including the days before August 14 - the page shows these instead of the real empty state. */ const HACK_PROJECTS_FALLBACK = "/hackathon-projects.json"; const HACK_TELEGRAM = "https://t.me/+strk20sprint"; const HACK_IDEAS_URL = `${HACK_REPO_URL}/blob/main/IDEAS.md`; const HACK_DATES = { announce: "August 8", opens: "August 14", closes: "August 31", winners: "September 4", }; /* UTC instant behind the submission deadline. The public countdown is live immediately, so it always runs toward the close rather than pausing on a separate pre-sprint clock. */ const HACK_CLOSES_AT = Date.parse("2026-08-31T23:59:00Z"); /* ---------- layout tokens (mirrors build-page.jsx) ---------- */ const HK_SECTION = { position: "relative", overflow: "hidden", padding: "clamp(72px,10vh,132px) 0" }; /* Same container as .wrap in styles.css - the /build ecosystem table uses it, so the sprint list lines up with the rest of the site instead of running 400px wider than everything else. */ const HK_INNER = { width: "100%", maxWidth: "var(--maxw)", margin: "0 auto", padding: "0 var(--gut)" }; const HK_EYE = { display: "flex", alignItems: "center", gap: 14, fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--green)" }; const HK_H = { fontFamily: "var(--display)", fontWeight: 800, textTransform: "uppercase", letterSpacing: "-0.025em", lineHeight: 1.0, margin: "18px 0 0" }; const HK_LABEL = { fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--faint)" }; /* The pair of calls to action, defined once. They appear in the hero and again on the participant table's top edge, and the two sets have to stay identical - square, mono, 10.5px - so they read as the same control in both places rather than as a button and its smaller cousin. */ const HK_BTN = { padding: "10px 18px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase" }; const HK_BTN_GO = { ...HK_BTN, background: "var(--green)", color: "#fff", border: "1px solid var(--green)" }; const HK_BTN_GHOST = { ...HK_BTN, background: "none", color: "var(--text)", border: "1px solid var(--line)" }; /* ---------- helpers ---------- */ /* "2h ago" / "3d ago". Deliberately coarse: the grid is a liveness signal, not a clock, and minute-precision invites reading it as a ranking. */ function hackAgo(iso) { if (!iso) return "-"; const ms = Date.now() - new Date(iso).getTime(); if (!isFinite(ms) || ms < 0) return "just now"; const m = Math.floor(ms / 60000); if (m < 1) return "just now"; if (m < 60) return `${m}m ago`; const h = Math.floor(m / 60); if (h < 24) return `${h}h ago`; const d = Math.floor(h / 24); return `${d}d ago`; } /* Fresh work reads at full strength; stale projects fade rather than vanish. A dead project being visibly dead is the point - it just shouldn't be dropped from the grid. */ function hackHeat(iso) { if (!iso) return 0; const h = (Date.now() - new Date(iso).getTime()) / 3600000; if (h < 6) return 3; if (h < 24) return 2; if (h < 72) return 1; return 0; } /* ---------- builder avatars ---------- */ /* Row-level: faces only. Names live in the expanded panel, where every builder fits instead of the first two. */ function HackAvatars({ builders = [], size = 28 }) { const shown = builders.slice(0, 3); const extra = builders.length - shown.length; const overlap = Math.round(size * -0.32); return (
{shown.map((b, i) => ( ))} {extra > 0 && ( +{extra} )}
); } /* ---------- formatting ---------- */ /* "Aug 5, 2026" + a live "67h 14m 03s". Seconds tick, which is the cheapest possible signal that this page is not a static snapshot. No "ago" - the column header says Last pushed, so the word only repeated it. */ function hackWhen(iso, now) { if (!iso) return { date: "-", ago: "" }; const t = new Date(iso); if (isNaN(t)) return { date: "-", ago: "" }; /* No year: the whole sprint runs inside one month. */ const date = t.toLocaleDateString("en-US", { month: "short", day: "numeric" }); let sec = Math.max(0, Math.floor((now - t.getTime()) / 1000)); /* Hours and minutes, and hours keep counting past a day - 67h, not 2d 19h. Days are the strip's unit, so leaving them out of this column stops the two saying the same thing in different words, and hours stay comparable between rows without anyone converting in their head. */ const h = Math.floor(sec / 3600); sec -= h * 3600; const m = Math.floor(sec / 60); sec -= m * 60; /* Zero-padded below the leading unit so the string keeps its width and the column doesn't twitch on every tick. */ const p2 = (n) => String(n).padStart(2, "0"); let ago; if (h) ago = `${h}h ${p2(m)}m ${p2(sec)}s`; else if (m) ago = `${m}m ${p2(sec)}s`; else ago = `${sec}s`; return { date, ago }; } /* The site's one real green - ecosystem.jsx uses it for LIVE status. The accent named --green is actually the ember orange, so it can't serve here. */ const HK_GREEN = "#4ade80"; /* GitHub's dark-theme deletion red. Close enough to the ember accent that it only works at this size and weight - kept to the diff counts, nowhere else. */ const HK_RED = "#f85149"; const hackNum = (n) => Math.abs(n).toLocaleString("en-US"); /* The row's diff counts lived here. The Stack column replaced them: the counts are per-push, so they moved with every commit and said nothing about the project. The panel still shows them, where they are context rather than a ranking cue. */ /* ---------- expand animation ---------- */ /* Same drawer motion as the ecosystem rows in the Use section. GSAP measures * the auto height, which buys a real easing curve and - more usefully - an * exit tween whose completion drives the unmount, so the panel's links leave * the tab order exactly when they stop being visible. * * Reimplemented here rather than imported: ecosystem.jsx is a large module * carrying its own dataset, and these scripts share one global scope, so * loading it for thirty lines would also risk clobbering names. Prefixed for * the same reason. */ function hackMotionOn() { return typeof gsap !== "undefined" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches; } function hackUseEnterLeave(isOpen, enter, leave) { const [mounted, setMounted] = useStateT(isOpen); const nodeRef = React.useRef(null); const tweenRef = React.useRef(null); React.useEffect(() => { if (isOpen) setMounted(true); }, [isOpen]); React.useLayoutEffect(() => { const node = nodeRef.current; if (!node) return; if (tweenRef.current) { tweenRef.current.kill(); tweenRef.current = null; } if (isOpen) { /* No GSAP or reduced motion: strip anything a previous tween left behind so the panel doesn't inherit a half-finished opacity. */ if (!hackMotionOn()) { if (typeof gsap !== "undefined") gsap.set(node, { clearProps: "all" }); return; } tweenRef.current = enter(node); return; } if (!hackMotionOn()) { setMounted(false); return; } tweenRef.current = leave(node, () => setMounted(false)); }, [isOpen]); React.useEffect(() => () => { if (tweenRef.current) tweenRef.current.kill(); }, []); return { mounted: isOpen || mounted, nodeRef }; } /* The lead committer's GitHub username. People recognise handles, not project slugs, which is what makes a list like this feel social - so the handle is the primary line and the project sits under it. */ function hackHandle(p) { const b = p.builders || []; return b.length ? b[0].login : p.name; } /* Agents have no avatar on a commit trailer - the co-author is an email, not an account - but each has a GitHub org or app account, so the mark comes from there. Verified every handle resolves: github.com/.png 404s for accounts that do not exist. */ /* Lobehub's icon set, colour variants, vendored into /brand/agents rather than hotlinked: the site self-hosts its other third-party assets, and an icon that fails to load leaves a hole in the avatar stack. Cursor and Windsurf publish no colour variant, so those two are the mono mark with its currentColor pinned white - black on a dark panel would be invisible. Falls back to the agent's own GitHub avatar for anything the set does not cover - Devin and Aider today. */ const HK_AGENT_ICONS = { "Claude": "claude", "Codex": "codex", "Cursor": "cursor", "GitHub Copilot": "copilot", "Windsurf": "windsurf", "Jules": "gemini", }; const HK_AGENT_ACCOUNTS = { "Devin": "cognition-ai", "Aider": "paul-gauthier", }; const hackAgentAvatar = (family) => { const icon = HK_AGENT_ICONS[family]; if (icon) return `/brand/agents/${icon}.svg`; const account = HK_AGENT_ACCOUNTS[family]; return account ? `https://github.com/${account}.png?size=48` : null; }; /* Agents are participants, listed after the people. Same shape as a builder, so every list on the page can treat them identically. */ function hackParticipants(p) { const people = p.builders || []; const agents = (p.agents || []).map((a) => ({ login: a.name, name: a.name, /* The vendored mark first, so every agent looks the same whether it committed as an account or only signed a trailer. */ avatar_url: hackAgentAvatar(a.family) || a.avatar_url || "", agent: true, })); return people.concat(agents); } /* ---------- project row ---------- */ /* Chips that have a documentation page link to it. Paths come from the site's sitemap rather than being guessed: strk20-by-example answers 200 for any URL, so a wrong path looks fine here and 404s only for the reader. Anything without a real page stays plain text. */ const HK_DOCS = "https://strk20-by-example.org/"; /* Every chip the indexer can emit has a destination. STRK20 concepts go to their page on strk20-by-example, with paths taken from that site's sitemap: it answers 200 for any URL, so a wrong path would look fine here and 404 only for the reader. Everything else points at its own documentation. */ const HK_CHIP_DOCS = { "Privacy SDK": HK_DOCS + "sdk/getting-started", "Wallet API": HK_DOCS + "starknet-wallet-api/overview", "privacy_invoke": HK_DOCS + "helpers/privacy-invoke", "Anonymizer": HK_DOCS + "helpers/privacy-invoke", "Note discovery": HK_DOCS + "sdk/note-discovery", "Prover": HK_DOCS + "sdk/proving-config", "Shielded balances": HK_DOCS + "what-is-strk20", "AVNU": HK_DOCS + "starknet-wallet-api/avnu-private-swaps", "Ekubo": HK_DOCS + "helpers/swap-helper", "Vesu": HK_DOCS + "helpers/vesu-lending-helper", "starknet.js": HK_DOCS + "starknet-wallet-api/starknet-js", /* Not shipped, so there is no reference page yet - the build page is where it is described. */ "Sub-accounts": "https://strk20.starknet.io/build", "get-starknet": "https://github.com/starknet-io/get-starknet", "Starknetkit": "https://www.starknetkit.com/", "Cairo": "https://book.cairo-lang.org/", "Starknet Foundry": "https://foundry-rs.github.io/starknet-foundry/", "Rust": "https://www.rust-lang.org/", "React": "https://react.dev/", "Next.js": "https://nextjs.org/", "Vite": "https://vite.dev/", "Svelte": "https://svelte.dev/", "TypeScript": "https://www.typescriptlang.org/", }; /* Which parts of the STRK20 stack the row advertises, deepest first - the order is also the priority when only two fit. * * The page owns this list rather than trusting a flag from the indexer, for two * reasons: projects.json keeps whatever the last cron wrote, so entries indexed * before the stack flag existed would show nothing; and the row has space for * two, which means something has to rank them. Base Starknet and web tooling - * starknet.js, get-starknet, Cairo, Next.js - is deliberately absent. It is * real, it is in the project panel, and it is not what this page is about. * * The SDK is one pill, not five. Note discovery, discovery providers, channels * and multi-op batches are all parts of driving the SDK yourself - splitting * them filled the column with detail nobody reads, and made a wallet team look * like it had integrated five things rather than one. Proving stays separate: * running your own prover is a different decision from using the SDK. */ const HK_STACK_PILLS = [ "Anonymizer contract", "Privacy SDK", "Proving service", "Wallet API", "starknet-start", "AVNU", "Ekubo", "Vesu", ]; /* The eighteen days of the sprint, as dates, so a dot maps to a calendar day rather than to an offset someone has to count. */ const HACK_SPRINT_DAYS = (() => { const out = []; const d = new Date(Date.UTC(2026, 7, 14)); for (let i = 0; i < 18; i++) { out.push(d.toISOString().slice(0, 10)); d.setUTCDate(d.getUTCDate() + 1); } return out; })(); /* One cell per sprint day, lit on the days the repository was worked on. * * This is the part of the row that separates a builder from a submission. Lines * moved and pushes made both reward a single large dump; showing up on fourteen * days out of eighteen cannot be produced any way other than showing up. It is * also the only cell that changes when nobody has pushed, which keeps the table * honest overnight. * * Days still to come are drawn fainter than days that passed without work - * an empty strip in week one should not read as an absent team. */ function HackDayStrip({ days = [], now }) { const on = new Set(days || []); const today = new Date(now || Date.now()).toISOString().slice(0, 10); const count = HACK_SPRINT_DAYS.filter((d) => on.has(d)).length; /* Dots only. The count sat under them saying the same thing in words, and the shape is what carries the meaning - twelve scattered dots and twelve consecutive ones are different stories that "12 of 18" flattens. The number is still there for anyone who wants it, on hover. */ return ( {HACK_SPRINT_DAYS.map((d) => ( today ? " hk-day--future" : "")} /> ))} ); } /* Counts in GitHub's shorthand, then the share of the codebase the push moved. Both are per-push, not cumulative: they describe the push named in the cell to their left, which is why they sit next to it and not in the ranking. */ function HackDiffStat({ additions = 0, deletions = 0, churn = 0 }) { if (!additions && !deletions) return null; return ( +{additions.toLocaleString("en-US")} -{deletions.toLocaleString("en-US")} {churn > 0 && ( {churn >= 10 ? Math.round(churn) : churn}% changed )} ); } /* Two pills and a count. A developer reading a row should learn what the team built with, not everything the repository happens to contain. Not on the row any more - the panel's Stack detected block is where this lives now. Kept because that block reads the same vocabulary. */ function HackStackPills({ tooling = [], max = 2 }) { const rank = (t) => HK_STACK_PILLS.indexOf(typeof t === "string" ? t : t.label); const stack = tooling.filter((t) => rank(t) !== -1).sort((a, b) => rank(a) - rank(b)); if (!stack.length) return null; const shown = stack.slice(0, max); const extra = stack.length - shown.length; return ( {shown.map((t) => ( {typeof t === "string" ? t : t.label} ))} {extra > 0 && (typeof t === "string" ? t : t.label)).join(", ")}>+{extra}} ); } function HackChips({ tooling = [] }) { if (!tooling.length) return null; return (
{tooling.map((t) => { const label = typeof t === "string" ? t : t.label; const live = typeof t === "object" && t.live; const doc = HK_CHIP_DOCS[label]; const style = { fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", padding: "5px 9px", border: `1px solid ${live ? "var(--green)" : "var(--line)"}`, color: live ? "var(--green)" : "var(--dim)", textDecoration: "none", display: "inline-block", }; /* Anything unmapped still renders, just without a link. */ if (!doc) return {label}; return ( track(`chip:${label}`, "hackathon")} >{label} ); })}
); } /* ---------- link glyphs ---------- */ /* Same convention as ecosystem.jsx's glyphs: 16 viewBox, currentColor, and aria-hidden because the anchor already carries the accessible name. Defined here rather than imported - these scripts share one global scope, and ecosystem.jsx isn't loaded on this route. */ function HkGlyphGitHub() { return ( ); } function HkGlyphDoc() { return ( ); } function HkGlyphGlobe() { return ( ); } function HkGlyphCopy() { return ( ); } function HkGlyphCheck() { return ( ); } function HkGlyphSparkle() { return ( ); } function HkGlyphInfo() { return ( ); } function HkGlyphX() { return ( ); } /* ---------- typed description ---------- */ /* The description is model-written, so it is introduced the way a model answers: the caret blinks on an empty line, then the text types out beneath it. Segments keep their own styling while sharing one cursor, so the push line stays green while the paragraph beneath it types in the body colour. * * Reduced motion skips to the finished text - the animation is flavour, and * nobody should have to sit through it to read a project's description. */ function HackTypedBlock({ segments, waitMs = 1500, charsPerSec = 36 }) { const total = segments.reduce((n, seg) => n + seg.text.length, 0); const [shown, setShown] = useStateT(hackMotionOn() ? 0 : total); const [waiting, setWaiting] = useStateT(hackMotionOn()); React.useEffect(() => { if (!hackMotionOn()) return; let tween; const id = setTimeout(() => { setWaiting(false); const proxy = { n: 0 }; tween = gsap.to(proxy, { n: total, duration: Math.max(0.6, total / charsPerSec), ease: "none", onUpdate: () => setShown(Math.floor(proxy.n)), onComplete: () => setShown(total), }); }, waitMs); return () => { clearTimeout(id); if (tween) tween.kill(); }; }, [total, waitMs, charsPerSec]); /* The wait is just the caret blinking on an empty line: the same cursor that carries the typing, rather than a separate loading idiom. */ if (waiting) { return (

); } let left = shown; const typing = shown < total; return ( {segments.map((seg, i) => { const take = Math.max(0, Math.min(seg.text.length, left)); left -= take; if (!take && i > 0) return null; return (

{seg.text.slice(0, take)} {typing && take > 0 && take < seg.text.length && }

); })} ); } /* ---------- how tracking works ---------- */ /* Every field on this panel is derived, so the rules for producing it need to be visible somewhere. Written as "detected from X, missing means do Y" so a team with a blank row can find the reason without asking. */ /* Which HK_HOW entry answers a given gap, and the one-line action for it. The `fix` strings below are written to be read cold; these are written to be read by someone who already knows the field is empty. */ /* Mainnet STRK20 pool - the contract every entry has to touch. */ const HACK_POOL = "0x040337b1af3c663e86e333bab5a4b28da8d4652a15a69beee2b677776ffe812a"; /* Alchemy, keyed per builder. A shared open endpoint is the wrong thing to hand thirty teams for eighteen days - the first one to loop a backfill rate-limits everyone else, and nobody can tell whose it was. */ const HACK_RPC = "https://starknet-mainnet.g.alchemy.com/v2/"; const HK_GAPS = [ { key: "demo", t: "Live demo", todo: "Fill in the Website field on the repository, or set \"demo_url\" in strk20.json.", task: "Live demo - deploy the app somewhere anyone can open without logging in, then set \"demo_url\" in strk20.json. Also paste the URL into the repository's Website field on GitHub." }, { key: "video", t: "Demo video", todo: "Put the link in \"demo_video\" in strk20.json.", task: "Demo video - a 3-minute walkthrough, uploaded somewhere public, with the link in \"demo_video\" in strk20.json. Draft a script from the README if there is no video yet." }, { key: "mainnet", t: "Three mainnet transactions", todo: "Make three real calls against the pool on mainnet, then paste the hashes into \"transactions\".", task: `Three mainnet transactions - make three real calls against the STRK20 pool at ${HACK_POOL} on Starknet mainnet (CHAIN_ID SN_MAIN, RPC ${HACK_RPC} with a free Alchemy key), then put the three transaction hashes in "transactions" in strk20.json. Each is verified on-chain: it must exist, have succeeded, and carry a pool event.` }, { key: "contracts", t: "Contracts", todo: "Add the deployed addresses to \"contracts\" in strk20.json.", task: "Contracts - put every address this project deploys in \"contracts\" in strk20.json. Mainnet is looked up first, then Sepolia." }, { key: "tooling", t: "Stack detected", todo: "Add the dependency to package.json or Scarb.toml, or name it in the README.", task: "Stack detected - nothing STRK20-related was found in package.json, Scarb.toml or the README. Add the dependency actually in use, and name the pieces of the stack in the README." }, { key: "about", t: "AI summary", todo: "Add a README. The summary is written from it.", task: "AI summary - write a README covering what this project does, why it needs privacy, and how to run it. The summary on the hub is written from it." }, ]; /* Handed to a coding agent working inside the project's own repository. Lists only what is actually missing, with the file and field to write in each case, and rules out the one thing an agent would otherwise try - reopening the registry pull request. */ function hackAgentTask(p, gaps) { const lines = gaps.map((g, i) => `${i + 1}. ${g.task}`).join("\n\n"); const touchesManifest = gaps.some((g) => g.key !== "tooling" && g.key !== "about"); const manifest = touchesManifest ? `\nstrk20.json lives at the root of this repository:\n\n${HK_MANIFEST_SNIPPET}\n` : ""; return `Finish the STRK20 Private Sprint entry for ${p.name} in this repository (${p.repo_url}).\n\n` + `${gaps.length === 1 ? "One thing is" : `${gaps.length} things are`} missing from the hub at ` + `https://strk20.starknet.io/hackathon:\n\n${lines}\n${manifest}\n` + `Do not touch the hackathon registry - the entry is already merged, and there is no second ` + `pull request. The hub re-reads this repository every 30 minutes.`; } /* What this project is short of, in the order above. */ function hackGaps(p) { const has = { demo: !!p.requirements?.demo, video: !!p.requirements?.video, mainnet: !!p.requirements?.mainnet, contracts: (p.contracts || []).length > 0, tooling: (p.tooling || []).length > 0, about: !!(p.description_long || p.summary || p.one_liner), }; return HK_GAPS.filter((g) => !has[g.key]); } const HK_HOW = [ { t: "Builders", d: "Taken from who commits to the repository during the sprint, ordered by number of commits. Bots are filtered out.", fix: "Someone missing? Their commit email has to be linked to their GitHub account. Failing that, add the username to \"team\" in the registry entry.", }, { t: "Latest push", d: "Read from the commit range since the last index. The sentence is written from the commit messages and the files they touched. Everything refreshes every 30 minutes.", fix: "Nothing to do. Push, and the row updates on the next run.", }, { t: "Stack", d: "The parts of STRK20 a project is built on: an anonymizer contract, the Privacy SDK, the Wallet API, a venue like AVNU. Read from package.json and Scarb.toml - a declared dependency, never a mention in the README, so nothing here is a claim.", fix: "Missing a part you are using? Depend on it properly rather than describing it. An anonymizer is recognised by the privacy dependency in Scarb.toml.", }, { t: "AI summary", d: "Written from the repository README, and rewritten only when the README changes, so a source-only push never restates what the project is.", fix: "To change it, edit the README.", }, { t: "Stack detected", d: "Read from package.json, Scarb.toml, and the text of the README. Covers the Privacy SDK, the Wallet API, privacy_invoke, anonymizers, sub-accounts, note discovery, the prover, AVNU, Ekubo, Vesu and Cairo.", fix: "Something missing? Add the dependency, or name it in the README.", }, { t: "Live demo", d: "Found without being declared: the repository's Website field first, then GitHub Pages, then the most recent successful deployment reported to GitHub - which is what Vercel and Netlify do on every deploy.", fix: "Not showing? Fill in the Website field on the repository page, or set \"demo_url\" in strk20.json.", }, { t: "Demo video", d: "Comes only from \"demo_video\" in strk20.json. There is nothing to detect it from otherwise.", fix: "Add the link to strk20.json.", }, { t: "Three mainnet transactions", d: "Each hash in \"transactions\" is checked against Starknet mainnet: it has to exist, to have succeeded, and to carry an event from the STRK20 pool contract. Three passing hashes satisfy the rule.", fix: "Still unchecked? Make three real calls against the pool on mainnet and paste the hashes into strk20.json. A relayer submits private transactions, so the sender on-chain is never the account that made them, which is why hashes are asked for rather than an address.", }, { t: "Contracts", d: "Each address in \"contracts\" is looked up on mainnet, then on Sepolia, and shown with whichever network it was found on.", fix: "Nothing found means the address is not deployed on either.", }, ]; const HK_MANIFEST = `{ "transactions": ["0x07c0...", "0x04b2...", "0x0919..."], "contracts": ["0x0abc..."], "demo_video": "https://youtu.be/...", "demo_url": "https://your-demo.example" }`; function HackHow({ p }) { const gaps = p ? hackGaps(p) : []; const [copied, setCopied] = useStateT(false); const copyTask = () => { navigator.clipboard?.writeText(hackAgentTask(p, gaps)).then(() => { setCopied(true); track(`modal:agent-task:${p.slug}`, "hackathon"); setTimeout(() => setCopied(false), 1800); }).catch(() => {}); }; return (
{gaps.length ? `Missing from ${p.name}` : "Nothing missing"} {gaps.length > 0 && ( /* The list is already a task list; this hands it to the agent that is doing the work, with the repository and the fields filled in. */ )}
{gaps.length ? (
    {gaps.map((g, i) => (
  1. {i + 1}
    {g.t}

    {g.todo}

    2. ))}
) : (

Every field this panel checks for is filled. Keep pushing - the rest is scored on what the repository shows at the deadline.

)}
How each field is filled

Read from the repository every 30 minutes. Nothing here is submitted, and no pull request updates it.

    {HK_HOW.map((item, i) => (
  1. {i + 1}
    {item.t}

    {item.d}

    {item.fix}

    2. ))}
strk20.json

A file at the root of the project repository. It holds the four things that cannot be detected, and is what the judging panel reads. 

{HK_MANIFEST}
); } /* ---------- project modal ---------- */ /* The three values are set at three sizes, so top-anchoring them left their baselines on three different lines across a row of equal-height cards. Label pinned to the top, value to the bottom left, and they line up. */ const HK_STAT = { border: "1px solid var(--line)", borderRadius: 4, padding: "14px 16px", background: "var(--bg)", minWidth: 0, display: "flex", flexDirection: "column", alignItems: "flex-start", justifyContent: "space-between", }; function HackModal({ p, onClose, now }) { const [how, setHow] = useStateT(false); const howRef = React.useRef(false); howRef.current = how; const { mounted: howMounted, nodeRef: howRefEl } = hackUseEnterLeave( how, (node) => gsap.fromTo(node, { yPercent: 100 }, { yPercent: 0, duration: 0.42, ease: "power3.out" }), (node, done) => gsap.to(node, { yPercent: 100, duration: 0.32, ease: "power2.in", onComplete: done }), ); const panelRef = React.useRef(null); const backdropRef = React.useRef(null); const when = hackWhen(p.pushed_at, now); /* People only in the header: the agent belongs to the work, not to the byline. It still appears in the row and under Builders below. */ const people = p.builders || []; const named = people.slice(0, 3); const rest = people.slice(3); /* Escape closes, and the page behind is locked so a scroll gesture over the backdrop doesn't move the list underneath. */ React.useEffect(() => { /* Escape peels one layer at a time: the explainer first, then the modal. */ const onKey = (e) => { if (e.key !== "Escape") return; if (howRef.current) { setHow(false); return; } onClose(); }; document.addEventListener("keydown", onKey); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; }; }, [onClose]); React.useLayoutEffect(() => { if (!hackMotionOn()) return; gsap.fromTo(backdropRef.current, { opacity: 0 }, { opacity: 1, duration: 0.22, ease: "power2.out" }); gsap.fromTo(panelRef.current, { opacity: 0, y: 18, scale: 0.985 }, { opacity: 1, y: 0, scale: 1, duration: 0.34, ease: "power3.out" }); }, []); const contracts = (p.contracts || []).map((c) => (typeof c === "string" ? { address: c, network: "mainnet" } : c)); const mainnet = contracts.filter((c) => c.network === "mainnet"); const testnet = contracts.filter((c) => c.network === "sepolia" || c.network === "testnet"); const shown = mainnet.length ? mainnet : testnet; const contractLabel = mainnet.length ? "Contracts on mainnet" : testnet.length ? "Contracts on testnet" : "Contracts"; const explorer = mainnet.length ? "https://voyager.online/contract/" : "https://sepolia.voyager.online/contract/"; const links = [ p.has_readme ? ["Readme", `${p.repo_url}#readme`, ] : null, p.demo_url ? ["Demo", p.demo_url, ] : null, p.x_handle ? ["X", `https://x.com/${p.x_handle}`, , true] : null, ].filter((b) => b && b[1]); /* Rendered into rather than in place. A z-index only competes inside its own stacking context, so left in the section the modal sat under the fixed nav no matter how high it was set. */ return ReactDOM.createPortal((
{ if (e.target === backdropRef.current) onClose(); }} role="dialog" aria-modal="true" aria-label={p.name} >
{/* Three names, then a count: a six-person team otherwise pushed the project name and the header buttons off the panel. */} {named.map((b) => b.login).join(", ")} {rest.length > 0 && ( +{rest.length} )} {p.name} track(`modal:github:${p.slug}`, "hackathon")}> GitHub ↗
Codebase changed
{p.churn_pct ? `${p.churn_pct >= 10 ? Math.round(p.churn_pct) : p.churn_pct}%` : "-"}
{/* "Lines changed", not "Last push": the card beside it is now Last pushed, and the two labels next to each other read as the same field twice. */}
Lines changed
+{(p.additions || 0).toLocaleString("en-US")}{" "} -{(p.deletions || 0).toLocaleString("en-US")}
Last pushed
{/* Elapsed time only: it is the live number, and the calendar date is already on the row this panel opened from. Sized to the widest string this can produce - "432h 59m 59s" in a face this wide overran the box at 15px. */}
{when.ago}
Stack detected
{p.tooling && p.tooling.length ? :

Nothing detected yet.

}
{contractLabel}
{shown.length === 0 && ( N/A )} {shown.map((c) => ( {c.address.slice(0, 10)}…{c.address.slice(-6)} ↗ ))}
{links.length > 0 && (
Links
{links.map(([t, href, icon, iconOnly]) => ( track(`modal:${t}:${p.slug}`, "hackathon")}> {icon}{!iconOnly && {t}} ))}
)}
Important links detected
{[["Live demo", "demo"], ["Demo video", "video"], ["Three mainnet transactions", "mainnet"]].map(([label, key]) => { const done = p.requirements?.[key]; return ( {done ? "✓" : "○"}{label} ); })}
Builders
{/* Wraps rather than stacking: a five-person team ran down the panel and pushed everything beside it out of line. */}
{hackParticipants(p).map((b) => ( b.agent ? ( {b.avatar_url && } {b.name} ) : ( {b.login} ) ))}
{howMounted && ( /* Slides up over the panel rather than replacing it, so the thing it explains is still there underneath when it slides back down. */
)}
), document.body); } /* ---------- project row ---------- */ function HackRow({ p, now, index, registerRow, onOpen }) { const heat = hackHeat(p.pushed_at); const when = hackWhen(p.pushed_at, now); return (
registerRow && registerRow(p.slug, el)} style={{ opacity: heat === 0 ? 0.66 : 1 }} >
); } /* Keep six visible table slots while the sprint is still filling up. Empty slots are deliberately inert and use one dash per column, so they read as available rows rather than projects that can be opened. */ const HK_VISIBLE_SLOTS = 6; function HackPlaceholderRow() { return ( ); } /* ---------- the list ---------- */ /* The sprint clock. Not a score - the one number everybody shares, which is the honest counterpart to the record ECDSA.fail puts here. */ /* Floored, and off the same instants as the hero countdown: rounding up put "3 days" beside a hero reading 2d 9h. Under a day it switches to hours rather than showing a zero. */ function hackSpan(ms, left) { const d = Math.floor(ms / 86400000); if (d >= 1) return { value: d, unit: (d === 1 ? "day" : "days") + (left ? " left" : "") }; const h = Math.max(1, Math.floor(ms / 3600000)); return { value: h, unit: (h === 1 ? "hour" : "hours") + (left ? " left" : "") }; } function hackClock(now) { if (now < HACK_CLOSES_AT) return { label: "Time remaining", ...hackSpan(HACK_CLOSES_AT - now, true) }; return { label: "Sprint closed", value: 0, unit: "submissions in" }; } /* Compact live readout for the participant table. Unlike the larger hero countdown, this stays small enough to sit in the card's upper-right corner. */ function hackTableCountdown(now) { if (now >= HACK_CLOSES_AT) return "Closed"; const left = Math.max(0, HACK_CLOSES_AT - now); const d = Math.floor(left / 86400000); const h = Math.floor(left / 3600000) % 24; const m = Math.floor(left / 60000) % 60; const sec = Math.floor(left / 1000) % 60; const pad = (n) => String(n).padStart(2, "0"); return `${d}d ${pad(h)}h ${pad(m)}m ${pad(sec)}s`; } /* How often the page re-checks for new pushes. raw.githubusercontent caches for a few minutes, so polling faster buys nothing. */ const HACK_POLL_MS = 60000; /* The Participate and How it works panels are owned by HackathonPage, and the pair above the table sits several components below it. Asking by event beats threading two setters down through the header. */ const hackOpenPanel = (panel) => window.dispatchEvent(new CustomEvent("strk20:hackathon-cta", { detail: panel })); function HackList() { const [state, setState] = useStateT({ status: "loading", projects: [] }); const [now, setNow] = useStateT(Date.now()); const [openSlug, setOpenSlug] = useStateT(null); /* Row nodes by slug, plus where each sat before the last update. Together they drive the FLIP animation when the order changes. */ const rowNodes = React.useRef(new Map()); const lastTops = React.useRef(null); const lastLeader = React.useRef(null); const registerRow = React.useCallback((slug, el) => { if (el) rowNodes.current.set(slug, el); else rowNodes.current.delete(slug); }, []); React.useEffect(() => { let live = true; /* Try the hackathon repo first, fall back to the copy in this repo. A failure on both is an empty list, not a broken page. */ const load = async () => { /* Whichever source actually has projects wins. The live repo answers 200 with [] before anyone has registered, so "fetch succeeded" isn't enough to stop looking - otherwise the bundled preview could never render. */ for (const url of [HACK_PROJECTS_URL, HACK_PROJECTS_FALLBACK]) { try { const res = await fetch(url, { cache: "no-store" }); if (!res.ok) continue; const json = await res.json(); const projects = Array.isArray(json) ? json : (json.projects || []); if (!projects.length) continue; if (!live) return; setState((prev) => { /* Nothing moved: skip the render, and leave lastTops alone so a later real change still has somewhere to animate from. */ const sig = (list) => list.map((x) => `${x.slug}:${x.pushed_at}`).join("|"); if (sig(prev.projects) === sig(projects)) return prev; /* Measure before React reorders the DOM. */ const tops = new Map(); rowNodes.current.forEach((el, slug) => { if (el) tops.set(slug, el.getBoundingClientRect().top); }); lastTops.current = tops.size ? tops : null; return { status: "ready", projects }; }); return; } catch (e) { /* try the next source */ } } if (live) setState((prev) => (prev.projects.length ? prev : { status: "ready", projects: [] })); }; load(); const id = setInterval(load, HACK_POLL_MS); return () => { live = false; clearInterval(id); }; }, []); /* Drives the ticking seconds in every row from one interval. */ React.useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []); /* FLIP: the rows have already been re-sorted into their new DOM positions by the time this runs, so put each one back where it was and let GSAP carry it forward. Someone watching the page sees the row travel to the top and the others give way, rather than the list silently snapping. */ React.useLayoutEffect(() => { const tops = lastTops.current; lastTops.current = null; if (!tops || !hackMotionOn()) return; rowNodes.current.forEach((el, slug) => { if (!el) return; const before = tops.get(slug); if (before == null) return; const delta = before - el.getBoundingClientRect().top; if (Math.abs(delta) < 1) return; gsap.fromTo(el, { y: delta }, { y: 0, duration: 0.65, ease: "power3.inOut" }); }); }); /* Whoever pushed last sits on top. Not a ranking - see the note under the list, which is load-bearing rather than decorative. */ const ordered = state.projects .slice() .sort((a, b) => new Date(b.pushed_at || 0) - new Date(a.pushed_at || 0)); /* A new project at the top is the moment worth noticing, so it gets a brief wash of the accent once it lands. Skipped on first paint - everything is new then, and flashing the whole list would mean nothing. */ React.useEffect(() => { const leader = ordered[0]?.slug; if (!leader) return; const previous = lastLeader.current; lastLeader.current = leader; if (!previous || previous === leader || !hackMotionOn()) return; const el = rowNodes.current.get(leader); if (!el) return; gsap.fromTo(el, { backgroundColor: "rgba(74, 222, 128, 0.16)" }, { backgroundColor: "rgba(74, 222, 128, 0)", duration: 1.8, ease: "power2.out", delay: 0.35 }); }, [state.projects]); const devs = new Set(); ordered.forEach((p) => (p.builders || []).forEach((b) => devs.add(b.login))); const clock = hackClock(now); const tableCountdown = hackTableCountdown(now); /* Headings and the framing sentence sit above the table rather than inside it, so the bordered list is only rows - the same shape as the ecosystem table in the Use section. */ const header = (

Live Participants

{ordered.length} {ordered.length === 1 ? "project" : "projects"}, {devs.size} {devs.size === 1 ? "builder" : "builders"}

{clock.label}
{tableCountdown}
{clock.unit}
{/* The framing sentence on the left, the two calls to action on the right, both sitting on the table's top edge. Someone who has read down to the list is the most likely person on the page to enter, and until now the only way to act on that was to scroll back to the hero. */}
By live activity

Most recent push first, with the order updating as participants push their GitHub repository. Open any project to see its description, the stack detected from its repository, and its deployments.

{/* Participate always leads, How it works always follows - the same order as the hero, so the pair never reshuffles between them. */}
); let body; if (state.status === "loading") { body =

Loading projects…

; } else if (!ordered.length) { body = (

No projects yet

Applications are open. The first accepted project appears here, and every push after that is visible to everyone.

track("apply", "hackathon-empty")} style={{ marginTop: 20 }} >Apply to build
); } else { body = (
Builder Latest push Changes Days active Last pushed
{ordered.map((p, i) => ( ))} {Array.from({ length: Math.max(0, HK_VISIBLE_SLOTS - ordered.length) }, (_, i) => ( ))} ); } return ( {/* Mirrors .eco-list / .eco-row in ecosystem.jsx so the sprint table and the Use-section table are the same object with different columns. */} {/* One card holds the heading, the clock and the list, and the list scrolls inside it rather than down the page. Thirty projects otherwise run past two screens and push everything after them - the four steps, the judging criteria - out of reach of anyone who only skims. */}
{header}
{body}

Changes are the lines the latest push added and removed, and the share of the codebase it moved - one push, not the whole sprint. Winners are chosen by the panel after 31 August, against the criteria below.

{openSlug && ordered.some((x) => x.slug === openSlug) && ( x.slug === openSlug)} now={now} onClose={() => setOpenSlug(null)} /> )} ); } /* ---------- participate ---------- */ /* One prompt that carries someone the whole way, for the coding agent most of this audience already works in: it registers them, adds the manifest they would otherwise forget, and then hands their agent the skill, the docs and the addresses it needs to start. Registration comes first because it is the part with a deadline; everything after it is the eighteen days. */ const HK_AGENT_PROMPT = `Register my project for the STRK20 Private Sprint, then set it up so I can start building. STEP 1 - REGISTER Fork ${HACK_REPO_URL} and append one object to registry.json: { "repo_url": "", "telegram": [""] } Do not modify any other entry. Open a pull request describing what I am building and who I am. That is the whole application - there is no second pull request. STEP 2 - ADD strk20.json TO MY OWN REPOSITORY At the root, create strk20.json: { "transactions": [], "contracts": [], "demo_video": "", "demo_url": "" } Fill each field in as it comes to exist: - transactions: three Starknet mainnet transaction hashes that touched the STRK20 pool at ${HACK_POOL} - contracts: any contract addresses I deploy - demo_video: a 3-minute demo video link - demo_url: only if the demo is not detected already. The repository's Website field, GitHub Pages, and the most recent successful deployment reported to GitHub (Vercel and Netlify report one on every deploy) are all picked up without being declared STEP 3 - INSTALL THE STRK20 SKILL npx skills add starkience/strk20-agent-skills Then ask me to "plan STRK20 privacy for this app". The skill reads this repository, asks what should actually be private, picks an integration route, and writes a phased STRK20_INTEGRATION_PLAN.md before changing anything. It does not write Cairo contracts, does not put key material in files, and does not touch mainnet without being told. STEP 4 - LOAD THE CONTEXT - Docs: https://strk20-by-example.org/what-is-strk20 The whole site is mirrored as Markdown. Fetch https://strk20-by-example.org/llms-full.txt instead of parsing pages. - Starter kit, Next.js - wallet picker, shield, unshield, private transfer: https://github.com/Akashneelesh/strk20-starter-kit - SDKs, helper contracts and examples: https://github.com/Akashneelesh/awesome-strk20 - Ideas in scope: ${HACK_IDEAS_URL} Mainnet is CHAIN_ID SN_MAIN. Create a free Alchemy key at https://www.alchemy.com and point the RPC at ${HACK_RPC} Keep the key in an env var. Never commit it. Nothing else is submitted. Pushes, stack, contracts, demo and builders are read from my repository every 30 minutes.`; /* Their humans tab is numbered steps, each with the exact thing to copy. Same shape here, minus a CLI we do not have: the copyable parts are the two JSON blocks, which is where applications actually go wrong. */ const HK_ENTRY_SNIPPET = `{ "repo_url": "https://github.com/you/your-project", "telegram": ["your_telegram"] }`; /* Shown, not copied: the ellipsis stands for whoever is already in the file and would not parse. The copy button hands over the object alone. */ const HK_ENTRY_DISPLAY = `[ ..., { "repo_url": "https://github.com/you/your-project", "telegram": ["your_telegram"] } ]`; const HK_MANIFEST_SNIPPET = `{ "transactions": [], "contracts": [], "demo_video": "", "demo_url": "" }`; const HK_HUMAN_STEPS = [ { t: "Open registry.json", d: "Opens registry.json in GitHub's editor. GitHub forks the repository for you on your first keystroke.", link: { label: "Edit on GitHub", href: `${HACK_REPO_URL}/edit/main/registry.json` }, }, { t: "Append your entry", d: "Two fields, inside the brackets, with a comma after the entry above it. Leave every other entry alone, then propose the change as a pull request saying what you are building.", code: HK_ENTRY_SNIPPET, display: HK_ENTRY_DISPLAY, }, { t: "Add strk20.json to your own repo", d: "Fill each field in as it comes to exist. This is what the panel reads at the deadline.", code: HK_MANIFEST_SNIPPET, }, ]; function HackCopy({ code, display }) { const [copied, setCopied] = useStateT(false); return ( 
{display || code}
); } function HackParticipate({ onClose }) { const [tab, setTab] = useStateT("agents"); const [copied, setCopied] = useStateT(false); const panelRef = React.useRef(null); const backdropRef = React.useRef(null); React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; }; }, [onClose]); React.useLayoutEffect(() => { if (!hackMotionOn()) return; gsap.fromTo(backdropRef.current, { opacity: 0 }, { opacity: 1, duration: 0.22, ease: "power2.out" }); gsap.fromTo(panelRef.current, { opacity: 0, y: 18, scale: 0.985 }, { opacity: 1, y: 0, scale: 1, duration: 0.34, ease: "power3.out" }); }, []); const copy = () => { navigator.clipboard?.writeText(HK_AGENT_PROMPT).then(() => { setCopied(true); track("participate:copy", "hackathon"); setTimeout(() => setCopied(false), 1800); }).catch(() => {}); }; return ReactDOM.createPortal((
{ if (e.target === backdropRef.current) onClose(); }} role="dialog" aria-modal="true" aria-label="Participate" >
Participate

One pull request. Two fields.

{tab === "agents" ? (
Agent prompt 
{HK_AGENT_PROMPT}
{/* Someone handing a wall of text to an agent should know what it is about to do on their behalf before they paste it. */}

Paste it into your coding agent: it opens the pull request that registers you, adds strk20.json to your own repository, installs the STRK20 skill, and reads itself into the docs. Registration is the only part with a deadline.

) : (
    {HK_HUMAN_STEPS.map((step, i) => (
  1. {i + 1}
    {step.t}

    {step.d}

    {step.code && } {step.link && ( track("participate:edit", "hackathon")}> {step.link.label} )}
    2. ))}

Once merged you are in the builders group and your project appears on this page.

)}
), document.body); } /* ---------- how the sprint works ---------- */ /* Second person here, unlike the rest of the page: this popup is read by someone deciding whether to enter, and it is addressed to them. Kept to two lines a step so the whole thing fits without scrolling - anyone who has to scroll a "how it works" has already stopped reading it. */ const HK_RULES = [ { t: "Apply in one pull request", d: "Add your repository URL and Telegram username to registry.json. Nothing needs to be deployed. Merged means you are in the builders group." }, { t: "Build in public", d: "Work in your own public repository. Pushes, stack, contracts and demo are read from it every 30 minutes and appear on this page." }, { t: "Ship to mainnet", d: "Three mainnet transactions against the live STRK20 pool, and a demo anyone can open." }, { t: "Nothing to submit", d: "Whatever your repository shows on 31 August is your entry. Demo video, contracts and transaction hashes go in a strk20.json at your repository root." }, { t: "Judged 4 September", d: "A named panel scores integration depth 30%, mainnet product 30%, innovation 25%, docs 15%. Prizes $2,500 / $1,500 / $1,000 in STRK." }, ]; function HackAbout({ onClose }) { const panelRef = React.useRef(null); const backdropRef = React.useRef(null); React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; }; }, [onClose]); React.useLayoutEffect(() => { if (!hackMotionOn()) return; gsap.fromTo(backdropRef.current, { opacity: 0 }, { opacity: 1, duration: 0.22, ease: "power2.out" }); gsap.fromTo(panelRef.current, { opacity: 0, y: 18, scale: 0.985 }, { opacity: 1, y: 0, scale: 1, duration: 0.34, ease: "power3.out" }); }, []); return ReactDOM.createPortal((
{ if (e.target === backdropRef.current) onClose(); }} role="dialog" aria-modal="true" aria-label="How the sprint works" >
How it works
), document.body); } /* ---------- static content ---------- */ const HACK_STEPS = [ { n: "01", t: "Apply", d: "One pull request adding a repository URL and a Telegram username to registry.json. Nothing needs to be deployed, and it is the only pull request anyone opens." }, { n: "02", t: "Build in public", d: "Work in a public repository. Pushes, stack, contracts and demo are read from it every 30 minutes." }, { n: "03", t: "Ship to mainnet", d: "Run against the live pool: three mainnet transactions, and a demo anyone can open." }, { n: "04", t: "Nothing to submit", d: `Whatever the repository shows on ${HACK_DATES.closes} counts. Everything the panel needs goes in a strk20.json at the repository root: demo video, contracts, transaction hashes.` }, ]; const HACK_RUBRIC = [ { w: "30%", t: "STRK20 integration depth", d: "How far into the stack the project went - shielded balances, private transfers, anonymizer contracts, the SDK, using stealth accounts." }, { w: "30%", t: "Working mainnet product", d: "It runs, on mainnet, for a real user. Not a prototype behind a login." }, { w: "25%", t: "Innovation", d: "Something the ecosystem doesn't have yet, or a materially better take on something it does." }, { w: "15%", t: "Documentation & open-source quality", d: "A README someone can follow, code someone can build on, a license." }, ]; const HACK_RESOURCES = [ /* First because it is the shortest path from an empty repository to a plan: one npx line, and the agent already in the editor does the reading. */ { t: "Agent skill", d: "npx skills add starkience/strk20-agent-skills - your coding agent reads the repo, picks a route, and writes the integration plan.", href: "https://strk20-by-example.org/agent-skill" }, { t: "Documentation", d: "STRK20 by example - the pool, the wallet API, anonymizer contracts, the SDK. Mirrored as Markdown at /llms-full.txt for agents.", href: "https://strk20-by-example.org/what-is-strk20" }, { t: "Build on STRK20", d: "Integration routes: private dapp, privacy wallet, or a self-hosted prover.", href: "/build" }, { t: "Starter kit", d: "Next.js starter: wallet picker, shield, unshield, private transfer, and a deployable privacy_invoke helper.", href: "https://github.com/Akashneelesh/strk20-starter-kit" }, { t: "Awesome STRK20", d: "Curated index of the SDKs, helper contracts, proof-of-concept apps and guides.", href: "https://github.com/Akashneelesh/awesome-strk20" }, { t: "Ideas list", d: "Forty-plus ideas in scope for the sprint. Build one, or something else entirely.", href: HACK_IDEAS_URL }, { t: "Privacy SDK", d: "The monorepo - pool contracts, the TypeScript SDK, and the proving service.", href: "https://github.com/starkware-libs/starknet-privacy" }, ]; /* ---------- page ---------- */ /* The official StarkWare lockup, vendored into /brand rather than hotlinked - the same call the agent marks make. Sized off the display line it replaces, so it grows and shrinks with the three figures beside it; a wordmark's caps sit lower than a numeral's, so it is set taller than 33px to read level. */ const HK_SW_LOGO = { height: "clamp(28px,3vw,38px)", width: "auto", display: "block" }; /* Ticks every second so the hero carries a live clock rather than a fact. Counts to the submission deadline from the moment the page is public, then stops. Separate from hackClock above, which the list header renders in days. */ function hackHeroClock(now) { if (now >= HACK_CLOSES_AT) return ["Closed", "winners " + HACK_DATES.winners]; const left = Math.max(0, HACK_CLOSES_AT - now); const d = Math.floor(left / 86400000); const h = Math.floor(left / 3600000) % 24; const m = Math.floor(left / 60000) % 60; const sec = Math.floor(left / 1000) % 60; return [(d > 0 ? d + "d " : "") + h + "h " + m + "m " + sec + "s", "left to build"]; } /* The clock owns its own state. Ticking it from HackathonPage re-rendered the whole hero every second, and the shader restarted with it - it read as a flash once a second. */ function HackHeroStats() { const [now, setNow] = useStateT(Date.now()); React.useEffect(() => { const t = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(t); }, []); const clock = hackHeroClock(now); return ( /* Two by two rather than one row: at four items the row wrapped to 3 + 1 on a desktop screen, which reads as a mistake. A block of four is the same information and looks deliberate at every width, collapsing to a single column on a phone. */
{/* Four reasons to enter, in the order someone weighs them: what it pays, what they get while building, who is reading the code at the end, and how long they have. "Open source, public repos only" is gone from here - it is a rule rather than a reason, and the four steps below already say it. */} {[ ["$5,000", "$2,500 / $1,500 / $1,000 in STRK"], ["Full support", "technical + ecosystem"], [StarkWare, "judges every entry"], clock, ].map(([k, v]) => (
{k}
{v}
))}
); } /* Memoised with its props hoisted out of render: without both, any state change in the page hands the shader a fresh props object and it remounts. */ const HkTerminal = React.memo(FaultyTerminal); const HK_TERM_STYLE = { position: "absolute", inset: 0, zIndex: 0, opacity: 0.42 }; const HK_TERM_GRID = [2, 1]; function HackathonPage() { const [about, setAbout] = useStateT(false); const [join, setJoin] = useStateT(false); /* The nav carries the same two calls to action and is shared by every route, so it announces which panel to open rather than holding the state. */ React.useEffect(() => { const onCta = (e) => { if (e.detail === "join") setJoin(true); else if (e.detail === "about") setAbout(true); }; window.addEventListener("strk20:hackathon-cta", onCta); return () => window.removeEventListener("strk20:hackathon-cta", onCta); }, []); return (