From 1e095b6dd3bacce0819519f572d0061974335d6b Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Wed, 14 Jul 2021 16:30:28 -0300 Subject: [PATCH] Extract subcomponents --- src/Transaction.tsx | 209 ++---------------------------------- src/transaction/Details.tsx | 144 +++++++++++++++++++++++++ src/transaction/Logs.tsx | 57 ++++++++++ 3 files changed, 212 insertions(+), 198 deletions(-) create mode 100644 src/transaction/Details.tsx create mode 100644 src/transaction/Logs.tsx diff --git a/src/Transaction.tsx b/src/Transaction.tsx index e18a163..3f450e9 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -7,27 +7,11 @@ import React, { } from "react"; import { Route, Switch, useParams } from "react-router-dom"; import { BigNumber, ethers } from "ethers"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faCheckCircle, - faTimesCircle, -} from "@fortawesome/free-solid-svg-icons"; import StandardFrame from "./StandardFrame"; import StandardSubtitle from "./StandardSubtitle"; import Tab from "./components/Tab"; -import ContentFrame from "./ContentFrame"; -import InfoRow from "./components/InfoRow"; -import BlockLink from "./components/BlockLink"; -import AddressHighlighter from "./components/AddressHighlighter"; -import AddressOrENSName from "./components/AddressOrENSName"; -import AddressLink from "./components/AddressLink"; -import Copy from "./components/Copy"; -import Timestamp from "./components/Timestamp"; -import InternalTransfer from "./components/InternalTransfer"; -import MethodName from "./components/MethodName"; -import GasValue from "./components/GasValue"; -import FormattedBalance from "./components/FormattedBalance"; -import TokenTransferItem from "./TokenTransferItem"; +import Details from "./transaction/Details"; +import Logs from "./transaction/Logs"; import erc20 from "./erc20.json"; import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types"; import { RuntimeContext } from "./useRuntime"; @@ -140,7 +124,7 @@ const Transaction: React.FC = () => { return false; }, [txData, transfers]); - const traceTransfersUsingOtsTrace = useCallback(async () => { + const traceTransfers = useCallback(async () => { if (!provider || !txData) { return; } @@ -160,8 +144,8 @@ const Transaction: React.FC = () => { setTransfers(_transfers); }, [provider, txData]); useEffect(() => { - traceTransfersUsingOtsTrace(); - }, [traceTransfersUsingOtsTrace]); + traceTransfers(); + }, [traceTransfers]); const selectionCtx = useSelection(); @@ -178,185 +162,14 @@ const Transaction: React.FC = () => { - - -
- {txData.transactionHash} - -
-
- - {txData.status ? ( - - - Success - - ) : ( - - - Fail - - )} - - -
- - - {txData.confirmations} Block Confirmations - -
-
- - - - -
- - - - -
-
- -
- - - - -
- {transfers && ( -
- {transfers.map((t, i) => ( - - ))} -
- )} -
- - - - {txData.tokenTransfers.length > 0 && ( - -
- {txData.tokenTransfers.map((t, i) => ( - - ))} -
-
- )} - - - {ethers.utils.formatEther(txData.value)} Ether - - - - Ether - - -
- - Ether ( - {" "} - Gwei) - - {sendsEthToMiner && ( - - Flashbots - - )} -
-
- N/A - - - - - ( - {(txData.gasUsedPerc * 100).toFixed(2)}%) - - {txData.nonce} - - - {txData.transactionIndex} - - - -