Add USD price next to ETH balance on address page
This commit is contained in:
parent
40c2547565
commit
60931863fa
|
@ -10,6 +10,7 @@ import { useLatestBlock } from "./useLatestBlock";
|
|||
|
||||
const ETH_FEED_DECIMALS = 8;
|
||||
|
||||
// TODO: reduce duplication with useETHUSDOracle
|
||||
const PriceBox: React.FC = () => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const latestBlock = useLatestBlock(provider);
|
||||
|
|
|
@ -3,6 +3,7 @@ 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 TransactionAddress from "../components/TransactionAddress";
|
||||
import Copy from "../components/Copy";
|
||||
import TransactionLink from "../components/TransactionLink";
|
||||
|
@ -101,9 +102,12 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
|
|||
// TODO: dedup blockTags
|
||||
const blockTags: BlockTag[] = useMemo(() => {
|
||||
if (!page) {
|
||||
return [];
|
||||
return ["latest"];
|
||||
}
|
||||
return page.map((t) => t.blockNumber);
|
||||
|
||||
const blockTags: BlockTag[] = page.map((t) => t.blockNumber);
|
||||
blockTags.push("latest");
|
||||
return blockTags;
|
||||
}, [page]);
|
||||
const priceMap = useMultipleETHUSDOracle(provider, blockTags);
|
||||
|
||||
|
@ -131,7 +135,17 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
|
|||
<SelectionContext.Provider value={selectionCtx}>
|
||||
{balance && (
|
||||
<InfoRow title="Balance">
|
||||
<TransactionValue value={balance} />
|
||||
<div className="space-x-2">
|
||||
<TransactionValue value={balance} />
|
||||
{!balance.isZero() && priceMap["latest"] !== undefined && (
|
||||
<span className="px-2 border-green-200 border rounded-lg bg-green-100 text-green-600">
|
||||
<ETH2USDValue
|
||||
ethAmount={balance}
|
||||
eth2USDValue={priceMap["latest"]}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</InfoRow>
|
||||
)}
|
||||
{creator && (
|
||||
|
|
|
@ -7,6 +7,13 @@ type ETH2USDValueProps = {
|
|||
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,
|
||||
|
|
Loading…
Reference in New Issue