Merge branch 'feature/erc20-address-resolver' into develop

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>

src/api/address-resolver/CompositeAddressResolver.ts

@@ -1,26 +1,28 @@
 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] | null;
 
-  addResolver(resolver: IAddressResolver) {
+export class CompositeAddressResolver<T = any>
+  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);
-      if (name !== undefined) {
-        return name;
+      const resolvedAddress = await r.resolveAddress(provider, address);
+      if (resolvedAddress !== undefined) {
+        return [r, resolvedAddress];
       }
     }
 
-    return undefined;
-    // TODO: fallback to address itself
-    // return address;
+    return null;
   }
 }

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

src/api/address-resolver/ERCTokenResolver.ts

@@ -0,0 +1,30 @@
+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<TokenMeta> {
+  async resolveAddress(
+    provider: BaseProvider,
+    address: string
+  ): Promise<TokenMeta | undefined> {
+    const erc20Contract = new Contract(address, erc20, provider);
+    try {
+      const [name, symbol, decimals] = await Promise.all([
+        erc20Contract.name(),
+        erc20Contract.symbol(),
+        erc20Contract.decimals(),
+      ]);
+      return {
+        name,
+        symbol,
+        decimals,
+      };
+    } catch (err) {
+      // Ignore on purpose; this indicates the probe failed and the address
+      // is not a token
+    }
+    return undefined;
+  }
+}

src/api/address-resolver/address-resolver.ts

@@ -1,8 +1,16 @@
+import React from "react";
 import { BaseProvider } from "@ethersproject/providers";
 
-export interface IAddressResolver {
+export interface IAddressResolver<T> {
   resolveAddress(
     provider: BaseProvider,
     address: string
-  ): Promise<string | undefined>;
+  ): Promise<T | undefined>;
 }
+
+export type ResolvedAddressRenderer<T> = (
+  address: string,
+  resolvedAddress: T,
+  linkable: boolean,
+  dontOverrideColors: boolean
+) => React.ReactElement;

src/api/address-resolver/index.ts

@@ -1,34 +1,57 @@
 import { BaseProvider } from "@ethersproject/providers";
-import { IAddressResolver } from "./address-resolver";
-import { CompositeAddressResolver } from "./CompositeAddressResolver";
+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, 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();
-_mainResolver.addResolver(new ENSAddressResolver());
+_mainResolver.addResolver(ensResolver);
+_mainResolver.addResolver(ercTokenResolver);
 
-export const mainResolver: IAddressResolver = _mainResolver;
+export const mainResolver: IAddressResolver<SelectedResolvedName<any>> =
+  _mainResolver;
 
+export const resolverRendererRegistry = new Map<
+  IAddressResolver<any>,
+  ResolvedAddressRenderer<any>
+>();
+resolverRendererRegistry.set(ensResolver, ensRenderer);
+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<string | undefined>[] = [];
-  for (const a of addresses) {
+  const solvers: Promise<SelectedResolvedName<any> | undefined>[] = [];
+  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 cache: ResolvedAddresses = {};
   for (let i = 0; i < results.length; i++) {
     const r = results[i];
     if (r === undefined) {
       continue;
     }
-    cache[addresses[i]] = r;
+    resultMap[unresolvedAddresses[i]] = r;
   }
 
-  return cache;
+  return resultMap;
 };

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,14 +1,13 @@
 import React from "react";
-import Address from "./Address";
-import AddressLink from "./AddressLink";
-import ENSName from "./ENSName";
-import ENSNameLink from "./ENSNameLink";
-import { ResolvedAddresses } from "../api/address-resolver";
+import {
+  ResolvedAddresses,
+  resolverRendererRegistry,
+} from "../api/address-resolver";
+import PlainAddress from "./PlainAddress";
 
 type AddressOrENSNameProps = {
   address: string;
   selectedAddress?: string;
-  text?: string;
   dontOverrideColors?: boolean;
   resolvedAddresses?: ResolvedAddresses | undefined;
 };
