Migrate search results to page collector name hooks

src/AddressTransactions.tsx

@@ -26,7 +26,7 @@ import PendingResults from "./search/PendingResults";
 import TransactionItem from "./search/TransactionItem";
 import { SearchController } from "./search/search";
 import { RuntimeContext } from "./useRuntime";
-import { useENSCache } from "./useReverseCache";
+import { pageCollector, useResolvedAddresses } from "./useResolvedAddresses";
 import { useFeeToggler } from "./search/useFeeToggler";
 import { SelectionContext, useSelection } from "./useSelection";
 import { useMultipleETHUSDOracle } from "./usePriceOracle";
@@ -165,7 +165,8 @@ const AddressTransactions: React.FC = () => {
   }, [provider, checksummedAddress, params.direction, hash, controller]);
 
   const page = useMemo(() => controller?.getPage(), [controller]);
-  const resolvedAddresses = useENSCache(provider, page);
+  const addrCollector = useMemo(() => pageCollector(page), [page]);
+  const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
 
   const blockTags: BlockTag[] = useMemo(() => {
     if (!page) {

src/block/BlockTransactionResults.tsx

@@ -8,7 +8,7 @@ import TransactionItem from "../search/TransactionItem";
 import { useFeeToggler } from "../search/useFeeToggler";
 import { RuntimeContext } from "../useRuntime";
 import { SelectionContext, useSelection } from "../useSelection";
-import { useENSCache } from "../useReverseCache";
+import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses";
 import { ProcessedTransaction } from "../types";
 import { PAGE_SIZE } from "../params";
 import { useMultipleETHUSDOracle } from "../usePriceOracle";
@@ -29,7 +29,8 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
   const selectionCtx = useSelection();
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
   const { provider } = useContext(RuntimeContext);
-  const resolvedAddresses = useENSCache(provider, page);
+  const addrCollector = useMemo(() => pageCollector(page), [page]);
+  const resolvedAddresses = useResolvedAddresses(provider, addrCollector);
   const blockTags = useMemo(() => [blockTag], [blockTag]);
   const priceMap = useMultipleETHUSDOracle(provider, blockTags);
 

src/useResolvedAddresses.ts

@@ -0,0 +1,48 @@
+import { useState, useEffect } from "react";
+import { JsonRpcProvider } from "@ethersproject/providers";
+import { ProcessedTransaction } from "./types";
+import { batchPopulate, ResolvedAddresses } from "./api/address-resolver";
+
+export type AddressCollector = () => string[];
+
+export const pageCollector =
+  (page: ProcessedTransaction[] | undefined): AddressCollector =>
+  () => {
+    if (!page) {
+      return [];
+    }
+
+    const uniqueAddresses = new Set<string>();
+    for (const tx of page) {
+      if (tx.from) {
+        uniqueAddresses.add(tx.from);
+      }
+      if (tx.to) {
+        uniqueAddresses.add(tx.to);
+      }
+    }
+
+    return Array.from(uniqueAddresses);
+  };
+
+export const useResolvedAddresses = (
+  provider: JsonRpcProvider | undefined,
+  addrCollector: AddressCollector
+) => {
+  const [names, setNames] = useState<ResolvedAddresses>();
+
+  useEffect(() => {
+    if (!provider) {
+      return;
+    }
+
+    const populate = async () => {
+      const _addresses = addrCollector();
+      const _names = await batchPopulate(provider, _addresses);
+      setNames(_names);
+    };
+    populate();
+  }, [provider, addrCollector]);
+
+  return names;
+};

src/useReverseCache.ts

@@ -1,36 +0,0 @@
-import { useState, useEffect } from "react";
-import { JsonRpcProvider } from "@ethersproject/providers";
-import { ProcessedTransaction } from "./types";
-import { batchPopulate, ResolvedAddresses } from "./api/address-resolver";
-
-export const useENSCache = (
-  provider?: JsonRpcProvider,
-  page?: ProcessedTransaction[]
-) => {
-  const [reverseCache, setReverseCache] = useState<ResolvedAddresses>();
-
-  useEffect(() => {
-    if (!provider || !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 cache = await batchPopulate(provider, addresses);
-      setReverseCache(cache);
-    };
-    reverseResolve();
-  }, [provider, page]);
-
-  return reverseCache;
-};