Column reorder; add column icons

This commit is contained in:
Willian Mitsuda 2021-07-29 23:05:23 -03:00
parent 894b1370f1
commit 16d22d5f73
2 changed files with 36 additions and 21 deletions

View File

@ -21,7 +21,6 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
<div> <div>
<BlockLink blockTag={block.number} /> <BlockLink blockTag={block.number} />
</div> </div>
<div className="text-right">{block.baseFeePerGas?.toString()} wei</div>
<div <div
className={`text-right ${ className={`text-right ${
block.gasUsed.gt(gasTarget) block.gasUsed.gt(gasTarget)
@ -33,6 +32,13 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
> >
{ethers.utils.commify(block.gasUsed.toString())} {ethers.utils.commify(block.gasUsed.toString())}
</div> </div>
<div className="text-right">
{ethers.utils.commify(gasTarget.toString())}
</div>
<div className="text-right">{block.baseFeePerGas?.toString()} wei</div>
<div className="text-right col-span-2">
{ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
</div>
<div className="text-right"> <div className="text-right">
{ethers.utils.commify( {ethers.utils.commify(
ethers.utils.formatUnits( ethers.utils.formatUnits(
@ -42,12 +48,6 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
)}{" "} )}{" "}
Gwei Gwei
</div> </div>
<div className="text-right">
{ethers.utils.commify(gasTarget.toString())}
</div>
<div className="text-right col-span-2">
{ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
</div>
</div> </div>
); );
}; };

View File

@ -2,7 +2,12 @@ import React, { useState, useEffect, useContext } from "react";
import { ethers } from "ethers"; import { ethers } from "ethers";
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBurn, faGasPump } from "@fortawesome/free-solid-svg-icons"; import {
faBurn,
faCoins,
faCube,
faGasPump,
} from "@fortawesome/free-solid-svg-icons";
import BlockRecord from "./BlockRecord"; import BlockRecord from "./BlockRecord";
import { ExtendedBlock, readBlock } from "../useErigonHooks"; import { ExtendedBlock, readBlock } from "../useErigonHooks";
import { RuntimeContext } from "../useRuntime"; import { RuntimeContext } from "../useRuntime";
@ -38,42 +43,52 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
<div className="w-full mb-auto"> <div className="w-full mb-auto">
<div className="m-10 divide-y-2"> <div className="m-10 divide-y-2">
<div className="grid grid-cols-8 px-3 py-2"> <div className="grid grid-cols-8 px-3 py-2">
<div>Block</div> <div className="flex space-x-1 items-baseline">
<div className="text-right">Base fee</div> <span className="text-gray-500">
<FontAwesomeIcon icon={faCube} />
</span>
<span>Block</span>
</div>
<div className="text-right flex space-x-1 justify-end items-baseline"> <div className="text-right flex space-x-1 justify-end items-baseline">
<span className="text-gray-500"> <span className="text-gray-500">
<FontAwesomeIcon icon={faGasPump} /> <FontAwesomeIcon icon={faGasPump} />
</span> </span>
<span>Gas used</span> <span>Gas used</span>
</div> </div>
<div className="text-right">Gas target</div>
<div className="text-right">Base fee</div>
<div className="text-right col-span-2 flex space-x-1 justify-end items-baseline">
<span className="text-yellow-400">
<FontAwesomeIcon icon={faCoins} />
</span>
<span>Rewards</span>
</div>
<div className="text-right flex space-x-1 justify-end items-baseline"> <div className="text-right flex space-x-1 justify-end items-baseline">
<span className="text-orange-500"> <span className="text-orange-500">
<FontAwesomeIcon icon={faBurn} /> <FontAwesomeIcon icon={faBurn} />
</span> </span>
<span>Burnt fees</span> <span>Burnt fees</span>
</div> </div>
<div className="text-right">Gas target</div>
<div className="text-right col-span-2">Rewards</div>
</div> </div>
<div className="grid grid-cols-8 px-3 py-3 animate-pulse items-center"> <div className="grid grid-cols-8 px-3 py-3 animate-pulse items-center">
<div> <div>
<div className="w-20 h-4 bg-gray-200 rounded-md"></div> <div className="w-20 h-4 bg-gray-200 rounded-md"></div>
</div> </div>
<div className="justify-self-end">
<div className="w-20 h-4 bg-gray-200 rounded-md"></div>
</div>
<div className="justify-self-end">
<div className="w-20 h-4 bg-gray-200 rounded-md"></div>
</div>
<div className="justify-self-end"> <div className="justify-self-end">
<div className="w-10 h-4 bg-gray-200 rounded-md"></div> <div className="w-10 h-4 bg-gray-200 rounded-md"></div>
</div> </div>
<div className="justify-self-end">
<div className="w-20 h-4 bg-gray-200 rounded-md"></div>
</div>
<div className="justify-self-end">
<div className="w-36 h-4 bg-gray-200 rounded-md"></div>
</div>
<div className="justify-self-end">
<div className="w-20 h-4 bg-gray-200 rounded-md"></div>
</div>
<div className="justify-self-end col-span-2"> <div className="justify-self-end col-span-2">
<div className="w-56 h-4 bg-gray-200 rounded-md"></div> <div className="w-56 h-4 bg-gray-200 rounded-md"></div>
</div> </div>
<div className="justify-self-end">
<div className="w-36 h-4 bg-gray-200 rounded-md"></div>
</div>
</div> </div>
{blocks.map((b, i) => ( {blocks.map((b, i) => (
<Transition <Transition