Extract ens cache hook; apply on block/address transactions page

src/AddressTransactions.tsx

@@ -12,6 +12,7 @@ import ResultHeader from "./search/ResultHeader";
 import PendingResults from "./search/PendingResults";
 import TransactionItem from "./search/TransactionItem";
 import { SearchController } from "./search/search";
+import { useENSCache } from "./useReverseCache";
 import { useFeeToggler } from "./search/useFeeToggler";
 import { provider } from "./ethersconfig";
 
@@ -41,8 +42,20 @@ const AddressTransactions: React.FC = () => {
   // If it looks like it is an ENS name, try to resolve it
   useEffect(() => {
     if (ethers.utils.isAddress(params.addressOrName)) {
+      setENS(false);
+      setError(false);
+
       // Normalize to checksummed address
-      setChecksummedAddress(ethers.utils.getAddress(params.addressOrName));
+      const _checksummedAddress = ethers.utils.getAddress(params.addressOrName);
+      if (_checksummedAddress !== params.addressOrName) {
+        // Request came with a non-checksummed address; fix the URL
+        history.replace(
+          `/address/${_checksummedAddress}${
+            params.direction ? "/" + params.direction : ""
+          }${location.search}`
+        );
+      }
+      setChecksummedAddress(_checksummedAddress);
       return;
     }
 
@@ -50,27 +63,16 @@ const AddressTransactions: React.FC = () => {
       const resolvedAddress = await provider.resolveName(params.addressOrName);
       if (resolvedAddress !== null) {
         setENS(true);
-        setChecksummedAddress(resolvedAddress);
         setError(false);
+        setChecksummedAddress(resolvedAddress);
       } else {
+        setENS(false);
         setError(true);
+        setChecksummedAddress(undefined);
       }
     };
     resolveName();
-  }, [params.addressOrName]);
+  }, [params.addressOrName, history, params.direction, location.search]);
-
-  // Request came with a non-checksummed address; fix the URL
-  if (
-    !isENS &&
-    checksummedAddress &&
-    params.addressOrName !== checksummedAddress
-  ) {
-    history.replace(
-      `/address/${checksummedAddress}${
-        params.direction ? "/" + params.direction : ""
-      }${location.search}`
-    );
-  }
 
   const [controller, setController] = useState<SearchController>();
   useEffect(() => {
@@ -128,6 +130,7 @@ const AddressTransactions: React.FC = () => {
   }, [checksummedAddress, params.direction, hash, controller]);
 
   const page = useMemo(() => controller?.getPage(), [controller]);
+  const reverseCache = useENSCache(page);
 
   document.title = `Address ${params.addressOrName} | Otterscan`;
 
@@ -189,6 +192,7 @@ const AddressTransactions: React.FC = () => {
                     <TransactionItem
                       key={tx.hash}
                       tx={tx}
+                      ensCache={reverseCache}
                       selectedAddress={checksummedAddress}
                       feeDisplay={feeDisplay}
                     />

src/BlockTransactions.tsx

@@ -11,9 +11,10 @@ import ResultHeader from "./search/ResultHeader";
 import PendingResults from "./search/PendingResults";
 import TransactionItem from "./search/TransactionItem";
 import BlockLink from "./components/BlockLink";
-import { ProcessedTransaction, ENSReverseCache } from "./types";
+import { ProcessedTransaction } from "./types";
 import { PAGE_SIZE } from "./params";
 import { useFeeToggler } from "./search/useFeeToggler";
+import { useENSCache } from "./useReverseCache";
 
 type BlockParams = {
   blockNumber: string;
@@ -80,43 +81,7 @@ const BlockTransactions: React.FC = () => {
   }, [txs, pageNumber]);
   const total = useMemo(() => txs?.length ?? 0, [txs]);
 
-  const [reverseCache, setReverseCache] = useState<ENSReverseCache>();
+  const reverseCache = useENSCache(page);
-  useEffect(() => {
-    if (!page) {
-      return;
-    }
-
-    const addrSet = new Set<string>();
-    for (const tx of page) {
-      if (tx.from) {
-        addrSet.add(tx.from);
-      }
-      if (tx.to) {
-        addrSet.add(tx.to);
-      }
-    }
-    const addresses = Array.from(addrSet);
-
-    const reverseResolve = async () => {
-      const solvers: Promise<string>[] = [];
-      for (const a of addresses) {
-        solvers.push(provider.lookupAddress(a));
-      }
-
-      const results = await Promise.all(solvers);
-      const cache: ENSReverseCache = {};
-      for (let i = 0; i < results.length; i++) {
-        if (results[i] === null) {
-          continue;
-        }
-        cache[addresses[i]] = results[i];
-      }
-      console.log("RESOLVED");
-      console.log(cache);
-      setReverseCache(cache);
-    };
-    reverseResolve();
-  }, [page]);
 
   document.title = `Block #${blockNumber} Txns | Otterscan`;
 

src/useReverseCache.ts

@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+import { ENSReverseCache, ProcessedTransaction } from "./types";
+import { provider } from "./ethersconfig";
+
+export const useENSCache = (page?: ProcessedTransaction[]) => {
+  const [reverseCache, setReverseCache] = useState<ENSReverseCache>();
+
+  useEffect(() => {
+    if (!page) {
+      return;
+    }
+
+    const addrSet = new Set<string>();
+    for (const tx of page) {
+      if (tx.from) {
+        addrSet.add(tx.from);
+      }
+      if (tx.to) {
+        addrSet.add(tx.to);
+      }
+    }
+    const addresses = Array.from(addrSet);
+
+    const reverseResolve = async () => {
+      const solvers: Promise<string>[] = [];
+      for (const a of addresses) {
+        solvers.push(provider.lookupAddress(a));
+      }
+
+      const results = await Promise.all(solvers);
+      const cache: ENSReverseCache = {};
+      for (let i = 0; i < results.length; i++) {
+        if (results[i] === null) {
+          continue;
+        }
+        cache[addresses[i]] = results[i];
+      }
+      setReverseCache(cache);
+    };
+    reverseResolve();
+  }, [page]);
+
+  return reverseCache;
+};