diff --git a/src/Transaction.tsx b/src/Transaction.tsx index 94b2e43..905b5d8 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -1,13 +1,71 @@ -import React from "react"; -import { useParams } from "react-router-dom"; -import TransactionPageContent from "./TransactionPageContent"; +import React, { useContext } from "react"; +import { useParams, Route, Routes } from "react-router-dom"; +import { Tab } from "@headlessui/react"; +import StandardFrame from "./StandardFrame"; +import StandardSubtitle from "./StandardSubtitle"; +import ContentFrame from "./ContentFrame"; +import NavTab from "./components/NavTab"; +import { RuntimeContext } from "./useRuntime"; +import { useTxData } from "./useErigonHooks"; +import { SelectionContext, useSelection } from "./useSelection"; +import { SelectedTransactionContext } from "./useSelectedTransaction"; +import { BlockNumberContext } from "./useBlockTagContext"; + +const Details = React.lazy(() => import("./transaction/Details")); +const Logs = React.lazy(() => import("./transaction/Logs")); +const Trace = React.lazy(() => import("./transaction/Trace")); const Transaction: React.FC = () => { - const { txhash } = useParams(); - if (txhash === undefined) { + const { txhash: txHash } = useParams(); + if (txHash === undefined) { throw new Error("txhash couldn't be undefined here"); } - return ; + + const { provider } = useContext(RuntimeContext); + const txData = useTxData(provider, txHash); + const selectionCtx = useSelection(); + + return ( + + + + Transaction Details + {txData === null && ( + + + Transaction {txHash} not + found. + + + )} + {txData && ( + + + + Overview + {txData.confirmedData?.blockNumber !== undefined && ( + + Logs + {txData && + ` (${txData.confirmedData?.logs?.length ?? 0})`} + + )} + Trace + + + + + } /> + } /> + } /> + + + + )} + + + + ); }; export default Transaction; diff --git a/src/TransactionPageContent.tsx b/src/TransactionPageContent.tsx deleted file mode 100644 index 239dcb0..0000000 --- a/src/TransactionPageContent.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React, { useContext } from "react"; -import { Route, Routes } from "react-router-dom"; -import { Tab } from "@headlessui/react"; -import StandardFrame from "./StandardFrame"; -import StandardSubtitle from "./StandardSubtitle"; -import ContentFrame from "./ContentFrame"; -import NavTab from "./components/NavTab"; -import { RuntimeContext } from "./useRuntime"; -import { useTxData } from "./useErigonHooks"; -import { SelectionContext, useSelection } from "./useSelection"; -import { SelectedTransactionContext } from "./useSelectedTransaction"; -import { BlockNumberContext } from "./useBlockTagContext"; - -const Details = React.lazy(() => import("./transaction/Details")); -const Logs = React.lazy(() => import("./transaction/Logs")); -const Trace = React.lazy(() => import("./transaction/Trace")); - -type TransactionPageContentProps = { - txHash: string; -}; - -const TransactionPageContent: React.FC = ({ - txHash, -}) => { - const { provider } = useContext(RuntimeContext); - - const txData = useTxData(provider, txHash); - - const selectionCtx = useSelection(); - - return ( - - - - Transaction Details - {txData === null && ( - - - Transaction {txHash} not - found. - - - )} - {txData && ( - - - - Overview - {txData.confirmedData?.blockNumber !== undefined && ( - - Logs - {txData && - ` (${txData.confirmedData?.logs?.length ?? 0})`} - - )} - Trace - - - - - } /> - } /> - } /> - - - - )} - - - - ); -}; - -export default TransactionPageContent;