feat(dev-tools): update actions to display function name instead of c…

…allFrom (#1497)

Co-authored-by: Kevin Ingersoll <kingersoll@gmail.com>

.changeset/blue-seals-relate.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/dev-tools": minor
+---
+
+Improved rendering of transactions that make calls via World's `call` and `callFrom` methods

packages/dev-tools/src/actions/WriteSummary.tsx

@@ -1,4 +1,4 @@
-import { decodeEventLog, AbiEventSignatureNotFoundError } from "viem";
+import { decodeEventLog, AbiEventSignatureNotFoundError, decodeFunctionData, Hex } from "viem";
 import { twMerge } from "tailwind-merge";
 import { isDefined } from "@latticexyz/common/utils";
 import { PendingIcon } from "../icons/PendingIcon";
@@ -56,6 +56,17 @@ export function WriteSummary({ write }: Props) {
           .filter(isDefined)
       : null;
 
+  let functionName = write.request.functionName;
+  let functionArgs = write.request.args;
+  if (functionName === "call" || functionName === "callFrom") {
+    const functionSelectorAndArgs: Hex = write.request?.args?.length
+      ? (write.request.args[write.request.args.length - 1] as Hex)
+      : `0x`;
+    const functionData = decodeFunctionData({ abi: worldAbi, data: functionSelectorAndArgs });
+    functionName = functionData.functionName;
+    functionArgs = functionData.args;
+  }
+
   return (
     <details
       onToggle={(event) => {
@@ -73,7 +84,10 @@ export function WriteSummary({ write }: Props) {
         )}
       >
         <div className="flex-1 font-mono text-white whitespace-nowrap overflow-hidden text-ellipsis">
-          {write.request.functionName}({write.request.args?.map((value) => serialize(value)).join(", ")})
+          {functionName}({functionArgs?.map((value) => serialize(value)).join(", ")}){" "}
+          {write.request.functionName !== functionName ? (
+            <span className="text-xs text-white/40">via {write.request.functionName}</span>
+          ) : null}
         </div>
         {transactionReceipt.status === "fulfilled" ? (
           <a