From 887e35ce491d8f621904566a4adbd8833aff5c92 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 31 Oct 2021 03:16:03 -0300
Subject: [PATCH] Generalize plain address/ens rendering logic

---
 src/components/Address.tsx          | 13 ------
 src/components/AddressLink.tsx      | 26 ------------
 src/components/AddressOrENSName.tsx | 64 ++++++++++++++---------------
 src/components/ENSName.tsx          | 51 +++++++++++++++++++----
 src/components/ENSNameLink.tsx      | 34 ---------------
 src/components/PlainAddress.tsx     | 38 +++++++++++++++++
 6 files changed, 112 insertions(+), 114 deletions(-)
 delete mode 100644 src/components/Address.tsx
 delete mode 100644 src/components/AddressLink.tsx
 delete mode 100644 src/components/ENSNameLink.tsx
 create mode 100644 src/components/PlainAddress.tsx

diff --git a/src/components/Address.tsx b/src/components/Address.tsx
deleted file mode 100644
index 478f4f6..0000000
--- a/src/components/Address.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-
-type AddressProps = {
-  address: string;
-};
-
-const Address: React.FC<AddressProps> = ({ address }) => (
-  <span className="font-address text-gray-400 truncate" title={address}>
-    {address}
-  </span>
-);
-
-export default Address;
diff --git a/src/components/AddressLink.tsx b/src/components/AddressLink.tsx
deleted file mode 100644
index 8353457..0000000
--- a/src/components/AddressLink.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
-
-type AddressLinkProps = {
-  address: string;
-  text?: string;
-  dontOverrideColors?: boolean;
-};
-
-const AddressLink: React.FC<AddressLinkProps> = ({
-  address,
-  text,
-  dontOverrideColors,
-}) => (
-  <NavLink
-    className={`${
-      dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
-    } font-address truncate`}
-    to={`/address/${address}`}
-    title={text ?? address}
-  >
-    {text ?? address}
-  </NavLink>
-);
-
-export default AddressLink;
diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx
index dd865d7..83fd0cd 100644
--- a/src/components/AddressOrENSName.tsx
+++ b/src/components/AddressOrENSName.tsx
@@ -1,9 +1,7 @@
 import React from "react";
-import Address from "./Address";
-import AddressLink from "./AddressLink";
-import ENSName from "./ENSName";
-import ENSNameLink from "./ENSNameLink";
 import { ensResolver, ResolvedAddresses } from "../api/address-resolver";
+import PlainAddress from "./PlainAddress";
+import ENSName from "./ENSName";
 
 type AddressOrENSNameProps = {
   address: string;
@@ -20,36 +18,34 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   dontOverrideColors,
   resolvedAddresses,
 }) => {
-  const name = resolvedAddresses?.[address];
-  return (
-    <>
-      {address === selectedAddress ? (
-        <>
-          {name?.[0] === ensResolver ? (
-            <ENSName name={name[1]} address={address} />
-          ) : (
-            <Address address={address} />
-          )}
-        </>
-      ) : (
-        <>
-          {name?.[0] ? (
-            <ENSNameLink
-              name={name[1]}
-              address={address}
-              dontOverrideColors={dontOverrideColors}
-            />
-          ) : (
-            <AddressLink
-              address={address}
-              text={text}
-              dontOverrideColors={dontOverrideColors}
-            />
-          )}
-        </>
-      )}
-    </>
-  );
+  const resolvedAddress = resolvedAddresses?.[address];
+  const linkable = address !== selectedAddress;
+
+  if (resolvedAddress === undefined) {
+    return (
+      <PlainAddress
+        address={address}
+        text={text}
+        linkable={linkable}
+        dontOverrideColors={dontOverrideColors}
+      />
+    );
+  }
+
+  const [resolver, resolvedName] = resolvedAddress;
+  if (resolver === ensResolver) {
+    return (
+      <ENSName
+        address={address}
+        text={text}
+        linkable={linkable}
+        name={resolvedName}
+        dontOverrideColors={dontOverrideColors}
+      />
+    );
+  }
+
+  return <></>;
 };
 
 export default AddressOrENSName;
