/* ========================================================= Section 6 — Built with the Kit · PoCs in the wild. Cards: name · value prop · what they leverage · phase shape · trigger · status badge · link. ========================================================= */ const POCS = [ { id: "warm-intros", name: "Warm Intros", tag: "Pay privately for an organic introduction", valueProp: "Drop a private bounty for a warm intro to someone you want to meet. The introducer pockets the bounty once the matched person confirms the conversation happened.", leverages: [ "Conditional private escrow", "Selective disclosure of requester identity to the matched introducer", ], phase: "TBD · in design", timeout: "TBD", trigger: "TBD", status: "In progress", link: null, tone: "stub", }, { id: "submit", name: "Your implementation", tag: "Open slot · ship the next one", valueProp: "Built on the Kit? Open a PR with a short writeup and your phase shape; we'll add you to this row.", leverages: ["Conditional private escrow · whatever fits"], phase: "Yours", timeout: "Yours", trigger: "Yours", status: "Open slot", link: "https://github.com/AztecProtocol/escrow-kit/discussions", tone: "slot", }, ]; function PoCSection({ asSubsection = false }) { const Wrapper = asSubsection ? "div" : "section"; const wrapperProps = asSubsection ? { style: { padding: "56px 0 24px" } } : { id: "pocs", "data-screen-label": "PoCs in the wild", style: { background: "var(--az-parchment-2)", padding: "120px 40px", borderTop: "1px solid rgba(26,20,0,0.12)", }, }; const innerStyle = asSubsection ? {} : { maxWidth: 1280, margin: "0 auto" }; const cols = POCS.length === 1 ? "1fr" : `repeat(${Math.min(POCS.length, 3)}, 1fr)`; return (
{POCS.map((p) => ( ))}
); } function PoCCard({ p }) { const stub = p.tone === "stub"; const slot = p.tone === "slot"; const muted = stub; return (
{slot && (
); } function PoCMeta({ label, value, muted, mono }) { return (
{label}
{value}
); } /* ========================================================= Section 7 — Design Assistant. Live-feeling input/output mock for the Claude skill. ========================================================= */ const ASSISTANT_PROMPTS = [ { prompt: "A private bug-bounty escrow that releases when a maintainer's GitHub merges a fix PR.", phases: [ { num: "01", name: "Open", entry: "bounty published, funds in escrow", exit: "researcher claims, deliverable PR posted" }, { num: "02", name: "Locked", entry: "claim accepted, PR ref committed", exit: "zkTLS proof: PR #N state == merged", lead: true }, { num: "03", name: "Released", entry: "verifier accepts proof", exit: "terminal · payout to researcher" }, { num: "03b", name: "Refunded", entry: "timeout fires", exit: "terminal · refund to bounty-giver", muted: true }, ], trigger: { kind: "zkTLS proof", source: "api.github.com/repos/{owner}/{repo}/pulls/{n}", }, privacy: "Researcher identity is selectively disclosed to the maintainer at Locked. Bounty amount and any second-place claimants stay private.", }, { prompt: "Freelance milestone escrow: client funds the work, escrow releases when a signed delivery note is posted.", phases: [ { num: "01", name: "Open", entry: "client funds milestone", exit: "contractor accepts; SOW hash committed" }, { num: "02", name: "Locked", entry: "work in progress, hash on record", exit: "arbiter signature over hash(milestone, deliverable)", lead: true }, { num: "03", name: "Released", entry: "signature verified", exit: "terminal · payout to contractor" }, { num: "03b", name: "Refunded", entry: "60 days without acceptance", exit: "terminal · refund to client", muted: true }, ], trigger: { kind: "Signature", source: "EIP-712 · arbiter key bound at Open", }, privacy: "Milestone hash is public; the deliverable itself stays off-chain. Contractor and client identities remain private unless they choose to disclose.", }, { prompt: "Conditional research grant: tranches release when a preprint with the right DOI is published.", phases: [ { num: "01", name: "Open", entry: "grantor commits 3 tranches", exit: "researcher claims tranche i" }, { num: "02", name: "Locked[i]", entry: "tranche i in custody", exit: "zkTLS proof: arxiv.org/abs/{doi} resolves & author == researcher", lead: true }, { num: "03", name: "Released[i]", entry: "proof verified for tranche i", exit: "terminal[i] · payout to researcher" }, { num: "03b", name: "Refunded[i]", entry: "epoch[i] + 6mo elapses", exit: "terminal[i] · refund to grantor", muted: true }, ], trigger: { kind: "zkTLS proof", source: "arxiv.org/abs/{doi}", }, privacy: "Researcher’s wallet address and the DOI are disclosed at the proof step. Tranche amounts remain private.", }, ]; function AssistantSection({ asSubsection = false }) { const [idx, setIdx] = useState(0); const [typed, setTyped] = useState(""); const [revealCount, setRevealCount] = useState(0); const [phase, setPhase] = useState("idle"); // idle | typing | thinking | revealing | done const current = ASSISTANT_PROMPTS[idx]; const promptText = current.prompt; const totalPhases = current.phases.length; useEffect(() => { setTyped(""); setRevealCount(0); setPhase("typing"); let i = 0; const typeInt = setInterval(() => { i += 1; setTyped(promptText.slice(0, i)); if (i >= promptText.length) { clearInterval(typeInt); setPhase("thinking"); setTimeout(() => { setPhase("revealing"); let n = 0; const revealInt = setInterval(() => { n += 1; setRevealCount(n); if (n >= totalPhases + 2 /* + trigger + privacy */) { clearInterval(revealInt); setPhase("done"); } }, 220); }, 700); } }, 18); return () => clearInterval(typeInt); }, [idx]); const Wrapper = asSubsection ? "div" : "section"; const wrapperProps = asSubsection ? { style: { background: "var(--az-ink)", color: "var(--az-parchment)", padding: "56px 40px", marginTop: 24, marginBottom: 24, }, } : { id: "assistant", "data-screen-label": "Design Assistant", "data-surface": "dark", style: { background: "var(--az-ink)", color: "var(--az-parchment)", padding: "120px 40px", borderTop: "1px solid rgba(242,238,225,0.12)", }, }; return (
{/* Header strip */}
Aztec Escrow Skill · running in Claude
{ASSISTANT_PROMPTS.map((_, i) => ( ))}
{/* Body */}
{/* Input column */}
Input
“{typed} {phase === "typing" && ( )} {phase !== "typing" && "”"}
Status
{/* Output column — phase cards */}
Draft phase shape {phase === "done" ? "✓ ready to scaffold" : "—"}
{current.phases.map((p, i) => ( i} /> ))}
totalPhases} /> totalPhases + 1} />
Read the skill docs →
); } function PhasePill({ p, visible }) { const lead = p.lead; const muted = p.muted; return (
Phase {p.num} {p.name}
entry {p.entry} exit {p.exit}
); } const kvLabel = { fontFamily: "var(--ff-display-alt)", fontSize: 9.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(242,238,225,0.45)", }; const kvValue = (muted, accent) => ({ fontFamily: "var(--ff-mono)", fontSize: 12.5, lineHeight: 1.4, color: accent ? "var(--az-chartreuse)" : muted ? "rgba(242,238,225,0.55)" : "var(--az-parchment)", letterSpacing: "-0.005em", }); function TriggerNote({ t, visible }) { return (
Trigger
{t.kind} {t.source}
); } function PrivacyNote({ text, visible }) { return (
Privacy {text}
); } function AssistantStatusLine({ phase }) { const dot = (active) => ({ width: 8, height: 8, background: active ? "var(--az-chartreuse)" : "rgba(242,238,225,0.25)", display: "inline-block", transform: "rotate(45deg)", transition: "background 160ms linear", }); const txt = (active) => ({ fontFamily: "var(--ff-display-alt)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: active ? "var(--az-chartreuse)" : "rgba(242,238,225,0.5)", }); const mapping = phase === "thinking" || phase === "revealing" || phase === "done"; const ready = phase === "done"; return (
Prompt received
{phase === "thinking" ? "Mapping phases & triggers…" : "Mapping phases & triggers"}
Phases ready
); } window.PoCSection = PoCSection; window.AssistantSection = AssistantSection;