From 71eb34804ee9a6c74a10f896f41bf6f74cfc889c Mon Sep 17 00:00:00 2001
From: Karolis Ramanauskas <hello@karolisram.com>
Date: Fri, 4 Oct 2024 14:26:48 +0300
Subject: [PATCH] feat(explorer): integrate rejected transactions (#3251)

---
 .changeset/neat-impalas-arrive.md             |  5 ++
 .../[worldAddress]/observe/Confirmations.tsx  |  1 +
 .../observe/TransactionTableRow.tsx           | 46 ++++++++++++-------
 .../observe/TransactionsTable.tsx             | 12 +++--
 .../observe/useTransactionWatcher.ts          | 30 ++++++++----
 packages/explorer/src/observer/decorator.ts   |  2 +
 packages/explorer/src/observer/messages.ts    |  6 +--
 packages/explorer/src/observer/store.ts       |  3 ++
 8 files changed, 73 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/neat-impalas-arrive.md

diff --git a/.changeset/neat-impalas-arrive.md b/.changeset/neat-impalas-arrive.md
new file mode 100644
index 0000000000..55829e9925
--- /dev/null
+++ b/.changeset/neat-impalas-arrive.md
@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Observe tab is now populated by rejected transactions coming from the `observer` transport wrapper.
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/Confirmations.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/Confirmations.tsx
index a3a102e06c..25c91a432e 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/Confirmations.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/Confirmations.tsx
@@ -10,6 +10,7 @@ export function Confirmations({ hash }: { hash?: Hex }) {
     chainId,
     query: {
       refetchInterval: 1000,
+      enabled: !!hash,
     },
   });
 
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionTableRow.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionTableRow.tsx
index 945dbff048..5e874cdebb 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionTableRow.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionTableRow.tsx
@@ -9,17 +9,29 @@ import { Confirmations } from "./Confirmations";
 import { columns } from "./TransactionsTable";
 import { WatchedTransaction } from "./useTransactionWatcher";
 
