diff --git a/src/components/InternalSelfDestruct.tsx b/src/components/InternalSelfDestruct.tsx index f87233f..d3cd33a 100644 --- a/src/components/InternalSelfDestruct.tsx +++ b/src/components/InternalSelfDestruct.tsx @@ -1,10 +1,12 @@ -import React from "react"; +import React, { useContext } from "react"; import { formatEther } from "@ethersproject/units"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight"; import AddressHighlighter from "./AddressHighlighter"; import DecoratedAddressLink from "./DecoratedAddressLink"; import TransactionAddress from "./TransactionAddress"; +import { RuntimeContext } from "../useRuntime"; +import { useBlockDataFromTransaction } from "../useErigonHooks"; import { useChainInfo } from "../useChainInfo"; import { TransactionData, InternalOperation } from "../types"; @@ -17,12 +19,12 @@ const InternalSelfDestruct: React.FC = ({ txData, internalOp, }) => { + const { provider } = useContext(RuntimeContext); + const block = useBlockDataFromTransaction(provider, txData); const { nativeCurrency: { symbol }, } = useChainInfo(); - const toMiner = - txData.confirmedData?.miner !== undefined && - internalOp.to === txData.confirmedData.miner; + const toMiner = block?.miner !== undefined && internalOp.to === block.miner; return ( <> diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx index 0faeb77..e1de103 100644 --- a/src/components/InternalTransfer.tsx +++ b/src/components/InternalTransfer.tsx @@ -8,7 +8,7 @@ import AddressHighlighter from "./AddressHighlighter"; import DecoratedAddressLink from "./DecoratedAddressLink"; import USDAmount from "./USDAmount"; import { RuntimeContext } from "../useRuntime"; -import { useHasCode } from "../useErigonHooks"; +import { useBlockDataFromTransaction, useHasCode } from "../useErigonHooks"; import { useChainInfo } from "../useChainInfo"; import { useETHUSDOracle } from "../usePriceOracle"; import { TransactionData, InternalOperation } from "../types"; @@ -22,17 +22,16 @@ const InternalTransfer: React.FC = ({ txData, internalOp, }) => { + const { provider } = useContext(RuntimeContext); + const block = useBlockDataFromTransaction(provider, txData); + const { nativeCurrency: { symbol, decimals }, } = useChainInfo(); const fromMiner = - txData.confirmedData?.miner !== undefined && - internalOp.from === txData.confirmedData.miner; - const toMiner = - txData.confirmedData?.miner !== undefined && - internalOp.to === txData.confirmedData.miner; + block?.miner !== undefined && internalOp.from === block.miner; + const toMiner = block?.miner !== undefined && internalOp.to === block.miner; - const { provider } = useContext(RuntimeContext); const blockETHUSDPrice = useETHUSDOracle( provider, txData.confirmedData?.blockNumber diff --git a/src/components/TransactionAddress.tsx b/src/components/TransactionAddress.tsx index 823bd50..6045cf5 100644 --- a/src/components/TransactionAddress.tsx +++ b/src/components/TransactionAddress.tsx @@ -4,7 +4,7 @@ import DecoratedAddressLink from "./DecoratedAddressLink"; import { useSelectedTransaction } from "../useSelectedTransaction"; import { useBlockNumberContext } from "../useBlockTagContext"; import { RuntimeContext } from "../useRuntime"; -import { useHasCode } from "../useErigonHooks"; +import { useBlockDataFromTransaction, useHasCode } from "../useErigonHooks"; import { AddressContext, ChecksummedAddress } from "../types"; type TransactionAddressProps = { @@ -23,6 +23,8 @@ const TransactionAddress: React.FC = ({ const creation = address === txData?.confirmedData?.createdContractAddress; const { provider } = useContext(RuntimeContext); + const block = useBlockDataFromTransaction(provider, txData); + const blockNumber = useBlockNumberContext(); const toHasCode = useHasCode( provider, @@ -39,7 +41,7 @@ const TransactionAddress: React.FC = ({ = ({ txData }) => { const { provider } = useContext(RuntimeContext); + const block = useBlockDataFromTransaction(provider, txData); const hasEIP1559 = - txData.confirmedData?.blockBaseFeePerGas !== undefined && - txData.confirmedData?.blockBaseFeePerGas !== null; + block?.baseFeePerGas !== undefined && block?.baseFeePerGas !== null; const fourBytes = txData.to !== null ? extract4Bytes(txData.data) ?? "0x" : "0x"; @@ -74,7 +75,7 @@ const Details: React.FC = ({ txData }) => { const [sendsEthToMiner, internalOps] = useSendsToMiner( provider, txData.confirmedData ? txData.transactionHash : undefined, - txData.confirmedData?.miner + block?.miner ); const tokenTransfers = useTokenTransfers(txData); @@ -222,22 +223,24 @@ const Details: React.FC = ({ txData }) => { confirmations={txData.confirmedData.confirmations} /> -
- - -
+ {block && ( +
+ + +
+ )} - + {block && } )} @@ -366,18 +369,10 @@ const Details: React.FC = ({ txData }) => { )} - {txData.confirmedData && hasEIP1559 && ( + {block && hasEIP1559 && ( - {" "} - Gwei ( - {" "} - wei) + Gwei ( + wei) )} {txData.confirmedData && ( diff --git a/src/transaction/RewardSplit.tsx b/src/transaction/RewardSplit.tsx index 56dd0db..520ea0e 100644 --- a/src/transaction/RewardSplit.tsx +++ b/src/transaction/RewardSplit.tsx @@ -1,24 +1,30 @@ -import React from "react"; +import React, { useContext } from "react"; +import { BigNumber } from "@ethersproject/bignumber"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn"; import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins"; import FormattedBalance from "../components/FormattedBalance"; import PercentageGauge from "../components/PercentageGauge"; -import { TransactionData } from "../types"; +import { RuntimeContext } from "../useRuntime"; +import { useBlockDataFromTransaction } from "../useErigonHooks"; import { useChainInfo } from "../useChainInfo"; +import { TransactionData } from "../types"; type RewardSplitProps = { txData: TransactionData; }; const RewardSplit: React.FC = ({ txData }) => { + const { provider } = useContext(RuntimeContext); + const block = useBlockDataFromTransaction(provider, txData); + const { nativeCurrency: { symbol }, } = useChainInfo(); const paidFees = txData.gasPrice.mul(txData.confirmedData!.gasUsed); - const burntFees = txData.confirmedData!.blockBaseFeePerGas!.mul( - txData.confirmedData!.gasUsed - ); + const burntFees = block + ? block.baseFeePerGas!.mul(txData.confirmedData!.gasUsed) + : BigNumber.from(0); const minerReward = paidFees.sub(burntFees); const burntPerc = diff --git a/src/types.ts b/src/types.ts index e4ed03b..1379192 100644 --- a/src/types.ts +++ b/src/types.ts @@ -50,11 +50,7 @@ export type ConfirmedTransactionData = { status: boolean; blockNumber: number; transactionIndex: number; - blockBaseFeePerGas?: BigNumber | undefined | null; - blockTransactionCount: number; confirmations: number; - timestamp: number; - miner: string; createdContractAddress?: string; fee: BigNumber; gasUsed: BigNumber; diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts index e1c0815..3fee30e 100644 --- a/src/useErigonHooks.ts +++ b/src/useErigonHooks.ts @@ -155,12 +155,15 @@ const blockDataFetcher = async ( return await readBlock(provider, blockNumberOrHash); }; +// TODO: some callers may use only block headers? export const useBlockData = ( provider: JsonRpcProvider | undefined, - blockNumberOrHash: string + blockNumberOrHash: string | undefined ): ExtendedBlock | null | undefined => { const { data, error } = useSWRImmutable( - provider !== undefined ? [provider, blockNumberOrHash] : null, + provider !== undefined && blockNumberOrHash !== undefined + ? [provider, blockNumberOrHash] + : null, blockDataFetcher ); if (error) { @@ -169,6 +172,19 @@ export const useBlockData = ( return data; }; +export const useBlockDataFromTransaction = ( + provider: JsonRpcProvider | undefined, + txData: TransactionData | null | undefined +): ExtendedBlock | null | undefined => { + const block = useBlockData( + provider, + txData?.confirmedData + ? txData.confirmedData.blockNumber.toString() + : undefined + ); + return block; +}; + export const useTxData = ( provider: JsonRpcProvider | undefined, txhash: string @@ -191,11 +207,6 @@ export const useTxData = ( return; } - let _block: ExtendedBlock | null | undefined; - if (_response.blockNumber) { - _block = await readBlock(provider, _response.blockNumber.toString()); - } - document.title = `Transaction ${_response.hash} | Otterscan`; setTxData({ @@ -217,11 +228,7 @@ export const useTxData = ( status: _receipt.status === 1, blockNumber: _receipt.blockNumber, transactionIndex: _receipt.transactionIndex, - blockBaseFeePerGas: _block!.baseFeePerGas, - blockTransactionCount: _block!.transactionCount, confirmations: _receipt.confirmations, - timestamp: _block!.timestamp, - miner: _block!.miner, createdContractAddress: _receipt.contractAddress, fee: _response.gasPrice!.mul(_receipt.gasUsed), gasUsed: _receipt.gasUsed,