// ValidateScreen.jsx — pre-deploy validation against Hyperliquid.
//
// Receives the OKRs the user picked from the deck, POSTs them to
// /api/validate-opportunities, and shows a per-pick verdict (still valid vs
// stale — based on whether the current HL orderflow contradicts the cell's
// directional thesis). User can drop invalid picks and send the rest to
// the trading desk backlog.
const { useState: useStateVS, useEffect: useEffectVS } = React;
function ValidateScreen({ picks, onBack, onSendToBacklog }) {
const [status, setStatus] = useStateVS("loading"); // loading | ready | error
const [results, setResults] = useStateVS([]);
const [error, setError] = useStateVS(null);
useEffectVS(() => {
let cancelled = false;
const payload = {
picks: picks.map((p) => ({
okrId: p.id,
coin: extractCoin(p),
pair: p.tag || (p._source && p._source.pair) || "",
timeframe: p._source && p._source.timeframe,
archetype: p._source && p._source.archetype,
direction: p.direction || (p._source && p._source.direction) || null,
orderflow_signal: p.orderflow_signal || (p._source && p._source.orderflow_signal) || null,
})),
};
fetch("/api/validate-opportunities", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify(payload),
})
.then((r) => r.json().then((b) => ({ ok: r.ok, body: b })))
.then(({ ok, body }) => {
if (cancelled) return;
if (!ok) {
setError(body.error || "validation_failed");
setStatus("error");
return;
}
setResults(body.results || []);
setStatus("ready");
})
.catch((e) => {
if (cancelled) return;
setError(String(e.message || e));
setStatus("error");
});
return () => { cancelled = true; };
}, []);
const validIds = new Set(results.filter((r) => r.valid).map((r) => r.okrId));
const validPicks = picks.filter((p) => validIds.has(p.id));
const allValid = results.length > 0 && results.every((r) => r.valid);
const someValid = validPicks.length > 0;
return (
Validate against Hyperliquid
{status === "loading" && "Checking the book…"}
{status === "ready" && `${validPicks.length} of ${picks.length} still valid`}
{status === "error" && "Validation failed"}
{status === "loading" && (
{picks.map((p) => (
))}
)}
{status === "error" && (
{error || "Could not reach Hyperliquid."}
)}
{status === "ready" && (
{results.map((r) => (
))}
)}
{status === "ready" && (
)}
);
}
function pickById(picks, id) {
return picks.find((p) => p.id === id) || {};
}
// Best-effort coin extraction from the OKR. The worker emits _source.pair
// as "BTC/USDC:USDC"; OKR.tag is "Trending · BTC/USDC". Fall back to tag if
// _source is absent (e.g. mock data).
function extractCoin(okr) {
const pair = (okr._source && okr._source.pair) || "";
if (pair.includes("/")) return pair.split("/")[0];
const tag = okr.tag || "";
const m = tag.match(/·\s*([A-Z0-9]+)\s*\//);
return m ? m[1] : "";
}
function ValidatingSkeleton({ pick }) {
return (