Add in-page cache capabilities to main resolver

src/api/address-resolver/CompositeAddressResolver.ts

@@ -1,7 +1,7 @@
 import { BaseProvider } from "@ethersproject/providers";
 import { IAddressResolver } from "./address-resolver";
 
-export type SelectedResolvedName<T> = [IAddressResolver<T>, T];
+export type SelectedResolvedName<T> = [IAddressResolver<T>, T] | null;
 
 export class CompositeAddressResolver<T = any>
   implements IAddressResolver<SelectedResolvedName<T>>
@@ -23,8 +23,6 @@ export class CompositeAddressResolver<T = any>
       }
     }
 
-    return undefined;
-    // TODO: fallback to address itself
-    // return address;
+    return null;
   }
 }

src/api/address-resolver/index.ts

@@ -32,21 +32,25 @@ resolverRendererRegistry.set(ercTokenResolver, tokenRenderer);
 // TODO: implement progressive resolving
 export const batchPopulate = async (
   provider: BaseProvider,
-  addresses: string[]
+  addresses: string[],
+  currentMap: ResolvedAddresses | undefined
 ): Promise<ResolvedAddresses> => {
   const solvers: Promise<SelectedResolvedName<any> | undefined>[] = [];
-  for (const a of addresses) {
+  const unresolvedAddresses = addresses.filter(
+    (a) => currentMap?.[a] === undefined
+  );
+  for (const a of unresolvedAddresses) {
     solvers.push(mainResolver.resolveAddress(provider, a));
   }
 
+  const resultMap: ResolvedAddresses = currentMap ? { ...currentMap } : {};
   const results = await Promise.all(solvers);
-  const resultMap: ResolvedAddresses = {};
   for (let i = 0; i < results.length; i++) {
     const r = results[i];
     if (r === undefined) {
       continue;
     }
-    resultMap[addresses[i]] = r;
+    resultMap[unresolvedAddresses[i]] = r;
   }
 
   return resultMap;

src/components/AddressOrENSName.tsx

@@ -23,7 +23,7 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   const resolvedAddress = resolvedAddresses?.[address];
   const linkable = address !== selectedAddress;
 
-  if (resolvedAddress === undefined) {
+  if (!resolvedAddress) {
     return (
       <PlainAddress
         address={address}

src/useResolvedAddresses.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { JsonRpcProvider } from "@ethersproject/providers";
 import { ProcessedTransaction, TransactionData } from "./types";
 import { batchPopulate, ResolvedAddresses } from "./api/address-resolver";
@@ -66,19 +66,27 @@ export const useResolvedAddresses = (
   addrCollector: AddressCollector
 ) => {
   const [names, setNames] = useState<ResolvedAddresses>();
-
+  const ref = useRef<ResolvedAddresses | undefined>();
   useEffect(() => {
-    if (!provider) {
-      return;
-    }
+    ref.current = names;
+  });
 
-    const populate = async () => {
-      const _addresses = addrCollector();
-      const _names = await batchPopulate(provider, _addresses);
-      setNames(_names);
-    };
-    populate();
-  }, [provider, addrCollector]);
+  useEffect(
+    () => {
+      if (!provider) {
+        return;
+      }
+
+      const populate = async () => {
+        const _addresses = addrCollector();
+        const _names = await batchPopulate(provider, _addresses, ref.current);
+        setNames(_names);
+      };
+      populate();
+    },
+    // DON'T put names variables in dependency array; this is intentional; useRef
+    [provider, addrCollector]
+  );
 
   return names;
 };