Apply usd price on search results

This commit is contained in:
Willian Mitsuda 2021-08-31 16:49:52 -03:00
parent 8624c70877
commit 7a43a56e26
6 changed files with 41 additions and 8 deletions

View File

@ -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">

View File

@ -47,6 +47,7 @@ const BlockTransactions: React.FC = () => {
<StandardFrame>
<BlockTransactionHeader blockTag={blockNumber.toNumber()} />
<BlockTransactionResults
blockTag={blockNumber.toNumber()}
page={txs}
total={totalTxs ?? 0}
pageNumber={pageNumber}

View File

@ -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">

View File

@ -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>

View File

@ -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>
);

View File

@ -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);
}
};