transaction/[hash] now use suspense, updated validators to work with …

…server component rework

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,

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>

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>;

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>;