Get rid of price maps

This commit is contained in:
Willian Mitsuda 2022-08-22 04:50:49 -03:00
parent 9f5f223b0f
commit 57334f1f8f
No known key found for this signature in database
14 changed files with 223 additions and 194 deletions

View File

@ -1,6 +1,5 @@
import React, { useEffect, useMemo, useContext } from "react";
import { useParams, NavLink } from "react-router-dom";
import { BigNumber } from "@ethersproject/bignumber";
import { commify } from "@ethersproject/units";
import { toUtf8String } from "@ethersproject/strings";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -12,13 +11,13 @@ import ContentFrame from "./ContentFrame";
import BlockNotFound from "./components/BlockNotFound";
import InfoRow from "./components/InfoRow";
import Timestamp from "./components/Timestamp";
import BlockReward from "./BlockReward";
import GasValue from "./components/GasValue";
import PercentageBar from "./components/PercentageBar";
import BlockLink from "./components/BlockLink";
import DecoratedAddressLink from "./components/DecoratedAddressLink";
import TransactionValue from "./components/TransactionValue";
import FormattedBalance from "./components/FormattedBalance";
import ETH2USDValue from "./components/ETH2USDValue";
import USDValue from "./components/USDValue";
import HexValue from "./components/HexValue";
import { RuntimeContext } from "./useRuntime";
@ -55,7 +54,6 @@ const Block: React.FC = () => {
}, [block]);
const burntFees =
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
const netFeeReward = block?.feeReward ?? BigNumber.from(0);
const gasUsedPerc =
block && block.gasUsed.mul(10000).div(block.gasLimit).toNumber() / 100;
@ -100,25 +98,7 @@ const Block: React.FC = () => {
<DecoratedAddressLink address={block.miner} miner />
</InfoRow>
<InfoRow title="Block Reward">
<TransactionValue value={block.blockReward.add(netFeeReward)} />
{!netFeeReward.isZero() && (
<>
{" "}
(<TransactionValue value={block.blockReward} hideUnit /> +{" "}
<TransactionValue value={netFeeReward} hideUnit />)
</>
)}
{blockETHUSDPrice && (
<>
{" "}
<span className="px-2 border-amber-200 border rounded-lg bg-amber-100 text-amber-600">
<ETH2USDValue
ethAmount={block.blockReward.add(netFeeReward)}
eth2USDValue={blockETHUSDPrice}
/>
</span>
</>
)}
<BlockReward block={block} />
</InfoRow>
<InfoRow title="Uncles Reward">
<TransactionValue value={block.unclesReward} />

47
src/BlockReward.tsx Normal file
View File

@ -0,0 +1,47 @@
import React, { useContext } from "react";
import { BigNumber } from "@ethersproject/bignumber";
import TransactionValue from "./components/TransactionValue";
import FiatValue from "./components/FiatValue";
import { RuntimeContext } from "./useRuntime";
import { ExtendedBlock } from "./useErigonHooks";
import { useETHUSDOracle } from "./usePriceOracle";
type BlockRewardProps = {
block: ExtendedBlock;
};
const BlockReward: React.FC<BlockRewardProps> = ({ block }) => {
const { provider } = useContext(RuntimeContext);
const eth2USDValue = useETHUSDOracle(provider, block.number);
const netFeeReward = block?.feeReward ?? BigNumber.from(0);
const value = eth2USDValue
? block.blockReward
.add(netFeeReward)
.mul(eth2USDValue)
.div(10 ** 8)
: undefined;
return (
<>
<TransactionValue value={block.blockReward.add(netFeeReward)} />
{!netFeeReward.isZero() && (
<>
{" "}
(<TransactionValue value={block.blockReward} hideUnit /> +{" "}
<TransactionValue value={netFeeReward} hideUnit />)
</>
)}
{value && (
<>
{" "}
<span className="px-2 border-amber-200 border rounded-lg bg-amber-100 text-amber-600">
<FiatValue value={value} />
</span>
</>
)}
</>
);
};
export default BlockReward;

View File

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

View File

@ -0,0 +1,32 @@
import React, { useContext } from "react";
import { BigNumber } from "@ethersproject/bignumber";
import TransactionValue from "../components/TransactionValue";
import FiatValue from "../components/FiatValue";
import { RuntimeContext } from "../useRuntime";
import { useETHUSDOracle } from "../usePriceOracle";
type AddressBalanceProps = {
balance: BigNumber;
};
const AddressBalance: React.FC<AddressBalanceProps> = ({ balance }) => {
const { provider } = useContext(RuntimeContext);
const eth2USDValue = useETHUSDOracle(provider, "latest");
const fiatValue =
!balance.isZero() && eth2USDValue !== undefined
? balance.mul(eth2USDValue).div(10 ** 8)
: undefined;
return (
<>
<TransactionValue value={balance} />
{fiatValue && (
<span className="px-2 border-emerald-200 border rounded-lg bg-emerald-100 text-emerald-600">
<FiatValue value={fiatValue} />
</span>
)}
</>
);
};
export default AddressBalance;

View File

@ -1,9 +1,7 @@
import React, { useContext, useEffect, useMemo, useState } from "react";
import { BlockTag } from "@ethersproject/providers";
import ContentFrame from "../ContentFrame";
import InfoRow from "../components/InfoRow";
import TransactionValue from "../components/TransactionValue";
import ETH2USDValue from "../components/ETH2USDValue";
import AddressBalance from "./AddressBalance";
import TransactionAddress from "../components/TransactionAddress";
import Copy from "../components/Copy";
import TransactionLink from "../components/TransactionLink";
@ -14,7 +12,6 @@ import TransactionItem from "../search/TransactionItem";
import UndefinedPageControl from "../search/UndefinedPageControl";
import { useFeeToggler } from "../search/useFeeToggler";
import { SelectionContext, useSelection } from "../useSelection";
import { useMultipleETHUSDOracle } from "../usePriceOracle";
import { RuntimeContext } from "../useRuntime";
import { useParams, useSearchParams } from "react-router-dom";
import { ChecksummedAddress, ProcessedTransaction } from "../types";
@ -98,19 +95,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
const page = useMemo(() => controller?.getPage(), [controller]);
// Extract block number from all txs on current page
// TODO: dedup blockTags
const blockTags: BlockTag[] = useMemo(() => {
if (!page) {
return ["latest"];
}
const blockTags: BlockTag[] = page.map((t) => t.blockNumber);
blockTags.push("latest");
return blockTags;
}, [page]);
const priceMap = useMultipleETHUSDOracle(provider, blockTags);
const balance = useAddressBalance(provider, address);
const creator = useContractCreator(provider, address);
@ -121,15 +105,7 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
{balance && (
<InfoRow title="Balance">
<div className="space-x-2">
<TransactionValue value={balance} />
{!balance.isZero() && priceMap["latest"] !== undefined && (
<span className="px-2 border-emerald-200 border rounded-lg bg-emerald-100 text-emerald-600">
<ETH2USDValue
ethAmount={balance}
eth2USDValue={priceMap["latest"]}
/>
</span>
)}
<AddressBalance balance={balance} />
</div>
</InfoRow>
)}
@ -163,7 +139,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
tx={tx}
selectedAddress={address}
feeDisplay={feeDisplay}
priceMap={priceMap}
/>
))}
<NavBar address={address} page={page} controller={controller} />

