// DeployFacilityWizard.jsx — F2. Seven-step deploy-facility flow ending in a // simulated transaction sequence and a success screen. Replaces the old // onAction("deploy") info toast. All mock/in-memory; ONCHAINID all-caps. // // Steps: Facility, Modules, Identity registry, Access control, Collateral, // Settlement, Review. Reuses Icon (deploy/check/copy/play), plain selects/inputs // in the ComplianceForm style, and the success-checkmark pattern. const WIZ_STEPS = ["Facility", "Modules", "Identity registry", "Access control", "Collateral", "Settlement", "Review"]; const DEPLOY_SEQ = [ "Deploying facility contract...", "Configuring modules...", "Configuring registries...", "Setting access control...", "Whitelisting collateral...", "Configuring settlement tokens...", "Finalizing setup...", ]; const PREDICTED_ONCHAINID = "0x7F2c4aE9D1b3F5c8d0A6e7B4f2C9a1D3E5f7A8aB"; // ── inputs ─────────────────────────────────────────────────────────────── const wInput = { width: "100%", height: 40, padding: "0 var(--space-12)", boxSizing: "border-box", borderRadius: "var(--radius-md)", border: "1px solid var(--border-strong)", background: "var(--surface)", color: "var(--fg)", font: '400 14px "Inter", sans-serif' }; const WLabel = ({ children }) => ; const WSelect = ({ value, onChange, options }) => ( ); const ParamPanel = ({ desc, params }) => (
{desc}
{params.length > 0 && (
{params.map(([k, v], i) => (
{k} {v}
))}
)}
); const ModulePick = ({ label, options, value, onChange }) => { const sel = options.find((o) => o.name === value) || options[0]; return (
{label} o.name)} />
); }; const WizCard = ({ title, lede, children }) => (

{title}

{lede &&
{lede}
}
{children}
); const ReviewRow = ({ label, value }) => (
{label} {value}
); // ── the wizard ─────────────────────────────────────────────────────────-- const DeployFacilityWizard = ({ onCancel, onDeployed }) => { const O = window.DEPLOY_WIZARD_OPTIONS; const [step, setStep] = React.useState(0); const [deploying, setDeploying] = React.useState(false); const [seq, setSeq] = React.useState(0); const [done, setDone] = React.useState(false); const [name, setName] = React.useState("Orion Prime Credit Facility"); const [mods, setMods] = React.useState({ risk: O.risk[0].name, auction: O.auction[0].name, valuation: O.valuation[0].name, liquidity: O.liquidity[0].name, fee: O.fee[0].name, compliance: O.compliance[0].name }); const [regIdx, setRegIdx] = React.useState(0); const [owner, setOwner] = React.useState("0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb0"); const [operators, setOperators] = React.useState([""]); const [ddfContracts, setDdf] = React.useState([""]); const [collateral, setCollateral] = React.useState([{ token: "BUIDL", haircut: "25", liq: "160", minHF: "1.1" }]); const [settlement, setSettlement] = React.useState([{ denom: "USD", token: "USDC", rate: "6.25" }]); // Deploy sequence (timer-driven, cleaned up on unmount) React.useEffect(() => { if (!deploying) return undefined; if (seq >= DEPLOY_SEQ.length) { const id = setTimeout(() => setDone(true), 300); return () => clearTimeout(id); } const id = setTimeout(() => setSeq((s) => s + 1), 480); return () => clearTimeout(id); }, [deploying, seq]); const setMod = (k) => (v) => setMods((m) => ({ ...m, [k]: v })); const reg = O.registries[regIdx]; // ── success ── if (done) { const newFacility = (() => { const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "").slice(0, 16) || "new"; return { id: "cf-" + slug, name, token: settlement[0] ? settlement[0].token : "USDC", status: "active", tvl: 0, utilization: 0, accounts: 0, rate: parseFloat(settlement[0] && settlement[0].rate) || 5, warn: 0, default: 0, tranche: "Senior tranche", lastActor: "admin@ascend.io", lastAction: "DEPLOY", lastAt: new Date().toISOString() }; })(); return (

Credit facility setup complete

