From 9d3e2fca92e7a3d1a55fd0d571e2f5526d780bc6 Mon Sep 17 00:00:00 2001
From: ejmg <elias.jm.garcia@gmail.com>
Date: Thu, 11 Jul 2024 22:55:36 -0500
Subject: [PATCH] transaction/[hash] now use suspense, updated validators to
 work with server component rework

---
 src/app/transactions/page.tsx            | 5 +++--
 src/components/TransactionView/index.tsx | 7 ++++---
 src/lib/validators/json.ts               | 2 ++
 src/lib/validators/search.ts             | 9 ++++-----
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/app/transactions/page.tsx b/src/app/transactions/page.tsx
index 24c5dc1..09ea425 100644
--- a/src/app/transactions/page.tsx
+++ b/src/app/transactions/page.tsx
@@ -1,12 +1,13 @@
 import { TransactionsTable } from "@/components/TransactionsTable";
 import getTransactions from "@/components/TransactionsTable/getTransactions";
-import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query";
+import { getQueryClient } from "@/lib/utils";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 
 // TODO: do we want this anymore? what is the story of caching between the client and events.
 export const dynamic = "force-dynamic";
 
 const Page = () => {
-  const queryClient = new QueryClient();
+  const queryClient = getQueryClient();
 
   const defaultQueryOptions = {
     pageIndex: 0,
diff --git a/src/components/TransactionView/index.tsx b/src/components/TransactionView/index.tsx
index 02b8a42..6aedc76 100644
--- a/src/components/TransactionView/index.tsx
+++ b/src/components/TransactionView/index.tsx
@@ -1,9 +1,10 @@
 import { type FC } from "react";
-import { TransactionView as TransactionViewSchema, type Transaction, TransactionBodyView as TransactionBodyViewSchema, MemoView } from "@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1/transaction_pb";
+import { TransactionView as TransactionViewSchema, Transaction, TransactionBodyView as TransactionBodyViewSchema, MemoView } from "@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1/transaction_pb";
 import { makeActionView } from "@/lib/protobuf";
 import { TransactionBodyView } from "./TransactionBodyView";
 import { FlexRow } from "../ui/flex";
 import { ActionRow } from "../ActionView";
+import { ZodJson } from "@/lib/validators/json";
 
 const BindingSig = ActionRow;
 const MerkleRoot = ActionRow;
@@ -34,11 +35,11 @@ const makeTransactionView = ({ body, ...tx }: Transaction) : TransactionViewSche
 };
 
 interface TransactionViewProps {
-  tx: Transaction
+  tx: ZodJson
 }
 
 export const TransactionView : FC<TransactionViewProps> = ({ tx }) => {
-  const txView = makeTransactionView(tx);
+  const txView = makeTransactionView(Transaction.fromJson(tx));
   return (
     <FlexRow className="flex-wrap justify-start w-full">
       <p className="font-semibold sm:text-lg">Transaction View</p>
diff --git a/src/lib/validators/json.ts b/src/lib/validators/json.ts
index ad7a9e5..5df4dc7 100644
--- a/src/lib/validators/json.ts
+++ b/src/lib/validators/json.ts
@@ -9,3 +9,5 @@ type Json = Literal | { [key: string]: Json } | Json[];
 export const jsonSchema: z.ZodType<Json> = z.lazy(() =>
   z.union([literalSchema, z.array(jsonSchema), z.record(jsonSchema)]),
 );
+
+export type ZodJson = z.infer<typeof jsonSchema>;
diff --git a/src/lib/validators/search.ts b/src/lib/validators/search.ts
index aecade8..8a55db4 100644
--- a/src/lib/validators/search.ts
+++ b/src/lib/validators/search.ts
@@ -1,7 +1,5 @@
-import { Transaction } from "@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1/transaction_pb";
 import { z } from "zod";
 import { jsonSchema } from "./json";
-import { ibcRegistry } from "../protobuf";
 
 // This validator is to check whether a sha256 hash conforms to what is expected by the `tx_hash` column
 // of the `tx_result` table defined in cometbft's psql indexer schema.
@@ -130,14 +128,15 @@ const EventAttribute = z.array(
 );
 
 // zod schema equivalent to the /parsed/ JSON data returned by GET /api/transaction?q=<hash>
-export const TransactionResult = z.tuple([
+export const TransactionData = z.tuple([
   z.object({
     tx_hash: z.string(),
     height: z.coerce.bigint(),
     created_at: z.string().datetime(),
     events: jsonSchema.pipe(EventAttribute),
   }),
-  jsonSchema.transform((json) => Transaction.fromJson(json, { typeRegistry: ibcRegistry })),
+  jsonSchema,
+  // jsonSchema.transform((json) => Transaction.fromJson(json, { typeRegistry: ibcRegistry })),
 ]);
 
 // Schema for JSON data by GET /api/block?q=<height>
@@ -198,5 +197,5 @@ export const BlockData = z.array(
   return { tx_hashes, created_at, events };
 });
 
-export type TransactionResultPayload = z.infer<typeof TransactionResult>;
+export type TransactionDataPayload = z.infer<typeof TransactionData>;
 export type BlockDataPayload = z.infer<typeof BlockData>;