Remove fourBytesMap usage; replace everything by swr

src/transaction/Trace.tsx

@@ -3,8 +3,7 @@ import ContentFrame from "../ContentFrame";
 import TransactionAddress from "../components/TransactionAddress";
 import TraceItem from "./TraceItem";
 import { TransactionData } from "../types";
-import { useBatch4Bytes } from "../use4Bytes";
+import { useTraceTransaction } from "../useErigonHooks";
-import { useTraceTransaction, useUniqueSignatures } from "../useErigonHooks";
 import { RuntimeContext } from "../useRuntime";
 
 type TraceProps = {
@@ -14,8 +13,6 @@ type TraceProps = {
 const Trace: React.FC<TraceProps> = ({ txData }) => {
   const { provider } = useContext(RuntimeContext);
   const traces = useTraceTransaction(provider, txData.transactionHash);
-  const uniqueSignatures = useUniqueSignatures(traces);
-  const sigMap = useBatch4Bytes(uniqueSignatures);
 
   return (
     <ContentFrame tabs>
@@ -27,12 +24,7 @@ const Trace: React.FC<TraceProps> = ({ txData }) => {
             </div>
             <div className="ml-5 space-y-3 self-stretch">
               {traces.map((t, i, a) => (
-                <TraceItem
+                <TraceItem key={i} t={t} last={i === a.length - 1} />
-                  key={i}
-                  t={t}
-                  last={i === a.length - 1}
-                  fourBytesMap={sigMap}
-                />
               ))}
             </div>
           </>

src/transaction/TraceInput.tsx

@@ -9,18 +9,17 @@ import ExpanderSwitch from "../components/ExpanderSwitch";
 import { TraceEntry } from "../useErigonHooks";
 import {
   extract4Bytes,
-  FourBytesEntry,
+  use4Bytes,
   useTransactionDescription,
 } from "../use4Bytes";
 
 type TraceInputProps = {
   t: TraceEntry;
-  fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
 };
 
-const TraceInput: React.FC<TraceInputProps> = ({ t, fourBytesMap }) => {
+const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
   const raw4Bytes = extract4Bytes(t.input);
-  const fourBytes = raw4Bytes !== null ? fourBytesMap[raw4Bytes] : null;
+  const fourBytes = use4Bytes(raw4Bytes);
   const sigText =
     raw4Bytes === null ? "<fallback>" : fourBytes?.name ?? raw4Bytes;
   const hasParams = t.input.length > 10;

src/transaction/TraceItem.tsx

@@ -3,17 +3,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlusSquare } from "@fortawesome/free-regular-svg-icons/faPlusSquare";
 import { faMinusSquare } from "@fortawesome/free-regular-svg-icons/faMinusSquare";
 import { Switch } from "@headlessui/react";
-import { FourBytesEntry } from "../use4Bytes";
 import { TraceGroup } from "../useErigonHooks";
 import TraceInput from "./TraceInput";
 
 type TraceItemProps = {
   t: TraceGroup;
   last: boolean;
-  fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
 };
 
-const TraceItem: React.FC<TraceItemProps> = ({ t, last, fourBytesMap }) => {
+const TraceItem: React.FC<TraceItemProps> = ({ t, last }) => {
   const [expanded, setExpanded] = useState<boolean>(true);
 
   return (
@@ -35,7 +33,7 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last, fourBytesMap }) => {
             />
           </Switch>
         )}
-        <TraceInput t={t} fourBytesMap={fourBytesMap} />
+        <TraceInput t={t} />
       </div>
       {t.children && (
         <div
@@ -43,7 +41,7 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last, fourBytesMap }) => {
             expanded ? "" : "hidden"
           }`}
         >
-          <TraceChildren c={t.children} fourBytesMap={fourBytesMap} />
+          <TraceChildren c={t.children} />
         </div>
       )}
     </>
@@ -52,24 +50,16 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, last, fourBytesMap }) => {
 
 type TraceChildrenProps = {
   c: TraceGroup[];
-  fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
 };
 
-const TraceChildren: React.FC<TraceChildrenProps> = React.memo(
+const TraceChildren: React.FC<TraceChildrenProps> = React.memo(({ c }) => {
-  ({ c, fourBytesMap }) => {
+  return (
-    return (
+    <>
-      <>
+      {c.map((tc, i, a) => (
-        {c.map((tc, i, a) => (
+        <TraceItem key={i} t={tc} last={i === a.length - 1} />
-          <TraceItem
+      ))}
-            key={i}
+    </>
-            t={tc}
+  );
-            last={i === a.length - 1}
+});
-            fourBytesMap={fourBytesMap}
-          />
-        ))}
-      </>
-    );
-  }
-);
 
 export default TraceItem;

src/use4Bytes.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext, useMemo } from "react";
+import { useContext, useMemo } from "react";
 import {
   Fragment,
   Interface,
@@ -14,8 +14,6 @@ export type FourBytesEntry = {
   signature: string | undefined;
 };
 
-export type FourBytesMap = Record<string, FourBytesEntry | null | undefined>;
-
 /**
  * Given a hex input data; extract the method selector
  *
@@ -61,38 +59,6 @@ const fetch4Bytes = async (
   }
 };
 
-// TODO: migrate to swr and merge with use4Bytes
-export const useBatch4Bytes = (
-  rawFourByteSigs: string[] | undefined
-): FourBytesMap => {
-  const runtime = useContext(RuntimeContext);
-  const assetsURLPrefix = runtime.config?.assetsURLPrefix;
-
-  const [fourBytesMap, setFourBytesMap] = useState<FourBytesMap>({});
-  useEffect(() => {
-    if (!rawFourByteSigs || assetsURLPrefix === undefined) {
-      setFourBytesMap({});
-      return;
-    }
-
-    const loadSigs = async () => {
-      const promises = rawFourByteSigs.map((s) =>
-        fetch4Bytes(assetsURLPrefix, s.slice(2))
-      );
-      const results = await Promise.all(promises);
-
-      const _fourBytesMap: Record<string, FourBytesEntry | null> = {};
-      for (let i = 0; i < rawFourByteSigs.length; i++) {
-        _fourBytesMap[rawFourByteSigs[i]] = results[i];
-      }
-      setFourBytesMap(_fourBytesMap);
-    };
-    loadSigs();
-  }, [assetsURLPrefix, rawFourByteSigs]);
-
-  return fourBytesMap;
-};
-
 /**
  * Extract 4bytes DB info
  *

src/useErigonHooks.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider";
 import { JsonRpcProvider } from "@ethersproject/providers";
 import { getAddress } from "@ethersproject/address";
@@ -6,7 +6,6 @@ import { Contract } from "@ethersproject/contracts";
 import { defaultAbiCoder } from "@ethersproject/abi";
 import { BigNumber } from "@ethersproject/bignumber";
 import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
-import { extract4Bytes } from "./use4Bytes";
 import { getInternalOperations } from "./nodeFunctions";
 import {
   TokenMetas,
@@ -408,46 +407,6 @@ export const useTraceTransaction = (
   return traceGroups;
 };
 
-/**
- * Flatten a trace tree and extract and dedup 4byte function signatures
- */
-export const useUniqueSignatures = (traces: TraceGroup[] | undefined) => {
-  const uniqueSignatures = useMemo(() => {
-    if (!traces) {
-      return undefined;
-    }
-
-    const sigs = new Set<string>();
-    let nextTraces: TraceGroup[] = [...traces];
-    while (nextTraces.length > 0) {
-      const traces = nextTraces;
-      nextTraces = [];
-
-      for (const t of traces) {
-        if (
-          t.type === "CALL" ||
-          t.type === "DELEGATECALL" ||
-          t.type === "STATICCALL" ||
-          t.type === "CALLCODE"
-        ) {
-          const fourBytes = extract4Bytes(t.input);
-          if (fourBytes) {
-            sigs.add(fourBytes);
-          }
-        }
-
-        if (t.children) {
-          nextTraces.push(...t.children);
-        }
-      }
-    }
-
-    return [...sigs];
-  }, [traces]);
-
-  return uniqueSignatures;
-};
-
 const hasCode = async (
   provider: JsonRpcProvider,
   address: ChecksummedAddress