diff --git a/src/special/BlockRecord.tsx b/src/special/BlockRecord.tsx index 01a499a..1cd20d4 100644 --- a/src/special/BlockRecord.tsx +++ b/src/special/BlockRecord.tsx @@ -21,7 +21,6 @@ const BlockRecord: React.FC = ({ block }) => {
-
{block.baseFeePerGas?.toString()} wei
= ({ block }) => { > {ethers.utils.commify(block.gasUsed.toString())}
+
+ {ethers.utils.commify(gasTarget.toString())} +
+
{block.baseFeePerGas?.toString()} wei
+
+ {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether +
{ethers.utils.commify( ethers.utils.formatUnits( @@ -42,12 +48,6 @@ const BlockRecord: React.FC = ({ block }) => { )}{" "} Gwei
-
- {ethers.utils.commify(gasTarget.toString())} -
-
- {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether -
); }; diff --git a/src/special/Blocks.tsx b/src/special/Blocks.tsx index e5deccc..575845f 100644 --- a/src/special/Blocks.tsx +++ b/src/special/Blocks.tsx @@ -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 = ({ latestBlock }) => {
-
Block
-
Base fee
+
+ + + + Block +
Gas used
+
Gas target
+
Base fee
+
+ + + + Rewards +
Burnt fees
-
Gas target
-
Rewards
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
{blocks.map((b, i) => (