diff --git a/src/TransactionPageContent.tsx b/src/TransactionPageContent.tsx index 31a7974..501ff46 100644 --- a/src/TransactionPageContent.tsx +++ b/src/TransactionPageContent.tsx @@ -10,7 +10,6 @@ import { useInternalOperations, useTxData } from "./useErigonHooks"; import { SelectionContext, useSelection } from "./useSelection"; import { SelectedTransactionContext } from "./useSelectedTransaction"; import { BlockNumberContext } from "./useBlockTagContext"; -import { useETHUSDOracle } from "./usePriceOracle"; import { useAppConfigContext } from "./useAppConfig"; import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify"; @@ -60,11 +59,6 @@ const TransactionPageContent: React.FC = ({ const selectionCtx = useSelection(); - const blockETHUSDPrice = useETHUSDOracle( - provider, - txData?.confirmedData?.blockNumber - ); - const { sourcifySource } = useAppConfigContext(); const metadata = useSourcify( txData?.to, @@ -114,7 +108,6 @@ const TransactionPageContent: React.FC = ({ devDoc={metadata?.output.devdoc} internalOps={internalOps} sendsEthToMiner={sendsEthToMiner} - ethUSDPrice={blockETHUSDPrice} /> } /> diff --git a/src/components/InternalTransactionOperation.tsx b/src/components/InternalTransactionOperation.tsx index 5870336..3037dd2 100644 --- a/src/components/InternalTransactionOperation.tsx +++ b/src/components/InternalTransactionOperation.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { BigNumber } from "@ethersproject/bignumber"; import InternalTransfer from "./InternalTransfer"; import InternalSelfDestruct from "./InternalSelfDestruct"; import InternalCreate from "./InternalCreate"; @@ -7,22 +8,29 @@ import { TransactionData, InternalOperation, OperationType } from "../types"; type InternalTransactionOperationProps = { txData: TransactionData; internalOp: InternalOperation; + // TODO: migrate all this logic to SWR + ethUSDPrice: BigNumber | undefined; }; -const InternalTransactionOperation: React.FC = - ({ txData, internalOp }) => ( - <> - {internalOp.type === OperationType.TRANSFER && ( - - )} - {internalOp.type === OperationType.SELF_DESTRUCT && ( - - )} - {(internalOp.type === OperationType.CREATE || - internalOp.type === OperationType.CREATE2) && ( - - )} - - ); +const InternalTransactionOperation: React.FC< + InternalTransactionOperationProps +> = ({ txData, internalOp, ethUSDPrice }) => ( + <> + {internalOp.type === OperationType.TRANSFER && ( + + )} + {internalOp.type === OperationType.SELF_DESTRUCT && ( + + )} + {(internalOp.type === OperationType.CREATE || + internalOp.type === OperationType.CREATE2) && ( + + )} + +); export default React.memo(InternalTransactionOperation); diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx index 09c3111..af7001d 100644 --- a/src/components/InternalTransfer.tsx +++ b/src/components/InternalTransfer.tsx @@ -1,4 +1,5 @@ import React, { useContext } from "react"; +import { BigNumber } from "@ethersproject/bignumber"; import { formatEther } from "@ethersproject/units"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight"; @@ -6,6 +7,7 @@ import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight"; import { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar"; import AddressHighlighter from "./AddressHighlighter"; import DecoratedAddressLink from "./DecoratedAddressLink"; +import USDAmount from "./USDAmount"; import { RuntimeContext } from "../useRuntime"; import { useHasCode } from "../useErigonHooks"; import { useChainInfo } from "../useChainInfo"; @@ -14,14 +16,17 @@ import { TransactionData, InternalOperation } from "../types"; type InternalTransferProps = { txData: TransactionData; internalOp: InternalOperation; + // TODO: migrate all this logic to SWR + ethUSDPrice: BigNumber | undefined; }; const InternalTransfer: React.FC = ({ txData, internalOp, + ethUSDPrice, }) => { const { - nativeCurrency: { symbol }, + nativeCurrency: { symbol, decimals }, } = useChainInfo(); const fromMiner = txData.confirmedData?.miner !== undefined && @@ -94,6 +99,17 @@ const InternalTransfer: React.FC = ({ {formatEther(internalOp.value)} {symbol} + {ethUSDPrice && ( + + + + )} diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx index a5d0661..e39346b 100644 --- a/src/transaction/Details.tsx +++ b/src/transaction/Details.tsx @@ -1,7 +1,6 @@ import React, { useContext, useMemo, useState } from "react"; import { Tab } from "@headlessui/react"; import { TransactionDescription } from "@ethersproject/abi"; -import { BigNumber } from "@ethersproject/bignumber"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle"; import { faCube } from "@fortawesome/free-solid-svg-icons/faCube"; @@ -47,6 +46,7 @@ import { RuntimeContext } from "../useRuntime"; import { useContractsMetadata } from "../hooks"; import { useTransactionError } from "../useErigonHooks"; import { useChainInfo } from "../useChainInfo"; +import { useETHUSDOracle } from "../usePriceOracle"; type DetailsProps = { txData: TransactionData; @@ -56,7 +56,6 @@ type DetailsProps = { devDoc?: DevDoc | undefined; internalOps?: InternalOperation[]; sendsEthToMiner: boolean; - ethUSDPrice: BigNumber | undefined; }; const Details: React.FC = ({ @@ -67,7 +66,6 @@ const Details: React.FC = ({ devDoc, internalOps, sendsEthToMiner, - ethUSDPrice, }) => { const hasEIP1559 = txData.confirmedData?.blockBaseFeePerGas !== undefined && @@ -90,6 +88,12 @@ const Details: React.FC = ({ const { nativeCurrency: { name, symbol }, } = useChainInfo(); + + const blockETHUSDPrice = useETHUSDOracle( + provider, + txData?.confirmedData?.blockNumber + ); + const addresses = useMemo(() => { const _addresses: ChecksummedAddress[] = []; if (txData.to) { @@ -294,6 +298,7 @@ const Details: React.FC = ({ key={i} txData={txData} internalOp={op} + ethUSDPrice={blockETHUSDPrice} /> ))} @@ -318,9 +323,12 @@ const Details: React.FC = ({ )} {symbol}{" "} - {!txData.value.isZero() && ethUSDPrice && ( + {!txData.value.isZero() && blockETHUSDPrice && ( - + )} @@ -409,11 +417,11 @@ const Details: React.FC = ({
{symbol}{" "} - {ethUSDPrice && ( + {blockETHUSDPrice && ( )} @@ -422,7 +430,7 @@ const Details: React.FC = ({
- + )}