From 4c422633fd85501fed6a6213da8bcb5eb55c1d5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Abel=20Fern=C3=A1ndez?=
 <44572727+abefernan@users.noreply.github.com>
Date: Mon, 30 Sep 2024 10:28:20 +0200
Subject: [PATCH] Use new hook in tx detail

---
 components/tx-data.tsx | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/components/tx-data.tsx b/components/tx-data.tsx
index 3b6296a..a5c9bd5 100644
--- a/components/tx-data.tsx
+++ b/components/tx-data.tsx
@@ -1,9 +1,8 @@
 "use client";
 
+import { useTx } from "@/hooks/api";
 import { sequenceDiagramFromSpans } from "@/lib/mermaid";
-import { Tx, TxSchema } from "@/types/txs";
-import { useQuery } from "@tanstack/react-query";
-import { z } from "zod";
+import { Tx } from "@/types/txs";
 import Mermaid from "./mermaid";
 
 type TxDataProps = {
@@ -12,27 +11,18 @@ type TxDataProps = {
 };
 
 export default function TxData({ txId, spanId }: TxDataProps) {
-  const { isPending, error, data } = useQuery({
-    queryKey: [`tx-${txId}`],
-    queryFn: () =>
-      fetch(`http://localhost:4000/api/v1/txs?traceID=${txId}`)
-        .then((res) => res.json())
-        .then((json) => json.txs),
-  });
+  const { isPending, isFetching, error, data: spans } = useTx(txId);
 
   if (isPending) return "Loading...";
-
   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: Tx) => span.spanId === spanId);
 
   return (
     <div>
-      <Mermaid chart={mermaidChart} />
+      {!isFetching ? <Mermaid chart={mermaidChart} /> : null}
       {span ? (
         <pre>
           {JSON.stringify(