Apply usd price on search results
This commit is contained in:
parent
8624c70877
commit
7a43a56e26
|
@ -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}
|
||||
/>
|
||||
))}
|
||||
<div className="flex justify-between items-baseline py-3">
|
||||
|
|
|
@ -47,6 +47,7 @@ const BlockTransactions: React.FC = () => {
|
|||
<StandardFrame>
|
||||
<BlockTransactionHeader blockTag={blockNumber.toNumber()} />
|
||||
<BlockTransactionResults
|
||||
blockTag={blockNumber.toNumber()}
|
||||
page={txs}
|
||||
total={totalTxs ?? 0}
|
||||
pageNumber={pageNumber}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useContext } from "react";
|
||||
import { BlockTag } from "@ethersproject/abstract-provider";
|
||||
import ContentFrame from "../ContentFrame";
|
||||
import PageControl from "../search/PageControl";
|
||||
import ResultHeader from "../search/ResultHeader";
|
||||
|
@ -10,14 +11,17 @@ import { SelectionContext, useSelection } from "../useSelection";
|
|||
import { useENSCache } from "../useReverseCache";
|
||||
import { ProcessedTransaction } from "../types";
|
||||
import { PAGE_SIZE } from "../params";
|
||||
import { useMultipleETHUSDOracle } from "../usePriceOracle";
|
||||
|
||||
type BlockTransactionResultsProps = {
|
||||
blockTag: BlockTag;
|
||||
page?: ProcessedTransaction[];
|
||||
total: number;
|
||||
pageNumber: number;
|
||||
};
|
||||
|
||||
const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
|
||||
blockTag,
|
||||
page,
|
||||
total,
|
||||
pageNumber,
|
||||
|
@ -26,6 +30,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
|
|||
const [feeDisplay, feeDisplayToggler] = useFeeToggler();
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const reverseCache = useENSCache(provider, page);
|
||||
const priceMap = useMultipleETHUSDOracle(provider, [blockTag]);
|
||||
|
||||
return (
|
||||
<ContentFrame>
|
||||
|
@ -55,6 +60,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
|
|||
tx={tx}
|
||||
ensCache={reverseCache}
|
||||
feeDisplay={feeDisplay}
|
||||
priceMap={priceMap}
|
||||
/>
|
||||
))}
|
||||
<div className="flex justify-between items-baseline py-3">
|
||||
|
|
|
@ -23,7 +23,9 @@ const ResultHeader: React.FC<ResultHeaderProps> = ({
|
|||
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"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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<BlockTag, BigNumber>;
|
||||
};
|
||||
|
||||
const TransactionItem: React.FC<TransactionItemProps> = ({
|
||||
|
@ -28,6 +32,7 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
ensCache,
|
||||
selectedAddress,
|
||||
feeDisplay,
|
||||
priceMap,
|
||||
}) => {
|
||||
let direction: Direction | undefined;
|
||||
if (selectedAddress) {
|
||||
|
@ -123,9 +128,17 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
|
|||
<TransactionValue value={tx.value} />
|
||||
</span>
|
||||
<span className="font-balance text-xs text-gray-500 truncate">
|
||||
{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] ? (
|
||||
<ETH2USDValue
|
||||
ethAmount={tx.fee}
|
||||
eth2USDValue={priceMap[tx.blockNumber]}
|
||||
/>
|
||||
) : (
|
||||
"N/A"
|
||||
))}
|
||||
{feeDisplay === FeeDisplay.GAS_PRICE && formatValue(tx.gasPrice, 9)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -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>(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);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue