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 { ethers } from "ethers";
import BlockLink from "../../components/BlockLink";
import TimestampAge from "../../components/TimestampAge";
import { ExtendedBlock } from "../../useErigonHooks";
import Blip from "./Blip";
const ELASTICITY_MULTIPLIER = 2;
type BlockRowProps = {
now: number;
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 burntFees =
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);
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>
<BlockLink blockTag={block.number} />
</div>
@ -37,7 +39,12 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
<div className="text-right text-gray-400">
{ethers.utils.commify(gasTarget.toString())}
</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">
{ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
</div>

View File

@ -106,7 +106,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
<div>
<Line data={data} height={100} options={options} />
</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">
<span className="text-gray-500">
<FontAwesomeIcon icon={faCube} />
@ -140,7 +140,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
<span>Age</span>
</div>
</div>
{blocks.map((b, i) => (
{blocks.map((b, i, all) => (
<Transition
key={b.hash}
show={i < MAX_BLOCK_HISTORY}
@ -152,7 +152,15 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
leaveFrom="opacity-100 translate-y-0"
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>
))}
</div>

View File

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