Replace Sourcify metadata reading by SWR; 2nd batch of refactorings

src/TokenTransferItem.tsx

@@ -6,28 +6,20 @@ import TransactionAddress from "./components/TransactionAddress";
 import ValueHighlighter from "./components/ValueHighlighter";
 import FormattedBalance from "./components/FormattedBalance";
 import USDAmount from "./components/USDAmount";
-import {
+import { AddressContext, TokenMeta, TokenTransfer } from "./types";
-  AddressContext,
-  ChecksummedAddress,
-  TokenMeta,
-  TokenTransfer,
-} from "./types";
 import { RuntimeContext } from "./useRuntime";
 import { useBlockNumberContext } from "./useBlockTagContext";
-import { Metadata } from "./sourcify/useSourcify";
 import { useTokenUSDOracle } from "./usePriceOracle";
 
 type TokenTransferItemProps = {
   t: TokenTransfer;
   tokenMeta?: TokenMeta | null | undefined;
-  metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
 // TODO: handle partial
 const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
   t,
   tokenMeta,
-  metadatas,
 }) => {
   const { provider } = useContext(RuntimeContext);
   const blockNumber = useBlockNumberContext();
@@ -40,7 +32,6 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
           <TransactionAddress
             address={t.from}
             addressCtx={AddressContext.FROM}
-            metadata={metadatas[t.from]}
             showCodeIndicator
           />
         </div>
@@ -51,7 +42,6 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
           <TransactionAddress
             address={t.to}
             addressCtx={AddressContext.TO}
-            metadata={metadatas[t.to]}
             showCodeIndicator
           />
         </div>
@@ -67,7 +57,7 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
               />
             </ValueHighlighter>
           </span>
-          <TransactionAddress address={t.token} metadata={metadatas[t.token]} />
+          <TransactionAddress address={t.token} />
           {tokenMeta && quote !== undefined && decimals !== undefined && (
             <span className="px-2 border-gray-200 border rounded-lg bg-gray-100 text-gray-600">
               <USDAmount

src/address/AddressTransactionResults.tsx

@@ -18,7 +18,6 @@ import { useMultipleETHUSDOracle } from "../usePriceOracle";
 import { RuntimeContext } from "../useRuntime";
 import { useParams, useSearchParams } from "react-router-dom";
 import { ChecksummedAddress, ProcessedTransaction } from "../types";
-import { useContractsMetadata } from "../hooks";
 import { useAddressBalance, useContractCreator } from "../useErigonHooks";
 import { BlockNumberContext } from "../useBlockTagContext";
 
@@ -112,22 +111,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
   }, [page]);
   const priceMap = useMultipleETHUSDOracle(provider, blockTags);
 
-  // Calculate Sourcify metadata for all addresses that appear on this page results
-  const addresses = useMemo(() => {
-    const _addresses = [address];
-    if (page) {
-      for (const t of page) {
-        if (t.to) {
-          _addresses.push(t.to);
-        }
-        if (t.createdContractAddress) {
-          _addresses.push(t.createdContractAddress);
-        }
-      }
-    }
-    return _addresses;
-  }, [address, page]);
-  const metadatas = useContractsMetadata(addresses, provider);
   const balance = useAddressBalance(provider, address);
   const creator = useContractCreator(provider, address);
 
@@ -181,7 +164,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
                 selectedAddress={address}
                 feeDisplay={feeDisplay}
                 priceMap={priceMap}
-                metadatas={metadatas}
               />
             ))}
             <NavBar address={address} page={page} controller={controller} />

src/block/BlockTransactionResults.tsx

@@ -8,10 +8,9 @@ import TransactionItem from "../search/TransactionItem";
 import { useFeeToggler } from "../search/useFeeToggler";
 import { RuntimeContext } from "../useRuntime";
 import { SelectionContext, useSelection } from "../useSelection";
-import { ChecksummedAddress, ProcessedTransaction } from "../types";
+import { ProcessedTransaction } from "../types";
 import { PAGE_SIZE } from "../params";
 import { useMultipleETHUSDOracle } from "../usePriceOracle";
-import { useContractsMetadata } from "../hooks";
 
 type BlockTransactionResultsProps = {
   blockTag: BlockTag;
@@ -32,24 +31,6 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
   const blockTags = useMemo(() => [blockTag], [blockTag]);
   const priceMap = useMultipleETHUSDOracle(provider, blockTags);
 
-  const addresses = useMemo((): ChecksummedAddress[] => {
-    if (!page) {
-      return [];
-    }
-
-    const _addresses: ChecksummedAddress[] = [];
-    for (const t of page) {
-      if (t.to) {
-        _addresses.push(t.to);
-      }
-      if (t.createdContractAddress) {
-        _addresses.push(t.createdContractAddress);
-      }
-    }
-    return _addresses;
-  }, [page]);
-  const metadatas = useContractsMetadata(addresses, provider);
-
   return (
     <ContentFrame>
       <div className="flex justify-between items-baseline py-3">
@@ -78,7 +59,6 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
               tx={tx}
               feeDisplay={feeDisplay}
               priceMap={priceMap}
-              metadatas={metadatas}
             />
           ))}
           <div className="flex justify-between items-baseline py-3">

