/* Playground — "Gain intuition of the protocol" Narrative copy · play/pause + speed controls · plain-English narration FSM steps on the left sync with the live simulation state. */ const Sim = window.UsufructSim; /* ─── Simulation hook with pause / speed ───────────────────── */ function useSimulation() { const [sim, setSim] = React.useState(() => Sim.initialState()); const [paused, setPaused] = React.useState(false); const [speed, setSpeed] = React.useState(1); const lastTime = React.useRef(null); React.useEffect(() => { let raf; const tick = (now) => { if (!paused) { if (lastTime.current == null) lastTime.current = now; const realDt = Math.min(64, now - lastTime.current); lastTime.current = now; setSim(s => Sim.step(s, realDt * Sim.SIM.timeScale * speed, Math.random)); } else { lastTime.current = null; } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [paused, speed]); const reset = React.useCallback(() => setSim(Sim.reset()), []); const bid = React.useCallback((t, p) => setSim(s => Sim.manualBid(s, t, p)), []); return { sim, paused, setPaused, speed, setSpeed, reset, bid }; } /* ─── Plain-English narration per FSM state ─────────────────── */ const NARRATION = { Idle: { headline: 'Waiting for the first bid.', body: 'The asset is listed at the floor price. No one is using it yet. The moment someone bids, they can borrow and use the asset immediately.', }, Descent: { headline: 'Price descending — first bidder wins.', body: 'A Dutch auction is running. The access price falls from the last acquisition price toward the floor. Whoever bids first takes the rental.', }, Occupied: { headline: 'Asset is rented.', body: "The asset payer's stake drains along the credit curve — the consumed portion becomes the asset issuer's earnings. Any newcomer can displace them at any time — the ask price is always known.", }, Demand: { headline: 'Displacement in progress.', body: "A challenger has outbid the current asset payer stake. The current asset payer keeps borrowing the asset until the handover window ends. Then the challenger takes over and the exiting asset payer gets back their unspent deposit.", }, Retired: { headline: 'Escrow closed.', body: 'The asset issuer called retire(). All accrued earnings have been released. The asset is no longer rentable through this escrow.', }, }; /* ─── FSM journey steps — sync with live state ──────────────── */ const FSM_STEPS = [ { states: ['Idle'], n: '01', label: 'Listed', desc: 'Asset at floor price. Awaiting the first bid.' }, { states: ['Descent'], n: '02', label: 'Auction', desc: 'Price descends. First bidder wins the rental.' }, { states: ['Occupied'], n: '03', label: 'Occupied', desc: "Deposit drains. The ask price is always known." }, { states: ['Demand','Retired'], n: '04', label: 'Settled', desc: 'Challenger wins. Unspent deposit refunded. Cycle closes.' }, ]; /* ─── Phase meta ─────────────────────────────────────────────── */ const PHASE_META = { Idle: { label: 'IDLE', color: 'var(--fg-2)', dot: 'idle' }, Descent: { label: 'DESCENT', color: 'var(--warn)', dot: 'dutch' }, Occupied: { label: 'OCCUPIED', color: 'var(--signal)', dot: 'occupied' }, Demand: { label: 'DEMAND', color: 'var(--danger)', dot: 'demand' }, Retired: { label: 'RETIRED', color: 'var(--fg-3)', dot: 'retired' }, }; const PHASES_ORDER = ['Idle', 'Descent', 'Occupied', 'Demand', 'Retired']; /* ─── ShapeChart ─────────────────────────────────────────────── */ function ShapeChart({ policyName, shape, progress, showCrosshair, yTopLabel, yBotLabel, xCenterLabel, xStartLabel, xEndLabel, yAxisLabel, hLineLabel, vCrosshair, hCrosshair, curveColor, markerColor, dimmed = false, invertY = false }) { const W = 520, H = 120; const pad = { top: 12, right: 12, bottom: 18, left: 32 }; const w = W - pad.left - pad.right; const h = H - pad.top - pad.bottom; const N = 120; const yPos = (v) => invertY ? pad.top + (1 - v) * h : pad.top + v * h; const pts = []; for (let i = 0; i <= N; i++) { const x = i / N; pts.push(`${pad.left + x * w},${yPos(Sim.curveHeight(shape, x))}`); } const mh = Sim.curveHeight(shape, progress); const mX = pad.left + progress * w; const mY = yPos(mh); return (
{yTopLabel} {yBotLabel} {xCenterLabel} {xStartLabel && {xStartLabel}} {xEndLabel && {xEndLabel}} {policyName} · {Sim.describeShape(shape)} {yAxisLabel && showCrosshair && vCrosshair && {yAxisLabel}} {hLineLabel && showCrosshair && hCrosshair && {hLineLabel}} {showCrosshair && vCrosshair && } {showCrosshair && hCrosshair && } {showCrosshair && }
); } /* ─── State pills ───────────────────────────────────────────── */ function StatePills({ phaseKind }) { return (
{PHASES_ORDER.map((k, i) => { const meta = PHASE_META[k]; const active = k === phaseKind; return (
{active && } {meta.label}
); })}
); } /* ─── Sim controls: play/pause · speed · reset ──────────────── */ function SimControls({ paused, setPaused, speed, setSpeed, reset }) { const speeds = [1, 2, 4]; const btnBase = { all: 'unset', boxSizing: 'border-box', cursor: 'pointer', fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.08em', transition: 'border-color 120ms, color 120ms', }; return (
{/* Play / Pause */} {/* Speed */}
{speeds.map((s, i) => ( ))}
{/* Reset */}
); } /* ─── Narration bar: plain-English "what's happening now" ───── */ function NarrationBar({ phaseKind }) { const meta = PHASE_META[phaseKind] || PHASE_META.Idle; const [displayPhase, setDisplayPhase] = React.useState(phaseKind); const [visible, setVisible] = React.useState(true); React.useEffect(() => { if (phaseKind === displayPhase) return; setVisible(false); const t = setTimeout(() => { setDisplayPhase(phaseKind); setVisible(true); }, 220); return () => clearTimeout(t); }, [phaseKind]); const n = NARRATION[displayPhase] || NARRATION.Idle; const dmeta = PHASE_META[displayPhase] || PHASE_META.Idle; return (
{n.headline}
{n.body}
); } /* ─── Key stats (2 per phase, large + readable) ─────────────── */ function KeyStats({ sim }) { const k = sim.phase.kind; const stats = (() => { if (k === 'Idle') return [ { label: 'FLOOR PRICE', v: Sim.SIM.cycle.floor.toFixed(1), u: 'SUI', c: 'var(--fg-2)' }, ]; if (k === 'Descent') { const auctionEnds = Math.max(0, (sim.phase.startMs + Sim.SIM.cycle.windowMs - sim.now) / 1000); return [ { label: 'DESCENT ENDS IN', v: auctionEnds.toFixed(0), u: 's', c: 'var(--warn)' }, { label: 'RENT PRICE', v: Sim.livePrice(sim).toFixed(1), u: 'SUI', c: 'var(--warn)' }, ]; } if (k === 'Occupied') { const cs = Sim.creditState(sim); const ownerEarned = cs.consumed * (1 - Sim.SIM.feeBps / 10_000); const remainSec = Math.max(0, (sim.phase.startMs + sim.phase.tenures * Sim.SIM.cycle.ceiling - sim.now) / 1000); return [ { label: 'TENURE ENDS IN', v: remainSec.toFixed(0), u: 's', c: 'var(--signal)' }, { label: 'ASSET PAYER STAKE USED', v: `${(cs.progress * 100).toFixed(0)}%`, u: '', c: 'var(--signal)' }, { label: 'REFUNDABLE STAKE', v: cs.refund.toFixed(1), u: 'SUI', c: 'var(--fg-2)' }, ]; } if (k === 'Demand') { const remain = Math.max(0, (sim.phase.handoverEnd - sim.now) / 1000); const cs = Sim.creditState(sim); const ownerEarned = cs.consumed * (1 - Sim.SIM.feeBps / 10_000); return [ { label: 'HANDOVER IN', v: remain.toFixed(1), u: 's', c: 'var(--danger)' }, { label: 'CHALLENGER COMMIT STAKE', v: (sim.phase.challenger.stake / sim.phase.challenger.tenures).toFixed(1), u: 'SUI', c: 'var(--danger)' }, { label: 'REFUNDABLE STAKE', v: cs.refund.toFixed(1), u: 'SUI', c: 'var(--fg-2)' }, ]; } return [ { label: 'EARNINGS', v: sim.ownerPool.toFixed(1), u: 'SUI', c: 'var(--good)' }, { label: 'STATUS', v: 'closed', u: '', c: 'var(--fg-3)' }, ]; })(); return (
{stats.map((s, i) => (
{s.label}
{s.v}{s.u && {s.u}}
))}
); } /* ─── Owner earnings — persistent running total ─────────────── */ function OwnerEarnings({ sim }) { const settled = sim.ownerPool; const k = sim.phase.kind; const cs = (k === 'Occupied' || k === 'Demand') ? Sim.creditState(sim) : null; const accruing = cs ? cs.consumed * (1 - Sim.SIM.feeBps / 10_000) : 0; const total = settled + accruing; const hasAny = total > 0; return (
{/* Total */}
ASSET ISSUER EARNINGS
{total.toFixed(1)}SUI
{/* Breakdown when accruing */} {cs && (
{settled.toFixed(1)} SUI settled
+{accruing.toFixed(1)} SUI accruing this tenure
)} {/* Idle hint */} {!cs && !hasAny && (
accrues on first settlement
)}
); } function StepBtn({ onClick, children }) { const holdRef = React.useRef(null); const start = (e) => { onClick(e); holdRef.current = setTimeout(() => { holdRef.current = setInterval(() => onClick(e), 80); }, 300); }; const stop = () => { clearTimeout(holdRef.current); clearInterval(holdRef.current); holdRef.current = null; }; return ( ); } function BotTenantRows({ sim }) { const askPrice = Sim.effectivePrice(sim); const [lastBid, setLastBid] = React.useState(null); const [stickyMap, setStickyMap] = React.useState({}); // id → { addr, valuation, orangeAt } const orangeTimers = React.useRef({}); // Derive current bid synchronously from sim.phase — same render frame as LogStrip const syncBid = (() => { const p = sim.phase; if (p.kind === 'Occupied' && p.addr !== '0x__YOU__') return { addr: p.addr, amount: (p.stake / p.tenures).toFixed(1) }; if (p.kind === 'Demand' && p.challenger.addr !== '0x__YOU__') return { addr: p.challenger.addr, amount: (p.challenger.stake / p.challenger.tenures).toFixed(1) }; return null; })(); // Persist the bid for 10s after the phase leaves (for the "bid placed" linger) React.useEffect(() => { if (!syncBid) return; setLastBid(prev => prev?.addr === syncBid.addr ? prev : { ...syncBid, realAt: Date.now() }); }, [syncBid?.addr]); React.useEffect(() => { if (!lastBid) return; const ms = 10_000 - (Date.now() - lastBid.realAt); if (ms <= 0) { setLastBid(null); return; } const tid = setTimeout(() => setLastBid(null), ms); return () => clearTimeout(tid); }, [lastBid]); // Use syncBid (realtime) while phase is active; fall back to persisted lastBid after phase ends const activeBid = syncBid ? { ...syncBid, realAt: lastBid?.addr === syncBid.addr ? lastBid.realAt : Date.now() } : lastBid; const allWatching = sim.tenants .filter(t => t.state === 'Watching' && t.valuation >= Sim.SIM.cycle.floor) .sort((a, b) => b.valuation - a.valuation); // Record when each bot first becomes canBid; 5s real timer — not cancelled on departure React.useEffect(() => { allWatching.forEach(t => { if (isFinite(askPrice) && t.valuation >= askPrice && !orangeTimers.current[t.id]) { setStickyMap(prev => ({ ...prev, [t.id]: { addr: t.addr, valuation: t.valuation, orangeAt: Date.now() } })); orangeTimers.current[t.id] = setTimeout(() => { setStickyMap(prev => { const next = { ...prev }; delete next[t.id]; return next; }); delete orangeTimers.current[t.id]; }, 5000); } }); }, [sim]); // Bid row: always "bid placed" immediately — syncs with LogStrip "acquired by" // Orange "val" stays only in the watching list (pre-bid state) const bidRow = activeBid ? [{ key: 'bot-' + activeBid.addr, addr: activeBid.addr, status: activeBid.amount ? `bid placed · ${activeBid.amount} SUI →` : 'bid placed →', dot: 'var(--signal)', addr_c: 'var(--signal)', status_c: 'var(--signal)', bg: 'rgba(41,121,200,0.07)', }] : []; const watching = allWatching.filter(t => t.addr !== activeBid?.addr).slice(0, activeBid ? 2 : 3); const watchRows = watching.map(t => { const orange = !!(stickyMap[t.id] || (isFinite(askPrice) && t.valuation >= askPrice)); return { key: 'bot-' + t.addr, addr: t.addr, status: `val · ${t.valuation.toFixed(1)} SUI`, dot: orange ? 'var(--warn)' : 'var(--fg-3)', addr_c: 'var(--fg-3)', status_c: orange ? 'var(--warn)' : 'var(--fg-3)', bg: 'var(--bg-1)' }; }); const rows = [...bidRow, ...watchRows]; if (rows.length === 0) return null; return rows.map(r => (
{r.addr} {r.status}
)); } function ManualBidRow({ sim, onBid }) { const [delta, setDelta] = React.useState(0); const phase = sim.phase.kind; if (phase === 'Retired') return null; const floor = (() => { const r = Sim.nextRentPrice(sim); return r != null ? r : Sim.livePrice(sim); })(); const floorRef = React.useRef(floor); React.useEffect(() => { if (floorRef.current !== floor) { floorRef.current = floor; setDelta(0); } }, [floor]); const perTenure = (floor || 0) + delta; const totalCost = perTenure; const aboveFloor = delta > 0; const bidLabel = phase === 'Demand' ? 'Overbid' : 'Bid'; const stop = e => e.stopPropagation(); return (
ASSET PAYER POOL · + you
You
{ e.stopPropagation(); setDelta(d => Math.max(0, d - 1)); }}>−
{perTenure.toFixed(1)} SUI
{ e.stopPropagation(); setDelta(d => d + 1); }}>+
{aboveFloor && ↑ raise the next floor to {(perTenure * (1 + Sim.SIM.escalation)).toFixed(1)} SUI}
); } /* ─── Log strip ─────────────────────────────────────────────── */ function LogStrip({ sim }) { const k = sim.phase.kind; const log = k === 'Idle' ? `asset resting at floor price · ${Sim.SIM.cycle.floor.toFixed(1)} SUI` : k === 'Descent' ? `auction in progress · bid now to acquire at ${Sim.livePrice(sim).toFixed(1)} SUI` : k === 'Occupied' ? (sim.phase.addr === '0x__YOU__' ? `acquired by you @ ${(sim.phase.stake / sim.phase.tenures).toFixed(1)} SUI · you can borrow the asset` : `acquired by ${sim.phase.addr} @ ${(sim.phase.stake / sim.phase.tenures).toFixed(1)} SUI · can borrow the asset`) : k === 'Demand' ? `challenger ${sim.phase.challenger.addr === '0x__YOU__' ? 'you' : sim.phase.challenger.addr} outbid · handover queued` : `retire() · asset issuer earnings ${sim.ownerPool.toFixed(1)} SUI`; return (
› {log}
); } /* ═══ Playground ═════════════════════════════════════════════════ */ function Playground() { const { sim, paused, setPaused, speed, setSpeed, reset, bid } = useSimulation(); const phaseKind = sim.phase.kind; const meta = PHASE_META[phaseKind]; const auctionActive = phaseKind === 'Descent'; const creditActive = phaseKind === 'Occupied' || phaseKind === 'Demand'; const auctionProg = auctionActive ? Sim.descentProgress(sim) : 0; const creditProg = creditActive ? (Sim.creditState(sim)?.progress ?? 0) : 0; return (
{/* ─── Left: narrative copy + FSM steps ─── */}
LIVE SIMULATION · How does it work?

A rental,
happening now.

The usufruct rental engine, running in your browser — no wallet, no setup.

An asset is any Sui object with key + store — an NFT, a DeFi position, a license, a capability, a vault, access to an AI agent, a dataset. Unlimited possibilities. You build it, usufruct makes it rentable.

{[ { body: 'An asset payer bids. Their stake drains as they use the asset.' }, { body: 'Any newcomer can displace them immediately — the ask price is always known.' }, { body: 'The asset issuer earns from every second occupied, across every handover.' }, ].map(({ body }, i) => (
→ {body}
))}
{/* ─── Right: simulator ─── */}
{/* Window chrome */}
{[0, 1, 2].map(i => )}
playground.usufruct.io escrow #0xa3..f1
{(phaseKind === 'Idle' || phaseKind === 'Descent') && ( )} {(phaseKind === 'Occupied' || phaseKind === 'Demand') && ( )}
); } window.Playground = Playground;