-function TranctionTableRowDataCell({ label, children }: { label: string; children: React.ReactNode }) {
+function TransactionTableRowDataCell({
+  label,
+  status,
+  children,
+}: {
+  label: string;
+  status: WatchedTransaction["status"];
+  children: React.ReactNode;
+}) {
   return (
     <div>
       <h3 className="text-2xs font-bold uppercase text-white/60">{label}</h3>
-      <p className="pt-1 text-xs uppercase">{children ?? <Skeleton className="h-4 w-[100px]" />}</p>
+      <p className="pt-1 text-xs uppercase">
+        {children ??
+          (status === "rejected" ? <span className="text-white/60">N/A</span> : <Skeleton className="h-4 w-[100px]" />)}
+      </p>
     </div>
   );
 }
 
 export function TransactionTableRow({ row }: { row: Row<WatchedTransaction> }) {
   const data = row?.original;
+  const status = data.status;
   const logs = data?.logs;
   const receipt = data?.receipt;
 
@@ -48,25 +60,27 @@ export function TransactionTableRow({ row }: { row: Row<WatchedTransaction> }) {
             {data && (
               <>
                 <div className="grid grid-cols-2 gap-x-2 gap-y-5 sm:grid-cols-4 md:grid-cols-5">
-                  <TranctionTableRowDataCell label="Confirmations">
-                    <Confirmations hash={data.transaction?.hash} />
-                  </TranctionTableRowDataCell>
-                  <TranctionTableRowDataCell label="Tx value">
-                    {data.transaction?.value !== undefined ? `${formatEther(data.transaction.value)} ETH` : null}
-                  </TranctionTableRowDataCell>
-                  <TranctionTableRowDataCell label="Gas used">{receipt?.gasUsed.toString()}</TranctionTableRowDataCell>
-                  <TranctionTableRowDataCell label="Gas price">
+                  <TransactionTableRowDataCell label="Confirmations" status={status}>
+                    {status !== "rejected" ? <Confirmations hash={data.transaction?.hash} /> : null}
+                  </TransactionTableRowDataCell>
+                  <TransactionTableRowDataCell label="Tx value" status={status}>
+                    {data.value ? formatEther(data.value) : 0} ETH
+                  </TransactionTableRowDataCell>
+                  <TransactionTableRowDataCell label="Gas used" status={status}>
+                    {receipt?.gasUsed.toString()}
+                  </TransactionTableRowDataCell>
+                  <TransactionTableRowDataCell label="Gas price" status={status}>
                     {receipt?.effectiveGasPrice.toString()}
-                  </TranctionTableRowDataCell>
-                  <TranctionTableRowDataCell label="Tx cost">
+                  </TransactionTableRowDataCell>
+                  <TransactionTableRowDataCell label="Tx cost" status={status}>
                     {receipt ? `${formatEther(receipt.gasUsed * receipt.effectiveGasPrice)} ETH` : null}
-                  </TranctionTableRowDataCell>
+                  </TransactionTableRowDataCell>
                 </div>
 
                 <Separator className="my-5" />
 
                 <div className="flex items-start gap-x-4">
-                  <h3 className="w-[45px] text-2xs font-bold uppercase">Inputs</h3>
+                  <h3 className="w-[45px] flex-shrink-0 text-2xs font-bold uppercase">Inputs</h3>
                   {Array.isArray(data.functionData?.args) && data.functionData?.args.length > 0 ? (
                     <div className="flex-grow border border-white/20 p-2">
                       {data.functionData?.args?.map((arg, idx) => (
@@ -85,7 +99,7 @@ export function TransactionTableRow({ row }: { row: Row<WatchedTransaction> }) {
                   <>
                     <Separator className="my-5" />
                     <div className="flex items-start gap-x-4">
-                      <h3 className="w-[45px] text-2xs font-bold uppercase">Error</h3>
+                      <h3 className="w-[45px] flex-shrink-0 text-2xs font-bold uppercase">Error</h3>
                       {data.error ? (
                         <div className="flex-grow whitespace-pre-wrap border border-red-500 p-2 font-mono text-xs">
                           {data.error.message}
@@ -100,7 +114,7 @@ export function TransactionTableRow({ row }: { row: Row<WatchedTransaction> }) {
                 <Separator className="my-5" />
 
                 <div className="flex items-start gap-x-4 pb-2">
-                  <h3 className="inline-block w-[45px] pb-2 text-2xs font-bold uppercase">Logs</h3>
+                  <h3 className="inline-block w-[45px] flex-shrink-0 pb-2 text-2xs font-bold uppercase">Logs</h3>
                   {Array.isArray(logs) && logs.length > 0 ? (
                     <div className="flex-grow break-all border border-white/20 p-2 pb-3">
                       <ul>
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsTable.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsTable.tsx
index a4319762ff..40a8546b29 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsTable.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsTable.tsx
@@ -18,6 +18,9 @@ export const columns = [
   columnHelper.accessor("receipt.blockNumber", {
     header: "Block",
     cell: (row) => {
+      const status = row.row.original.status;
+      if (status === "rejected") return <span className="text-white/60">N/A</span>;
+
       const blockNumber = row.getValue();
       if (!blockNumber) return <Skeleton className="h-4 w-full" />;
       return (
@@ -28,7 +31,7 @@ export const columns = [
       );
     },
   }),
-  columnHelper.accessor("transaction.from", {
+  columnHelper.accessor("from", {
     header: "From",
     cell: (row) => {
       const from = row.getValue();
@@ -49,9 +52,9 @@ export const columns = [
       return (
         <div className="flex items-center">
           <Badge variant="secondary">{functionName}</Badge>
-          {status === "pending" && <CheckCheckIcon className="ml-2 h-4 w-4 text-white/50" />}
+          {status === "pending" && <CheckCheckIcon className="ml-2 h-4 w-4 text-white/60" />}
           {status === "success" && <CheckCheckIcon className="ml-2 h-4 w-4 text-green-400" />}
-          {status === "reverted" && <XIcon className="ml-2 h-4 w-4 text-red-400" />}
+          {(status === "reverted" || status === "rejected") && <XIcon className="ml-2 h-4 w-4 text-red-400" />}
         </div>
       );
     },
@@ -59,6 +62,9 @@ export const columns = [
   columnHelper.accessor("hash", {
     header: "Tx hash",
     cell: (row) => {
+      const status = row.row.original.status;
+      if (status === "rejected") return <span className="text-white/60">N/A</span>;
+
       const hash = row.getValue();
       if (!hash) return <Skeleton className="h-4 w-full" />;
       return (
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useTransactionWatcher.ts b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useTransactionWatcher.ts
index 57b8407103..97c5125d04 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useTransactionWatcher.ts
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useTransactionWatcher.ts
@@ -1,6 +1,7 @@
 import { useParams } from "next/navigation";
 import {
   AbiFunction,
+  Address,
   BaseError,
   DecodeFunctionDataReturnType,
   Hex,
@@ -15,17 +16,21 @@ import { useConfig, useWatchBlocks } from "wagmi";
 import { useStore } from "zustand";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { getTransaction, simulateContract, waitForTransactionReceipt } from "@wagmi/core";
+import { Message } from "../../../../../../observer/messages";
 import { Write, store } from "../../../../../../observer/store";
 import { useChain } from "../../../../hooks/useChain";
 import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery";
 
 export type WatchedTransaction = {
   hash?: Hex;
+  writeId?: string;
+  from?: Address;
   timestamp?: bigint;
   transaction?: Transaction;
   functionData?: DecodeFunctionDataReturnType;
+  value?: bigint;
   receipt?: TransactionReceipt;
-  status: "pending" | "success" | "reverted" | "unknown";
+  status: "pending" | "success" | "reverted" | "rejected" | "unknown";
   write?: Write;
   logs?: Log[];
   error?: BaseError;
@@ -63,6 +68,7 @@ export function useTransactionWatcher() {
       setTransactions((prevTransactions) => [
         {
           hash,
+          from: transaction.from,
           timestamp,
           transaction,
           status: "pending",
@@ -70,6 +76,7 @@ export function useTransactionWatcher() {
             functionName,
             args,
           },
+          value: transaction.value,
         },
         ...prevTransactions,
       ]);
@@ -114,7 +121,7 @@ export function useTransactionWatcher() {
                 receipt,
                 logs,
                 status,
-                error: transactionError,
+                error: transactionError as BaseError,
               }
             : transaction,
         ),
@@ -147,19 +154,22 @@ export function useTransactionWatcher() {
   });
 
   const mergedTransactions = useMemo((): WatchedTransaction[] => {
-    const mergedMap = new Map<Hex | undefined, WatchedTransaction>();
+    const mergedMap = new Map<string | undefined, WatchedTransaction>();
 
     for (const write of Object.values(observerWrites)) {
       const parsedAbiItem = parseAbiItem(`function ${write.functionSignature}`) as AbiFunction;
-      const functionData = {
-        functionName: parsedAbiItem.name,
-        args: write.args,
-      };
+      const writeResult = write.events.find((event): event is Message<"write:result"> => event.type === "write:result");
 
-      mergedMap.set(write.hash, {
-        status: "pending",
+      mergedMap.set(write.hash || write.writeId, {
+        from: write.from,
+        status: writeResult?.status === "rejected" ? "rejected" : "pending",
         timestamp: BigInt(write.time) / 1000n,
-        functionData,
+        functionData: {
+          functionName: parsedAbiItem.name,
+          args: write.args,
+        },
+        value: write.value,
+        error: writeResult && "reason" in writeResult ? (writeResult.reason as BaseError) : undefined,
         write,
       });
     }
diff --git a/packages/explorer/src/observer/decorator.ts b/packages/explorer/src/observer/decorator.ts
index ab4c109bf4..f5afcf1f10 100644
--- a/packages/explorer/src/observer/decorator.ts
+++ b/packages/explorer/src/observer/decorator.ts
@@ -37,8 +37,10 @@ export function observer({ explorerUrl = "http://localhost:13690", waitForTransa
       emit("write", {
         writeId,
         address: args.address,
+        from: client.account!.address,
         functionSignature: formatAbiItem(functionAbiItem),
         args: (args.args ?? []) as never,
+        value: args.value,
       });
       Promise.allSettled([write]).then(([result]) => {
         emit("write:result", { ...result, writeId });
diff --git a/packages/explorer/src/observer/messages.ts b/packages/explorer/src/observer/messages.ts
index d2d5f5db0f..2526a25fbe 100644
--- a/packages/explorer/src/observer/messages.ts
+++ b/packages/explorer/src/observer/messages.ts
@@ -6,12 +6,12 @@ export type Messages = {
   write: {
     writeId: string;
     address: Address;
+    from: Address;
     functionSignature: string;
     args: unknown[];
+    value?: bigint;
   };
-  "write:result": PromiseSettledResult<Hash> & {
-    writeId: string;
-  };
+  "write:result": PromiseSettledResult<Hash> & { writeId: string };
   waitForTransactionReceipt: {
     writeId: string;
     hash: Hash;
diff --git a/packages/explorer/src/observer/store.ts b/packages/explorer/src/observer/store.ts
index 5c4e78b414..19c2196dae 100644
--- a/packages/explorer/src/observer/store.ts
+++ b/packages/explorer/src/observer/store.ts
@@ -10,11 +10,14 @@ export type Write = {
   writeId: string;
   type: MessageType;
   hash?: Hex;
+  from?: Address;
   address: Address;
   functionSignature: string;
   args: unknown[];
+  value?: bigint;
   time: number;
   events: Message<Exclude<MessageType, "ping">>[];
+  error?: Error;
 };
 
 export type State = {