Merge branch 'feature/chart-tweaks' into develop

This commit is contained in:
Willian Mitsuda 2021-08-04 03:46:47 -03:00
commit 03b1fb0efb
4 changed files with 58 additions and 10 deletions

View File

@ -0,0 +1,33 @@
import React, { useState } from "react";
import { Transition } from "@headlessui/react";
type BlipProps = {
value: number;
};
const Blip: React.FC<BlipProps> = ({ value }) => {
const [show, setShow] = useState<boolean>(true);
return (
<Transition
show
appear
enter="transition transform ease-in duration-1000 translate-x-full pl-3"
enterFrom="opacity-100 translate-y-0"
enterTo="opacity-0 -translate-y-5"
afterEnter={() => setShow(false)}
>
{show && value !== 0 && (
<div
className={`absolute bottom-0 font-bold ${
value > 0 ? "text-green-500" : "text-red-500"
} text-3xl`}
>
{value > 0 ? `+${value}` : `-${value}`}
</div>
)}
</Transition>
);
};
export default React.memo(Blip);

View File

@ -1,17 +1,19 @@
import { ethers } from "ethers";
import React from "react"; import React from "react";
import { ethers } from "ethers";
import BlockLink from "../../components/BlockLink"; import BlockLink from "../../components/BlockLink";
import TimestampAge from "../../components/TimestampAge"; import TimestampAge from "../../components/TimestampAge";
import { ExtendedBlock } from "../../useErigonHooks"; import { ExtendedBlock } from "../../useErigonHooks";
import Blip from "./Blip";
const ELASTICITY_MULTIPLIER = 2; const ELASTICITY_MULTIPLIER = 2;
type BlockRowProps = { type BlockRowProps = {
now: number; now: number;
block: ExtendedBlock; block: ExtendedBlock;
baseFeeDelta: number;
}; };
const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => { const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER); const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
const burntFees = const burntFees =
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed); block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@ -19,7 +21,7 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
const totalReward = block.blockReward.add(netFeeReward ?? 0); const totalReward = block.blockReward.add(netFeeReward ?? 0);
return ( return (
<div className="grid grid-cols-8 px-3 py-2 hover:bg-gray-100"> <div className="grid grid-cols-8 gap-x-2 px-3 py-2 hover:bg-gray-100">
<div> <div>
<BlockLink blockTag={block.number} /> <BlockLink blockTag={block.number} />
</div> </div>
@ -37,7 +39,12 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
<div className="text-right text-gray-400"> <div className="text-right text-gray-400">
{ethers.utils.commify(gasTarget.toString())} {ethers.utils.commify(gasTarget.toString())}
</div> </div>
<div className="text-right">{block.baseFeePerGas?.toString()} wei</div> <div className="text-right">
<div className="relative">
<span>{block.baseFeePerGas?.toString()} wei</span>
<Blip value={baseFeeDelta} />
</div>
</div>
<div className="text-right col-span-2"> <div className="text-right col-span-2">
{ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
</div> </div>

View File

@ -106,7 +106,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
<div> <div>
<Line data={data} height={100} options={options} /> <Line data={data} height={100} options={options} />
</div> </div>
<div className="mt-5 grid grid-cols-8 px-3 py-2"> <div className="mt-5 grid grid-cols-8 gap-x-2 px-3 py-2">
<div className="flex space-x-1 items-baseline"> <div className="flex space-x-1 items-baseline">
<span className="text-gray-500"> <span className="text-gray-500">
<FontAwesomeIcon icon={faCube} /> <FontAwesomeIcon icon={faCube} />
@ -140,7 +140,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
<span>Age</span> <span>Age</span>
</div> </div>
</div> </div>
{blocks.map((b, i) => ( {blocks.map((b, i, all) => (
<Transition <Transition
key={b.hash} key={b.hash}
show={i < MAX_BLOCK_HISTORY} show={i < MAX_BLOCK_HISTORY}
@ -152,7 +152,15 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-10" leaveTo="opacity-0 translate-y-10"
> >
<BlockRow now={now} block={b} /> <BlockRow
now={now}
block={b}
baseFeeDelta={
i < all.length - 1
? b.baseFeePerGas!.sub(all[i + 1].baseFeePerGas!).toNumber()
: 0
}
/>
</Transition> </Transition>
))} ))}
</div> </div>

View File

@ -51,15 +51,15 @@ export const toChartData = (blocks: ExtendedBlock[]): ChartData => ({
.map((b) => b.gasUsed.mul(b.baseFeePerGas!).toNumber() / 1e9) .map((b) => b.gasUsed.mul(b.baseFeePerGas!).toNumber() / 1e9)
.reverse(), .reverse(),
fill: true, fill: true,
backgroundColor: "#FDBA74", backgroundColor: "#FDBA7470",
borderColor: "#F97316", borderColor: "#FB923C",
tension: 0.2, tension: 0.2,
}, },
{ {
label: "Base fee (Gwei)", label: "Base fee (Gwei)",
data: blocks.map(b => b.baseFeePerGas!.toNumber()).reverse(), data: blocks.map(b => b.baseFeePerGas!.toNumber()).reverse(),
yAxisID: "yBaseFee", yAxisID: "yBaseFee",
borderColor: "#FCA5A5", borderColor: "#38BDF8",
tension: 0.2 tension: 0.2
} }
], ],