diff --git a/src/special/london/Blip.tsx b/src/special/london/Blip.tsx new file mode 100644 index 0000000..4a6d489 --- /dev/null +++ b/src/special/london/Blip.tsx @@ -0,0 +1,33 @@ +import React, { useState } from "react"; +import { Transition } from "@headlessui/react"; + +type BlipProps = { + value: number; +}; + +const Blip: React.FC = ({ value }) => { + const [show, setShow] = useState(true); + + return ( + setShow(false)} + > + {show && value !== 0 && ( +
0 ? "text-green-500" : "text-red-500" + } text-3xl`} + > + {value > 0 ? `+${value}` : `-${value}`} +
+ )} +
+ ); +}; + +export default React.memo(Blip); diff --git a/src/special/london/BlockRow.tsx b/src/special/london/BlockRow.tsx index 6331cdb..83efb0f 100644 --- a/src/special/london/BlockRow.tsx +++ b/src/special/london/BlockRow.tsx @@ -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 = ({ now, block }) => { +const BlockRow: React.FC = ({ 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 = ({ now, block }) => { const totalReward = block.blockReward.add(netFeeReward ?? 0); return ( -
+
@@ -37,7 +39,12 @@ const BlockRow: React.FC = ({ now, block }) => {
{ethers.utils.commify(gasTarget.toString())}
-
{block.baseFeePerGas?.toString()} wei
+
+
+ {block.baseFeePerGas?.toString()} wei + +
+
{ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx index 63dec7b..570703b 100644 --- a/src/special/london/Blocks.tsx +++ b/src/special/london/Blocks.tsx @@ -106,7 +106,7 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => {
-
+
@@ -140,7 +140,7 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => { Age
- {blocks.map((b, i) => ( + {blocks.map((b, i, all) => ( = ({ latestBlock, targetBlockNumber }) => { leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 translate-y-10" > - + ))}