Merge branch 'feature/integrate-swr' into develop

package-lock.json

@@ -46,6 +46,7 @@
         "react-scripts": "4.0.3",
         "react-syntax-highlighter": "^15.4.5",
         "serve": "^13.0.2",
+        "swr": "^1.1.1",
         "typescript": "^4.5.4",
         "use-keyboard-shortcut": "^1.1.0",
         "web-vitals": "^1.0.1"
@@ -17205,6 +17206,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.1.1.tgz",
+      "integrity": "sha512-ZpUHyU3N3snj2QGFeE2Fd3BXl1CVS6YQIQGb1ttPAkTmvwZqDyV3GRMNPsaeAYCBM74tfn4XbKx28FVQR0mS7Q==",
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "license": "MIT"
@@ -31069,6 +31078,12 @@
         }
       }
     },
+    "swr": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.1.1.tgz",
+      "integrity": "sha512-ZpUHyU3N3snj2QGFeE2Fd3BXl1CVS6YQIQGb1ttPAkTmvwZqDyV3GRMNPsaeAYCBM74tfn4XbKx28FVQR0mS7Q==",
+      "requires": {}
+    },
     "symbol-tree": {
       "version": "3.2.4"
     },

package.json

@@ -41,6 +41,7 @@
     "react-scripts": "4.0.3",
     "react-syntax-highlighter": "^15.4.5",
     "serve": "^13.0.2",
+    "swr": "^1.1.1",
     "typescript": "^4.5.4",
     "use-keyboard-shortcut": "^1.1.0",
     "web-vitals": "^1.0.1"

src/components/MethodName.tsx

@@ -1,20 +1,12 @@
 import React from "react";
