/* ========================================================= Section 2 — The primitive: what a phased escrow is. Two short paragraphs + one generic three-phase diagram. ========================================================= */ function PrimitiveSection() { return (

An escrow is a state machine. The Aztec Escrow Kit makes that explicit. You declare a set of phases. Each phase carries an entry condition that pulls funds in, an exit condition that releases them, and a state delta that records what changed when the transition fired.

The Kit ships private state by default: balances, parties, and phase metadata live in Aztec's encrypted state tree. The transitions are public enough for verification, private enough that nobody on the outside can reconstruct who traded what.

{[ { k: "Entry", v: "What brings funds into this phase.", }, { k: "Exit", v: "What unlocks transition out.", }, { k: "State Δ", v: "What mutates on transition.", }, ].map((c, i) => (

{c.k}

{c.v}

))}

{/* Right: generic 3-phase diagram, named */}

); } function GenericPhaseDiagram() { const ink = "var(--az-ink)"; const muted = "var(--az-stone)"; return (

); } /* ========================================================= Section 3 — Anatomy of a phase. Interactive: hover/tap a phase to surface its entry, exit, Δ. ========================================================= */ const ANATOMY_PHASES = [ { id: "open", num: "01", name: "Open", note: "Listing is live. Funds not yet in escrow.", entry: { title: "Entry", lines: [ "Seller publishes the listing with a zero-knowledge proof of ownership.", "Anyone can see the item and the asking price.", ], }, exit: { title: "Exit", lines: [ "Buyer matches the listing and locks stablecoins into escrow.", "Or: seller cancels the listing.", ], }, delta: { title: "State Δ", lines: [ "Listing transitions to Locked.", "Buyer's identity becomes private state.", "Item and price stay public.", ], }, }, { id: "locked", num: "02", name: "Locked", note: "Funds held privately. Counterparty revealed only to the matched seller.", entry: { title: "Entry", lines: [ "Buyer's stablecoins are locked into escrow.", "Seller (and only the seller) learns the buyer's Steam ID.", ], }, exit: { title: "Exit", lines: [ "Released: a zero-knowledge proof of the Steam trade is submitted.", "Refunded: 48 hours pass with no valid proof.", ], }, delta: { title: "State Δ", lines: [ "Phase records when the lock happened.", "The deal pairs buyer and seller, privately.", ], }, }, { id: "released", num: "03", name: "Released", note: "Terminal. Funds paid out to the seller's private balance.", entry: { title: "Entry", lines: [ "The on-chain verifier accepts the proof of the trade.", "The proof links the listing, the buyer's Steam ID, and the item.", ], }, exit: { title: "Exit", lines: [ "No further transitions; this phase is terminal.", "Withdrawal destination stays private.", ], }, delta: { title: "State Δ", lines: [ "Stablecoins move to the seller's private balance.", "Listing flips to Released, publicly.", ], }, }, ]; function AnatomySection({ asSubsection = false }) { const [active, setActive] = useState("locked"); const phase = ANATOMY_PHASES.find((p) => p.id === active); const Wrapper = asSubsection ? "div" : "section"; const wrapperProps = asSubsection ? { style: { padding: "56px 0 24px" } } : { id: "anatomy", "data-screen-label": "Anatomy of a phase", 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" }; return (

{ANATOMY_PHASES.map((p) => { const isActive = p.id === active; return ( ); })}

{/* Detail card */}

{["entry", "exit", "delta"].map((k) => { const block = phase[k]; return (

{block.title}

{line}

); })}

); } window.PrimitiveSection = PrimitiveSection; window.AnatomySection = AnatomySection;