From 25cc823c91ba440df3d08aa1272b0d28eb532ebf Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 31 Oct 2021 02:38:41 -0300
Subject: [PATCH 01/11] Generalize resolver framework to allow tracking of the
 resolver source

---
 .../CompositeAddressResolver.ts               | 16 ++++++++-----
 .../address-resolver/ENSAddressResolver.ts    |  2 +-
 src/api/address-resolver/ERCTokenResolver.ts  | 24 +++++++++++++++++++
 src/api/address-resolver/address-resolver.ts  |  4 ++--
 src/api/address-resolver/index.ts             | 24 ++++++++++++-------
 src/components/AddressOrENSName.tsx           | 10 ++++----
 6 files changed, 57 insertions(+), 23 deletions(-)
 create mode 100644 src/api/address-resolver/ERCTokenResolver.ts

diff --git a/src/api/address-resolver/CompositeAddressResolver.ts b/src/api/address-resolver/CompositeAddressResolver.ts
index bee73da..7c11f3d 100644
--- a/src/api/address-resolver/CompositeAddressResolver.ts
+++ b/src/api/address-resolver/CompositeAddressResolver.ts
@@ -1,21 +1,25 @@
 import { BaseProvider } from "@ethersproject/providers";
 import { IAddressResolver } from "./address-resolver";
 
