From 59ff4fd40112ac2c5274322b1085aa138d43ca1a Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 31 Oct 2021 05:10:42 -0300
Subject: [PATCH] Extract renderer interface

---
 src/api/address-resolver/address-resolver.ts |  8 ++++++++
 src/api/address-resolver/index.ts            |  9 ++++++++-
 src/components/AddressOrENSName.tsx          | 14 ++++++++------
 src/components/ENSName.tsx                   | 17 +++++++++++++++--
 4 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/api/address-resolver/address-resolver.ts b/src/api/address-resolver/address-resolver.ts
index 87ed8b8..0527b04 100644
--- a/src/api/address-resolver/address-resolver.ts
+++ b/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;
diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts
index dd8b549..6db1b1e 100644
--- a/src/api/address-resolver/index.ts
+++ b/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[]
diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx
index 83fd0cd..b10c0eb 100644
--- a/src/components/AddressOrENSName.tsx
+++ b/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;
diff --git a/src/components/ENSName.tsx b/src/components/ENSName.tsx
index ac1b038..05fe27c 100644
--- a/src/components/ENSName.tsx
+++ b/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;