First working version of tx input decoding from 4bytes DB; if there is 4bytes AND sourcify info, prioritize sourcify for completeness

src/transaction/Details.tsx

@@ -1,5 +1,9 @@
 import React, { useMemo } from "react";
-import { TransactionDescription } from "@ethersproject/abi";
+import {
+  TransactionDescription,
+  Fragment,
+  Interface,
+} from "@ethersproject/abi";
 import { BigNumber } from "@ethersproject/bignumber";
 import { toUtf8String } from "@ethersproject/strings";
 import { Tab } from "@headlessui/react";
@@ -32,6 +36,7 @@ import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
 import ModeTab from "../components/ModeTab";
 import DecodedParamsTable from "./DecodedParamsTable";
+import { rawInputTo4Bytes, use4BytesFull } from "../use4Bytes";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -62,6 +67,20 @@ const Details: React.FC<DetailsProps> = ({
     }
   }, [txData]);
 
+  const fourBytes = rawInputTo4Bytes(txData.data);
+  const fourBytesEntry = use4BytesFull(fourBytes);
+  const fourBytesTxDesc = useMemo(() => {
+    if (!txData || !fourBytesEntry?.signatureWithoutParamNames) {
+      return undefined;
+    }
+    const sig = fourBytesEntry?.signatureWithoutParamNames;
+    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;
+
   return (
     <ContentFrame tabs>
       <InfoRow title="Transaction Hash">
@@ -322,14 +341,16 @@ const Details: React.FC<DetailsProps> = ({
           </Tab.List>
           <Tab.Panels>
             <Tab.Panel>
-              {txDesc === undefined ? (
+              {fourBytes === "0x" ? (
+                <>No parameters</>
+              ) : resolvedTxDesc === undefined ? (
                 <>Waiting for data...</>
-              ) : txDesc === null ? (
+              ) : resolvedTxDesc === null ? (
                 <>No decoded data</>
               ) : (
                 <DecodedParamsTable
-                  args={txDesc.args}
+                  args={resolvedTxDesc.args}
-                  paramTypes={txDesc.functionFragment.inputs}
+                  paramTypes={resolvedTxDesc.functionFragment.inputs}
                   txData={txData}
                 />
               )}

src/use4Bytes.ts

@@ -4,6 +4,21 @@ import { fourBytesURL } from "./url";
 
 const cache = new Map<string, string | null>();
 
+export type FourBytesEntry = {
+  name: string;
+  signatureWithoutParamNames: string | undefined;
+  signatures: string[] | undefined;
+};
+
+const simpleTransfer: FourBytesEntry = {
+  name: "Transfer",
+  signatureWithoutParamNames: undefined,
+  signatures: undefined,
+};
+
+const fullCache = new Map<string, FourBytesEntry | null>();
+
+// TODO: deprecate and remove
 export const use4Bytes = (rawFourBytes: string) => {
   const runtime = useContext(RuntimeContext);
   const assetsURLPrefix = runtime.config?.assetsURLPrefix;
@@ -68,3 +83,85 @@ export const use4Bytes = (rawFourBytes: string) => {
 
   return name;
 };
+
+export const rawInputTo4Bytes = (rawInput: string) => rawInput.substr(0, 10);
+
+/**
+ * Extract 4bytes DB info
+ *
+ * @param rawFourBytes an hex string containing the 4bytes signature in the "0xXXXXXXXX" format.
+ */
+export const use4BytesFull = (
+  rawFourBytes: string
+): FourBytesEntry | null | undefined => {
+  if (rawFourBytes !== "0x") {
+    if (rawFourBytes.length !== 10 || !rawFourBytes.startsWith("0x")) {
+      throw new Error(
+        `rawFourBytes must contain a 4 bytes hex method signature starting with 0x; received value: "${rawFourBytes}"`
+      );
+    }
+  }
+
+  const runtime = useContext(RuntimeContext);
+  const assetsURLPrefix = runtime.config?.assetsURLPrefix;
+
+  const fourBytes = rawFourBytes.slice(2);
+  const [entry, setEntry] = useState<FourBytesEntry | null | undefined>(
+    fullCache.get(fourBytes)
+  );
+  useEffect(() => {
+    if (assetsURLPrefix === undefined) {
+      return;
+    }
+    if (fourBytes === "") {
+      return;
+    }
+
+    const signatureURL = fourBytesURL(assetsURLPrefix, fourBytes);
+    fetch(signatureURL)
+      .then(async (res) => {
+        if (!res.ok) {
+          console.error(`Signature does not exist in 4bytes DB: ${fourBytes}`);
+          fullCache.set(fourBytes, null);
+          setEntry(null);
+          return;
+        }
+
+        const sig = await res.text();
+        const cut = sig.indexOf("(");
+        let method = sig.slice(0, cut);
+        method = method.charAt(0).toUpperCase() + method.slice(1);
+
+        const entry: FourBytesEntry = {
+          name: method,
+          signatureWithoutParamNames: sig,
+          signatures: undefined,
+        };
+        setEntry(entry);
+        fullCache.set(fourBytes, entry);
+      })
+      .catch((err) => {
+        console.error(`Couldn't fetch signature URL ${signatureURL}`, err);
+        setEntry(null);
+        fullCache.set(fourBytes, null);
+      });
+  }, [fourBytes, assetsURLPrefix]);
+
+  if (rawFourBytes === "0x") {
+    return simpleTransfer;
+  }
+  if (assetsURLPrefix === undefined) {
+    return undefined;
+  }
+
+  // Try to resolve 4bytes name
+  if (entry === null || entry === undefined) {
+    return entry;
+  }
+
+  // Simulates LRU
+  // TODO: implement LRU purging
+  fullCache.delete(fourBytes);
+  fullCache.set(fourBytes, entry);
+  return entry;
+};