feat(explorer): decoded callFrom transactions (#3364)

Author: karooolis

.changeset/mighty-lions-move.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Transactions in `Observe` tab now display decoded `callFrom` function calls.

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionTableRow.tsx

@@ -8,7 +8,7 @@ import { cn } from "../../../../../../utils";
 import { Confirmations } from "./Confirmations";
 import { TimingRowExpanded } from "./TimingRowExpanded";
 import { columns } from "./TransactionsTable";
-import { ObservedTransaction } from "./useObservedTransactions";
+import { ObservedTransaction } from "./useMergedTransactions";
 
 function TransactionTableRowDataCell({
   label,

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsTable.tsx

@@ -12,7 +12,7 @@ import { BlockExplorerLink } from "./BlockExplorerLink";
 import { TimeAgo } from "./TimeAgo";
 import { TimingRowHeader } from "./TimingRowHeader";
 import { TransactionTableRow } from "./TransactionTableRow";
-import { ObservedTransaction, useObservedTransactions } from "./useObservedTransactions";
+import { ObservedTransaction, useMergedTransactions } from "./useMergedTransactions";
 
 const columnHelper = createColumnHelper<ObservedTransaction>();
 export const columns = [
@@ -101,7 +101,7 @@ export const columns = [
 ];
 
 export function TransactionsTable() {
-  const transactions = useObservedTransactions();
+  const transactions = useMergedTransactions();
   const [expanded, setExpanded] = useState<ExpandedState>({});
 
   const table = useReactTable({

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/TransactionsWatcher.tsx

@@ -74,7 +74,7 @@ export function TransactionsWatcher() {
       setTransaction({
         hash,
         writeId: writeId ?? hash,
-        from: transaction.from,
+        from: calls[0]?.from ?? transaction.from,
         timestamp,
         transaction,
         calls,

…ress]/observe/useObservedTransactions.ts …ddress]/observe/useMergedTransactions.tspackages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useObservedTransactions.ts renamed to packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useMergedTransactions.ts packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useObservedTransactions.ts renamed to packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useMergedTransactions.ts

@@ -8,6 +8,7 @@ import { store as worldStore } from "../store";
 
 export type DecodedUserOperationCall = {
   to?: Address;
+  from?: Address;
   functionName: string;
   args?: readonly unknown[];
   value?: bigint;
@@ -28,7 +29,7 @@ export type ObservedTransaction = {
   error?: BaseError;
 };
 
-export function useObservedTransactions() {
+export function useMergedTransactions() {
   const { worldAddress } = useParams<{ worldAddress: string }>();
   const transactions = useStore(worldStore, (state) => state.transactions);
   const observerWrites = useStore(observerStore, (state) => state.writes);

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/observe/utils/getDecodedUserOperationCalls.ts

@@ -1,5 +1,5 @@
 import { Abi, Address, Hex, decodeFunctionData } from "viem";
-import { DecodedUserOperationCall } from "../useObservedTransactions";
+import { DecodedUserOperationCall } from "../useMergedTransactions";
 
 export function getDecodedUserOperationCalls({
   abi,
@@ -36,16 +36,27 @@ function getDecodedUserOperationCall({
 }): DecodedUserOperationCall {
   let functionName: string | undefined;
   let args: readonly unknown[] | undefined;
+  let from: Address | undefined;
+
   try {
     const functionData = decodeFunctionData({ abi, data: data });
     functionName = functionData.functionName;
     args = functionData.args;
+
+    if (functionName === "callFrom") {
+      const [delegator, , data] = args as [Address, Hex, Hex];
+      const decodedCallData = decodeFunctionData({ abi, data });
+      functionName = decodedCallData.functionName;
+      args = decodedCallData.args;
+      from = delegator;
+    }
   } catch (error) {
     functionName = data.length > 10 ? data.slice(0, 10) : "unknown";
   }
 
   return {
     to: target,
+    from,
     functionName,
     args,
     value,

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/store.ts

@@ -1,5 +1,5 @@
 import { createStore } from "zustand";
-import { ObservedTransaction } from "./observe/useObservedTransactions";
+import { ObservedTransaction } from "./observe/useMergedTransactions";
 
 export type State = {
   transactions: ObservedTransaction[];

packages/explorer/src/observer/decorator.ts

@@ -49,7 +49,9 @@ export function observer({ explorerUrl = "http://localhost:13690", waitForTransa
 
       emit("write", {
         writeId,
-        from: client.account!.address,
+        // TODO: type as SessionClient once available from entrykit
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        from: (client as any).userAddress ?? client.account!.address,
         calls,
       });
       Promise.allSettled([write]).then(([result]) => {

packages/explorer/src/observer/messages.ts

@@ -1,6 +1,6 @@
 import { Address, Hash } from "viem";
 import { UserOperationReceipt } from "viem/account-abstraction";
-import { DecodedUserOperationCall } from "../app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useObservedTransactions";
+import { DecodedUserOperationCall } from "../app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useMergedTransactions";
 import { ReceiptSummary } from "./common";
 
 export type Messages = {

packages/explorer/src/observer/store.ts

@@ -2,7 +2,7 @@
 
 import { Address, Hash } from "viem";
 import { createStore } from "zustand/vanilla";
-import { DecodedUserOperationCall } from "../app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useObservedTransactions";
+import { DecodedUserOperationCall } from "../app/(explorer)/[chainName]/worlds/[worldAddress]/observe/useMergedTransactions";
 import { isPromiseFulfilled } from "../utils";
 import { relayChannelName } from "./common";
 import { debug } from "./debug";
@@ -12,8 +12,8 @@ export type Write = {
   writeId: string;
   type: MessageType;
   hash?: Hash;
-  userOpHash?: Hash;
   from: Address;
+  userOpHash?: Hash;
   time: number;
   calls: DecodedUserOperationCall[];
   events: Message<Exclude<MessageType, "ping">>[];