Add input decoding to trace

src/transaction/Details.tsx

@@ -1,9 +1,5 @@
 import React, { useMemo } from "react";
-import {
+import { TransactionDescription } from "@ethersproject/abi";
-  TransactionDescription,
-  Fragment,
-  Interface,
-} from "@ethersproject/abi";
 import { BigNumber } from "@ethersproject/bignumber";
 import { toUtf8String } from "@ethersproject/strings";
 import { Tab } from "@headlessui/react";
@@ -40,7 +36,11 @@ import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
 import ModeTab from "../components/ModeTab";
 import DecodedParamsTable from "./decoder/DecodedParamsTable";
-import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
+import {
+  rawInputTo4Bytes,
+  use4Bytes,
+  useTransactionDescription,
+} from "../use4Bytes";
 import { DevDoc, UserDoc } from "../useSourcify";
 import { ResolvedAddresses } from "../api/address-resolver";
 
@@ -81,18 +81,11 @@ const Details: React.FC<DetailsProps> = ({
 
   const fourBytes = txData.to !== null ? rawInputTo4Bytes(txData.data) : "0x";
   const fourBytesEntry = use4Bytes(fourBytes);
-  const fourBytesTxDesc = useMemo(() => {
+  const fourBytesTxDesc = useTransactionDescription(
-    if (!fourBytesEntry) {
+    fourBytesEntry,
-      return fourBytesEntry;
+    txData.data,
-    }
+    txData.value
-    if (!txData || !fourBytesEntry.signature) {
+  );
-      return undefined;
-    }
-    const sig = fourBytesEntry?.signature;
-    const functionFragment = Fragment.fromString(`function ${sig}`);
-    const intf = new Interface([functionFragment]);
-    return intf.parseTransaction({ data: txData.data, value: txData.value });
-  }, [txData, fourBytesEntry]);
 
   const resolvedTxDesc = txDesc ?? fourBytesTxDesc;
   const userMethod = txDesc ? userDoc?.methods[txDesc.signature] : undefined;

src/transaction/TraceInput.tsx

@@ -1,12 +1,18 @@
-import React from "react";
+import React, { useState } from "react";
+import { Switch } from "@headlessui/react";
 import AddressHighlighter from "../components/AddressHighlighter";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import FormattedBalance from "../components/FormattedBalance";
 import FunctionSignature from "./FunctionSignature";
+import DecodedParamsTable from "./decoder/DecodedParamsTable";
 import { TraceEntry } from "../useErigonHooks";
-import { TransactionData } from "../types";
+import { toTransactionContext, TransactionData } from "../types";
 import { ResolvedAddresses } from "../api/address-resolver";
-import { extract4Bytes, FourBytesEntry } from "../use4Bytes";
+import {
+  extract4Bytes,
+  FourBytesEntry,
+  useTransactionDescription,
+} from "../use4Bytes";
 
 type TraceInputProps = {
   t: TraceEntry;
@@ -22,35 +28,69 @@ const TraceInput: React.FC<TraceInputProps> = ({
   resolvedAddresses,
 }) => {
   const raw4Bytes = extract4Bytes(t.input);
+  const fourBytes = raw4Bytes !== null ? fourBytesMap[raw4Bytes] : null;
   const sigText =
-    raw4Bytes === null
+    raw4Bytes === null ? "<fallback>" : fourBytes?.name ?? raw4Bytes;
-      ? "<fallback>"
+  const hasParams = t.input.length > 10;
-      : fourBytesMap[raw4Bytes]?.name ?? raw4Bytes;
+
+  const fourBytesTxDesc = useTransactionDescription(
+    fourBytes,
+    t.input,
+    t.value
+  );
+
+  const [expanded, setExpanded] = useState<boolean>(false);
 
   return (
-    <div className="ml-5 flex items-baseline border rounded px-1 py-px">
+    <div className="ml-5 border rounded px-1 py-px">
-      <span className="text-xs text-gray-400 lowercase">{t.type}</span>
+      <div className="flex items-baseline">
-      <span>
+        <span className="text-xs text-gray-400 lowercase">{t.type}</span>
-        <AddressHighlighter address={t.to}>
+        <span>
-          <DecoratedAddressLink
+          <AddressHighlighter address={t.to}>
-            address={t.to}
+            <DecoratedAddressLink
-            miner={t.to === txData.confirmedData?.miner}
+              address={t.to}
-            txFrom={t.to === txData.from}
+              miner={t.to === txData.confirmedData?.miner}
-            txTo={t.to === txData.to}
+              txFrom={t.to === txData.from}
-            resolvedAddresses={resolvedAddresses}
+              txTo={t.to === txData.to}
-          />
+              resolvedAddresses={resolvedAddresses}
-        </AddressHighlighter>
+            />
-      </span>
+          </AddressHighlighter>
-      <span>.</span>
-      <FunctionSignature callType={t.type} sig={sigText} />
-      {t.value && !t.value.isZero() && (
-        <span className="text-red-700 whitespace-nowrap">
-          {"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
         </span>
+        <span>.</span>
+        <FunctionSignature callType={t.type} sig={sigText} />
+        {t.value && !t.value.isZero() && (
+          <span className="text-red-700 whitespace-nowrap">
+            {"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
+          </span>
+        )}
+        <span className="whitespace-nowrap">
+          (
+          {hasParams && (
+            <Switch checked={expanded} onChange={setExpanded}>
+              {expanded ? (
+                <span className="text-gray-400">[-]</span>
+              ) : (
+                <>[...]</>
+              )}
+            </Switch>
+          )}
+          {(!hasParams || !expanded) && <>)</>}
+        </span>
+      </div>
+      {hasParams && expanded && fourBytesTxDesc && (
+        <>
+          <div className="ml-5 my-5 mr-5">
+            <DecodedParamsTable
+              args={fourBytesTxDesc.args}
+              paramTypes={fourBytesTxDesc.functionFragment.inputs}
+              txContext={toTransactionContext(txData)}
+              hasParamNames={false}
+              resolvedAddresses={resolvedAddresses}
+            />
+          </div>
+          <div>)</div>
+        </>
       )}
-      <span className="whitespace-nowrap">
-        ({t.input.length > 10 && <>input=[0x{t.input.slice(10)}]</>})
-      </span>
     </div>
   );
 };

src/transaction/TraceItem.tsx

@@ -28,10 +28,10 @@ const TraceItem: React.FC<TraceItemProps> = ({
 
   return (
     <>
-      <div className="flex relative items-center">
+      <div className="flex relative">
-        <div className="absolute border-l border-b w-5 h-full transform -translate-y-1/2"></div>
+        <div className="absolute border-l border-b w-5 h-6 transform -translate-y-3"></div>
         {!last && (
-          <div className="absolute left-0 border-l w-5 h-full transform translate-y-1/2"></div>
+          <div className="absolute left-0 border-l w-5 h-full transform translate-y-3"></div>
         )}
         {t.children && (
           <Switch

src/use4Bytes.ts

@@ -1,6 +1,12 @@
-import { useState, useEffect, useContext } from "react";
+import { useState, useEffect, useContext, useMemo } from "react";
+import {
+  Fragment,
+  Interface,
+  TransactionDescription,
+} from "@ethersproject/abi";
 import { RuntimeContext } from "./useRuntime";
 import { fourBytesURL } from "./url";
+import { BigNumberish } from "@ethersproject/bignumber";
 
 export type FourBytesEntry = {
   name: string;
@@ -143,3 +149,25 @@ export const use4Bytes = (
   fullCache.set(fourBytes, entry);
   return entry;
 };
+
+export const useTransactionDescription = (
+  fourBytesEntry: FourBytesEntry | null | undefined,
+  data: string | undefined,
+  value: BigNumberish | undefined
+): TransactionDescription | null | undefined => {
+  const txDesc = useMemo(() => {
+    if (!fourBytesEntry) {
+      return fourBytesEntry;
+    }
+    if (!fourBytesEntry.signature || !data || !value) {
+      return undefined;
+    }
+
+    const sig = fourBytesEntry?.signature;
+    const functionFragment = Fragment.fromString(`function ${sig}`);
+    const intf = new Interface([functionFragment]);
+    return intf.parseTransaction({ data, value });
+  }, [fourBytesEntry, data, value]);
+
+  return txDesc;
+};