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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/special/BlockRecord.tsx
View File

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

43
src/special/Blocks.tsx
View File

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