Use tx schema and type in tx detail

components/tx-data.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { sequenceDiagramFromSpans } from "@/lib/mermaid";
+import { Tx, TxSchema } from "@/types/txs";
 import { useQuery } from "@tanstack/react-query";
+import { z } from "zod";
 import Mermaid from "./mermaid";
 
 type TxDataProps = {
@@ -10,11 +12,7 @@ type TxDataProps = {
 };
 
 export default function TxData({ txId, spanId }: TxDataProps) {
-  const {
-    isPending,
-    error,
-    data: spans,
-  } = useQuery({
+  const { isPending, error, data } = useQuery({
     queryKey: [`tx-${txId}`],
     queryFn: () =>
       fetch(`http://localhost:4000/api/v1/txs?traceID=${txId}`)
@@ -26,14 +24,24 @@ export default function TxData({ txId, spanId }: TxDataProps) {
 
   if (error) return "An error has occurred: " + error.message;
 
+  const spans: Readonly<Array<Tx>> = z.array(TxSchema).parse(data);
+
   const mermaidChart = sequenceDiagramFromSpans(spans);
 
-  const span = spans.find((span: any) => span._source.spanID === spanId);
+  const span = spans.find((span: Tx) => span.spanId === spanId);
 
   return (
     <div>
       <Mermaid chart={mermaidChart} />
-      {span ? <pre>{JSON.stringify(span._source.tags, null, 2)}</pre> : null}
+      {span ? (
+        <pre>
+          {JSON.stringify(
+            Object.fromEntries(Array.from(span.tags).sort()),
+            null,
+            2,
+          )}
+        </pre>
+      ) : null}
     </div>
   );
 }