| |
| |
| |
| |
| |
| |
| import { useEffect, useState } from "react"; |
| import { Link } from "react-router-dom"; |
| import { api } from "../../api/client"; |
| import type { EntityDetail } from "../../api/types"; |
| import { formatId } from "../../lib/formatId"; |
| import { RiskMeter } from "../ui"; |
| import type { NodeData } from "./model"; |
|
|
| export function SidePanel({ |
| node, |
| onClose, |
| onExpand, |
| onTrace, |
| onHide, |
| onPin, |
| onTaintSeed, |
| onCopy, |
| pinned, |
| }: { |
| node: NodeData; |
| onClose: () => void; |
| onExpand: (id: string) => void; |
| onTrace: (id: string, direction: "forward" | "backward") => void; |
| onHide: (id: string) => void; |
| onPin: (id: string) => void; |
| onTaintSeed: (id: string) => void; |
| onCopy: (value: string) => void; |
| pinned: boolean; |
| }) { |
| const [detail, setDetail] = useState<EntityDetail | null>(null); |
| const [error, setError] = useState<string | null>(null); |
| const entityId = (node.entity_id as string | undefined) ?? node.id; |
|
|
| useEffect(() => { |
| setDetail(null); |
| setError(null); |
| if (node.type !== "wallet") return; |
| const controller = new AbortController(); |
| api |
| .entity(entityId, controller.signal) |
| .then(setDetail) |
| .catch((e: Error) => { |
| if (!controller.signal.aborted) setError(e.message); |
| }); |
| return () => controller.abort(); |
| }, [entityId, node.type]); |
|
|
| return ( |
| <aside className="graph-side" aria-label="Selected node"> |
| <div className="graph-side-head"> |
| <p className="label">{node.type}</p> |
| <button type="button" className="btn btn-quiet" onClick={onClose} aria-label="Close panel"> |
| ✕ |
| </button> |
| </div> |
| |
| <p className="mono graph-side-id" title={node.id}> |
| {formatId(node.id, { head: 18, tail: 8 })} |
| </p> |
| |
| {node.type === "wallet" && ( |
| <div className="graph-side-risk"> |
| <RiskMeter score={Number(node.risk ?? 0)} cells={8} /> |
| {!node.alerted && <p className="muted">No engine flagged this wallet.</p>} |
| </div> |
| )} |
| |
| {node.type === "ip" && ( |
| <p className="soft"> |
| Broadcast address{node.country ? `, seen in ${node.country}` : ""} |
| {node.asn ? ` (ASN ${node.asn})` : ""}. Links from here are{" "} |
| <strong>associated with</strong> the transactions they broadcast — an association to |
| investigate, not an attribution. |
| </p> |
| )} |
| |
| {node.type === "transaction" && ( |
| <p className="soft"> |
| A transaction, drawn as a connector: the wallets on either side are joined through it, |
| never directly to each other. |
| </p> |
| )} |
| |
| {error && <p className="muted">Could not load the case: {error}</p>} |
| |
| {detail && ( |
| <> |
| <p className="label graph-side-label">reason</p> |
| <p className="soft">{detail.reason ?? "No alert was raised for this entity."}</p> |
| |
| {detail.evidence.length > 0 && ( |
| <> |
| <p className="label graph-side-label">evidence</p> |
| <ul className="graph-side-list"> |
| {detail.evidence.slice(0, 6).map((item) => ( |
| <li key={item} className="mono" title={item}> |
| {formatId(item, { head: 14, tail: 6 })} |
| </li> |
| ))} |
| </ul> |
| </> |
| )} |
|
|
| <Link className="btn btn-ghost bracket graph-side-open" to={`/entities/${encodeURIComponent(entityId)}`}> |
| Open the full case → |
| </Link> |
| </> |
| )} |
|
|
| { |
| |
| } |
| <div className="graph-side-actions"> |
| <button type="button" className="btn btn-quiet" onClick={() => onExpand(node.id)}> |
| expand |
| </button> |
| {node.type === "wallet" && ( |
| <> |
| <button type="button" className="btn btn-quiet" onClick={() => onTrace(node.id, "forward")}> |
| trace → |
| </button> |
| <button type="button" className="btn btn-quiet" onClick={() => onTrace(node.id, "backward")}> |
| trace ← |
| </button> |
| <button |
| type="button" |
| className="btn btn-quiet" |
| title="Recompute taint as if this wallet were on the watchlist. Hypothetical: nothing is stored." |
| onClick={() => onTaintSeed(node.id)} |
| > |
| taint seed |
| </button> |
| </> |
| )} |
| <button |
| type="button" |
| className="btn btn-quiet" |
| aria-pressed={pinned} |
| title="Hold this node in place while the layout moves everything else" |
| onClick={() => onPin(node.id)} |
| > |
| {pinned ? "unpin" : "pin"} |
| </button> |
| <button type="button" className="btn btn-quiet" onClick={() => onCopy(node.id)}> |
| copy |
| </button> |
| <button type="button" className="btn btn-quiet" onClick={() => onHide(node.id)}> |
| hide |
| </button> |
| </div> |
| </aside> |
| ); |
| } |
|
|
