Add reverse ENS resolution on block transactions list

src/BlockTransactions.tsx

@@ -11,7 +11,7 @@ import ResultHeader from "./search/ResultHeader";
 import PendingResults from "./search/PendingResults";
 import TransactionItem from "./search/TransactionItem";
 import BlockLink from "./components/BlockLink";
-import { ProcessedTransaction } from "./types";
+import { ProcessedTransaction, ENSReverseCache } from "./types";
 import { PAGE_SIZE } from "./params";
 import { useFeeToggler } from "./search/useFeeToggler";
 
@@ -80,6 +80,44 @@ const BlockTransactions: React.FC = () => {
   }, [txs, pageNumber]);
   const total = useMemo(() => txs?.length ?? 0, [txs]);
 
+  const [reverseCache, setReverseCache] = useState<ENSReverseCache>();
+  useEffect(() => {
+    if (!page) {
+      return;
+    }
+
+    const addrSet = new Set<string>();
+    for (const tx of page) {
+      if (tx.from) {
+        addrSet.add(tx.from);
+      }
+      if (tx.to) {
+        addrSet.add(tx.to);
+      }
+    }
+    const addresses = Array.from(addrSet);
+
+    const reverseResolve = async () => {
+      const solvers: Promise<string>[] = [];
+      for (const a of addresses) {
+        solvers.push(provider.lookupAddress(a));
+      }
+
+      const results = await Promise.all(solvers);
+      const cache: ENSReverseCache = {};
+      for (let i = 0; i < results.length; i++) {
+        if (results[i] === null) {
+          continue;
+        }
+        cache[addresses[i]] = results[i];
+      }
+      console.log("RESOLVED");
+      console.log(cache);
+      setReverseCache(cache);
+    };
+    reverseResolve();
+  }, [page]);
+
   document.title = `Block #${blockNumber} Txns | Otterscan`;
 
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
@@ -112,7 +150,12 @@ const BlockTransactions: React.FC = () => {
         {page ? (
           <>
             {page.map((tx) => (
-              <TransactionItem key={tx.hash} tx={tx} feeDisplay={feeDisplay} />
+              <TransactionItem
+                key={tx.hash}
+                tx={tx}
+                ensCache={reverseCache}
+                feeDisplay={feeDisplay}
+              />
             ))}
             <div className="flex justify-between items-baseline py-3">
               <div className="text-sm text-gray-500">

src/components/Address.tsx

@@ -1,9 +1,13 @@
 import React from "react";
 
-const Address: React.FC = ({ children }) => (
-  <span className="font-address text-gray-400 truncate">
-    <p className="truncate">{children}</p>
+type AddressProps = {
+  address: string;
+};
+
+const Address: React.FC<AddressProps> = ({ address }) => (
+  <span className="font-address text-gray-400 truncate" title={address}>
+    <p className="truncate">{address}</p>
   </span>
 );
 
-export default Address;
+export default React.memo(Address);

src/components/AddressOrENSName.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Address from "./Address";
+import AddressLink from "./AddressLink";
+import ENSName from "./ENSName";
+import ENSNameLink from "./ENSNameLink";
+
+type AddressOrENSNameProps = {
+  address: string;
+  ensName?: string;
+  selectedAddress?: string;
+};
+
+const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
+  address,
+  ensName,
+  selectedAddress,
+}) => {
+  return address === selectedAddress ? (
+    <>
+      {ensName ? (
+        <ENSName name={ensName} address={address} />
+      ) : (
+        <Address address={address} />
+      )}
+    </>
+  ) : (
+    <>
+      {ensName ? (
+        <ENSNameLink name={ensName} address={address} />
+      ) : (
+        <AddressLink address={address} />
+      )}
+    </>
+  );
+};
+
+export default React.memo(AddressOrENSName);

src/components/ENSName.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import ENSLogo from "./ensLogo.svg";
+
+type ENSNameProps = {
+  name: string;
+  address: string;
+};
+
+const ENSName: React.FC<ENSNameProps> = ({ name, address }) => (
+  <div
+    className="flex items-baseline space-x-1 font-sans text-gray-700 truncate"
+    title={`${name}: ${address}`}
+  >
+    <img
+      className="self-center"
+      src={ENSLogo}
+      alt="ENS Logo"
+      width={12}
+      height={12}
+    />
+    <p className="truncate">{name}</p>
+  </div>
+);
+
+export default React.memo(ENSName);

src/components/ENSNameLink.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import ENSLogo from "./ensLogo.svg";
+
+type ENSNameLinkProps = {
+  name: string;
+  address: string;
+};
+
+const ENSNameLink: React.FC<ENSNameLinkProps> = ({ name, address }) => (
+  <NavLink
+    className="flex items-baseline space-x-1 font-sans 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}
+    />
+    <p className="truncate">{name}</p>
+  </NavLink>
+);
+
+export default React.memo(ENSNameLink);

src/components/ensLogo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72.52 80.95"><defs><style>.cls-3{fill:#a0a8d4}</style><linearGradient id="linear-gradient" x1="41.95" y1="2.57" x2="12.57" y2="34.42" gradientUnits="userSpaceOnUse"><stop offset=".58" stop-color="#a0a8d4"/><stop offset=".73" stop-color="#8791c7"/><stop offset=".91" stop-color="#6470b4"/></linearGradient><linearGradient id="linear-gradient-2" x1="42.57" y1="81.66" x2="71.96" y2="49.81" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="42.26" y1="1.24" x2="42.26" y2="82.84" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#513eff"/><stop offset=".18" stop-color="#5157ff"/><stop offset=".57" stop-color="#5298ff"/><stop offset="1" stop-color="#52e5ff"/></linearGradient></defs><g style="isolation:isolate"><g id="Layer_1" data-name="Layer 1"><path d="M15.28 34.39c.8 1.71 2.78 5.09 2.78 5.09L40.95 1.64l-22.34 15.6a9.75 9.75 0 0 0-3.18 3.5 16.19 16.19 0 0 0-.15 13.65z" transform="translate(-6 -1.64)" fill="url(#linear-gradient)"/><path class="cls-3" d="M6.21 46.85a25.47 25.47 0 0 0 10 18.51l24.71 17.23s-15.46-22.28-28.5-44.45a22.39 22.39 0 0 1-2.62-7.56 12.1 12.1 0 0 1 0-3.63c-.34.63-1 1.92-1 1.92a29.35 29.35 0 0 0-2.67 8.55 52.28 52.28 0 0 0 .08 9.43z" transform="translate(-6 -1.64)"/><path d="M69.25 49.84c-.8-1.71-2.78-5.09-2.78-5.09L43.58 82.59 65.92 67a9.75 9.75 0 0 0 3.18-3.5 16.19 16.19 0 0 0 .15-13.66z" transform="translate(-6 -1.64)" fill="url(#linear-gradient-2)"/><path class="cls-3" d="M78.32 37.38a25.47 25.47 0 0 0-10-18.51L43.61 1.64s15.45 22.28 28.5 44.45a22.39 22.39 0 0 1 2.61 7.56 12.1 12.1 0 0 1 0 3.63c.34-.63 1-1.92 1-1.92a29.35 29.35 0 0 0 2.67-8.55 52.28 52.28 0 0 0-.07-9.43z" transform="translate(-6 -1.64)"/><path d="M15.43 20.74a9.75 9.75 0 0 1 3.18-3.5l22.34-15.6-22.89 37.85s-2-3.38-2.78-5.09a16.19 16.19 0 0 1 .15-13.66zM6.21 46.85a25.47 25.47 0 0 0 10 18.51l24.71 17.23s-15.46-22.28-28.5-44.45a22.39 22.39 0 0 1-2.62-7.56 12.1 12.1 0 0 1 0-3.63c-.34.63-1 1.92-1 1.92a29.35 29.35 0 0 0-2.67 8.55 52.28 52.28 0 0 0 .08 9.43zm63 3c-.8-1.71-2.78-5.09-2.78-5.09L43.58 82.59 65.92 67a9.75 9.75 0 0 0 3.18-3.5 16.19 16.19 0 0 0 .15-13.66zm9.07-12.46a25.47 25.47 0 0 0-10-18.51L43.61 1.64s15.45 22.28 28.5 44.45a22.39 22.39 0 0 1 2.61 7.56 12.1 12.1 0 0 1 0 3.63c.34-.63 1-1.92 1-1.92a29.35 29.35 0 0 0 2.67-8.55 52.28 52.28 0 0 0-.07-9.43z" transform="translate(-6 -1.64)" style="mix-blend-mode:color" fill="url(#linear-gradient-3)"/></g></g></svg>

src/search/TransactionItem.tsx

@@ -4,25 +4,26 @@ import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import MethodName from "../components/MethodName";
 import BlockLink from "../components/BlockLink";
 import TransactionLink from "../components/TransactionLink";
-import Address from "../components/Address";
-import AddressLink from "../components/AddressLink";
+import AddressOrENSName from "../components/AddressOrENSName";
 import TimestampAge from "../components/TimestampAge";
 import TransactionDirection, {
   Direction,
 } from "../components/TransactionDirection";
 import TransactionValue from "../components/TransactionValue";
-import { ProcessedTransaction } from "../types";
+import { ENSReverseCache, ProcessedTransaction } from "../types";
 import { FeeDisplay } from "./useFeeToggler";
 import { formatValue } from "../components/formatter";
 
 type TransactionItemProps = {
   tx: ProcessedTransaction;
+  ensCache?: ENSReverseCache;
   selectedAddress?: string;
   feeDisplay: FeeDisplay;
 };
 
 const TransactionItem: React.FC<TransactionItemProps> = ({
   tx,
+  ensCache,
   selectedAddress,
   feeDisplay,
 }) => {
@@ -39,6 +40,9 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
     }
   }
 
+  const ensFrom = ensCache && tx.from && ensCache[tx.from];
+  const ensTo = ensCache && tx.to && ensCache[tx.to];
+
   return (
     <div className="grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 hover:bg-gray-100 px-2 py-3">
       <div className="col-span-2 flex space-x-1 items-baseline">
@@ -58,24 +62,26 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
       <TimestampAge timestamp={tx.timestamp} />
       <span className="col-span-2 flex justify-between items-baseline space-x-2 pr-2">
         <span className="truncate" title={tx.from}>
-          {tx.from &&
-            (tx.from === selectedAddress ? (
-              <Address>{tx.from}</Address>
-            ) : (
-              <AddressLink address={tx.from} />
-            ))}
+          {tx.from && (
+            <AddressOrENSName
+              address={tx.from}
+              ensName={ensFrom}
+              selectedAddress={selectedAddress}
+            />
+          )}
         </span>
         <span>
           <TransactionDirection direction={direction} />
         </span>
       </span>
       <span className="col-span-2 truncate" title={tx.to}>
-        {tx.to &&
-          (tx.to === selectedAddress ? (
-            <Address>{tx.to}</Address>
-          ) : (
-            <AddressLink address={tx.to} />
-          ))}
+        {tx.to && (
+          <AddressOrENSName
+            address={tx.to}
+            ensName={ensTo}
+            selectedAddress={selectedAddress}
+          />
+        )}
       </span>
       <span className="col-span-2 truncate">
         <TransactionValue value={tx.value} />

src/types.ts

@@ -19,3 +19,7 @@ export type TransactionChunk = {
   firstPage: boolean;
   lastPage: boolean;
 };
+
+export type ENSReverseCache = {
+  [address: string]: string;
+};

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }