From edd3b87245f40f2230101bfc02a484eb0249bead Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 10 Aug 2022 05:21:08 -0300
Subject: [PATCH] Push down more hooks executions

---
 src/TransactionPageContent.tsx | 28 +++-------------------------
 src/transaction/Details.tsx    | 31 ++++++++++++++++++++-----------
 2 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/src/TransactionPageContent.tsx b/src/TransactionPageContent.tsx
index ca1f770..239dcb0 100644
--- a/src/TransactionPageContent.tsx
+++ b/src/TransactionPageContent.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from "react";
+import React, { useContext } from "react";
 import { Route, Routes } from "react-router-dom";
 import { Tab } from "@headlessui/react";
 import StandardFrame from "./StandardFrame";
@@ -6,7 +6,7 @@ import StandardSubtitle from "./StandardSubtitle";
 import ContentFrame from "./ContentFrame";
 import NavTab from "./components/NavTab";
 import { RuntimeContext } from "./useRuntime";
-import { useInternalOperations, useTxData } from "./useErigonHooks";
+import { useTxData } from "./useErigonHooks";
 import { SelectionContext, useSelection } from "./useSelection";
 import { SelectedTransactionContext } from "./useSelectedTransaction";
 import { BlockNumberContext } from "./useBlockTagContext";
@@ -25,19 +25,6 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
   const { provider } = useContext(RuntimeContext);
 
   const txData = useTxData(provider, txHash);
-  const internalOps = useInternalOperations(provider, txData);
-  const sendsEthToMiner = useMemo(() => {
-    if (!txData || !internalOps) {
-      return false;
-    }
-
-    for (const t of internalOps) {
-      if (t.to === txData.confirmedData?.miner) {
-        return true;
-      }
-    }
-    return false;
-  }, [txData, internalOps]);
 
   const selectionCtx = useSelection();
 
@@ -71,16 +58,7 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
               </Tab.Group>
               <React.Suspense fallback={null}>
                 <Routes>
-                  <Route
-                    index
-                    element={
-                      <Details
-                        txData={txData}
-                        internalOps={internalOps}
-                        sendsEthToMiner={sendsEthToMiner}
-                      />
-                    }
-                  />
+                  <Route index element={<Details txData={txData} />} />
                   <Route path="logs" element={<Logs txData={txData} />} />
                   <Route path="trace" element={<Trace txData={txData} />} />
                 </Routes>
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 4bb9c2e..a34a212 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import { Tab } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
@@ -24,7 +24,7 @@ import USDValue from "../components/USDValue";
 import FormattedBalance from "../components/FormattedBalance";
 import ETH2USDValue from "../components/ETH2USDValue";
 import TokenTransferItem from "../TokenTransferItem";
-import { TransactionData, InternalOperation } from "../types";
+import { TransactionData } from "../types";
 import PercentageBar from "../components/PercentageBar";
 import ExternalLink from "../components/ExternalLink";
 import RelativePosition from "../components/RelativePosition";
@@ -43,21 +43,17 @@ import {
   useTransactionDescription as useSourcifyTransactionDescription,
 } from "../sourcify/useSourcify";
 import { RuntimeContext } from "../useRuntime";
-import { useTransactionError } from "../useErigonHooks";
+import { useInternalOperations, useTransactionError } from "../useErigonHooks";
 import { useChainInfo } from "../useChainInfo";
 import { useETHUSDOracle } from "../usePriceOracle";
 
 type DetailsProps = {
   txData: TransactionData;
-  internalOps?: InternalOperation[];
-  sendsEthToMiner: boolean;
 };
 
-const Details: React.FC<DetailsProps> = ({
-  txData,
-  internalOps,
-  sendsEthToMiner,
-}) => {
+const Details: React.FC<DetailsProps> = ({ txData }) => {
+  const { provider } = useContext(RuntimeContext);
+
   const hasEIP1559 =
     txData.confirmedData?.blockBaseFeePerGas !== undefined &&
     txData.confirmedData?.blockBaseFeePerGas !== null;
@@ -71,7 +67,20 @@ const Details: React.FC<DetailsProps> = ({
     txData.value
   );
 
-  const { provider } = useContext(RuntimeContext);
+  const internalOps = useInternalOperations(provider, txData);
+  const sendsEthToMiner = useMemo(() => {
+    if (!txData || !internalOps) {
+      return false;
+    }
+
+    for (const t of internalOps) {
+      if (t.to === txData.confirmedData?.miner) {
+        return true;
+      }
+    }
+    return false;
+  }, [txData, internalOps]);
+
   const { sourcifySource } = useAppConfigContext();
   const metadata = useSourcifyMetadata(
     txData?.to,