Add global method name cache

src/use4Bytes.ts

@@ -2,31 +2,30 @@ import { useState, useEffect, useContext } from "react";
 import { RuntimeContext } from "./useRuntime";
 import { fourBytesURL } from "./url";
 
+const cache = new Map<string, string | null>();
+
 export const use4Bytes = (data: string) => {
   const runtime = useContext(RuntimeContext);
+  const assetsURLPrefix = runtime.config?.assetsURLPrefix;
+
+  let rawFourBytes = data.slice(0, 10);
 
   const [name, setName] = useState<string>();
+  const [fourBytes, setFourBytes] = useState<string>();
   useEffect(() => {
-    if (data === "0x") {
+    if (assetsURLPrefix === undefined || fourBytes === undefined) {
-      setName("Transfer");
       return;
     }
 
-    let _name = data.slice(0, 10);
+    const signatureURL = fourBytesURL(assetsURLPrefix, fourBytes);
-
-    // Try to resolve 4bytes name
-    const fourBytes = _name.slice(2);
-    const { config } = runtime;
-    if (!config) {
-      setName(_name);
-      return;
-    }
-
-    const signatureURL = fourBytesURL(config.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;
         }
 
@@ -35,15 +34,39 @@ export const use4Bytes = (data: string) => {
         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
+        // Use the default 4 bytes as name
-    setName(_name);
+        setName(rawFourBytes);
-  }, [runtime, data]);
+      });
+  }, [rawFourBytes, assetsURLPrefix, fourBytes]);
+
+  if (data === "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;
 };