Extract renderer interface

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { BaseProvider } from "@ethersproject/providers";
 
 export interface IAddressResolver<T> {
@@ -6,3 +7,10 @@ export interface IAddressResolver<T> {
     address: string
   ): Promise<T | undefined>;
 }
+
+export type ResolvedAddressRenderer = (
+  address: string,
+  resolvedAddress: string,
+  linkable: boolean,
+  dontOverrideColors: boolean
+) => React.ReactElement;

src/api/address-resolver/index.ts

@@ -1,5 +1,6 @@
 import { BaseProvider } from "@ethersproject/providers";
-import { IAddressResolver } from "./address-resolver";
+import { ensRenderer } from "../../components/ENSName";
+import { IAddressResolver, ResolvedAddressRenderer } from "./address-resolver";
 import {
   CompositeAddressResolver,
   SelectedResolvedName,
@@ -17,6 +18,12 @@ _mainResolver.addResolver(ensResolver);
 export const mainResolver: IAddressResolver<SelectedResolvedName<string>> =
   _mainResolver;
 
+export const resolverRendererRegistry = new Map<
+  IAddressResolver<string>,
+  ResolvedAddressRenderer
+>();
+resolverRendererRegistry.set(ensResolver, ensRenderer);
+
 export const batchPopulate = async (
   provider: BaseProvider,
   addresses: string[]

src/components/AddressOrENSName.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import { ensResolver, ResolvedAddresses } from "../api/address-resolver";
+import {
+  ResolvedAddresses,
+  resolverRendererRegistry,
+} from "../api/address-resolver";
 import PlainAddress from "./PlainAddress";
-import ENSName from "./ENSName";
 
 type AddressOrENSNameProps = {
   address: string;
@@ -33,19 +35,19 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   }
 
   const [resolver, resolvedName] = resolvedAddress;
-  if (resolver === ensResolver) {
+  const renderer = resolverRendererRegistry.get(resolver);
+  if (renderer === undefined) {
     return (
-      <ENSName
+      <PlainAddress
         address={address}
         text={text}
         linkable={linkable}
-        name={resolvedName}
         dontOverrideColors={dontOverrideColors}
       />
     );
   }
 
-  return <></>;
+  return renderer(address, resolvedName, linkable, !!dontOverrideColors);
 };
 
 export default AddressOrENSName;

src/components/ENSName.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
+import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolver";
 import ENSLogo from "./ensLogo.svg";
 
 type ENSNameProps = {
   name: string;
   address: string;
-  text: string | undefined;
   linkable: boolean;
   dontOverrideColors?: boolean;
 };
@@ -13,7 +13,6 @@ type ENSNameProps = {
 const ENSName: React.FC<ENSNameProps> = ({
   name,
   address,
-  text,
   linkable,
   dontOverrideColors,
 }) => {
@@ -59,4 +58,18 @@ const Content: React.FC<ContentProps> = ({ linkable, name }) => (
   </>
 );
 
+export const ensRenderer: ResolvedAddressRenderer = (
+  address,
+  resolvedAddress,
+  linkable,
+  dontOverrideColors
+) => (
+  <ENSName
+    address={address}
+    name={resolvedAddress}
+    linkable={linkable}
+    dontOverrideColors={dontOverrideColors}
+  />
+);
+
 export default ENSName;