Use ResolvedAddresses table instead of pre-resolved name parameter

src/AddressTransactions.tsx

@@ -165,7 +165,7 @@ const AddressTransactions: React.FC = () => {
   }, [provider, checksummedAddress, params.direction, hash, controller]);
 
   const page = useMemo(() => controller?.getPage(), [controller]);
-  const reverseCache = useENSCache(provider, page);
+  const resolvedAddresses = useENSCache(provider, page);
 
   const blockTags: BlockTag[] = useMemo(() => {
     if (!page) {
@@ -283,7 +283,7 @@ const AddressTransactions: React.FC = () => {
                             <TransactionItem
                               key={tx.hash}
                               tx={tx}
-                              ensCache={reverseCache}
+                              resolvedAddresses={resolvedAddresses}
                               selectedAddress={checksummedAddress}
                               feeDisplay={feeDisplay}
                               priceMap={priceMap}

src/block/BlockTransactionResults.tsx

@@ -29,7 +29,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
   const selectionCtx = useSelection();
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
   const { provider } = useContext(RuntimeContext);
-  const reverseCache = useENSCache(provider, page);
+  const resolvedAddresses = useENSCache(provider, page);
   const blockTags = useMemo(() => [blockTag], [blockTag]);
   const priceMap = useMultipleETHUSDOracle(provider, blockTags);
 
@@ -59,7 +59,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
             <TransactionItem
               key={tx.hash}
               tx={tx}
-              ensCache={reverseCache}
+              resolvedAddresses={resolvedAddresses}
               feeDisplay={feeDisplay}
               priceMap={priceMap}
             />

src/components/AddressOrENSName.tsx

@@ -3,49 +3,53 @@ import Address from "./Address";
 import AddressLink from "./AddressLink";
 import ENSName from "./ENSName";
 import ENSNameLink from "./ENSNameLink";
+import { ResolvedAddresses } from "../api/address-resolver";
 
 type AddressOrENSNameProps = {
   address: string;
-  ensName?: string;
   selectedAddress?: string;
   text?: string;
   dontOverrideColors?: boolean;
+  resolvedAddresses?: ResolvedAddresses | undefined;
 };
 
 const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   address,
-  ensName,
   selectedAddress,
   text,
   dontOverrideColors,
-}) => (
+  resolvedAddresses,
-  <>
+}) => {
-    {address === selectedAddress ? (
+  const name = resolvedAddresses?.[address];
-      <>
+  return (
-        {ensName ? (
+    <>
-          <ENSName name={ensName} address={address} />
+      {address === selectedAddress ? (
-        ) : (
+        <>
-          <Address address={address} />
+          {name ? (
-        )}
+            <ENSName name={name} address={address} />
-      </>
+          ) : (
-    ) : (
+            <Address address={address} />
-      <>
+          )}
-        {ensName ? (
+        </>
-          <ENSNameLink
+      ) : (
-            name={ensName}
+        <>
-            address={address}
+          {name ? (
-            dontOverrideColors={dontOverrideColors}
+            <ENSNameLink
-          />
+              name={name}
-        ) : (
+              address={address}
-          <AddressLink
+              dontOverrideColors={dontOverrideColors}
-            address={address}
+            />
-            text={text}
+          ) : (
-            dontOverrideColors={dontOverrideColors}
+            <AddressLink
-          />
+              address={address}
-        )}
+              text={text}
-      </>
+              dontOverrideColors={dontOverrideColors}
-    )}
+            />
-  </>
+          )}
-);
+        </>
+      )}
+    </>
+  );
+};
 
 export default React.memo(AddressOrENSName);

src/components/DecoratedAddressLink.tsx

@@ -8,10 +8,10 @@ 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 { ResolvedAddresses } from "../api/address-resolver";
 
 type DecoratedAddressLinkProps = {
   address: string;
-  ensName?: string;
   selectedAddress?: string;
   text?: string;
   addressCtx?: AddressContext;
@@ -21,11 +21,11 @@ type DecoratedAddressLinkProps = {
   txFrom?: boolean;
   txTo?: boolean;
   tokenMeta?: TokenMeta;
+  resolvedAddresses?: ResolvedAddresses | undefined;
 };
 
 const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
   address,
-  ensName,
   selectedAddress,
   text,
   addressCtx,
@@ -35,6 +35,7 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
   txFrom,
   txTo,
   tokenMeta,
+  resolvedAddresses,
 }) => {
   const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
   const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
@@ -81,10 +82,10 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
       )}
       <AddressOrENSName
         address={address}
-        ensName={ensName}
         selectedAddress={selectedAddress}
         text={text}
         dontOverrideColors={mint || burn}
+        resolvedAddresses={resolvedAddresses}
       />
     </div>
   );

src/search/TransactionItem.tsx

@@ -22,7 +22,7 @@ import { ResolvedAddresses } from "../api/address-resolver";
 
 type TransactionItemProps = {
   tx: ProcessedTransaction;
-  ensCache?: ResolvedAddresses;
+  resolvedAddresses?: ResolvedAddresses;
   selectedAddress?: string;
   feeDisplay: FeeDisplay;
   priceMap: Record<BlockTag, BigNumber>;
@@ -30,7 +30,7 @@ type TransactionItemProps = {
 
 const TransactionItem: React.FC<TransactionItemProps> = ({
   tx,
-  ensCache,
+  resolvedAddresses,
   selectedAddress,
   feeDisplay,
   priceMap,
@@ -51,12 +51,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
     }
   }
 
-  const ensFrom = ensCache && tx.from && ensCache[tx.from];
-  const ensTo = ensCache && tx.to && ensCache[tx.to];
-  const ensCreated =
-    ensCache &&
-    tx.createdContractAddress &&
-    ensCache[tx.createdContractAddress];
   const flash = tx.gasPrice.isZero() && tx.internalMinerInteraction;
 
   return (
@@ -88,9 +82,9 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
             <AddressHighlighter address={tx.from}>
               <DecoratedAddressLink
                 address={tx.from}
-                ensName={ensFrom}
                 selectedAddress={selectedAddress}
                 miner={tx.miner === tx.from}
+                resolvedAddresses={resolvedAddresses}
               />
             </AddressHighlighter>
           )}
@@ -108,18 +102,18 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
             <AddressHighlighter address={tx.to}>
               <DecoratedAddressLink
                 address={tx.to}
-                ensName={ensTo}
                 selectedAddress={selectedAddress}
                 miner={tx.miner === tx.to}
+                resolvedAddresses={resolvedAddresses}
               />
             </AddressHighlighter>
           ) : (
             <AddressHighlighter address={tx.createdContractAddress!}>
               <DecoratedAddressLink
                 address={tx.createdContractAddress!}
-                ensName={ensCreated}
                 selectedAddress={selectedAddress}
                 creation
+                resolvedAddresses={resolvedAddresses}
               />
             </AddressHighlighter>
           )}