@@ -16,40 +15,35 @@ type AddressOrENSNameProps = {
 const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   address,
   selectedAddress,
-  text,
   dontOverrideColors,
   resolvedAddresses,
 }) => {
-  const name = resolvedAddresses?.[address];
-  return (
-    <>
-      {address === selectedAddress ? (
-        <>
-          {name ? (
-            <ENSName name={name} address={address} />
-          ) : (
-            <Address address={address} />
-          )}
-        </>
-      ) : (
-        <>
-          {name ? (
-            <ENSNameLink
-              name={name}
-              address={address}
-              dontOverrideColors={dontOverrideColors}
-            />
-          ) : (
-            <AddressLink
-              address={address}
-              text={text}
-              dontOverrideColors={dontOverrideColors}
-            />
-          )}
-        </>
-      )}
-    </>
-  );
+  const resolvedAddress = resolvedAddresses?.[address];
+  const linkable = address !== selectedAddress;
+
+  if (!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(address, resolvedName, linkable, !!dontOverrideColors);
 };
 
 export default AddressOrENSName;

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}
       />

src/components/ENSName.tsx

@@ -1,25 +1,75 @@
 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;
+  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,
+  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 const ensRenderer: ResolvedAddressRenderer<string> = (
+  address,
+  resolvedAddress,
+  linkable,
+  dontOverrideColors
+) => (
+  <ENSName
+    address={address}
+    name={resolvedAddress}
+    linkable={linkable}
+    dontOverrideColors={dontOverrideColors}
+  />
 );
 
 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/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} />

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 &&

src/components/PlainAddress.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+type PlainAddressProps = {
+  address: string;
+  linkable: boolean;
+  dontOverrideColors: boolean | undefined;
+};
+
+const PlainAddress: React.FC<PlainAddressProps> = ({
+  address,
+  linkable,
+  dontOverrideColors,
+}) => {
+  if (linkable) {
+    return (
+      <NavLink
+        className={`${
+          dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
+        } font-address truncate`}
+        to={`/address/${address}`}
+        title={address}
+      >
+        {address}
+      </NavLink>
+    );
+  }
+
+  return (
+    <span className="font-address text-gray-400 truncate" title={address}>
+      {address}
+    </span>
+  );
+};
+
+export default PlainAddress;

src/components/TokenLogo.tsx

@@ -9,7 +9,7 @@ type TokenLogoProps = {
 };
 
 const TokenLogo: React.FC<TokenLogoProps> = (props) => (
-  <Suspense fallback={<></>}>
+  <Suspense fallback={null}>
     <InternalTokenLogo {...props} />
   </Suspense>
 );

src/components/TokenName.tsx

@@ -0,0 +1,91 @@
+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 = {
+  address: string;
+  name: string;
+  symbol: string;
+  linkable: boolean;
+  dontOverrideColors?: boolean;
+};
+
+const TokenName: React.FC<TokenNameProps> = ({
+  address,
+  name,
+  symbol,
+  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/${address}`}
+        title={`${name} (${symbol}): ${address}`}
+      >
+        <Content
+          address={address}
+          linkable={true}
+          name={name}
+          symbol={symbol}
+        />
+      </NavLink>
+    );
+  }
+
+  return (
+    <div
+      className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
+      title={`${name} (${symbol}): ${address}`}
+    >
+      <Content address={address} linkable={false} name={name} symbol={symbol} />
+    </div>
+  );
+};
+
+type ContentProps = {
+  address: string;
+  name: string;
+  symbol: string;
+  linkable: boolean;
+};
+
+const Content: React.FC<ContentProps> = ({
+  address,
+  name,
+  symbol,
+  linkable,
+}) => (
+  <>
+    <div
+      className={`self-center w-5 h-5 ${linkable ? "" : "filter grayscale"}`}
+    >
+      <TokenLogo address={address} name={name} />
+    </div>
+    <span className="truncate">
+      {name} ({symbol})
+    </span>
+  </>
+);
+
+export const tokenRenderer: ResolvedAddressRenderer<TokenMeta> = (
+  address,
+  tokenMeta,
+  linkable,
+  dontOverrideColors
+) => (
+  <TokenName
+    address={address}
+    name={tokenMeta.name}
+    symbol={tokenMeta.symbol}
+    linkable={linkable}
+    dontOverrideColors={dontOverrideColors}
+  />
+);
+
+export default TokenName;

src/transaction/Details.tsx

@@ -206,6 +206,7 @@ const Details: React.FC<DetailsProps> = ({
                 key={i}
                 txData={txData}
                 internalOp={op}
+                resolvedAddresses={resolvedAddresses}
               />
             ))}
           </div>
@@ -225,6 +226,7 @@ const Details: React.FC<DetailsProps> = ({
                 t={t}
                 txData={txData}
                 tokenMeta={txData.tokenMetas[t.token]}
+                resolvedAddresses={resolvedAddresses}
               />
             ))}
           </div>

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