src/components/DecoratedAddressLink.tsx

@@ -8,8 +8,9 @@ import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
 import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
 import SourcifyLogo from "../sourcify/SourcifyLogo";
 import PlainAddress from "./PlainAddress";
-import { Metadata } from "../sourcify/useSourcify";
 import { RuntimeContext } from "../useRuntime";
+import { useAppConfigContext } from "../useAppConfig";
+import { useSourcifyMetadata } from "../sourcify/useSourcify";
 import { useResolvedAddress } from "../useResolvedAddresses";
 import { AddressContext, ChecksummedAddress, ZERO_ADDRESS } from "../types";
 import { resolverRendererRegistry } from "../api/address-resolver";
@@ -23,7 +24,6 @@ type DecoratedAddressLinkProps = {
   selfDestruct?: boolean | undefined;
   txFrom?: boolean | undefined;
   txTo?: boolean | undefined;
-  metadata?: Metadata | null | undefined;
   eoa?: boolean | undefined;
 };
 
@@ -36,9 +36,16 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
   selfDestruct,
   txFrom,
   txTo,
-  metadata,
   eoa,
 }) => {
+  const { provider } = useContext(RuntimeContext);
+  const { sourcifySource } = useAppConfigContext();
+  const metadata = useSourcifyMetadata(
+    address,
+    provider?.network.chainId,
+    sourcifySource
+  );
+
   const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
   const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;
 

src/components/TransactionAddress.tsx

@@ -5,20 +5,17 @@ import { useSelectedTransaction } from "../useSelectedTransaction";
 import { useBlockNumberContext } from "../useBlockTagContext";
 import { RuntimeContext } from "../useRuntime";
 import { useHasCode } from "../useErigonHooks";
-import { Metadata } from "../sourcify/useSourcify";
 import { AddressContext, ChecksummedAddress } from "../types";
 
 type TransactionAddressProps = {
   address: ChecksummedAddress;
   addressCtx?: AddressContext | undefined;
-  metadata?: Metadata | null | undefined;
   showCodeIndicator?: boolean;
 };
 
 const TransactionAddress: React.FC<TransactionAddressProps> = ({
   address,
   addressCtx,
-  metadata,
   showCodeIndicator = false,
 }) => {
   const txData = useSelectedTransaction();
@@ -46,7 +43,6 @@ const TransactionAddress: React.FC<TransactionAddressProps> = ({
         txFrom={address === txData?.from}
         txTo={address === txData?.to || creation}
         creation={creation}
-        metadata={metadata}
         eoa={
           showCodeIndicator && blockNumber !== undefined
             ? !toHasCode

src/search/TransactionItem.tsx

@@ -14,20 +14,18 @@ import TransactionDirection, {
   Flags,
 } from "../components/TransactionDirection";
 import TransactionValue from "../components/TransactionValue";
-import { ChecksummedAddress, ProcessedTransaction } from "../types";
+import { ProcessedTransaction } from "../types";
 import { FeeDisplay } from "./useFeeToggler";
 import { RuntimeContext } from "../useRuntime";
 import { useHasCode } from "../useErigonHooks";
 import { formatValue } from "../components/formatter";
 import ETH2USDValue from "../components/ETH2USDValue";
-import { Metadata } from "../sourcify/useSourcify";
 
 type TransactionItemProps = {
   tx: ProcessedTransaction;
   selectedAddress?: string;
   feeDisplay: FeeDisplay;
   priceMap: Record<BlockTag, BigNumber>;
-  metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
 const TransactionItem: React.FC<TransactionItemProps> = ({
@@ -35,7 +33,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
   selectedAddress,
   feeDisplay,
   priceMap,
-  metadatas,
 }) => {
   const { provider } = useContext(RuntimeContext);
   const toHasCode = useHasCode(
@@ -113,7 +110,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 address={tx.to}
                 selectedAddress={selectedAddress}
                 miner={tx.miner === tx.to}
-                metadata={metadatas[tx.to]}
                 eoa={toHasCode === undefined ? undefined : !toHasCode}
               />
             </AddressHighlighter>
@@ -123,7 +119,6 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
                 address={tx.createdContractAddress!}
                 selectedAddress={selectedAddress}
                 creation
-                metadata={metadatas[tx.createdContractAddress!]}
                 eoa={false}
               />
             </AddressHighlighter>

src/transaction/Details.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useState } from "react";
+import React, { useContext, useState } from "react";
 import { Tab } from "@headlessui/react";
 import { TransactionDescription } from "@ethersproject/abi";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -25,11 +25,7 @@ import USDValue from "../components/USDValue";
 import FormattedBalance from "../components/FormattedBalance";
 import ETH2USDValue from "../components/ETH2USDValue";
 import TokenTransferItem from "../TokenTransferItem";
-import {
+import { TransactionData, InternalOperation } from "../types";
-  TransactionData,
-  InternalOperation,
-  ChecksummedAddress,
-} from "../types";
 import PercentageBar from "../components/PercentageBar";
 import ExternalLink from "../components/ExternalLink";
 import RelativePosition from "../components/RelativePosition";
@@ -43,7 +39,6 @@ import {
 } from "../use4Bytes";
 import { DevDoc, Metadata, useError, UserDoc } from "../sourcify/useSourcify";
 import { RuntimeContext } from "../useRuntime";
-import { useContractsMetadata } from "../hooks";
 import { useTransactionError } from "../useErigonHooks";
 import { useChainInfo } from "../useChainInfo";
 import { useETHUSDOracle } from "../usePriceOracle";
@@ -94,22 +89,6 @@ const Details: React.FC<DetailsProps> = ({
     txData?.confirmedData?.blockNumber
   );
 
-  const addresses = useMemo(() => {
-    const _addresses: ChecksummedAddress[] = [];
-    if (txData.to) {
-      _addresses.push(txData.to);
-    }
-    if (txData.confirmedData?.createdContractAddress) {
-      _addresses.push(txData.confirmedData.createdContractAddress);
-    }
-    for (const t of txData.tokenTransfers) {
-      _addresses.push(t.from);
-      _addresses.push(t.to);
-      _addresses.push(t.token);
-    }
-    return _addresses;
-  }, [txData]);
-  const metadatas = useContractsMetadata(addresses, provider);
   const [errorMsg, outputData, isCustomError] = useTransactionError(
     provider,
     txData.transactionHash
@@ -269,11 +248,7 @@ const Details: React.FC<DetailsProps> = ({
       <InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
         {txData.to ? (
           <div className="flex items-baseline space-x-2 -ml-1">
-            <TransactionAddress
+            <TransactionAddress address={txData.to} showCodeIndicator />
-              address={txData.to}
-              metadata={metadatas?.[txData.to]}
-              showCodeIndicator
-            />
             <Copy value={txData.to} />
           </div>
         ) : txData.confirmedData === undefined ? (
@@ -284,9 +259,6 @@ const Details: React.FC<DetailsProps> = ({
           <div className="flex items-baseline space-x-2 -ml-1">
             <TransactionAddress
               address={txData.confirmedData?.createdContractAddress!}
-              metadata={
-                metadatas?.[txData.confirmedData?.createdContractAddress!]
-              }
             />
             <Copy value={txData.confirmedData.createdContractAddress!} />
           </div>
@@ -316,7 +288,6 @@ const Details: React.FC<DetailsProps> = ({
               key={i}
               t={t}
               tokenMeta={txData.tokenMetas[t.token]}
-              metadatas={metadatas}
             />
           ))}
         </InfoRow>

src/transaction/LogEntry.tsx

@@ -14,10 +14,9 @@ import { Metadata } from "../sourcify/useSourcify";
 type LogEntryProps = {
   log: Log;
   logDesc: LogDescription | null | undefined;
-  metadatas: Record<ChecksummedAddress, Metadata | null | undefined>;
 };
 
-const LogEntry: React.FC<LogEntryProps> = ({ log, logDesc, metadatas }) => {
+const LogEntry: React.FC<LogEntryProps> = ({ log, logDesc }) => {
   const rawTopic0 = log.topics[0];
   const topic0 = useTopic0(rawTopic0);
 
@@ -56,10 +55,7 @@ const LogEntry: React.FC<LogEntryProps> = ({ log, logDesc, metadatas }) => {
           <div className="font-bold text-right">Address</div>
           <div className="col-span-11 mr-auto">
             <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-              <TransactionAddress
+              <TransactionAddress address={log.address} />
-                address={log.address}
-                metadata={metadatas[log.address]}
-              />
               <Copy value={log.address} />
             </div>
           </div>

src/transaction/Logs.tsx

@@ -62,12 +62,7 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
           {txData.confirmedData.logs.length > 0 ? (
             <>
               {txData.confirmedData.logs.map((l, i) => (
-                <LogEntry
+                <LogEntry key={i} log={l} logDesc={logDescs?.[i]} />
-                  key={i}
-                  log={l}
-                  logDesc={logDescs?.[i]}
-                  metadatas={metadatas}
-                />
               ))}
             </>
           ) : (