// CreateMarginAccount.jsx — Create Margin Account wizard (F3). // // 4-step modal: Select facility → Select settlement token → Deposit collateral // → Review & confirm → "Account created" success screen. // Replaces the single-step ActionModal create toast. const CMA_STEPS = [ { key: "facility", label: "Select facility" }, { key: "token", label: "Settlement token" }, { key: "collateral", label: "Deposit collateral" }, { key: "review", label: "Review & confirm" }, ]; const StepIndicator = ({ steps, current }) => (
{steps.map((s, i) => { const done = i < current; const active = i === current; return (
{done ? : i + 1}
{s.label}
{i < steps.length - 1 && (
)} ); })}
); const CreateMarginAccount = ({ facilities = [], onClose, onSuccess }) => { const [step, setStep] = React.useState(0); const [selectedFacility, setSelectedFacility] = React.useState(null); const [selectedToken, setSelectedToken] = React.useState(""); const [collateralAmt, setCollateralAmt] = React.useState(""); const [collateralToken, setCollateralToken] = React.useState(""); // Escape closes the wizard, matching the backdrop-click and Cancel affordances. React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose]); const activeFacilities = facilities.filter(f => f.statusVariant === "active"); const facility = selectedFacility ? activeFacilities.find(f => f.id === selectedFacility) : null; const settlementTokens = facility ? facility.settlement : []; const collateralTokens = facility ? facility.collateral.map(c => c.ticker || c) : []; const mockAccountId = "ma-" + (1200 + Math.floor(activeFacilities.length * 17)); const canNext = () => { if (step === 0) return !!selectedFacility; if (step === 1) return !!selectedToken; if (step === 2) return true; return false; }; const handleNext = () => { if (step < 3) { if (step === 1 && !collateralToken && collateralTokens.length > 0) { setCollateralToken(collateralTokens[0]); } setStep(s => s + 1); } }; return (
e.stopPropagation()} style={{ background: "var(--surface)", width: 540, maxWidth: "calc(100vw - 32px)", borderRadius: "var(--radius-xl)", padding: "var(--space-24)", boxShadow: "var(--shadow-1)", animation: "rise 150ms ease-out", maxHeight: "calc(100vh - 48px)", overflowY: "auto", }}>
Margin accounts

Create margin account

{/* Step 0: Select facility */} {step === 0 && (
Each margin account is scoped to one credit facility and its collateral / settlement rules.
{activeFacilities.slice(0, 6).map((f) => ( ))}
)} {/* Step 1: Settlement token */} {step === 1 && (
Borrowed funds will settle in this token. You can change it per borrow later.
{settlementTokens.map((tok) => { const ticker = tok.ticker || tok; return ( ); })}
)} {/* Step 2: Deposit collateral */} {step === 2 && (
Initial collateral deposit is optional — you can add it after the account is created. Choose a collateral token accepted by {facility?.name}.
{collateralTokens.length > 0 && ( <>
{collateralTokens.map((t) => ( ))}
setCollateralAmt(e.target.value)} inputMode="decimal" placeholder="0.00" style={{ flex: 1, border: 0, outline: 0, font: '500 20px/28px "Figtree", sans-serif', color: "var(--fg)", background: "transparent", padding: "var(--space-12) 0", fontVariantNumeric: "tabular-nums" }} /> {collateralToken && {collateralToken}}
)}
Skip this step to create the account first, then deposit collateral from the margin account view.
)} {/* Step 3: Review */} {step === 3 && (
Review the details before confirming. The account is created on-chain; this cannot be undone.
{[ { label: "Facility", value: facility?.name || "—" }, { label: "Settlement", value: selectedToken || "—" }, { label: "Initial collateral", value: collateralAmt ? collateralAmt + " " + collateralToken : "None — add after creation" }, { label: "Account ID", value: mockAccountId }, ].map(({ label, value }) => (
{label}
{value}
))}
Compliance gates evaluated at transaction time.
)} {/* Nav buttons */}
{step > 0 && ( )}
{step < 3 ? ( ) : ( )}
); }; window.CreateMarginAccount = CreateMarginAccount;