Extract higher level hook

src/address/AddressTransactionResults.tsx

@@ -8,17 +8,12 @@ import TransactionItem from "../search/TransactionItem";
 import UndefinedPageControl from "../search/UndefinedPageControl";
 import { useFeeToggler } from "../search/useFeeToggler";
 import { SelectionContext, useSelection } from "../useSelection";
-import {
-  useDedupedAddresses,
-  useMultipleMetadata,
-} from "../sourcify/useSourcify";
-import { useAddressesWithCode } from "../useErigonHooks";
 import { useMultipleETHUSDOracle } from "../usePriceOracle";
 import { RuntimeContext } from "../useRuntime";
 import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses";
-import { useAppConfigContext } from "../useAppConfig";
 import { useParams, useSearchParams } from "react-router-dom";
 import { ChecksummedAddress } from "../types";
+import { useContractsMetadata } from "../hooks";
 
 type AddressTransactionResultsProps = {
   address: ChecksummedAddress;
@@ -123,15 +118,7 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
     }
     return _addresses;
   }, [address, page]);
-  const deduped = useDedupedAddresses(addresses);
-  const contracts = useAddressesWithCode(provider, deduped);
-  const { sourcifySource } = useAppConfigContext();
-  const metadatas = useMultipleMetadata(
-    undefined,
-    contracts,
-    provider?.network.chainId,
-    sourcifySource
-  );
+  const metadatas = useContractsMetadata(addresses, provider);
 
   return (
     <ContentFrame tabs>

src/block/BlockTransactionResults.tsx

@@ -12,12 +12,7 @@ import { pageCollector, useResolvedAddresses } from "../useResolvedAddresses";
 import { ChecksummedAddress, ProcessedTransaction } from "../types";
 import { PAGE_SIZE } from "../params";
 import { useMultipleETHUSDOracle } from "../usePriceOracle";
-import { useAppConfigContext } from "../useAppConfig";
-import {
-  useDedupedAddresses,
-  useMultipleMetadata,
-} from "../sourcify/useSourcify";
-import { useAddressesWithCode } from "../useErigonHooks";
+import { useContractsMetadata } from "../hooks";
 
 type BlockTransactionResultsProps = {
   blockTag: BlockTag;
@@ -47,15 +42,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
 
     return page.map((t) => t.to).filter((to): to is string => to !== undefined);
   }, [page]);
-  const deduped = useDedupedAddresses(addresses);
-  const contracts = useAddressesWithCode(provider, deduped);
-  const { sourcifySource } = useAppConfigContext();
-  const metadatas = useMultipleMetadata(
-    undefined,
-    contracts,
-    provider?.network.chainId,
-    sourcifySource
-  );
+  const metadatas = useContractsMetadata(addresses, provider);
 
   return (
     <ContentFrame>

src/hooks.ts

@@ -0,0 +1,27 @@
+import { JsonRpcProvider } from "@ethersproject/providers";
+import { ChecksummedAddress } from "./types";
+import {
+  Metadata,
+  useDedupedAddresses,
+  useMultipleMetadata,
+} from "./sourcify/useSourcify";
+import { useAppConfigContext } from "./useAppConfig";
+import { useAddressesWithCode } from "./useErigonHooks";
+
+export const useContractsMetadata = (
+  addresses: ChecksummedAddress[],
+  provider: JsonRpcProvider | undefined,
+  baseMetadatas?: Record<string, Metadata | null>
+) => {
+  const deduped = useDedupedAddresses(addresses);
+  const contracts = useAddressesWithCode(provider, deduped);
+  const { sourcifySource } = useAppConfigContext();
+  const metadatas = useMultipleMetadata(
+    baseMetadatas,
+    contracts,
+    provider?.network.chainId,
+    sourcifySource
+  );
+
+  return metadatas;
+};

src/transaction/Details.tsx

@@ -37,16 +37,10 @@ import {
   use4Bytes,
   useTransactionDescription,
 } from "../use4Bytes";
-import {
-  DevDoc,
-  useDedupedAddresses,
-  useMultipleMetadata,
-  UserDoc,
-} from "../sourcify/useSourcify";
-import { useAddressesWithCode } from "../useErigonHooks";
+import { DevDoc, UserDoc } from "../sourcify/useSourcify";
 import { ResolvedAddresses } from "../api/address-resolver";
 import { RuntimeContext } from "../useRuntime";
-import { useAppConfigContext } from "../useAppConfig";
+import { useContractsMetadata } from "../hooks";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -101,15 +95,7 @@ const Details: React.FC<DetailsProps> = ({
     }
     return _addresses;
   }, [txData]);
-  const deduped = useDedupedAddresses(addresses);
-  const contracts = useAddressesWithCode(provider, deduped);
-  const { sourcifySource } = useAppConfigContext();
-  const metadatas = useMultipleMetadata(
-    undefined,
-    contracts,
-    provider?.network.chainId,
-    sourcifySource
-  );
+  const metadatas = useContractsMetadata(addresses, provider);
 
   return (
     <ContentFrame tabs>

src/transaction/Logs.tsx

@@ -3,15 +3,10 @@ import { Interface } from "@ethersproject/abi";
 import ContentFrame from "../ContentFrame";
 import LogEntry from "./LogEntry";
 import { TransactionData } from "../types";
-import { useAppConfigContext } from "../useAppConfig";
-import {
-  Metadata,
-  useDedupedAddresses,
-  useMultipleMetadata,
-} from "../sourcify/useSourcify";
-import { useAddressesWithCode } from "../useErigonHooks";
+import { Metadata } from "../sourcify/useSourcify";
 import { ResolvedAddresses } from "../api/address-resolver";
 import { RuntimeContext } from "../useRuntime";
+import { useContractsMetadata } from "../hooks";
 
 type LogsProps = {
   txData: TransactionData;
@@ -35,15 +30,8 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
     [txData]
   );
   const { provider } = useContext(RuntimeContext);
-  const deduped = useDedupedAddresses(logAddresses);
-  const contracts = useAddressesWithCode(provider, deduped);
-  const { sourcifySource } = useAppConfigContext();
-  const metadatas = useMultipleMetadata(
-    baseMetadatas,
-    contracts,
-    provider?.network.chainId,
-    sourcifySource
-  );
+  const metadatas = useContractsMetadata(logAddresses, provider, baseMetadatas);
+
   const logDescs = useMemo(() => {
     if (!txData) {
       return undefined;