diff --git a/src/components/ENSName.tsx b/src/components/ENSName.tsx
index 95f1e1f..ac1b038 100644
--- a/src/components/ENSName.tsx
+++ b/src/components/ENSName.tsx
@@ -1,25 +1,62 @@
 import React from "react";
+import { NavLink } from "react-router-dom";
 import ENSLogo from "./ensLogo.svg";
 
 type ENSNameProps = {
   name: string;
   address: string;
+  text: string | undefined;
+  linkable: boolean;
+  dontOverrideColors?: boolean;
 };
 
-const ENSName: React.FC<ENSNameProps> = ({ name, address }) => (
-  <div
-    className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
-    title={`${name}: ${address}`}
-  >
+const ENSName: React.FC<ENSNameProps> = ({
+  name,
+  address,
+  text,
+  linkable,
+  dontOverrideColors,
+}) => {
+  if (linkable) {
+    return (
+      <NavLink
+        className={`flex items-baseline space-x-1 font-sans ${
+          dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
+        } truncate`}
+        to={`/address/${name}`}
+        title={`${name}: ${address}`}
+      >
+        <Content linkable={true} name={name} />
+      </NavLink>
+    );
+  }
+
+  return (
+    <div
+      className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
+      title={`${name}: ${address}`}
+    >
+      <Content linkable={false} name={name} />
+    </div>
+  );
+};
+
+type ContentProps = {
+  linkable: boolean;
+  name: string;
+};
+
+const Content: React.FC<ContentProps> = ({ linkable, name }) => (
+  <>
     <img
-      className="self-center filter grayscale"
+      className={`self-center ${linkable ? "" : "filter grayscale"}`}
       src={ENSLogo}
       alt="ENS Logo"
       width={12}
       height={12}
     />
     <span className="truncate">{name}</span>
-  </div>
+  </>
 );
 
 export default ENSName;
diff --git a/src/components/ENSNameLink.tsx b/src/components/ENSNameLink.tsx
deleted file mode 100644
index ad5df4d..0000000
--- a/src/components/ENSNameLink.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
-import ENSLogo from "./ensLogo.svg";
-
-type ENSNameLinkProps = {
-  name: string;
-  address: string;
-  dontOverrideColors?: boolean;
-};
-
-const ENSNameLink: React.FC<ENSNameLinkProps> = ({
-  name,
-  address,
-  dontOverrideColors,
-}) => (
-  <NavLink
-    className={`flex items-baseline space-x-1 font-sans ${
-      dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
-    } truncate`}
-    to={`/address/${name}`}
-    title={`${name}: ${address}`}
-  >
-    <img
-      className="self-center"
-      src={ENSLogo}
-      alt="ENS Logo"
-      width={12}
-      height={12}
-    />
-    <span className="truncate">{name}</span>
-  </NavLink>
-);
-
-export default ENSNameLink;
diff --git a/src/components/PlainAddress.tsx b/src/components/PlainAddress.tsx
new file mode 100644
index 0000000..6ebe634
--- /dev/null
+++ b/src/components/PlainAddress.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+type PlainAddressProps = {
+  address: string;
+  text: string | undefined;
+  linkable: boolean;
+  dontOverrideColors: boolean | undefined;
+};
+
+const PlainAddress: React.FC<PlainAddressProps> = ({
+  address,
+  text,
+  linkable,
+  dontOverrideColors,
+}) => {
+  if (linkable) {
+    return (
+      <NavLink
+        className={`${
+          dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
+        } font-address truncate`}
+        to={`/address/${address}`}
+        title={text ?? address}
+      >
+        <>{text ?? address}</>
+      </NavLink>
+    );
+  }
+
+  return (
+    <span className="font-address text-gray-400 truncate" title={address}>
+      {address}
+    </span>
+  );
+};
+
+export default PlainAddress;