-import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
+import { useMethodSelector } from "../use4Bytes";
 
 type MethodNameProps = {
   data: string;
 };
 
 const MethodName: React.FC<MethodNameProps> = ({ data }) => {
-  const rawFourBytes = rawInputTo4Bytes(data);
-  const fourBytesEntry = use4Bytes(rawFourBytes);
-  const methodName = fourBytesEntry?.name ?? rawFourBytes;
-  const isSimpleTransfer = rawFourBytes === "0x";
-  const methodTitle = isSimpleTransfer
-    ? "ETH Transfer"
-    : methodName === rawFourBytes
-    ? methodName
-    : `${methodName} [${rawFourBytes}]`;
+  const [isSimpleTransfer, methodName, methodTitle] = useMethodSelector(data);
 
   return (
     <div

src/transaction/Details.tsx

@@ -37,7 +37,7 @@ import PercentagePosition from "../components/PercentagePosition";
 import DecodedParamsTable from "./decoder/DecodedParamsTable";
 import InputDecoder from "./decoder/InputDecoder";
 import {
-  rawInputTo4Bytes,
+  extract4Bytes,
   use4Bytes,
   useTransactionDescription,
 } from "../use4Bytes";
@@ -74,7 +74,8 @@ const Details: React.FC<DetailsProps> = ({
     txData.confirmedData?.blockBaseFeePerGas !== undefined &&
     txData.confirmedData?.blockBaseFeePerGas !== null;
 
-  const fourBytes = txData.to !== null ? rawInputTo4Bytes(txData.data) : "0x";
+  const fourBytes =
+    txData.to !== null ? extract4Bytes(txData.data) ?? "0x" : "0x";
   const fourBytesEntry = use4Bytes(fourBytes);
   const fourBytesTxDesc = useTransactionDescription(
     fourBytesEntry,

src/use4Bytes.ts

@@ -4,9 +4,10 @@ import {
   Interface,
   TransactionDescription,
 } from "@ethersproject/abi";
+import { BigNumberish } from "@ethersproject/bignumber";
+import useSWR from "swr";
 import { RuntimeContext } from "./useRuntime";
 import { fourBytesURL } from "./url";
-import { BigNumberish } from "@ethersproject/bignumber";
 
 export type FourBytesEntry = {
   name: string;
@@ -15,13 +16,14 @@ export type FourBytesEntry = {
 
 export type FourBytesMap = Record<string, FourBytesEntry | null | undefined>;
 
-const simpleTransfer: FourBytesEntry = {
-  name: "transfer",
-  signature: undefined,
-};
-
-const fullCache = new Map<string, FourBytesEntry | null>();
-
+/**
+ * Given a hex input data; extract the method selector
+ *
+ * @param rawInput Raw tx input including the "0x"
+ * @returns the first 4 bytes, including the "0x" or null if the input
+ * contains an invalid selector, e.g., txs with 0x00 data; simple transfers (0x)
+ * return null as well as it is not a method selector
+ */
 export const extract4Bytes = (rawInput: string): string | null => {
   if (rawInput.length < 10) {
     return null;
@@ -29,8 +31,6 @@ export const extract4Bytes = (rawInput: string): string | null => {
   return rawInput.slice(0, 10);
 };
 
-export const rawInputTo4Bytes = (rawInput: string) => rawInput.slice(0, 10);
-
 const fetch4Bytes = async (
   assetsURLPrefix: string,
   fourBytes: string
@@ -61,6 +61,7 @@ const fetch4Bytes = async (
   }
 };
 
+// TODO: migrate to swr and merge with use4Bytes
 export const useBatch4Bytes = (
   rawFourByteSigs: string[] | undefined
 ): FourBytesMap => {
@@ -98,56 +99,60 @@ export const useBatch4Bytes = (
  * @param rawFourBytes an hex string containing the 4bytes signature in the "0xXXXXXXXX" format.
  */
 export const use4Bytes = (
-  rawFourBytes: string
+  rawFourBytes: string | null
 ): 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}"`
-      );
-    }
+  if (rawFourBytes !== null && !rawFourBytes.startsWith("0x")) {
+    throw new Error(
+      `rawFourBytes must contain a bytes hex string starting with 0x; received value: "${rawFourBytes}"`
+    );
   }
 
-  const runtime = useContext(RuntimeContext);
-  const assetsURLPrefix = runtime.config?.assetsURLPrefix;
+  const { config } = useContext(RuntimeContext);
+  const assetsURLPrefix = config?.assetsURLPrefix;
 
-  const fourBytes = rawFourBytes.slice(2);
-  const [entry, setEntry] = useState<FourBytesEntry | null | undefined>(
-    fullCache.get(fourBytes)
-  );
-  useEffect(() => {
+  const fourBytesFetcher = (key: string | null) => {
+    // TODO: throw error?
     if (assetsURLPrefix === undefined) {
-      return;
+      return undefined;
     }
-    if (fourBytes === "") {
-      return;
+    if (key === null || key === "0x") {
+      return undefined;
     }
 
-    const loadSig = async () => {
-      const entry = await fetch4Bytes(assetsURLPrefix, fourBytes);
-      fullCache.set(fourBytes, entry);
-      setEntry(entry);
-    };
-    loadSig();
-  }, [fourBytes, assetsURLPrefix]);
+    // Handle simple transfers with invalid selector like tx:
+    // 0x8bcbdcc1589b5c34c1e55909c8269a411f0267a4fed59a73dd4348cc71addbb9,
+    // which contains 0x00 as data
+    if (key.length !== 10) {
+      return undefined;
+    }
 
-  if (rawFourBytes === "0x") {
-    return simpleTransfer;
-  }
-  if (assetsURLPrefix === undefined) {
+    return fetch4Bytes(assetsURLPrefix, key.slice(2));
+  };
+
+  const { data, error } = useSWR<FourBytesEntry | null | undefined>(
+    rawFourBytes,
+    fourBytesFetcher
+  );
+  if (error) {
     return undefined;
   }
+  return data;
+};
 
-  // Try to resolve 4bytes name
-  if (entry === null || entry === undefined) {
-    return entry;
-  }
+export const useMethodSelector = (data: string): [boolean, string, string] => {
+  const rawFourBytes = extract4Bytes(data);
+  const fourBytesEntry = use4Bytes(rawFourBytes);
+  const isSimpleTransfer = data === "0x";
+  const methodName = isSimpleTransfer
+    ? "transfer"
+    : fourBytesEntry?.name ?? rawFourBytes ?? "-";
+  const methodTitle = isSimpleTransfer
+    ? "ETH Transfer"
+    : methodName === rawFourBytes
+    ? methodName
+    : `${methodName} [${rawFourBytes}]`;
 
-  // Simulates LRU
-  // TODO: implement LRU purging
-  fullCache.delete(fourBytes);
-  fullCache.set(fourBytes, entry);
-  return entry;
+  return [isSimpleTransfer, methodName, methodTitle];
 };
 
 export const useTransactionDescription = (