From 751ef0c9af900669c8c762c48f2955fedab5e195 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 2 Dec 2021 16:19:03 -0300
Subject: [PATCH] Extract higher level hook

---
 src/address/AddressTransactionResults.tsx | 17 ++------------
 src/block/BlockTransactionResults.tsx     | 17 ++------------
 src/hooks.ts                              | 27 +++++++++++++++++++++++
 src/transaction/Details.tsx               | 20 +++--------------
 src/transaction/Logs.tsx                  | 20 ++++-------------
 5 files changed, 38 insertions(+), 63 deletions(-)
 create mode 100644 src/hooks.ts

diff --git a/src/address/AddressTransactionResults.tsx b/src/address/AddressTransactionResults.tsx
index ce7cf45..07f8e4f 100644
--- a/src/address/AddressTransactionResults.tsx
+++ b/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>
diff --git a/src/block/BlockTransactionResults.tsx b/src/block/BlockTransactionResults.tsx
index 44caeb1..fc5bf9f 100644
--- a/src/block/BlockTransactionResults.tsx
+++ b/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>
diff --git a/src/hooks.ts b/src/hooks.ts
new file mode 100644
index 0000000..a81f10b
--- /dev/null
+++ b/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;
+};
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index aa7d393..e4daf2f 100644
--- a/src/transaction/Details.tsx
+++ b/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>
diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index dedb178..eba82e1 100644
--- a/src/transaction/Logs.tsx
+++ b/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;