diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx index e79253e..f4fd2ff 100644 --- a/src/AddressTransactions.tsx +++ b/src/AddressTransactions.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect, useMemo, useContext } from "react"; import { useParams, useLocation, useHistory } from "react-router-dom"; +import { BlockTag } from "@ethersproject/abstract-provider"; import { getAddress, isAddress } from "@ethersproject/address"; import queryString from "query-string"; import Blockies from "react-blockies"; @@ -16,6 +17,7 @@ import { RuntimeContext } from "./useRuntime"; import { useENSCache } from "./useReverseCache"; import { useFeeToggler } from "./search/useFeeToggler"; import { SelectionContext, useSelection } from "./useSelection"; +import { useMultipleETHUSDOracle } from "./usePriceOracle"; type BlockParams = { addressOrName: string; @@ -150,6 +152,14 @@ const AddressTransactions: React.FC = () => { const page = useMemo(() => controller?.getPage(), [controller]); const reverseCache = useENSCache(provider, page); + const blockTags: BlockTag[] = useMemo(() => { + if (!page) { + return []; + } + return page.map((p) => p.blockNumber); + }, [page]); + const priceMap = useMultipleETHUSDOracle(provider, blockTags); + document.title = `Address ${params.addressOrName} | Otterscan`; const [feeDisplay, feeDisplayToggler] = useFeeToggler(); @@ -215,6 +225,7 @@ const AddressTransactions: React.FC = () => { ensCache={reverseCache} selectedAddress={checksummedAddress} feeDisplay={feeDisplay} + priceMap={priceMap} /> ))}
diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx index 5a7209f..ed9b2c7 100644 --- a/src/BlockTransactions.tsx +++ b/src/BlockTransactions.tsx @@ -47,6 +47,7 @@ const BlockTransactions: React.FC = () => { = ({ + blockTag, page, total, pageNumber, @@ -26,6 +30,7 @@ const BlockTransactionResults: React.FC = ({ const [feeDisplay, feeDisplayToggler] = useFeeToggler(); const { provider } = useContext(RuntimeContext); const reverseCache = useENSCache(provider, page); + const priceMap = useMultipleETHUSDOracle(provider, [blockTag]); return ( @@ -55,6 +60,7 @@ const BlockTransactionResults: React.FC = ({ tx={tx} ensCache={reverseCache} feeDisplay={feeDisplay} + priceMap={priceMap} /> ))}
diff --git a/src/search/ResultHeader.tsx b/src/search/ResultHeader.tsx index 13880bd..5fbcbc2 100644 --- a/src/search/ResultHeader.tsx +++ b/src/search/ResultHeader.tsx @@ -23,7 +23,9 @@ const ResultHeader: React.FC = ({ className="text-link-blue hover:text-link-blue-hover" onClick={feeDisplayToggler} > - {feeDisplay === FeeDisplay.TX_FEE ? "Txn Fee" : "Gas Price"} + {feeDisplay === FeeDisplay.TX_FEE && "Txn Fee"} + {feeDisplay === FeeDisplay.TX_FEE_USD && "Txn Fee (USD)"} + {feeDisplay === FeeDisplay.GAS_PRICE && "Gas Price"}
diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx index f5196d8..ffafc09 100644 --- a/src/search/TransactionItem.tsx +++ b/src/search/TransactionItem.tsx @@ -1,4 +1,6 @@ import React 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"; @@ -15,12 +17,14 @@ import TransactionValue from "../components/TransactionValue"; import { ENSReverseCache, ProcessedTransaction } from "../types"; import { FeeDisplay } from "./useFeeToggler"; import { formatValue } from "../components/formatter"; +import ETH2USDValue from "../components/ETH2USDValue"; type TransactionItemProps = { tx: ProcessedTransaction; ensCache?: ENSReverseCache; selectedAddress?: string; feeDisplay: FeeDisplay; + priceMap: Record; }; const TransactionItem: React.FC = ({ @@ -28,6 +32,7 @@ const TransactionItem: React.FC = ({ ensCache, selectedAddress, feeDisplay, + priceMap, }) => { let direction: Direction | undefined; if (selectedAddress) { @@ -123,9 +128,17 @@ const TransactionItem: React.FC = ({ - {feeDisplay === FeeDisplay.TX_FEE - ? formatValue(tx.fee, 18) - : formatValue(tx.gasPrice, 9)} + {feeDisplay === FeeDisplay.TX_FEE && formatValue(tx.fee, 18)} + {feeDisplay === FeeDisplay.TX_FEE_USD && + (priceMap[tx.blockNumber] ? ( + + ) : ( + "N/A" + ))} + {feeDisplay === FeeDisplay.GAS_PRICE && formatValue(tx.gasPrice, 9)} ); diff --git a/src/search/useFeeToggler.ts b/src/search/useFeeToggler.ts index 7a82a9c..722221c 100644 --- a/src/search/useFeeToggler.ts +++ b/src/search/useFeeToggler.ts @@ -2,16 +2,16 @@ import { useState } from "react"; export enum FeeDisplay { TX_FEE, + TX_FEE_USD, GAS_PRICE, } export const useFeeToggler = (): [FeeDisplay, () => void] => { const [feeDisplay, setFeeDisplay] = useState(FeeDisplay.TX_FEE); const feeDisplayToggler = () => { - if (feeDisplay === FeeDisplay.TX_FEE) { - setFeeDisplay(FeeDisplay.GAS_PRICE); - } else { - setFeeDisplay(FeeDisplay.TX_FEE); + setFeeDisplay(feeDisplay + 1); + if (feeDisplay === FeeDisplay.GAS_PRICE) { + setFeeDisplay(0); } };