Generalize resolver framework to allow tracking of the resolver source

src/api/address-resolver/CompositeAddressResolver.ts

@@ -1,21 +1,25 @@
 import { BaseProvider } from "@ethersproject/providers";
 import { IAddressResolver } from "./address-resolver";
 
-export class CompositeAddressResolver implements IAddressResolver {
+export type SelectedResolvedName<T> = [IAddressResolver<T>, T];
-  private resolvers: IAddressResolver[] = [];
 
-  addResolver(resolver: IAddressResolver) {
+export class CompositeAddressResolver<T>
+  implements IAddressResolver<SelectedResolvedName<T>>
+{
+  private resolvers: IAddressResolver<T>[] = [];
+
+  addResolver(resolver: IAddressResolver<T>) {
     this.resolvers.push(resolver);
   }
 
   async resolveAddress(
     provider: BaseProvider,
     address: string
-  ): Promise<string | undefined> {
+  ): Promise<SelectedResolvedName<T> | undefined> {
     for (const r of this.resolvers) {
-      const name = r.resolveAddress(provider, address);
+      const name = await r.resolveAddress(provider, address);
       if (name !== undefined) {
-        return name;
+        return [r, name];
       }
     }
 

src/api/address-resolver/ENSAddressResolver.ts

@@ -1,7 +1,7 @@
 import { BaseProvider } from "@ethersproject/providers";
 import { IAddressResolver } from "./address-resolver";
 
-export class ENSAddressResolver implements IAddressResolver {
+export class ENSAddressResolver implements IAddressResolver<string> {
   async resolveAddress(
     provider: BaseProvider,
     address: string

src/api/address-resolver/ERCTokenResolver.ts

@@ -0,0 +1,24 @@
+import { BaseProvider } from "@ethersproject/providers";
+import { Contract } from "@ethersproject/contracts";
+import { IAddressResolver } from "./address-resolver";
+import erc20 from "../../erc20.json";
+
+export class ERCTokenResolver implements IAddressResolver<string> {
+  async resolveAddress(
+    provider: BaseProvider,
+    address: string
+  ): Promise<string | undefined> {
+    const erc20Contract = new Contract(address, erc20, provider);
+    try {
+      const [name, symbol, decimals] = await Promise.all([
+        erc20Contract.name(),
+        erc20Contract.symbol(),
+        erc20Contract.decimals(),
+      ]);
+      return name;
+    } catch (err) {
+      console.warn(`Couldn't get token ${address} metadata; ignoring`, err);
+    }
+    return undefined;
+  }
+}

src/api/address-resolver/address-resolver.ts

@@ -1,8 +1,8 @@
 import { BaseProvider } from "@ethersproject/providers";
 
-export interface IAddressResolver {
+export interface IAddressResolver<T> {
   resolveAddress(
     provider: BaseProvider,
     address: string
-  ): Promise<string | undefined>;
+  ): Promise<T | undefined>;
 }

src/api/address-resolver/index.ts

@@ -1,34 +1,40 @@
 import { BaseProvider } from "@ethersproject/providers";
 import { IAddressResolver } from "./address-resolver";
-import { CompositeAddressResolver } from "./CompositeAddressResolver";
+import {
+  CompositeAddressResolver,
+  SelectedResolvedName,
+} from "./CompositeAddressResolver";
 import { ENSAddressResolver } from "./ENSAddressResolver";
 
-export type ResolvedAddresses = Record<string, string>;
+export type ResolvedAddresses = Record<string, SelectedResolvedName<string>>;
 
 // Create and configure the main resolver
-const _mainResolver = new CompositeAddressResolver();
+export const ensResolver = new ENSAddressResolver();
-_mainResolver.addResolver(new ENSAddressResolver());
 
-export const mainResolver: IAddressResolver = _mainResolver;
+const _mainResolver = new CompositeAddressResolver<string>();
+_mainResolver.addResolver(ensResolver);
+
+export const mainResolver: IAddressResolver<SelectedResolvedName<string>> =
+  _mainResolver;
 
 export const batchPopulate = async (
   provider: BaseProvider,
   addresses: string[]
 ): Promise<ResolvedAddresses> => {
-  const solvers: Promise<string | undefined>[] = [];
+  const solvers: Promise<SelectedResolvedName<string> | undefined>[] = [];
   for (const a of addresses) {
     solvers.push(mainResolver.resolveAddress(provider, a));
   }
 
   const results = await Promise.all(solvers);
-  const cache: ResolvedAddresses = {};
+  const resultMap: ResolvedAddresses = {};
   for (let i = 0; i < results.length; i++) {
     const r = results[i];
     if (r === undefined) {
       continue;
     }
-    cache[addresses[i]] = r;
+    resultMap[addresses[i]] = r;
   }
 
-  return cache;
+  return resultMap;
 };

src/components/AddressOrENSName.tsx

@@ -3,7 +3,7 @@ import Address from "./Address";
 import AddressLink from "./AddressLink";
 import ENSName from "./ENSName";
 import ENSNameLink from "./ENSNameLink";
-import { ResolvedAddresses } from "../api/address-resolver";
+import { ensResolver, ResolvedAddresses } from "../api/address-resolver";
 
 type AddressOrENSNameProps = {
   address: string;
@@ -25,17 +25,17 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
     <>
       {address === selectedAddress ? (
         <>
-          {name ? (
+          {name?.[0] === ensResolver ? (
-            <ENSName name={name} address={address} />
+            <ENSName name={name[1]} address={address} />
           ) : (
             <Address address={address} />
           )}
         </>
       ) : (
         <>
-          {name ? (
+          {name?.[0] ? (
             <ENSNameLink
-              name={name}
+              name={name[1]}
               address={address}
               dontOverrideColors={dontOverrideColors}
             />