Remove deprecated use4Bytes hook

src/components/MethodName.tsx

@@ -7,8 +7,9 @@ type MethodNameProps = {
 
 const MethodName: React.FC<MethodNameProps> = ({ data }) => {
   const rawFourBytes = rawInputTo4Bytes(data);
-  const methodName = use4Bytes(rawFourBytes);
-  const isSimpleTransfer = data === "0x";
+  const fourBytesEntry = use4Bytes(rawFourBytes);
+  const methodName = fourBytesEntry?.name ?? rawFourBytes;
+  const isSimpleTransfer = rawFourBytes === "0x";
   const methodTitle = isSimpleTransfer
     ? "ETH Transfer"
     : methodName === rawFourBytes

src/transaction/Details.tsx

@@ -36,7 +36,7 @@ import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
 import ModeTab from "../components/ModeTab";
 import DecodedParamsTable from "./decoder/DecodedParamsTable";
-import { rawInputTo4Bytes, use4BytesFull } from "../use4Bytes";
+import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -68,7 +68,7 @@ const Details: React.FC<DetailsProps> = ({
   }, [txData]);
 
   const fourBytes = rawInputTo4Bytes(txData.data);
-  const fourBytesEntry = use4BytesFull(fourBytes);
+  const fourBytesEntry = use4Bytes(fourBytes);
   const fourBytesTxDesc = useMemo(() => {
     if (!txData || !fourBytesEntry?.signatureWithoutParamNames) {
       return undefined;

src/use4Bytes.ts

@@ -2,8 +2,6 @@ import { useState, useEffect, useContext } from "react";
 import { RuntimeContext } from "./useRuntime";
 import { fourBytesURL } from "./url";
 
-const cache = new Map<string, string | null>();
-
 export type FourBytesEntry = {
   name: string;
   signatureWithoutParamNames: string | undefined;
@@ -18,72 +16,6 @@ const simpleTransfer: FourBytesEntry = {
 
 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;
-
-  const [name, setName] = useState<string>();
-  const [fourBytes, setFourBytes] = useState<string>();
-  useEffect(() => {
-    if (assetsURLPrefix === undefined || fourBytes === undefined) {
-      return;
-    }
-
-    const signatureURL = fourBytesURL(assetsURLPrefix, fourBytes);
-    fetch(signatureURL)
-      .then(async (res) => {
-        if (!res.ok) {
-          console.error(`Signature does not exist in 4bytes DB: ${fourBytes}`);
-
-          // Use the default 4 bytes as name
-          setName(rawFourBytes);
-          cache.set(fourBytes, 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);
-        setName(method);
-        cache.set(fourBytes, method);
-        return;
-      })
-      .catch((err) => {
-        console.error(`Couldn't fetch signature URL ${signatureURL}`, err);
-
-        // Use the default 4 bytes as name
-        setName(rawFourBytes);
-      });
-  }, [rawFourBytes, assetsURLPrefix, fourBytes]);
-
-  if (rawFourBytes === "0x") {
-    return "Transfer";
-  }
-  if (assetsURLPrefix === undefined) {
-    return rawFourBytes;
-  }
-
-  // Try to resolve 4bytes name
-  const entry = cache.get(rawFourBytes.slice(2));
-  if (entry === null) {
-    return rawFourBytes;
-  }
-  if (entry !== undefined) {
-    // Simulates LRU
-    cache.delete(entry);
-    cache.set(rawFourBytes.slice(2), entry);
-    return entry;
-  }
-  if (name === undefined && fourBytes === undefined) {
-    setFourBytes(rawFourBytes.slice(2));
-    return "";
-  }
-
-  return name;
-};
-
 export const rawInputTo4Bytes = (rawInput: string) => rawInput.slice(0, 10);
 
 /**
@@ -91,7 +23,7 @@ export const rawInputTo4Bytes = (rawInput: string) => rawInput.slice(0, 10);
  *
  * @param rawFourBytes an hex string containing the 4bytes signature in the "0xXXXXXXXX" format.
  */
-export const use4BytesFull = (
+export const use4Bytes = (
   rawFourBytes: string
 ): FourBytesEntry | null | undefined => {
   if (rawFourBytes !== "0x") {