// Liquidations.jsx — Liquidate → Liquidations (B14).
//
// Fills the last nav stub. Two liquidation paths, per the protocol:
// · Searchers earn finder's-fee bounties via the DDF (Dutch Discount
// Facility — a falling-price auction).
// · Verified buyers liquidate directly per facility once compliance passes.
//
// Three sub-views (tabs): Opportunities (searcher table + DDF), Claim
// settlement (won collateral/proceeds), and History (past liquidations).
// Reuses HeroKPI / SupportKPI (Portfolio.jsx), Pagination (Primitives.jsx),
// and SegmentControl (Portfolio.jsx).
// ── shared: a hero metric + a 3-stat supporting strip ───────────────────────
const LiqKpis = ({ hero, stats }) => (
{stats.map((s, i) => (
);
// ── shared: paginated table shell ───────────────────────────────────────────
const LiqTable = ({ title, count, cols, head, children }) => (
Liquidate
{title}
{count}
);
const cellR = { textAlign: "right" };
const tnumCell = (extra) => ({ font: '500 14px/20px "Inter", sans-serif', color: "var(--fg)", textAlign: "right", ...extra });
// ── Trigger Liquidation detail + success ────────────────────────────────────
const LiqTriggerDetail = ({ row, onBack }) => {
const [done, setDone] = React.useState(false);
const mockTxHash = "0x4f91ab3d77c0e59" + row.account.replace(/[^a-z0-9]/gi, "").slice(0, 8) + "bd9013f8";
const seizedQty = row.token === "BUIDL" ? "214,500" : row.token === "OUSG" ? "2,960" : row.token === "USYC" ? "119,000" : "96,400";
if (done) {
return (
Liquidation triggered
Transaction submitted. Collateral is being seized and finder's fee allocated.
{[
{ label: "Account liquidated", value: row.account, mono: true },
{ label: "Collateral seized", value: seizedQty + " " + row.token },
{ label: "Debt repaid", value: row.debt },
{ label: "Est. finder's fee", value: row.finderFee, color: "var(--success)", bold: true },
].map(({ label, value, color, bold, mono }) => (
))}
Back to opportunities
);
}
return (
Liquidate
Trigger liquidation
Account {row.account}
Transaction flow
{[
"Your wallet calls the DDF liquidation function for this account.",
"The protocol verifies health factor is below the liquidation threshold.",
"Collateral is seized and transferred; debt is repaid from the collateral value.",
"Finder's fee is allocated to your wallet from the seized collateral.",
].map((step, i) => (
))}
setDone(true)}>
Direct liquidation is compliance-gated. Transaction evaluated at submission time.
How it works
The DDF (Dutch Discount Facility) is a falling-price auction. When a margin account's health factor drops below 1.00, the collateral becomes available to liquidators at a discount.
You repay the outstanding debt and receive the collateral plus a finder's fee. The discount starts at 0% and falls until a liquidator takes it.
Direct liquidators must hold the required compliance claims. Searchers bidding via DDF auction have separate eligibility requirements.
Account details
{[
{ label: "Borrower", value: row.account, mono: true },
{ label: "Facility", value: row.facility },
{ label: "Collateral token", value: row.token },
{ label: "Health factor", value: row.hf, danger: true },
{ label: "Time in default", value: row.defaultIn },
].map(({ label, value, mono, danger }) => (
{label}
{value}
))}
);
};
// ── DDF Auctions tab ─────────────────────────────────────────────────────────
const AuctionEligibilityRow = ({ label, met }) => (
{label}
{met ? "Met" : "Required"}
);
const LiqAuctionDetail = ({ auction, verdict, onBack }) => {
const [bidDone, setBidDone] = React.useState(false);
const [bidAmt, setBidAmt] = React.useState("");
const isEligible = verdict === "eligible";
const eligibilityRows = [
{ label: "KYC verified", met: verdict !== "noIdentity" },
{ label: "ONCHAINID registered", met: verdict !== "noIdentity" },
{ label: "Buyer eligibility claim", met: isEligible },
{ label: "Wallet balance sufficient", met: isEligible },
];
const mockTxHash = "0x7a2c" + auction.id.replace(/[^a-z0-9]/gi, "").slice(0, 10) + "f8a9";
if (bidDone) {
return (
Bid placed
Your bid is live. You'll be notified if outbid or if you win the auction.
{[
{ label: "Auction", value: auction.id, mono: true },
{ label: "Your bid", value: bidAmt ? "$" + parseFloat(bidAmt.replace(/,/g, "")).toLocaleString() : auction.reservePrice, color: "var(--accent)", bold: true },
{ label: "Collateral", value: auction.collateralQty + " " + auction.token },
{ label: "Reserve price", value: auction.reservePrice },
{ label: "Transaction", value: mockTxHash, mono: true, gridFull: true },
].filter(Boolean).map(({ label, value, color, bold, mono, gridFull }) => (
))}
Back to auctions
);
}
return (
DDF auctions
Auction {auction.id}
{auction.facility} · {auction.collateralQty} {auction.token}
Eligibility check
All requirements must be met to bid on this auction. Status reflects the current compliance scenario.
{eligibilityRows.map((r) =>
) : (
)}
Place a bid
Bid amount (USDC)
USDC
setBidAmt(auction.reservePrice.replace("$", "").replace(/,/g, ""))}>MAX
isEligible && setBidDone(true)}>
Review bid
isEligible && setBidDone(true)}>
Buy at reserve ({auction.reservePrice})
{!isEligible && (
Resolve eligibility requirements above to enable bidding.
)}
Auction details
{[
{ label: "Account", value: auction.account, mono: true },
{ label: "Facility", value: auction.facility },
{ label: "Collateral", value: auction.collateralQty + " " + auction.token },
{ label: "Reserve price", value: auction.reservePrice },
{ label: "Started", value: auction.startedAt },
{ label: "Time in default", value: auction.timeInDefault },
].map(({ label, value, mono }) => (
{label}
{value}
))}
Settlement conditions
Winning bidder repays the outstanding debt and receives the {auction.token} collateral. Settlement is atomic — both legs execute in the same transaction or neither does.
);
};
const LiqDdfAuctions = ({ auctions, verdict, onOpenAuction }) => {
const cols = "minmax(140px, 1.2fr) 1fr 1fr 1fr 1fr auto";
return (
s, "$742,600"), sub: "Across live auctions" },
{ label: "Lowest reserve", value: "$90,100", sub: "Starting from" },
{ label: "Active bidders", value: String(auctions.filter(a => a.currentBid).length), sub: "Have at least one bid" },
]}
/>
DDF auctions are compliance-gated. You must hold the required eligibility claims to bid. The price starts at the reserve and falls over time — earlier bids carry less discount but more certainty of winning.
Liquidate
Live auctions
{auctions.length}
Account
Collateral
Reserve
Current bid
Time left
{auctions.map((a, i) => (
{a.account}
{a.token}
{a.facility}
{a.collateralValue}
{a.reservePrice}
{a.currentBid || "—"}
{a.timeRemaining}
onOpenAuction && onOpenAuction(a)}>Place bid
))}
);
};
// ── Opportunities (searcher table + DDF) ────────────────────────────────────
const LiqOpportunities = ({ data, onLiquidate }) => {
const [token, setToken] = React.useState("all");
const [page, setPage] = React.useState(1);
const [perPage, setPerPage] = React.useState(6);
React.useEffect(() => { setPage(1); }, [token]);
const k = data.kpi;
const tokens = ["BUIDL", "USYC", "STBT", "OUSG"];
const filtered = data.rows.filter((r) => token === "all" ? true : r.token === token);
const pageCount = Math.max(1, Math.ceil(filtered.length / perPage));
const safePage = Math.min(page, pageCount);
const rows = filtered.slice((safePage - 1) * perPage, safePage * perPage);
const cols = "minmax(150px, 1.4fr) 1fr 1fr 0.6fr 0.8fr 1fr auto";
return (
{/* DDF framing */}
Searchers earn the finder's fee via the DDF (Dutch Discount
Facility, a falling-price auction). Verified buyers may liquidate directly per facility once compliance passes.
{/* Token filter */}
({ value: t, label: t, count: data.rows.filter((r) => r.token === t).length })),
]}
/>
Account
Collateral
Debt
HF
Default
Finder's fee
{r.account}
{r.token}
{r.facility}
{r.collateral}
{r.debt}
{r.hf}
{r.defaultIn}
{r.finderFee}
onLiquidate && onLiquidate(r)}>Liquidate
))}
{filtered.length > 0 && (
)}
);
};
// ── Claim settlement ────────────────────────────────────────────────────────
const SETTLE_STATUS = {
claimable: { variant: "eligible", label: "Claimable" },
expiring: { variant: "at-risk", label: "Expiring soon" },
expired: { variant: "frozen", label: "Expired" },
};
const LiqSettlements = ({ data, onAction }) => {
const [filter, setFilter] = React.useState("all");
const [page, setPage] = React.useState(1);
const [perPage, setPerPage] = React.useState(6);
React.useEffect(() => { setPage(1); }, [filter]);
const k = data.kpi;
const filtered = data.rows.filter((r) =>
filter === "all" ? true :
filter === "expiring" ? r.status === "expiring" :
filter === "expired" ? r.status === "expired" :
filter === "claimable" ? r.status === "claimable" : true
);
const pageCount = Math.max(1, Math.ceil(filtered.length / perPage));
const safePage = Math.min(page, pageCount);
const rows = filtered.slice((safePage - 1) * perPage, safePage * perPage);
const cols = "minmax(120px, 1.2fr) 0.7fr 1fr 1fr 1fr 0.9fr auto";
return (
For verified buyers only: pull collateral or proceeds after you won a DDF auction or directly liquidated a position.
r.status === "claimable").length },
{ value: "expiring", label: "Expiring soon", count: data.rows.filter((r) => r.status === "expiring").length },
{ value: "expired", label: "Expired", count: data.rows.filter((r) => r.status === "expired").length },
]}
/>
Account
Token
Amount
Est. value
Deadline
Status
{r.account}
{r.token}
{r.amount}
{r.estValue}
{r.deadline}
{st.label}
!expired && onAction && onAction("Claim " + r.account)}>Claim
);
})}
{filtered.length > 0 && (
)}
);
};
// ── History ─────────────────────────────────────────────────────────────────
const LiqHistory = ({ data }) => {
const [page, setPage] = React.useState(1);
const [perPage, setPerPage] = React.useState(6);
const k = data.kpi;
const pageCount = Math.max(1, Math.ceil(data.rows.length / perPage));
const safePage = Math.min(page, pageCount);
const rows = data.rows.slice((safePage - 1) * perPage, safePage * perPage);
const cols = "0.9fr minmax(110px, 1fr) 1fr 1fr 0.9fr 0.9fr auto";
return (
Date
Account
Collateral
Debt repaid
P&L
Status
{r.date}
{r.account}
{r.qty} {r.token}
{r.debtRepaid}
{r.pnl}
Claimed
Tx
))}
{data.rows.length > 0 && (
)}
);
};
// ── Page ────────────────────────────────────────────────────────────────────
const Liquidations = ({
data, auctions = [], onLiquidate, onAction,
openedLiquidation, onClearLiquidation,
openedAuction, onOpenAuction, onClearAuction,
verdict = "eligible",
state = "live", onRetry,
}) => {
const [tab, setTab] = React.useState("opportunities");
if (state === "loading") return
Liquidate
Liquidations
Liquidate distressed positions and claim the collateral.
);
}
// Trigger detail — render instead of the tab view
if (openedLiquidation) {
return
{/* Header */}
Liquidate
Liquidations
Searchers earn bounties via the DDF; verified buyers liquidate directly per facility when compliance passes.
{/* Subnav */}
{tabs.map((tb) => {
const active = tab === tb.value;
return (
setTab(tb.value)} style={{
all: "unset", cursor: "pointer", padding: "var(--space-12) var(--space-16)", marginBottom: -1,
font: '500 13px/18px "Inter", sans-serif',
color: active ? "var(--fg)" : "var(--fg-subtle)",
borderBottom: `2px solid ${active ? "var(--accent)" : "transparent"}`,
transition: "color var(--motion-fast), border-color var(--motion-fast)",
}}>{tb.label}
);
})}
{tab === "opportunities" &&
}
{tab === "auctions" &&
}
{tab === "settlement" &&
}
{tab === "history" &&
}