-export class CompositeAddressResolver implements IAddressResolver {
-  private resolvers: IAddressResolver[] = [];
+export type SelectedResolvedName<T> = [IAddressResolver<T>, T];
 
-  addResolver(resolver: IAddressResolver) {
+export class CompositeAddressResolver<T>
+  implements IAddressResolver<SelectedResolvedName<T>>
+{
+  private resolvers: IAddressResolver<T>[] = [];
+
+  addResolver(resolver: IAddressResolver<T>) {
     this.resolvers.push(resolver);
   }
 
   async resolveAddress(
     provider: BaseProvider,
     address: string
-  ): Promise<string | undefined> {
+  ): Promise<SelectedResolvedName<T> | undefined> {
     for (const r of this.resolvers) {
-      const name = r.resolveAddress(provider, address);
+      const name = await r.resolveAddress(provider, address);
       if (name !== undefined) {
-        return name;
+        return [r, name];
       }
     }
 
diff --git a/src/api/address-resolver/ENSAddressResolver.ts b/src/api/address-resolver/ENSAddressResolver.ts
index ef45a64..820a51f 100644
--- a/src/api/address-resolver/ENSAddressResolver.ts
+++ b/src/api/address-resolver/ENSAddressResolver.ts
@@ -1,7 +1,7 @@
 import { BaseProvider } from "@ethersproject/providers";
 import { IAddressResolver } from "./address-resolver";
 
-export class ENSAddressResolver implements IAddressResolver {
+export class ENSAddressResolver implements IAddressResolver<string> {
   async resolveAddress(
     provider: BaseProvider,
     address: string
diff --git a/src/api/address-resolver/ERCTokenResolver.ts b/src/api/address-resolver/ERCTokenResolver.ts
new file mode 100644
index 0000000..dc8bb74
--- /dev/null
+++ b/src/api/address-resolver/ERCTokenResolver.ts
@@ -0,0 +1,24 @@
+import { BaseProvider } from "@ethersproject/providers";
+import { Contract } from "@ethersproject/contracts";
+import { IAddressResolver } from "./address-resolver";
+import erc20 from "../../erc20.json";
+
+export class ERCTokenResolver implements IAddressResolver<string> {
+  async resolveAddress(
+    provider: BaseProvider,
+    address: string
+  ): Promise<string | undefined> {
+    const erc20Contract = new Contract(address, erc20, provider);
+    try {
+      const [name, symbol, decimals] = await Promise.all([
+        erc20Contract.name(),
+        erc20Contract.symbol(),
+        erc20Contract.decimals(),
+      ]);
+      return name;
+    } catch (err) {
+      console.warn(`Couldn't get token ${address} metadata; ignoring`, err);
+    }
+    return undefined;
+  }
+}
diff --git a/src/api/address-resolver/address-resolver.ts b/src/api/address-resolver/address-resolver.ts
index 246db34..87ed8b8 100644
--- a/src/api/address-resolver/address-resolver.ts
+++ b/src/api/address-resolver/address-resolver.ts
@@ -1,8 +1,8 @@
 import { BaseProvider } from "@ethersproject/providers";
 
-export interface IAddressResolver {
+export interface IAddressResolver<T> {
   resolveAddress(
     provider: BaseProvider,
     address: string
-  ): Promise<string | undefined>;
+  ): Promise<T | undefined>;
 }
diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts
index cc4fe1b..dd8b549 100644
--- a/src/api/address-resolver/index.ts
+++ b/src/api/address-resolver/index.ts
@@ -1,34 +1,40 @@
 import { BaseProvider } from "@ethersproject/providers";
 import { IAddressResolver } from "./address-resolver";
-import { CompositeAddressResolver } from "./CompositeAddressResolver";
+import {
+  CompositeAddressResolver,
+  SelectedResolvedName,
+} from "./CompositeAddressResolver";
 import { ENSAddressResolver } from "./ENSAddressResolver";
 
-export type ResolvedAddresses = Record<string, string>;
+export type ResolvedAddresses = Record<string, SelectedResolvedName<string>>;
 
 // Create and configure the main resolver
-const _mainResolver = new CompositeAddressResolver();
-_mainResolver.addResolver(new ENSAddressResolver());
+export const ensResolver = new ENSAddressResolver();
 
-export const mainResolver: IAddressResolver = _mainResolver;
+const _mainResolver = new CompositeAddressResolver<string>();
+_mainResolver.addResolver(ensResolver);
+
+export const mainResolver: IAddressResolver<SelectedResolvedName<string>> =
+  _mainResolver;
 
 export const batchPopulate = async (
   provider: BaseProvider,
   addresses: string[]
 ): Promise<ResolvedAddresses> => {
-  const solvers: Promise<string | undefined>[] = [];
+  const solvers: Promise<SelectedResolvedName<string> | undefined>[] = [];
   for (const a of addresses) {
     solvers.push(mainResolver.resolveAddress(provider, a));
   }
 
   const results = await Promise.all(solvers);
-  const cache: ResolvedAddresses = {};
+  const resultMap: ResolvedAddresses = {};
   for (let i = 0; i < results.length; i++) {
     const r = results[i];
     if (r === undefined) {
       continue;
     }
-    cache[addresses[i]] = r;
+    resultMap[addresses[i]] = r;
   }
 
-  return cache;
+  return resultMap;
 };
diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx
index 23ba6cd..dd865d7 100644
--- a/src/components/AddressOrENSName.tsx
+++ b/src/components/AddressOrENSName.tsx
@@ -3,7 +3,7 @@ import Address from "./Address";
 import AddressLink from "./AddressLink";
 import ENSName from "./ENSName";
 import ENSNameLink from "./ENSNameLink";
-import { ResolvedAddresses } from "../api/address-resolver";
+import { ensResolver, ResolvedAddresses } from "../api/address-resolver";
 
 type AddressOrENSNameProps = {
   address: string;
@@ -25,17 +25,17 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
     <>
       {address === selectedAddress ? (
         <>
-          {name ? (
-            <ENSName name={name} address={address} />
+          {name?.[0] === ensResolver ? (
+            <ENSName name={name[1]} address={address} />
           ) : (
             <Address address={address} />
           )}
         </>
       ) : (
         <>
-          {name ? (
+          {name?.[0] ? (
             <ENSNameLink
-              name={name}
+              name={name[1]}
               address={address}
               dontOverrideColors={dontOverrideColors}
             />

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 02/11] 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;

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 03/11] 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;

From 099c1465b01372a16c20ed95a9854d8c957f3f8e Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 31 Oct 2021 19:51:11 -0300
Subject: [PATCH 04/11] Add ERC token address resolver

---
 .../CompositeAddressResolver.ts               |  8 +-
 src/api/address-resolver/ERCTokenResolver.ts  | 14 +++-
 src/api/address-resolver/address-resolver.ts  |  4 +-
 src/api/address-resolver/index.ts             | 17 +++--
 src/components/ENSName.tsx                    |  2 +-
 src/components/TokenLogo.tsx                  |  2 +-
 src/components/TokenName.tsx                  | 73 +++++++++++++++++++
 7 files changed, 102 insertions(+), 18 deletions(-)
 create mode 100644 src/components/TokenName.tsx

diff --git a/src/api/address-resolver/CompositeAddressResolver.ts b/src/api/address-resolver/CompositeAddressResolver.ts
index 7c11f3d..3590f3d 100644
--- a/src/api/address-resolver/CompositeAddressResolver.ts
+++ b/src/api/address-resolver/CompositeAddressResolver.ts
@@ -3,7 +3,7 @@ import { IAddressResolver } from "./address-resolver";
 
 export type SelectedResolvedName<T> = [IAddressResolver<T>, T];
 
-export class CompositeAddressResolver<T>
+export class CompositeAddressResolver<T = any>
   implements IAddressResolver<SelectedResolvedName<T>>
 {
   private resolvers: IAddressResolver<T>[] = [];
@@ -17,9 +17,9 @@ export class CompositeAddressResolver<T>
     address: string
   ): Promise<SelectedResolvedName<T> | undefined> {
     for (const r of this.resolvers) {
-      const name = await r.resolveAddress(provider, address);
-      if (name !== undefined) {
-        return [r, name];
+      const resolvedAddress = await r.resolveAddress(provider, address);
+      if (resolvedAddress !== undefined) {
+        return [r, resolvedAddress];
       }
     }
 
diff --git a/src/api/address-resolver/ERCTokenResolver.ts b/src/api/address-resolver/ERCTokenResolver.ts
index dc8bb74..02625dc 100644
--- a/src/api/address-resolver/ERCTokenResolver.ts
+++ b/src/api/address-resolver/ERCTokenResolver.ts
@@ -2,12 +2,13 @@ import { BaseProvider } from "@ethersproject/providers";
 import { Contract } from "@ethersproject/contracts";
 import { IAddressResolver } from "./address-resolver";
 import erc20 from "../../erc20.json";
+import { TokenMeta } from "../../types";
 
-export class ERCTokenResolver implements IAddressResolver<string> {
+export class ERCTokenResolver implements IAddressResolver<TokenMeta> {
   async resolveAddress(
     provider: BaseProvider,
     address: string
-  ): Promise<string | undefined> {
+  ): Promise<TokenMeta | undefined> {
     const erc20Contract = new Contract(address, erc20, provider);
     try {
       const [name, symbol, decimals] = await Promise.all([
@@ -15,9 +16,14 @@ export class ERCTokenResolver implements IAddressResolver<string> {
         erc20Contract.symbol(),
         erc20Contract.decimals(),
       ]);
-      return name;
+      return {
+        name,
+        symbol,
+        decimals,
+      };
     } catch (err) {
-      console.warn(`Couldn't get token ${address} metadata; ignoring`, err);
+      // Ignore on purpose; this indicates the probe failed and the address
+      // is not a token
     }
     return undefined;
   }
diff --git a/src/api/address-resolver/address-resolver.ts b/src/api/address-resolver/address-resolver.ts
index 0527b04..12d289e 100644
--- a/src/api/address-resolver/address-resolver.ts
+++ b/src/api/address-resolver/address-resolver.ts
@@ -8,9 +8,9 @@ export interface IAddressResolver<T> {
   ): Promise<T | undefined>;
 }
 
-export type ResolvedAddressRenderer = (
+export type ResolvedAddressRenderer<T> = (
   address: string,
-  resolvedAddress: string,
+  resolvedAddress: T,
   linkable: boolean,
   dontOverrideColors: boolean
 ) => React.ReactElement;
diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts
index 6db1b1e..d0a0500 100644
--- a/src/api/address-resolver/index.ts
+++ b/src/api/address-resolver/index.ts
@@ -1,34 +1,39 @@
 import { BaseProvider } from "@ethersproject/providers";
 import { ensRenderer } from "../../components/ENSName";
+import { tokenRenderer } from "../../components/TokenName";
 import { IAddressResolver, ResolvedAddressRenderer } from "./address-resolver";
 import {
   CompositeAddressResolver,
   SelectedResolvedName,
 } from "./CompositeAddressResolver";
 import { ENSAddressResolver } from "./ENSAddressResolver";
+import { ERCTokenResolver } from "./ERCTokenResolver";
 
-export type ResolvedAddresses = Record<string, SelectedResolvedName<string>>;
+export type ResolvedAddresses = Record<string, SelectedResolvedName<any>>;
 
 // Create and configure the main resolver
 export const ensResolver = new ENSAddressResolver();
+export const ercTokenResolver = new ERCTokenResolver();
 
-const _mainResolver = new CompositeAddressResolver<string>();
+const _mainResolver = new CompositeAddressResolver();
 _mainResolver.addResolver(ensResolver);
+_mainResolver.addResolver(ercTokenResolver);
 
-export const mainResolver: IAddressResolver<SelectedResolvedName<string>> =
+export const mainResolver: IAddressResolver<SelectedResolvedName<any>> =
   _mainResolver;
 
 export const resolverRendererRegistry = new Map<
-  IAddressResolver<string>,
-  ResolvedAddressRenderer
+  IAddressResolver<any>,
+  ResolvedAddressRenderer<any>
 >();
 resolverRendererRegistry.set(ensResolver, ensRenderer);
+resolverRendererRegistry.set(ercTokenResolver, tokenRenderer);
 
 export const batchPopulate = async (
   provider: BaseProvider,
   addresses: string[]
 ): Promise<ResolvedAddresses> => {
-  const solvers: Promise<SelectedResolvedName<string> | undefined>[] = [];
+  const solvers: Promise<SelectedResolvedName<any> | undefined>[] = [];
   for (const a of addresses) {
     solvers.push(mainResolver.resolveAddress(provider, a));
   }
diff --git a/src/components/ENSName.tsx b/src/components/ENSName.tsx
index 05fe27c..f12f416 100644
--- a/src/components/ENSName.tsx
+++ b/src/components/ENSName.tsx
@@ -58,7 +58,7 @@ const Content: React.FC<ContentProps> = ({ linkable, name }) => (
   </>
 );
 
-export const ensRenderer: ResolvedAddressRenderer = (
+export const ensRenderer: ResolvedAddressRenderer<string> = (
   address,
   resolvedAddress,
   linkable,
diff --git a/src/components/TokenLogo.tsx b/src/components/TokenLogo.tsx
index c6f5b8b..8568a0b 100644
--- a/src/components/TokenLogo.tsx
+++ b/src/components/TokenLogo.tsx
@@ -9,7 +9,7 @@ type TokenLogoProps = {
 };
 
 const TokenLogo: React.FC<TokenLogoProps> = (props) => (
-  <Suspense fallback={<></>}>
+  <Suspense fallback={null}>
     <InternalTokenLogo {...props} />
   </Suspense>
 );
diff --git a/src/components/TokenName.tsx b/src/components/TokenName.tsx
new file mode 100644
index 0000000..7301676
--- /dev/null
+++ b/src/components/TokenName.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import TokenLogo from "./TokenLogo";
+import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolver";
+import { TokenMeta } from "../types";
+
+type TokenNameProps = {
+  name: string;
+  address: string;
+  linkable: boolean;
+  dontOverrideColors?: boolean;
+};
+
+const TokenName: React.FC<TokenNameProps> = ({
+  name,
+  address,
+  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 address={address} linkable={true} name={name} />
+      </NavLink>
+    );
+  }
+
+  return (
+    <div
+      className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
+      title={`${name}: ${address}`}
+    >
+      <Content address={address} linkable={false} name={name} />
+    </div>
+  );
+};
+
+type ContentProps = {
+  address: string;
+  linkable: boolean;
+  name: string;
+};
+
+const Content: React.FC<ContentProps> = ({ address, linkable, name }) => (
+  <>
+    <div className="self-center w-5 h-5">
+      <TokenLogo address={address} name={name} />
+    </div>
+    <span className="truncate">{name}</span>
+  </>
+);
+
+export const tokenRenderer: ResolvedAddressRenderer<TokenMeta> = (
+  address,
+  resolvedAddress,
+  linkable,
+  dontOverrideColors
+) => (
+  <TokenName
+    address={address}
+    name={resolvedAddress.name}
+    linkable={linkable}
+    dontOverrideColors={dontOverrideColors}
+  />
+);
+
+export default TokenName;

From 9b2dcf0acab0a5f4204fd52ffeffff9dab36a4ca Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 31 Oct 2021 19:55:09 -0300
Subject: [PATCH 05/11] Fix token address link

---
 src/components/TokenName.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TokenName.tsx b/src/components/TokenName.tsx
index 7301676..f57dd07 100644
--- a/src/components/TokenName.tsx
+++ b/src/components/TokenName.tsx
@@ -23,7 +23,7 @@ const TokenName: React.FC<TokenNameProps> = ({
         className={`flex items-baseline space-x-1 font-sans ${
           dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
         } truncate`}
-        to={`/address/${name}`}
+        to={`/address/${address}`}
         title={`${name}: ${address}`}
       >
         <Content address={address} linkable={true} name={name} />

From 9879290a38fb29994691770d60852086726d95ae Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 31 Oct 2021 19:59:14 -0300
Subject: [PATCH 06/11] Add symbol support

---
 src/components/TokenName.tsx | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/TokenName.tsx b/src/components/TokenName.tsx
index f57dd07..0553d4a 100644
--- a/src/components/TokenName.tsx
+++ b/src/components/TokenName.tsx
@@ -6,6 +6,7 @@ import { TokenMeta } from "../types";
 
 type TokenNameProps = {
   name: string;
+  symbol: string;
   address: string;
   linkable: boolean;
   dontOverrideColors?: boolean;
@@ -13,6 +14,7 @@ type TokenNameProps = {
 
 const TokenName: React.FC<TokenNameProps> = ({
   name,
+  symbol,
   address,
   linkable,
   dontOverrideColors,
@@ -24,9 +26,14 @@ const TokenName: React.FC<TokenNameProps> = ({
           dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
         } truncate`}
         to={`/address/${address}`}
-        title={`${name}: ${address}`}
+        title={`${name} (${symbol}): ${address}`}
       >
-        <Content address={address} linkable={true} name={name} />
+        <Content
+          address={address}
+          linkable={true}
+          name={name}
+          symbol={symbol}
+        />
       </NavLink>
     );
   }
@@ -34,9 +41,9 @@ const TokenName: React.FC<TokenNameProps> = ({
   return (
     <div
       className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
-      title={`${name}: ${address}`}
+      title={`${name} (${symbol}): ${address}`}
     >
-      <Content address={address} linkable={false} name={name} />
+      <Content address={address} linkable={false} name={name} symbol={symbol} />
     </div>
   );
 };
@@ -45,14 +52,22 @@ type ContentProps = {
   address: string;
   linkable: boolean;
   name: string;
+  symbol: string;
 };
 
-const Content: React.FC<ContentProps> = ({ address, linkable, name }) => (
+const Content: React.FC<ContentProps> = ({
+  address,
+  linkable,
+  name,
+  symbol,
+}) => (
   <>
     <div className="self-center w-5 h-5">
       <TokenLogo address={address} name={name} />
     </div>
-    <span className="truncate">{name}</span>
+    <span className="truncate">
+      {name} ({symbol})
+    </span>
   </>
 );
 
@@ -65,6 +80,7 @@ export const tokenRenderer: ResolvedAddressRenderer<TokenMeta> = (
   <TokenName
     address={address}
     name={resolvedAddress.name}
+    symbol={resolvedAddress.symbol}
     linkable={linkable}
     dontOverrideColors={dontOverrideColors}
   />

From ba86907ec2083a2e3a9cb091b890e1f12daab209 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 31 Oct 2021 20:00:40 -0300
Subject: [PATCH 07/11] Add TODO

---
 src/api/address-resolver/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts
index d0a0500..6212653 100644
--- a/src/api/address-resolver/index.ts
+++ b/src/api/address-resolver/index.ts
@@ -29,6 +29,7 @@ export const resolverRendererRegistry = new Map<
 resolverRendererRegistry.set(ensResolver, ensRenderer);
 resolverRendererRegistry.set(ercTokenResolver, tokenRenderer);
 
+// TODO: implement progressive resolving
 export const batchPopulate = async (
   provider: BaseProvider,
   addresses: string[]

From 378d5a0c25fb0ded95dec0c53f069fdb074f110d Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 1 Nov 2021 01:32:35 -0300
Subject: [PATCH 08/11] Reorder attributes

---
 src/components/TokenName.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/TokenName.tsx b/src/components/TokenName.tsx
index 0553d4a..5c3e91b 100644
--- a/src/components/TokenName.tsx
+++ b/src/components/TokenName.tsx
@@ -5,17 +5,17 @@ import { ResolvedAddressRenderer } from "../api/address-resolver/address-resolve
 import { TokenMeta } from "../types";
 
 type TokenNameProps = {
+  address: string;
   name: string;
   symbol: string;
-  address: string;
   linkable: boolean;
   dontOverrideColors?: boolean;
 };
 
 const TokenName: React.FC<TokenNameProps> = ({
+  address,
   name,
   symbol,
-  address,
   linkable,
   dontOverrideColors,
 }) => {
@@ -50,19 +50,21 @@ const TokenName: React.FC<TokenNameProps> = ({
 
 type ContentProps = {
   address: string;
-  linkable: boolean;
   name: string;
   symbol: string;
+  linkable: boolean;
 };
 
 const Content: React.FC<ContentProps> = ({
   address,
-  linkable,
   name,
   symbol,
+  linkable,
 }) => (
   <>
-    <div className="self-center w-5 h-5">
+    <div
+      className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
+    >
       <TokenLogo address={address} name={name} />
     </div>
     <span className="truncate">
@@ -73,14 +75,14 @@ const Content: React.FC<ContentProps> = ({
 
 export const tokenRenderer: ResolvedAddressRenderer<TokenMeta> = (
   address,
-  resolvedAddress,
+  tokenMeta,
   linkable,
   dontOverrideColors
 ) => (
   <TokenName
     address={address}
-    name={resolvedAddress.name}
-    symbol={resolvedAddress.symbol}
+    name={tokenMeta.name}
+    symbol={tokenMeta.symbol}
     linkable={linkable}
     dontOverrideColors={dontOverrideColors}
   />

From e22b564a71c1f3ebacf23d271f24d5bf4e67509d Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 1 Nov 2021 04:15:12 -0300
Subject: [PATCH 09/11] Add in-page cache capabilities to main resolver

---
 .../CompositeAddressResolver.ts               |  6 ++--
 src/api/address-resolver/index.ts             | 12 ++++---
 src/components/AddressOrENSName.tsx           |  2 +-
 src/useResolvedAddresses.ts                   | 32 ++++++++++++-------
 4 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/api/address-resolver/CompositeAddressResolver.ts b/src/api/address-resolver/CompositeAddressResolver.ts
index 3590f3d..55a7318 100644
--- a/src/api/address-resolver/CompositeAddressResolver.ts
+++ b/src/api/address-resolver/CompositeAddressResolver.ts
@@ -1,7 +1,7 @@
 import { BaseProvider } from "@ethersproject/providers";
 import { IAddressResolver } from "./address-resolver";
 
-export type SelectedResolvedName<T> = [IAddressResolver<T>, T];
+export type SelectedResolvedName<T> = [IAddressResolver<T>, T] | null;
 
 export class CompositeAddressResolver<T = any>
   implements IAddressResolver<SelectedResolvedName<T>>
@@ -23,8 +23,6 @@ export class CompositeAddressResolver<T = any>
       }
     }
 
-    return undefined;
-    // TODO: fallback to address itself
-    // return address;
+    return null;
   }
 }
diff --git a/src/api/address-resolver/index.ts b/src/api/address-resolver/index.ts
index 6212653..dc72a9f 100644
--- a/src/api/address-resolver/index.ts
+++ b/src/api/address-resolver/index.ts
@@ -32,21 +32,25 @@ resolverRendererRegistry.set(ercTokenResolver, tokenRenderer);
 // TODO: implement progressive resolving
 export const batchPopulate = async (
   provider: BaseProvider,
-  addresses: string[]
+  addresses: string[],
+  currentMap: ResolvedAddresses | undefined
 ): Promise<ResolvedAddresses> => {
   const solvers: Promise<SelectedResolvedName<any> | undefined>[] = [];
-  for (const a of addresses) {
+  const unresolvedAddresses = addresses.filter(
+    (a) => currentMap?.[a] === undefined
+  );
+  for (const a of unresolvedAddresses) {
     solvers.push(mainResolver.resolveAddress(provider, a));
   }
 
+  const resultMap: ResolvedAddresses = currentMap ? { ...currentMap } : {};
   const results = await Promise.all(solvers);
-  const resultMap: ResolvedAddresses = {};
   for (let i = 0; i < results.length; i++) {
     const r = results[i];
     if (r === undefined) {
       continue;
     }
-    resultMap[addresses[i]] = r;
+    resultMap[unresolvedAddresses[i]] = r;
   }
 
   return resultMap;
diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx
index b10c0eb..9e4b65b 100644
--- a/src/components/AddressOrENSName.tsx
+++ b/src/components/AddressOrENSName.tsx
@@ -23,7 +23,7 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   const resolvedAddress = resolvedAddresses?.[address];
   const linkable = address !== selectedAddress;
 
-  if (resolvedAddress === undefined) {
+  if (!resolvedAddress) {
     return (
       <PlainAddress
         address={address}
diff --git a/src/useResolvedAddresses.ts b/src/useResolvedAddresses.ts
index 74042e5..1936da0 100644
--- a/src/useResolvedAddresses.ts
+++ b/src/useResolvedAddresses.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { JsonRpcProvider } from "@ethersproject/providers";
 import { ProcessedTransaction, TransactionData } from "./types";
 import { batchPopulate, ResolvedAddresses } from "./api/address-resolver";
@@ -66,19 +66,27 @@ export const useResolvedAddresses = (
   addrCollector: AddressCollector
 ) => {
   const [names, setNames] = useState<ResolvedAddresses>();
-
+  const ref = useRef<ResolvedAddresses | undefined>();
   useEffect(() => {
-    if (!provider) {
-      return;
-    }
+    ref.current = names;
+  });
 
-    const populate = async () => {
-      const _addresses = addrCollector();
-      const _names = await batchPopulate(provider, _addresses);
-      setNames(_names);
-    };
-    populate();
-  }, [provider, addrCollector]);
+  useEffect(
+    () => {
+      if (!provider) {
+        return;
+      }
+
+      const populate = async () => {
+        const _addresses = addrCollector();
+        const _names = await batchPopulate(provider, _addresses, ref.current);
+        setNames(_names);
+      };
+      populate();
+    },
+    // DON'T put names variables in dependency array; this is intentional; useRef
+    [provider, addrCollector]
+  );
 
   return names;
 };

From 91a888c73b3999bb0b9049198ed94508d0d672dd Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 1 Nov 2021 04:26:19 -0300
Subject: [PATCH 10/11] Migrate remaining token decoration support to the new
 resolver framework

---
 src/TokenTransferItem.tsx               |  8 ++++----
 src/components/AddressOrENSName.tsx     |  4 ----
 src/components/DecoratedAddressLink.tsx | 13 +------------
 src/components/PlainAddress.tsx         |  6 ++----
 src/transaction/Details.tsx             |  1 +
 5 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index 083f7f0..03fa198 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -11,11 +11,13 @@ import {
   TokenTransfer,
   TransactionData,
 } from "./types";
+import { ResolvedAddresses } from "./api/address-resolver";
 
 type TokenTransferItemProps = {
   t: TokenTransfer;
   txData: TransactionData;
   tokenMeta?: TokenMeta | undefined;
+  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 // TODO: handle partial
@@ -23,6 +25,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
   t,
   txData,
   tokenMeta,
+  resolvedAddresses,
 }) => (
   <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
     <span className="text-gray-500">
@@ -64,10 +67,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
         <AddressHighlighter address={t.token}>
           <DecoratedAddressLink
             address={t.token}
-            text={
-              tokenMeta ? `${tokenMeta.name} (${tokenMeta.symbol})` : undefined
-            }
-            tokenMeta={tokenMeta}
+            resolvedAddresses={resolvedAddresses}
           />
         </AddressHighlighter>
       </div>
diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx
index 9e4b65b..62ee289 100644
--- a/src/components/AddressOrENSName.tsx
+++ b/src/components/AddressOrENSName.tsx
@@ -8,7 +8,6 @@ import PlainAddress from "./PlainAddress";
 type AddressOrENSNameProps = {
   address: string;
   selectedAddress?: string;
-  text?: string;
   dontOverrideColors?: boolean;
   resolvedAddresses?: ResolvedAddresses | undefined;
 };
@@ -16,7 +15,6 @@ type AddressOrENSNameProps = {
 const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   address,
   selectedAddress,
-  text,
   dontOverrideColors,
   resolvedAddresses,
 }) => {
@@ -27,7 +25,6 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
     return (
       <PlainAddress
         address={address}
-        text={text}
         linkable={linkable}
         dontOverrideColors={dontOverrideColors}
       />
@@ -40,7 +37,6 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
     return (
       <PlainAddress
         address={address}
-        text={text}
         linkable={linkable}
         dontOverrideColors={dontOverrideColors}
       />
diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index ee88b31..cadc77f 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -5,36 +5,31 @@ 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 TokenLogo from "./TokenLogo";
 import AddressOrENSName from "./AddressOrENSName";
-import { AddressContext, TokenMeta, ZERO_ADDRESS } from "../types";
+import { AddressContext, ZERO_ADDRESS } from "../types";
 import { ResolvedAddresses } from "../api/address-resolver";
 
 type DecoratedAddressLinkProps = {
   address: string;
   selectedAddress?: string;
-  text?: string;
   addressCtx?: AddressContext;
   creation?: boolean;
   miner?: boolean;
   selfDestruct?: boolean;
   txFrom?: boolean;
   txTo?: boolean;
-  tokenMeta?: TokenMeta;
   resolvedAddresses?: ResolvedAddresses | undefined;
 };
 
 const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
   address,
   selectedAddress,
-  text,
   addressCtx,
   creation,
   miner,
   selfDestruct,
   txFrom,
   txTo,
-  tokenMeta,
   resolvedAddresses,
 }) => {
   const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
@@ -75,15 +70,9 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
           <FontAwesomeIcon icon={faCoins} size="1x" />
         </span>
       )}
-      {tokenMeta && (
-        <div className="self-center">
-          <TokenLogo address={address} name={tokenMeta.name} />
-        </div>
-      )}
       <AddressOrENSName
         address={address}
         selectedAddress={selectedAddress}
-        text={text}
         dontOverrideColors={mint || burn}
         resolvedAddresses={resolvedAddresses}
       />
diff --git a/src/components/PlainAddress.tsx b/src/components/PlainAddress.tsx
index 6ebe634..fbc37ca 100644
--- a/src/components/PlainAddress.tsx
+++ b/src/components/PlainAddress.tsx
@@ -3,14 +3,12 @@ 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,
 }) => {
@@ -21,9 +19,9 @@ const PlainAddress: React.FC<PlainAddressProps> = ({
           dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
         } font-address truncate`}
         to={`/address/${address}`}
-        title={text ?? address}
+        title={address}
       >
-        <>{text ?? address}</>
+        {address}
       </NavLink>
     );
   }
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 72f448a..6286efa 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -225,6 +225,7 @@ const Details: React.FC<DetailsProps> = ({
                 t={t}
                 txData={txData}
                 tokenMeta={txData.tokenMetas[t.token]}
+                resolvedAddresses={resolvedAddresses}
               />
             ))}
           </div>

From 66be71f89d2988fb0629c622d02a681792a06ed5 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 1 Nov 2021 04:46:19 -0300
Subject: [PATCH 11/11] TODO: must finish reverse token address support on
 internal ETH transfers section

---
 src/components/InternalTransactionOperation.tsx | 10 ++++++++--
 src/components/InternalTransfer.tsx             |  3 +++
 src/transaction/Details.tsx                     |  1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/InternalTransactionOperation.tsx b/src/components/InternalTransactionOperation.tsx
index 095162f..7de3bb2 100644
--- a/src/components/InternalTransactionOperation.tsx
+++ b/src/components/InternalTransactionOperation.tsx
@@ -3,17 +3,23 @@ import InternalTransfer from "./InternalTransfer";
 import InternalSelfDestruct from "./InternalSelfDestruct";
 import InternalCreate from "./InternalCreate";
 import { TransactionData, InternalOperation, OperationType } from "../types";
+import { ResolvedAddresses } from "../api/address-resolver";
 
 type InternalTransactionOperationProps = {
   txData: TransactionData;
   internalOp: InternalOperation;
+  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const InternalTransactionOperation: React.FC<InternalTransactionOperationProps> =
-  ({ txData, internalOp }) => (
+  ({ txData, internalOp, resolvedAddresses }) => (
     <>
       {internalOp.type === OperationType.TRANSFER && (
-        <InternalTransfer txData={txData} internalOp={internalOp} />
+        <InternalTransfer
+          txData={txData}
+          internalOp={internalOp}
+          resolvedAddresses={resolvedAddresses}
+        />
       )}
       {internalOp.type === OperationType.SELF_DESTRUCT && (
         <InternalSelfDestruct txData={txData} internalOp={internalOp} />
diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx
index dc53d05..2958452 100644
--- a/src/components/InternalTransfer.tsx
+++ b/src/components/InternalTransfer.tsx
@@ -5,15 +5,18 @@ import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
 import { TransactionData, InternalOperation } from "../types";
+import { ResolvedAddresses } from "../api/address-resolver";
 
 type InternalTransferProps = {
   txData: TransactionData;
   internalOp: InternalOperation;
+  resolvedAddresses: ResolvedAddresses | undefined;
 };
 
 const InternalTransfer: React.FC<InternalTransferProps> = ({
   txData,
   internalOp,
+  resolvedAddresses,
 }) => {
   const fromMiner =
     txData.confirmedData?.miner !== undefined &&
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 6286efa..9c9e29d 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -206,6 +206,7 @@ const Details: React.FC<DetailsProps> = ({
                 key={i}
                 txData={txData}
                 internalOp={op}
+                resolvedAddresses={resolvedAddresses}
               />
             ))}
           </div>