Build an Ethereum Transaction Visualizer with ParaLens

const actorMatchesSigner = report.classification.actor_matches_signer;

if (!actorMatchesSigner) {
  console.log("⚠️  Actor differs from signer");
  console.log("Signer  :", report.attribution.tx_signer);
  console.log("Actor   :", report.classification.actor);
} else {
  console.log("Signer / Actor:", report.attribution.tx_signer);
}

type Delta = {
  subject: string;
  asset_label: string;
  direction: "Inflow" | "Outflow";
  quantity: string;
  usd: { value: number; text: string } | null;
};

type FlowRow = {
  asset: string;
  direction: "Inflow" | "Outflow";
  quantity: string;
  usd: string;
};

function buildFlowTable(
  deltas: Delta[],
  subject: string
): FlowRow[] {
  return deltas
    .filter((d) => d.subject === subject)
    .map((d) => ({
      asset: d.asset_label,
      direction: d.direction,
      quantity: d.quantity,
      usd: d.usd?.text ?? "—",
    }));
}

// Usage
const actorFlows = buildFlowTable(
  report.inventory_deltas,
  report.classification.actor
);

actorFlows.forEach((row) => {
  const sign = row.direction === "Inflow" ? "+" : "−";
  console.log(`${sign} ${row.quantity} ${row.asset}  (${row.usd})`);
});

if (report.classification.intent_kind === "TransactionReverted") {
  return (
    <FailureCard
      title="Transaction Reverted"
      message="This transaction failed on-chain. No tokens were transferred."
      gasCost={report.economics.fee_usd?.text ?? "unknown"}
      etherscanUrl={report.tx?.etherscan_url}
    />
  );
}

import React from "react";

type TxReport = {
  classification: {
    intent_label: string;
    intent_kind: string;
    confidence: number;
    status: string;
    actor: string;
    actor_matches_signer: boolean;
  };
  attribution: {
    tx_signer: string;
  };
  economics: {
    token_in: { symbol: string; amount: string } | null;
    token_out: { symbol: string; amount: string } | null;
    net_usd_before_gas: { text: string; available: boolean };
  };
  tx: {
    etherscan_url: string;
  };
};

export function TxHeader({ report }: { report: TxReport }) {
  const { classification, attribution, economics, tx } = report;

  return (
    <div className="tx-header">
      {/* Intent */}
      <h1>{classification.intent_label}</h1>
      <span className="badge confidence">
        {Math.round(classification.confidence * 100)}% confidence
      </span>

      {/* Actor / Signer */}
      <div className="addresses">
        {classification.actor_matches_signer ? (
          <p>
            <strong>Address:</strong> {attribution.tx_signer}
          </p>
        ) : (
          <>
            <p>
              <strong>Signer:</strong> {attribution.tx_signer}
            </p>
            <p>
              <strong>Actor:</strong> {classification.actor}
            </p>
          </>
        )}
      </div>

      {/* Token flow summary */}
      {economics.token_in && (
        <p>
          Sent: {economics.token_in.amount} {economics.token_in.symbol}
        </p>
      )}
      {economics.token_out && (
        <p>
          Received: {economics.token_out.amount} {economics.token_out.symbol}
        </p>
      )}

      {/* Net USD */}
      {economics.net_usd_before_gas.available && (
        <p>Net value: {economics.net_usd_before_gas.text}</p>
      )}

      {/* Explorer */}
      <a href={tx.etherscan_url} target="_blank" rel="noreferrer">
        View on Etherscan ↗
      </a>
    </div>
  );
}