Flatten DecoratedAddressLink component

src/components/AddressOrENSName.tsx

@@ -1,54 +0,0 @@
-import React, { useContext } from "react";
-import PlainAddress from "./PlainAddress";
-import { resolverRendererRegistry } from "../api/address-resolver";
-import { useResolvedAddress } from "../useResolvedAddresses";
-import { RuntimeContext } from "../useRuntime";
-import { ChecksummedAddress } from "../types";
-
-type AddressOrENSNameProps = {
-  address: ChecksummedAddress;
-  selectedAddress?: string;
-  dontOverrideColors?: boolean;
-};
-
-const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
-  address,
-  selectedAddress,
-  dontOverrideColors,
-}) => {
-  const { provider } = useContext(RuntimeContext);
-  const resolvedAddress = useResolvedAddress(provider, address);
-  const linkable = address !== selectedAddress;
-
-  if (!provider || !resolvedAddress) {
-    return (
-      <PlainAddress
-        address={address}
-        linkable={linkable}
-        dontOverrideColors={dontOverrideColors}
-      />
-    );
-  }
-
-  const [resolver, resolvedName] = resolvedAddress;
-  const renderer = resolverRendererRegistry.get(resolver);
-  if (renderer === undefined) {
-    return (
-      <PlainAddress
-        address={address}
-        linkable={linkable}
-        dontOverrideColors={dontOverrideColors}
-      />
-    );
-  }
-
-  return renderer(
-    provider.network.chainId,
-    address,
-    resolvedName,
-    linkable,
-    !!dontOverrideColors
-  );
-};
-
-export default AddressOrENSName;

src/components/DecoratedAddressLink.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { NavLink } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
@@ -6,14 +6,17 @@ import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
 import { faMoneyBillAlt } from "@fortawesome/free-solid-svg-icons/faMoneyBillAlt";
 import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
 import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
-import AddressOrENSName from "./AddressOrENSName";
 import SourcifyLogo from "../sourcify/SourcifyLogo";
-import { AddressContext, ZERO_ADDRESS } from "../types";
+import PlainAddress from "./PlainAddress";
 import { Metadata } from "../sourcify/useSourcify";
+import { RuntimeContext } from "../useRuntime";
+import { useResolvedAddress } from "../useResolvedAddresses";
+import { AddressContext, ChecksummedAddress, ZERO_ADDRESS } from "../types";
+import { resolverRendererRegistry } from "../api/address-resolver";
 
 type DecoratedAddressLinkProps = {
-  address: string;
+  address: ChecksummedAddress;
-  selectedAddress?: string | undefined;
+  selectedAddress?: ChecksummedAddress | undefined;
   addressCtx?: AddressContext | undefined;
   creation?: boolean | undefined;
   miner?: boolean | undefined;
@@ -80,7 +83,7 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
           <SourcifyLogo />
         </NavLink>
       )}
-      <AddressOrENSName
+      <ResolvedAddress
         address={address}
         selectedAddress={selectedAddress}
         dontOverrideColors={mint || burn}
@@ -89,4 +92,50 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
   );
 };
 
+type ResolvedAddressProps = {
+  address: ChecksummedAddress;
+  selectedAddress?: ChecksummedAddress | undefined;
+  dontOverrideColors?: boolean;
+};
+
+const ResolvedAddress: React.FC<ResolvedAddressProps> = ({
+  address,
+  selectedAddress,
+  dontOverrideColors,
+}) => {
+  const { provider } = useContext(RuntimeContext);
+  const resolvedAddress = useResolvedAddress(provider, address);
+  const linkable = address !== selectedAddress;
+
+  if (!provider || !resolvedAddress) {
+    return (
+      <PlainAddress
+        address={address}
+        linkable={linkable}
+        dontOverrideColors={dontOverrideColors}
+      />
+    );
+  }
+
+  const [resolver, resolvedName] = resolvedAddress;
+  const renderer = resolverRendererRegistry.get(resolver);
+  if (renderer === undefined) {
+    return (
+      <PlainAddress
+        address={address}
+        linkable={linkable}
+        dontOverrideColors={dontOverrideColors}
+      />
+    );
+  }
+
+  return renderer(
+    provider.network.chainId,
+    address,
+    resolvedName,
+    linkable,
+    !!dontOverrideColors
+  );
+};
+
 export default React.memo(DecoratedAddressLink);