// ConfirmAction.jsx — consequence-preview modal (design.md "signature move 1"). // // Every state-changing admin action is routed through this before it commits. // The modal states, in plain language and computed from live data: // · exactly what will change and its scope ("halts 6 active accounts") // · when it takes effect // · that it is recorded, and as whom // · a required reason where the action is consequential // Only on Confirm does the mutation run, the toast fire, and the audit append. // // This is the interaction that most expresses the thesis: an operator never // changes a regulated facility's state without first seeing the consequence. // ── Descriptor builder ────────────────────────────────────────────────── // Returns null for actions that need no confirmation (navigation / view-only). const buildConsequence = (key, payload, ctx) => { const D = (o) => ({ recordedAs: "admin@ascend.io", effective: "Immediately", confirmTone: "danger", ...o }); switch (key) { // ----- Facilities ----- case "pause-facility": return D({ title: "Pause facility", confirmLabel: "Pause facility", confirmTone: "warning", target: { label: payload.name, sub: `${payload.tranche} · settles ${payload.token}` }, consequences: [ { icon: "pause", text: `Halts new borrows and deposits across ${payload.accounts} active account${payload.accounts === 1 ? "" : "s"}.` }, { icon: "check", text: "Existing positions are untouched — repayments and withdrawals stay enabled." }, { icon: "gavel", text: "Liquidations continue to run, so lenders stay protected." }, ], requireReason: true, }); case "unpause-facility": return D({ title: "Resume facility", confirmLabel: "Resume facility", confirmTone: "success", target: { label: payload.name, sub: `${payload.tranche} · settles ${payload.token}` }, consequences: [ { icon: "play", text: `Re-enables borrows and deposits across ${payload.accounts} account${payload.accounts === 1 ? "" : "s"}.` }, { icon: "info", text: "Runtime compliance gates resume evaluating on every transaction." }, ], requireReason: false, }); // ----- Accounts ----- case "freeze-account": return D({ title: "Freeze account", confirmLabel: "Freeze account", confirmTone: "danger", target: { label: payload.id, sub: payload.facility, mono: true }, consequences: [ { icon: "snowflake", text: "Blocks all activity — borrows, deposits, withdrawals and transfers." }, { icon: "lock", text: `Collateral (${fmtMoney(payload.collateral)}) and debt (${fmtMoney(payload.borrowed)}) are locked in place.` }, { icon: "alert", text: "Health factor stops updating while the account is frozen." }, ], effective: "On next block · pending on-chain confirmation", requireReason: true, }); case "unfreeze-account": return D({ title: "Unfreeze account", confirmLabel: "Unfreeze account", confirmTone: "success", target: { label: payload.id, sub: payload.facility, mono: true }, consequences: [ { icon: "play", text: "Restores borrows, deposits, withdrawals and transfers." }, { icon: "info", text: "Health factor resumes updating from the next oracle tick." }, ], requireReason: false, }); case "pause-account": return D({ title: "Pause account", confirmLabel: "Pause account", confirmTone: "warning", target: { label: payload.id, sub: payload.facility, mono: true }, consequences: [ { icon: "pause", text: "Halts new borrows and deposits on this account." }, { icon: "check", text: "Withdrawals and repayments remain enabled." }, ], requireReason: true, }); case "unpause-account": return D({ title: "Unpause account", confirmLabel: "Unpause account", confirmTone: "success", target: { label: payload.id, sub: payload.facility, mono: true }, consequences: [{ icon: "play", text: "Re-enables borrows and deposits on this account." }], requireReason: false, }); // ----- Claims ----- case "approve-claim": return D({ title: "Approve claim", confirmLabel: "Approve claim", confirmTone: "success", target: { label: payload.investor, sub: `${payload.type} · ${payload.facility}` }, consequences: [ { icon: "shieldCheck", text: `Attaches the ${payload.type} claim to OnchainID ${payload.onchainId}.` }, { icon: "check", text: `Investor becomes eligible to borrow against ${payload.facility}.` }, ], requireReason: false, }); case "reject-claim": return D({ title: "Reject claim", confirmLabel: "Reject claim", confirmTone: "danger", target: { label: payload.investor, sub: `${payload.type} · ${payload.facility}` }, consequences: [ { icon: "cross", text: `Declines the ${payload.type} attestation for ${payload.investor}.` }, { icon: "info", text: `Investor remains ineligible for ${payload.facility}. They can re-submit.` }, ], requireReason: true, }); case "revoke-claim": return D({ title: "Revoke claim", confirmLabel: "Revoke claim", confirmTone: "danger", target: { label: payload.investor, sub: `${payload.type} · ${payload.facility}` }, consequences: [ { icon: "shieldX", text: `Withdraws the approved ${payload.type} claim from OnchainID ${payload.onchainId}.` }, { icon: "alert", text: `Investor loses eligibility for ${payload.facility} immediately.` }, { icon: "gavel", text: "Open positions may become non-compliant and subject to resolution." }, ], requireReason: true, }); // ----- Compliance form (reason already supplied) ----- case "form-pause-facility": return D({ title: "Pause facility", confirmLabel: "Pause facility", confirmTone: "warning", target: { label: payload.targetLabel, sub: "Via compliance controls" }, consequences: [ { icon: "pause", text: "Halts new borrows and deposits across the facility's active accounts." }, { icon: "gavel", text: "Liquidations continue; existing positions are untouched." }, ], presetReason: payload.reason, requireReason: true, }); case "form-freeze-account": return D({ title: "Freeze account", confirmLabel: "Freeze account", confirmTone: "danger", target: { label: payload.targetLabel, sub: "Via compliance controls", mono: true }, consequences: [ { icon: "snowflake", text: "Blocks all activity on the account." }, { icon: "lock", text: "Collateral and debt are locked in place." }, ], effective: "On next block · pending on-chain confirmation", presetReason: payload.reason, requireReason: true, }); case "form-clawback": return D({ title: "Initiate clawback", confirmLabel: "Initiate clawback", confirmTone: "danger", target: { label: payload.targetLabel, sub: "Via compliance controls", mono: true }, consequences: [ { icon: "clawback", text: "Force-transfers collateral from the account back to the facility treasury." }, { icon: "alert", text: "This is irreversible. Reserved for regulatory or default resolution." }, ], effective: "On next block · multi-sig may be required", presetReason: payload.reason, requireReason: true, }); default: return null; // deploy, view, etc. — no confirmation } }; const TONE_STYLE = { danger: { fg: "var(--danger)", bg: "var(--red-10)", btnBg: "var(--danger)", btnFg: "var(--white-100)" }, warning: { fg: "var(--gold-70)", bg: "var(--gold-10)", btnBg: "var(--gold-60)", btnFg: "var(--white-100)" }, success: { fg: "var(--success)", bg: "var(--green-10)", btnBg: "var(--accent)", btnFg: "var(--white-100)" }, }; const ConfirmAction = ({ request, onCancel, onConfirm }) => { const [reason, setReason] = React.useState(""); const open = !!request; const desc = request ? request.descriptor : null; React.useEffect(() => { if (open) { setReason(desc.presetReason || ""); const id = setTimeout(() => { const el = document.getElementById("confirm-reason") || document.getElementById("confirm-btn"); if (el) el.focus(); }, 60); return () => clearTimeout(id); } }, [open]); React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === "Escape") onCancel(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open]); if (!open) return null; const tone = TONE_STYLE[desc.confirmTone] || TONE_STYLE.danger; const reasonOk = !desc.requireReason || reason.trim().length > 0; const presetLocked = !!desc.presetReason; return (
e.stopPropagation()} style={{ background: "var(--surface)", width: 520, maxWidth: "100%", borderRadius: 16, boxShadow: "var(--shadow-1)", overflow: "hidden", animation: "crise 150ms ease-out", }}> {/* Header */}

{desc.title}

{desc.target.label} {desc.target.sub && {desc.target.sub}}
{/* Consequence list */}
What this does
    {desc.consequences.map((c, i) => (
  • {c.text}
    • ))}
{/* Effect + recorded meta */}
Takes effect {desc.effective} Recorded as {desc.recordedAs}
{/* Reason */} {desc.requireReason && (
{presetLocked ? (
{desc.presetReason}
) : ( setReason(e.target.value)} placeholder="State why this action is being taken…" style={{ width: "100%", height: 38, padding: "0 12px", boxSizing: "border-box", borderRadius: 8, border: "1px solid var(--border-strong)", background: "var(--surface)", color: "var(--fg)", font: '400 13px "Inter", sans-serif' }} /> )}
)} {/* Footer */}
); }; Object.assign(window, { buildConsequence, ConfirmAction });