From 7f39ba523205883c5ac6403aa0d6b3015a94e91b Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 12 Jul 2021 19:13:12 -0300
Subject: [PATCH 1/2] Extract custom hook for 4bytes resolution

---
 src/components/MethodName.tsx | 51 ++++-------------------------------
 src/use4Bytes.ts              | 49 +++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 46 deletions(-)
 create mode 100644 src/use4Bytes.ts

diff --git a/src/components/MethodName.tsx b/src/components/MethodName.tsx
index 55ff909..446265b 100644
--- a/src/components/MethodName.tsx
+++ b/src/components/MethodName.tsx
@@ -1,58 +1,17 @@
-import React, { useState, useEffect, useContext } from "react";
-import { fourBytesURL } from "../url";
-import { RuntimeContext } from "../useRuntime";
+import React from "react";
+import { use4Bytes } from "../use4Bytes";
 
 type MethodNameProps = {
   data: string;
 };
 
 const MethodName: React.FC<MethodNameProps> = ({ data }) => {
-  const runtime = useContext(RuntimeContext);
-
-  const [name, setName] = useState<string>();
-  useEffect(() => {
-    if (data === "0x") {
-      setName("Transfer");
-      return;
-    }
-
-    let _name = data.slice(0, 10);
-
-    // 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}`);
-          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);
-        return;
-      })
-      .catch((err) => {
-        console.error(`Couldn't fetch signature URL ${signatureURL}`, err);
-      });
-
-    // Use the default 4 bytes as name
-    setName(_name);
-  }, [runtime, data]);
+  const methodName = use4Bytes(data);
 
   return (
     <div className="bg-blue-50 rounded-lg px-3 py-1 min-h-full flex items-baseline text-xs max-w-max">
-      <p className="truncate" title={name}>
-        {name}
+      <p className="truncate" title={methodName}>
+        {methodName}
       </p>
     </div>
   );
diff --git a/src/use4Bytes.ts b/src/use4Bytes.ts
new file mode 100644
index 0000000..833de27
--- /dev/null
+++ b/src/use4Bytes.ts
@@ -0,0 +1,49 @@
+import { useState, useEffect, useContext } from "react";
+import { RuntimeContext } from "./useRuntime";
+import { fourBytesURL } from "./url";
+
+export const use4Bytes = (data: string) => {
+  const runtime = useContext(RuntimeContext);
+
+  const [name, setName] = useState<string>();
+  useEffect(() => {
+    if (data === "0x") {
+      setName("Transfer");
+      return;
+    }
+
+    let _name = data.slice(0, 10);
+
+    // 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}`);
+          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);
+        return;
+      })
+      .catch((err) => {
+        console.error(`Couldn't fetch signature URL ${signatureURL}`, err);
+      });
+
+    // Use the default 4 bytes as name
+    setName(_name);
+  }, [runtime, data]);
+
+  return name;
+};

From 9128973a9b63d282207a135c6df9ca62dff9f6b3 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Tue, 13 Jul 2021 02:19:33 -0300
Subject: [PATCH 2/2] Add global method name cache

---
 src/use4Bytes.ts | 57 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/use4Bytes.ts b/src/use4Bytes.ts
index 833de27..11f29d2 100644
--- a/src/use4Bytes.ts
+++ b/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") {
-      setName("Transfer");
+    if (assetsURLPrefix === undefined || fourBytes === undefined) {
       return;
     }
 
-    let _name = data.slice(0, 10);
-
-    // Try to resolve 4bytes name
-    const fourBytes = _name.slice(2);
-    const { config } = runtime;
-    if (!config) {
-      setName(_name);
-      return;
-    }
-
-    const signatureURL = fourBytesURL(config.assetsURLPrefix ?? "", fourBytes);
+    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;
         }
 
@@ -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
-    setName(_name);
-  }, [runtime, data]);
+        // Use the default 4 bytes as name
+        setName(rawFourBytes);
+      });
+  }, [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;
 };