a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Display last eth/usd price and fast gas price updates separately on hover tooltip

This commit is contained in:
Willian Mitsuda 2021-07-13 19:07:42 -03:00
parent a36749ee3d
commit d2555f14cb
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/PriceBox.tsx
View File

@ -45,7 +45,7 @@ const PriceBox: React.FC = () => {
readData(); readData();
}, [ethFeed, gasFeed]); }, [ethFeed, gasFeed]);
const [latestPrice, timestamp] = useMemo(() => { const [latestPrice, latestPriceTimestamp] = useMemo(() => {
if (!latestPriceData) { if (!latestPriceData) {
return [undefined, undefined]; return [undefined, undefined];
} }
@ -59,27 +59,32 @@ const PriceBox: React.FC = () => {
return [formattedPrice, timestamp]; return [formattedPrice, timestamp];
}, [latestPriceData]); }, [latestPriceData]);
const latestGasPrice = useMemo(() => { const [latestGasPrice, latestGasPriceTimestamp] = useMemo(() => {
if (!latestGasData) { if (!latestGasData) {
return undefined; return [undefined, undefined];
} }
return formatValue(latestGasData.answer, 9);
const formattedGas = formatValue(latestGasData.answer, 9);
const timestamp = new Date(latestGasData.updatedAt * 1000);
return [formattedGas, timestamp];
}, [latestGasData]); }, [latestGasData]);
return ( return (
<> <>
{latestPriceData && ( {latestPriceData && (
<div <div className="flex rounded-lg px-2 py-1 space-x-2 bg-gray-100 font-sans text-xs text-gray-800">
className="flex rounded-lg px-2 py-1 space-x-2 bg-gray-100 font-sans text-xs text-gray-800" <span
title={`Updated at: ${timestamp?.toString()}`} title={`ETH/USD last updated at: ${latestPriceTimestamp?.toString()}`}
> >
<span>
Eth: $<span className="font-balance">{latestPrice}</span> Eth: $<span className="font-balance">{latestPrice}</span>
</span> </span>
{latestGasData && ( {latestGasData && (
<> <>
<span>|</span> <span>|</span>
<span className="text-gray-400"> <span
className="text-gray-400"
title={`Fast gas price last updated at: ${latestGasPriceTimestamp?.toString()}`}
>
<FontAwesomeIcon icon={faGasPump} size="1x" /> <FontAwesomeIcon icon={faGasPump} size="1x" />
<span className="ml-1">{latestGasPrice} Gwei</span> <span className="ml-1">{latestGasPrice} Gwei</span>
</span> </span>