Generalize plain address/ens rendering logic

src/components/Address.tsx

@@ -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;

src/components/AddressLink.tsx

@@ -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;

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];
+  const resolvedAddress = resolvedAddresses?.[address];
+  const linkable = address !== selectedAddress;
+
+  if (resolvedAddress === undefined) {
     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
+      <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;

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 }) => (
+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;

src/components/ENSNameLink.tsx

@@ -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;

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;