Your new credit facility “{name}” has been fully configured and deployed.
Tx hash
); } // ── deploying sequence ── if (deploying) { const cur = Math.min(seq, DEPLOY_SEQ.length - 1); return (
{DEPLOY_SEQ[cur]}
Step {cur + 1} of {DEPLOY_SEQ.length}
); } // ── stepper + step panels ── const canNext = step !== 0 || name.trim().length > 0; const last = step === WIZ_STEPS.length - 1; return (
{/* Stepper */}
{WIZ_STEPS.map((s, i) => (
{i < step ? : i + 1} {s}
{i < WIZ_STEPS.length - 1 &&
} ))}
{/* Step 0 — Facility */} {step === 0 && ( Facility name * setName(e.target.value)} placeholder="Facility name" style={wInput} /> )} {/* Step 1 — Modules */} {step === 1 && (
Selected module stack
{["Chainlink (Oracle)", mods.risk, mods.fee, mods.auction, mods.compliance].map((m, i) => ( {m} ))}
)} {/* Step 2 — Identity registry */} {step === 2 && ( Identity Registry setRegIdx(O.registries.findIndex((r) => r.label === v))} options={O.registries.map((r) => r.label)} />
Required claim topics
{O.claimTopics.map((t) => {t})}
Facility ONCHAINID
On deploy, the platform mints a new ONCHAINID for this facility via IdFactory.createTokenIdentity so it can hold and receive ERC-3643 collateral.
Predicted address
)} {/* Step 3 — Access control */} {step === 3 && ( OWNER role · owner address setOwner(e.target.value)} style={{ ...wInput, fontFamily: "var(--font-mono)", fontSize: 13 }} />
OPERATOR role · additional addresses {operators.map((op, i) => ( setOperators((a) => a.map((x, j) => j === i ? e.target.value : x))} placeholder="0x… operator address" style={{ ...wInput, fontFamily: "var(--font-mono)", fontSize: 13, marginBottom: "var(--space-8)" }} /> ))}
LIQUIDATOR role · DDF contract addresses {ddfContracts.map((c, i) => ( setDdf((a) => a.map((x, j) => j === i ? e.target.value : x))} placeholder="0x… DDF contract" style={{ ...wInput, fontFamily: "var(--font-mono)", fontSize: 13, marginBottom: "var(--space-8)" }} /> ))}
)} {/* Step 4 — Collateral */} {step === 4 && ( {collateral.map((c, i) => (
Token setCollateral((a) => a.map((x, j) => j === i ? { ...x, token: v } : x))} options={O.collateralTokens} />
Haircut (%) setCollateral((a) => a.map((x, j) => j === i ? { ...x, haircut: e.target.value } : x))} style={wInput} />
Liq. threshold (%) setCollateral((a) => a.map((x, j) => j === i ? { ...x, liq: e.target.value } : x))} style={wInput} />
Min HF setCollateral((a) => a.map((x, j) => j === i ? { ...x, minHF: e.target.value } : x))} style={wInput} />
))} )} {/* Step 5 — Settlement */} {step === 5 && ( {settlement.map((s, i) => (
Denomination setSettlement((a) => a.map((x, j) => j === i ? { ...x, denom: v, token: O.settlement[v][0] } : x))} options={Object.keys(O.settlement)} />
Stablecoin setSettlement((a) => a.map((x, j) => j === i ? { ...x, token: v } : x))} options={O.settlement[s.denom]} />
Base interest rate (%) setSettlement((a) => a.map((x, j) => j === i ? { ...x, rate: e.target.value } : x))} style={wInput} />
))} )} {/* Step 6 — Review */} {step === 6 && ( {owner.slice(0, 10)}…{owner.slice(-4)}} /> `${c.token} (haircut ${c.haircut}%)`).join(", ")} /> `${s.token} @ ${s.rate}%`).join(", ")} />
Setup sequence required. Clicking Deploy initiates a multi-step transaction sequence to fully provision the facility. Keep your wallet connected.
)} {/* Footer */}
{step > 0 && } {!last && } {last && }
); }; window.DeployFacilityWizard = DeployFacilityWizard;