diff --git a/src/components/ETH2USDValue.tsx b/src/components/ETH2USDValue.tsx
deleted file mode 100644
index 53ece53..0000000
--- a/src/components/ETH2USDValue.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import { BigNumber, FixedNumber } from "@ethersproject/bignumber";
-import { commify } from "@ethersproject/units";
-
-type ETH2USDValueProps = {
- ethAmount: BigNumber;
- eth2USDValue: BigNumber;
-};
-
-/**
- * Basic display of ETH -> USD values WITHOUT box decoration, only
- * text formatting.
- *
- * USD amounts are displayed commified with 2 decimals places and $ prefix,
- * i.e., "$1,000.00".
- */
-const ETH2USDValue: React.FC = ({
- ethAmount,
- eth2USDValue,
-}) => {
- const value = ethAmount.mul(eth2USDValue).div(10 ** 8);
-
- return (
-
- $
-
- {commify(FixedNumber.fromValue(value, 18).round(2).toString())}
-
-
- );
-};
-
-export default React.memo(ETH2USDValue);
diff --git a/src/components/FiatValue.tsx b/src/components/FiatValue.tsx
new file mode 100644
index 0000000..ae950c9
--- /dev/null
+++ b/src/components/FiatValue.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { BigNumber, FixedNumber } from "@ethersproject/bignumber";
+import { commify } from "@ethersproject/units";
+
+type FiatValueProps = {
+ value: BigNumber;
+};
+
+/**
+ * Basic display of ETH -> USD values WITHOUT box decoration, only
+ * text formatting.
+ *
+ * USD amounts are displayed commified with 2 decimals places and $ prefix,
+ * i.e., "$1,000.00".
+ */
+const FiatValue: React.FC = ({ value }) => (
+
+ $
+
+ {commify(FixedNumber.fromValue(value, 18).round(2).toString())}
+
+
+);
+
+export default FiatValue;
diff --git a/src/components/TransactionDetailsValue.tsx b/src/components/TransactionDetailsValue.tsx
new file mode 100644
index 0000000..4d09e25
--- /dev/null
+++ b/src/components/TransactionDetailsValue.tsx
@@ -0,0 +1,41 @@
+import React, { useContext } from "react";
+import { BlockTag } from "@ethersproject/providers";
+import { BigNumber } from "@ethersproject/bignumber";
+import FormattedBalance from "./FormattedBalance";
+import { RuntimeContext } from "../useRuntime";
+import { useChainInfo } from "../useChainInfo";
+import { useETHUSDOracle } from "../usePriceOracle";
+import FiatValue from "./FiatValue";
+
+type TransactionDetailsValueProps = {
+ blockTag: BlockTag | undefined;
+ value: BigNumber;
+};
+
+const TransactionDetailsValue: React.FC = ({
+ blockTag,
+ value,
+}) => {
+ const { provider } = useContext(RuntimeContext);
+ const blockETHUSDPrice = useETHUSDOracle(provider, blockTag);
+ const {
+ nativeCurrency: { symbol },
+ } = useChainInfo();
+ const fiatValue =
+ !value.isZero() && blockETHUSDPrice !== undefined
+ ? value.mul(blockETHUSDPrice).div(10 ** 8)
+ : undefined;
+
+ return (
+ <>
+ {symbol}{" "}
+ {fiatValue && (
+
+
+
+ )}
+
+ );
+};
+
+export default TransactionDetailsValue;
diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx
index 3fee32c..94e4820 100644
--- a/src/search/TransactionItem.tsx
+++ b/src/search/TransactionItem.tsx
@@ -1,6 +1,4 @@
import React, { useContext } from "react";
-import { BlockTag } from "@ethersproject/abstract-provider";
-import { BigNumber } from "@ethersproject/bignumber";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
import MethodName from "../components/MethodName";
@@ -14,25 +12,23 @@ import TransactionDirection, {
Flags,
} from "../components/TransactionDirection";
import TransactionValue from "../components/TransactionValue";
+import TransactionItemFiatFee from "./TransactionItemFiatFee";
import { ProcessedTransaction } from "../types";
import { FeeDisplay } from "./useFeeToggler";
import { RuntimeContext } from "../useRuntime";
import { useHasCode } from "../useErigonHooks";
import { formatValue } from "../components/formatter";
-import ETH2USDValue from "../components/ETH2USDValue";
type TransactionItemProps = {
tx: ProcessedTransaction;
selectedAddress?: string;
feeDisplay: FeeDisplay;
- priceMap: Record;
};
const TransactionItem: React.FC = ({
tx,
selectedAddress,
feeDisplay,
- priceMap,
}) => {
const { provider } = useContext(RuntimeContext);
const toHasCode = useHasCode(
@@ -130,15 +126,9 @@ const TransactionItem: React.FC = ({
{feeDisplay === FeeDisplay.TX_FEE && formatValue(tx.fee, 18)}
- {feeDisplay === FeeDisplay.TX_FEE_USD &&
- (priceMap[tx.blockNumber] ? (
-
- ) : (
- "N/A"
- ))}
+ {feeDisplay === FeeDisplay.TX_FEE_USD && (
+
+ )}
{feeDisplay === FeeDisplay.GAS_PRICE && formatValue(tx.gasPrice, 9)}
diff --git a/src/search/TransactionItemFiatFee.tsx b/src/search/TransactionItemFiatFee.tsx
new file mode 100644
index 0000000..813bd22
--- /dev/null
+++ b/src/search/TransactionItemFiatFee.tsx
@@ -0,0 +1,25 @@
+import React, { useContext } from "react";
+import { BlockTag } from "@ethersproject/providers";
+import { BigNumber } from "@ethersproject/bignumber";
+import FiatValue from "../components/FiatValue";
+import { RuntimeContext } from "../useRuntime";
+import { useETHUSDOracle } from "../usePriceOracle";
+
+type TransactionItemFiatFeeProps = {
+ blockTag: BlockTag;
+ fee: BigNumber;
+};
+
+const TransactionItemFiatFee: React.FC
= ({
+ blockTag,
+ fee,
+}) => {
+ const { provider } = useContext(RuntimeContext);
+ const eth2USDValue = useETHUSDOracle(provider, blockTag);
+ const fiatValue =
+ eth2USDValue !== undefined ? fee.mul(eth2USDValue).div(10 ** 8) : undefined;
+
+ return fiatValue ? : <>N/A;
+};
+
+export default TransactionItemFiatFee;
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index a34a212..5b6e972 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -17,12 +17,13 @@ import NavNonce from "./NavNonce";
import Timestamp from "../components/Timestamp";
import InternalTransactionOperation from "../components/InternalTransactionOperation";
import MethodName from "../components/MethodName";
+import TransactionDetailsValue from "../components/TransactionDetailsValue";
import TransactionType from "../components/TransactionType";
+import TransactionFee from "./TransactionFee";
import RewardSplit from "./RewardSplit";
import GasValue from "../components/GasValue";
import USDValue from "../components/USDValue";
import FormattedBalance from "../components/FormattedBalance";
-import ETH2USDValue from "../components/ETH2USDValue";
import TokenTransferItem from "../TokenTransferItem";
import { TransactionData } from "../types";
import PercentageBar from "../components/PercentageBar";
@@ -308,15 +309,10 @@ const Details: React.FC = ({ txData }) => {
)}
- {symbol}{" "}
- {!txData.value.isZero() && blockETHUSDPrice && (
-
-
-
- )}
+
= ({ txData }) => {
- {symbol}{" "}
- {blockETHUSDPrice && (
-
-
-
- )}
+
{hasEIP1559 &&
}
diff --git a/src/transaction/TransactionFee.tsx b/src/transaction/TransactionFee.tsx
new file mode 100644
index 0000000..7324b46
--- /dev/null
+++ b/src/transaction/TransactionFee.tsx
@@ -0,0 +1,36 @@
+import React, { useContext } from "react";
+import FormattedBalance from "../components/FormattedBalance";
+import FiatValue from "../components/FiatValue";
+import { RuntimeContext } from "../useRuntime";
+import { useETHUSDOracle } from "../usePriceOracle";
+import { useChainInfo } from "../useChainInfo";
+import { ConfirmedTransactionData } from "../types";
+
+type TransactionFeeProps = {
+ confirmedData: ConfirmedTransactionData;
+};
+
+const TransactionFee: React.FC = ({ confirmedData }) => {
+ const { provider } = useContext(RuntimeContext);
+ const blockETHUSDPrice = useETHUSDOracle(provider, confirmedData.blockNumber);
+ const {
+ nativeCurrency: { symbol },
+ } = useChainInfo();
+ const fiatValue =
+ blockETHUSDPrice !== undefined
+ ? confirmedData.fee.mul(blockETHUSDPrice).div(10 ** 8)
+ : undefined;
+
+ return (
+ <>
+ {symbol}{" "}
+ {fiatValue && (
+
+
+
+ )}
+
+ );
+};
+
+export default TransactionFee;
diff --git a/src/usePriceOracle.ts b/src/usePriceOracle.ts
index 2780e5a..783d76e 100644
--- a/src/usePriceOracle.ts
+++ b/src/usePriceOracle.ts
@@ -1,4 +1,3 @@
-import { useEffect, useMemo, useState } from "react";
import { JsonRpcProvider, BlockTag } from "@ethersproject/providers";
import { Contract } from "@ethersproject/contracts";
import { BigNumber } from "@ethersproject/bignumber";
@@ -101,65 +100,3 @@ export const useETHUSDOracle = (
}
return data;
};
-
-export const useMultipleETHUSDOracle = (
- provider: JsonRpcProvider | undefined,
- blockTags: (BlockTag | undefined)[]
-) => {
- const ethFeed = useMemo(() => {
- // TODO: it currently is hardcoded to support only mainnet
- if (!provider || provider.network.chainId !== 1) {
- return undefined;
- }
-
- try {
- return new Contract("eth-usd.data.eth", AggregatorV3Interface, provider);
- } catch (err) {
- console.error(err);
- return undefined;
- }
- }, [provider]);
-
- const [latestPriceData, setLatestPriceData] = useState<
- Record
- >({});
- useEffect(() => {
- if (!ethFeed) {
- return;
- }
-
- const priceReaders: Promise[] = [];
- for (const blockTag of blockTags) {
- priceReaders.push(
- (async () => {
- try {
- const priceData = await ethFeed.latestRoundData({ blockTag });
- return BigNumber.from(priceData.answer);
- } catch (err) {
- // Silently ignore on purpose; it means the network or block number does
- // not contain the chainlink feed contract
- return undefined;
- }
- })()
- );
- }
- const readData = async () => {
- const results = await Promise.all(priceReaders);
- const priceMap: Record = {};
- for (let i = 0; i < blockTags.length; i++) {
- const blockTag = blockTags[i];
- const result = results[i];
- if (blockTag === undefined || result === undefined) {
- continue;
- }
-
- priceMap[blockTag] = result;
- }
-
- setLatestPriceData(priceMap);
- };
- readData();
- }, [ethFeed, blockTags]);
-
- return latestPriceData;
-};