View File

@ -1,35 +1,27 @@
import React, { useContext, useMemo } from "react";
import { BlockTag } from "@ethersproject/abstract-provider";
import React from "react";
import ContentFrame from "../ContentFrame";
import PageControl from "../search/PageControl";
import ResultHeader from "../search/ResultHeader";
import PendingResults from "../search/PendingResults";
import TransactionItem from "../search/TransactionItem";
import { useFeeToggler } from "../search/useFeeToggler";
import { RuntimeContext } from "../useRuntime";
import { SelectionContext, useSelection } from "../useSelection";
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,
}) => {
const { provider } = useContext(RuntimeContext);
const selectionCtx = useSelection();
const [feeDisplay, feeDisplayToggler] = useFeeToggler();
const blockTags = useMemo(() => [blockTag], [blockTag]);
const priceMap = useMultipleETHUSDOracle(provider, blockTags);
return (
<ContentFrame>
@ -54,12 +46,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
{page ? (
<SelectionContext.Provider value={selectionCtx}>
{page.map((tx) => (
<TransactionItem
key={tx.hash}
tx={tx}
feeDisplay={feeDisplay}
priceMap={priceMap}
/>
<TransactionItem key={tx.hash} tx={tx} feeDisplay={feeDisplay} />
))}
<div className="flex justify-between items-baseline py-3">
<div className="text-sm text-gray-500">

View File

@ -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<ETH2USDValueProps> = ({
ethAmount,
eth2USDValue,
}) => {
const value = ethAmount.mul(eth2USDValue).div(10 ** 8);
return (
<span className="text-xs">
$
<span className="font-balance">
{commify(FixedNumber.fromValue(value, 18).round(2).toString())}
</span>
</span>
);
};
export default React.memo(ETH2USDValue);

View File

@ -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<FiatValueProps> = ({ value }) => (
<span className="text-xs">
$
<span className="font-balance">
{commify(FixedNumber.fromValue(value, 18).round(2).toString())}
</span>
</span>
);
export default FiatValue;

View File

@ -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<TransactionDetailsValueProps> = ({
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 (
<>
<FormattedBalance value={value} /> {symbol}{" "}
{fiatValue && (
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
<FiatValue value={fiatValue} />
</span>
)}
</>
);
};
export default TransactionDetailsValue;

View File

@ -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<BlockTag, BigNumber>;
};
const TransactionItem: React.FC<TransactionItemProps> = ({
tx,
selectedAddress,
feeDisplay,
priceMap,
}) => {
const { provider } = useContext(RuntimeContext);
const toHasCode = useHasCode(
@ -130,15 +126,9 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
</span>
<span className="font-balance text-xs text-gray-500 truncate">
{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.TX_FEE_USD && (
<TransactionItemFiatFee blockTag={tx.blockNumber} fee={tx.fee} />
)}
{feeDisplay === FeeDisplay.GAS_PRICE && formatValue(tx.gasPrice, 9)}
</span>
</div>

View File

@ -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<TransactionItemFiatFeeProps> = ({
blockTag,
fee,
}) => {
const { provider } = useContext(RuntimeContext);
const eth2USDValue = useETHUSDOracle(provider, blockTag);
const fiatValue =
eth2USDValue !== undefined ? fee.mul(eth2USDValue).div(10 ** 8) : undefined;
return fiatValue ? <FiatValue value={fiatValue} /> : <>N/A</>;
};
export default TransactionItemFiatFee;

View File

@ -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<DetailsProps> = ({ txData }) => {
</InfoRow>
)}
<InfoRow title="Value">
<FormattedBalance value={txData.value} /> {symbol}{" "}
{!txData.value.isZero() && blockETHUSDPrice && (
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
<ETH2USDValue
ethAmount={txData.value}
eth2USDValue={blockETHUSDPrice}
/>
</span>
)}
<TransactionDetailsValue
blockTag={txData.confirmedData?.blockNumber}
value={txData.value}
/>
</InfoRow>
<InfoRow
title={
@ -402,15 +398,7 @@ const Details: React.FC<DetailsProps> = ({ txData }) => {
<InfoRow title="Transaction Fee">
<div className="space-y-3">
<div>
<FormattedBalance value={txData.confirmedData.fee} /> {symbol}{" "}
{blockETHUSDPrice && (
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
<ETH2USDValue
ethAmount={txData.confirmedData.fee}
eth2USDValue={blockETHUSDPrice}
/>
</span>
)}
<TransactionFee confirmedData={txData.confirmedData} />
</div>
{hasEIP1559 && <RewardSplit txData={txData} />}
</div>

View File

@ -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<TransactionFeeProps> = ({ 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 (
<>
<FormattedBalance value={confirmedData.fee} /> {symbol}{" "}
{fiatValue && (
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
<FiatValue value={fiatValue} />
</span>
)}
</>
);
};
export default TransactionFee;

View File

@ -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<BlockTag, BigNumber>
>({});
useEffect(() => {
if (!ethFeed) {
return;
}
const priceReaders: Promise<BigNumber | undefined>[] = [];
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<BlockTag, BigNumber> = {};
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;
};