diff --git a/package-lock.json b/package-lock.json index 030da6f..c192693 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@fortawesome/free-regular-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/react-fontawesome": "^0.1.14", + "@headlessui/react": "^1.4.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", @@ -28,10 +29,12 @@ "@types/react-blockies": "^1.4.1", "@types/react-dom": "^17.0.9", "@types/react-router-dom": "^5.1.8", + "chart.js": "^3.5.0", "ethers": "^5.4.1", "query-string": "^7.0.1", "react": "^17.0.2", "react-blockies": "^1.4.1", + "react-chartjs-2": "^3.0.4", "react-dom": "^17.0.2", "react-error-boundary": "^3.1.3", "react-image": "^4.0.3", @@ -2106,6 +2109,18 @@ "@hapi/hoek": "^8.3.0" } }, + "node_modules/@headlessui/react": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz", + "integrity": "sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "license": "ISC", @@ -5501,6 +5516,11 @@ "node": ">=10" } }, + "node_modules/chart.js": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.0.tgz", + "integrity": "sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA==" + }, "node_modules/check-types": { "version": "11.1.2", "license": "MIT" @@ -14051,6 +14071,18 @@ "react": ">=15.0.0" } }, + "node_modules/react-chartjs-2": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.4.tgz", + "integrity": "sha512-pcbFNpkPMTkGXXJ7k7hnukbRD0ZV01qB6JQY1ontITc2IYvhGlK6BBDy28VeydYs1Dl/c5ZpRgRVEtT5GUnxcQ==", + "dependencies": { + "lodash": "^4.17.19" + }, + "peerDependencies": { + "chart.js": "^3.1.0", + "react": "^16.8.0 || ^17.0.0" + } + }, "node_modules/react-dev-utils": { "version": "11.0.4", "license": "MIT", @@ -20444,6 +20476,12 @@ "@hapi/hoek": "^8.3.0" } }, + "@headlessui/react": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz", + "integrity": "sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==", + "requires": {} + }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "requires": { @@ -22766,6 +22804,11 @@ "char-regex": { "version": "1.0.2" }, + "chart.js": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.0.tgz", + "integrity": "sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA==" + }, "check-types": { "version": "11.1.2" }, @@ -28440,6 +28483,14 @@ "prop-types": "^15.5.10" } }, + "react-chartjs-2": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.4.tgz", + "integrity": "sha512-pcbFNpkPMTkGXXJ7k7hnukbRD0ZV01qB6JQY1ontITc2IYvhGlK6BBDy28VeydYs1Dl/c5ZpRgRVEtT5GUnxcQ==", + "requires": { + "lodash": "^4.17.19" + } + }, "react-dev-utils": { "version": "11.0.4", "requires": { diff --git a/package.json b/package.json index 45622fc..6392c67 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@fortawesome/free-regular-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/react-fontawesome": "^0.1.14", + "@headlessui/react": "^1.4.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", @@ -24,10 +25,12 @@ "@types/react-blockies": "^1.4.1", "@types/react-dom": "^17.0.9", "@types/react-router-dom": "^5.1.8", + "chart.js": "^3.5.0", "ethers": "^5.4.1", "query-string": "^7.0.1", "react": "^17.0.2", "react-blockies": "^1.4.1", + "react-chartjs-2": "^3.0.4", "react-dom": "^17.0.2", "react-error-boundary": "^3.1.3", "react-image": "^4.0.3", diff --git a/src/App.tsx b/src/App.tsx index 72326ee..4f1333d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import Home from "./Home"; import Search from "./Search"; import Title from "./Title"; import ConnectionErrorPanel from "./ConnectionErrorPanel"; +import London from "./special/london/London"; import Footer from "./Footer"; import { ConnectionStatus } from "./types"; import { RuntimeContext, useRuntime } from "./useRuntime"; @@ -36,6 +37,9 @@ const App = () => { + + +
diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx index 30d39c0..2ce687b 100644 --- a/src/BlockTransactions.tsx +++ b/src/BlockTransactions.tsx @@ -63,10 +63,18 @@ const BlockTransactions: React.FC = () => { to: t.to, createdContractAddress: _receipts[i].contractAddress, value: t.value, - fee: provider.formatter - .bigNumber(_receipts[i].gasUsed) - .mul(t.gasPrice!), - gasPrice: t.gasPrice!, + fee: + t.type !== 2 + ? provider.formatter + .bigNumber(_receipts[i].gasUsed) + .mul(t.gasPrice!) + : provider.formatter + .bigNumber(_receipts[i].gasUsed) + .mul(t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!)), + gasPrice: + t.type !== 2 + ? t.gasPrice! + : t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!), data: t.data, status: provider.formatter.number(_receipts[i].status), }; diff --git a/src/Home.tsx b/src/Home.tsx index d4f3afa..c7a7a3f 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -1,6 +1,8 @@ import React, { useState, useContext } from "react"; import { NavLink, useHistory } from "react-router-dom"; import { ethers } from "ethers"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faBurn } from "@fortawesome/free-solid-svg-icons"; import Logo from "./Logo"; import Timestamp from "./components/Timestamp"; import { RuntimeContext } from "./useRuntime"; @@ -54,6 +56,19 @@ const Home: React.FC = () => { > Search </button> + <div className="mx-auto mt-5 mb-5 text-lg text-link-blue hover:text-link-blue-hover font-bold"> + <NavLink to="/special/london"> + <div className="flex space-x-2 items-baseline text-orange-500 hover:text-orange-700 hover:underline"> + <span> + <FontAwesomeIcon icon={faBurn} /> + </span> + <span>Check the special dashboard for EIP-1559</span> + <span> + <FontAwesomeIcon icon={faBurn} /> + </span> + </div> + </NavLink> + </div> {latestBlock && ( <NavLink className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue" diff --git a/src/components/TimestampAge.tsx b/src/components/TimestampAge.tsx index 7849c14..20f4784 100644 --- a/src/components/TimestampAge.tsx +++ b/src/components/TimestampAge.tsx @@ -1,11 +1,14 @@ import React from "react"; type TimestampAgeProps = { + now?: number | undefined; timestamp: number; }; -const TimestampAge: React.FC<TimestampAgeProps> = ({ timestamp }) => { - const now = Date.now() / 1000; +const TimestampAge: React.FC<TimestampAgeProps> = ({ now, timestamp }) => { + if (now === undefined) { + now = Date.now() / 1000; + } let diff = now - timestamp; let desc = ""; diff --git a/src/special/london/BlockRow.tsx b/src/special/london/BlockRow.tsx new file mode 100644 index 0000000..6331cdb --- /dev/null +++ b/src/special/london/BlockRow.tsx @@ -0,0 +1,60 @@ +import { ethers } from "ethers"; +import React from "react"; +import BlockLink from "../../components/BlockLink"; +import TimestampAge from "../../components/TimestampAge"; +import { ExtendedBlock } from "../../useErigonHooks"; + +const ELASTICITY_MULTIPLIER = 2; + +type BlockRowProps = { + now: number; + block: ExtendedBlock; +}; + +const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => { + const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER); + const burntFees = + block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed); + const netFeeReward = block && block.feeReward.sub(burntFees ?? 0); + const totalReward = block.blockReward.add(netFeeReward ?? 0); + + return ( + <div className="grid grid-cols-8 px-3 py-2 hover:bg-gray-100"> + <div> + <BlockLink blockTag={block.number} /> + </div> + <div + className={`text-right ${ + block.gasUsed.gt(gasTarget) + ? "text-green-500" + : block.gasUsed.lt(gasTarget) + ? "text-red-500" + : "" + }`} + > + {ethers.utils.commify(block.gasUsed.toString())} + </div> + <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 col-span-2"> + {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether + </div> + <div className="text-right line-through text-orange-500"> + {ethers.utils.commify( + ethers.utils.formatUnits( + block.gasUsed.mul(block.baseFeePerGas!).toString(), + 9 + ) + )}{" "} + Gwei + </div> + <div className="text-right text-gray-400"> + <TimestampAge now={now / 1000} timestamp={block.timestamp} /> + </div> + </div> + ); +}; + +export default React.memo(BlockRow); diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx new file mode 100644 index 0000000..a5398f1 --- /dev/null +++ b/src/special/london/Blocks.tsx @@ -0,0 +1,208 @@ +import React, { + useState, + useEffect, + useContext, + useMemo, + useCallback, +} from "react"; +import { ethers } from "ethers"; +import { Line } from "react-chartjs-2"; +import { ChartData, ChartOptions } from "chart.js"; +import { Transition } from "@headlessui/react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faBurn, + faCoins, + faCube, + faGasPump, + faHistory, +} from "@fortawesome/free-solid-svg-icons"; +import BlockRow from "./BlockRow"; +import { ExtendedBlock, readBlock } from "../../useErigonHooks"; +import { RuntimeContext } from "../../useRuntime"; + +const MAX_BLOCK_HISTORY = 20; + +const PREV_BLOCK_COUNT = 15; + +const options: ChartOptions = { + animation: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + ticks: { + callback: function (v) { + // @ts-ignore + return ethers.utils.commify(this.getLabelForValue(v)); + }, + }, + }, + y: { + beginAtZero: true, + title: { + display: true, + text: "Burnt fees", + }, + ticks: { + callback: (v) => `${v} Gwei`, + }, + }, + }, +}; + +type BlocksProps = { + latestBlock: ethers.providers.Block; + targetBlockNumber: number; +}; + +const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => { + const { provider } = useContext(RuntimeContext); + const [blocks, setBlock] = useState<ExtendedBlock[]>([]); + const [now, setNow] = useState<number>(Date.now()); + + const addBlock = useCallback( + async (blockNumber: number) => { + if (!provider) { + return; + } + + // Skip blocks before the hard fork during the transition + if (blockNumber < targetBlockNumber) { + return; + } + + const extBlock = await readBlock(provider, blockNumber.toString()); + setNow(Date.now()); + setBlock((_blocks) => { + if (_blocks.length > 0 && blockNumber === _blocks[0].number) { + return _blocks; + } + + // Leave the last block because of transition animation + const newBlocks = [extBlock, ..._blocks].slice( + 0, + MAX_BLOCK_HISTORY + 1 + ); + + // Little hack to fix out of order block notifications + newBlocks.sort((a, b) => b.number - a.number); + return newBlocks; + }); + }, + [provider, targetBlockNumber] + ); + + useEffect(() => { + addBlock(latestBlock.number); + }, [addBlock, latestBlock]); + + const data: ChartData = useMemo(() => { + return { + labels: blocks.map((b) => b.number.toString()).reverse(), + datasets: [ + { + label: "Burnt fees (Gwei)", + data: blocks + .map((b) => b.gasUsed.mul(b.baseFeePerGas!).toNumber() / 1e9) + .reverse(), + fill: true, + backgroundColor: "#FDBA74", + borderColor: "#F97316", + tension: 0.2, + }, + ], + }; + }, [blocks]); + + // On page reload, pre-populate the last N blocks + useEffect( + () => { + const addPreviousBlocks = async () => { + for ( + let i = latestBlock.number - PREV_BLOCK_COUNT; + i < latestBlock.number; + i++ + ) { + await addBlock(i); + } + }; + addPreviousBlocks(); + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [] + ); + + return ( + <div className="w-full mb-auto"> + <div className="px-9 pt-3 pb-12 divide-y-2"> + <div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 "> + <span> + <FontAwesomeIcon icon={faBurn} /> + </span> + <span>London Hardfork is here. Watch the base fees burn.</span> + <span> + <FontAwesomeIcon icon={faBurn} /> + </span> + </div> + <div> + <Line data={data} height={100} options={options} /> + </div> + <div className="mt-5 grid grid-cols-8 px-3 py-2"> + <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 flex space-x-1 justify-end items-baseline"> + <span className="text-gray-500"> + <FontAwesomeIcon icon={faHistory} /> + </span> + <span>Age</span> + </div> + </div> + {blocks.map((b, i) => ( + <Transition + key={b.hash} + show={i < MAX_BLOCK_HISTORY} + appear + enter="transition transform ease-out duration-500" + enterFrom="opacity-0 -translate-y-10" + enterTo="opacity-100 translate-y-0" + leave="transition transform ease-out duration-1000" + leaveFrom="opacity-100 translate-y-0" + leaveTo="opacity-0 translate-y-10" + > + <BlockRow now={now} block={b} /> + </Transition> + ))} + </div> + </div> + ); +}; + +export default React.memo(Blocks); diff --git a/src/special/london/Countdown.tsx b/src/special/london/Countdown.tsx new file mode 100644 index 0000000..0d41dbb --- /dev/null +++ b/src/special/london/Countdown.tsx @@ -0,0 +1,52 @@ +import React, { useEffect, useState } from "react"; +import { ethers } from "ethers"; + +type CountdownProps = { + provider: ethers.providers.JsonRpcProvider; + currentBlock: ethers.providers.Block; + targetBlock: number; +}; + +const Countdown: React.FC<CountdownProps> = ({ + provider, + currentBlock, + targetBlock, +}) => { + const [targetTimestamp, setTargetTimestamp] = useState<number>(); + + useEffect(() => { + const calcTime = async () => { + const diff = targetBlock - currentBlock.number; + const _prevBlock = await provider.getBlock(currentBlock.number - diff); + const _targetTimestamp = + currentBlock.timestamp + + (currentBlock.timestamp - _prevBlock.timestamp); + setTargetTimestamp(_targetTimestamp); + }; + calcTime(); + }, [provider, currentBlock, targetBlock]); + + return ( + <div className="w-full h-full flex"> + <div className="m-auto text-center"> + <h1 className="text-6xl mb-10">London Network Upgrade</h1> + <h2 className="text-5xl"> + {ethers.utils.commify(targetBlock - currentBlock.number)} + </h2> + <h6 className="text-sm mb-10">Block remaining</h6> + <h2 className="inline-flex space-x-10 text-base mb-10"> + <div>Current block: {ethers.utils.commify(currentBlock.number)}</div> + <div>Target block: {ethers.utils.commify(targetBlock)}</div> + </h2> + {targetTimestamp && ( + <div className="text-lg"> + {new Date(targetTimestamp * 1000).toLocaleDateString()} @{" "} + {new Date(targetTimestamp * 1000).toLocaleTimeString()} (Estimative) + </div> + )} + </div> + </div> + ); +}; + +export default React.memo(Countdown); diff --git a/src/special/london/London.tsx b/src/special/london/London.tsx new file mode 100644 index 0000000..0663796 --- /dev/null +++ b/src/special/london/London.tsx @@ -0,0 +1,31 @@ +import React, { useContext } from "react"; +import { useLatestBlock } from "../../useLatestBlock"; +import { RuntimeContext } from "../../useRuntime"; +import Countdown from "./Countdown"; +import Blocks from "./Blocks"; +import { londonBlockNumber } from "./params"; + +const London: React.FC = () => { + const { provider } = useContext(RuntimeContext); + const block = useLatestBlock(provider); + if (!provider || !block) { + return <></>; + } + + // Display countdown + const targetBlockNumber = + londonBlockNumber[provider.network.chainId.toString()]; + if (block.number < targetBlockNumber) { + return ( + <Countdown + provider={provider} + currentBlock={block} + targetBlock={targetBlockNumber} + /> + ); + } + + return <Blocks latestBlock={block} targetBlockNumber={targetBlockNumber} />; +}; + +export default React.memo(London); diff --git a/src/special/london/params.ts b/src/special/london/params.ts new file mode 100644 index 0000000..4f04caf --- /dev/null +++ b/src/special/london/params.ts @@ -0,0 +1,6 @@ +export const londonBlockNumber: { [chainId: string]: number } = { + "1": 12965000, + "3": 10499401, + "4": 8897988, + "5": 5062605, +}; diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts index ecbda33..d11d2f5 100644 --- a/src/useErigonHooks.ts +++ b/src/useErigonHooks.ts @@ -13,6 +13,49 @@ export interface ExtendedBlock extends ethers.providers.Block { totalDifficulty: BigNumber; } +export const readBlock = async ( + provider: ethers.providers.JsonRpcProvider, + blockNumberOrHash: string +) => { + let blockPromise: Promise<any>; + if (ethers.utils.isHexString(blockNumberOrHash, 32)) { + blockPromise = provider.send("eth_getBlockByHash", [ + blockNumberOrHash, + false, + ]); + } else { + blockPromise = provider.send("eth_getBlockByNumber", [ + blockNumberOrHash, + false, + ]); + } + const [_rawBlock, _rawIssuance, _rawReceipts] = await Promise.all([ + blockPromise, + provider.send("erigon_issuance", [blockNumberOrHash]), + provider.send("eth_getBlockReceipts", [blockNumberOrHash]), + ]); + const receipts = (_rawReceipts as any[]).map((r) => + provider.formatter.receipt(r) + ); + const fees = receipts.reduce( + (acc, r) => acc.add(r.effectiveGasPrice.mul(r.gasUsed)), + BigNumber.from(0) + ); + + const _block = provider.formatter.block(_rawBlock); + const extBlock: ExtendedBlock = { + blockReward: provider.formatter.bigNumber(_rawIssuance.blockReward ?? 0), + unclesReward: provider.formatter.bigNumber(_rawIssuance.uncleReward ?? 0), + feeReward: fees, + size: provider.formatter.number(_rawBlock.size), + sha3Uncles: _rawBlock.sha3Uncles, + stateRoot: _rawBlock.stateRoot, + totalDifficulty: provider.formatter.bigNumber(_rawBlock.totalDifficulty), + ..._block, + }; + return extBlock; +}; + export const useBlockData = ( provider: ethers.providers.JsonRpcProvider | undefined, blockNumberOrHash: string @@ -23,52 +66,11 @@ export const useBlockData = ( return; } - const readBlock = async () => { - let blockPromise: Promise<any>; - if (ethers.utils.isHexString(blockNumberOrHash, 32)) { - blockPromise = provider.send("eth_getBlockByHash", [ - blockNumberOrHash, - false, - ]); - } else { - blockPromise = provider.send("eth_getBlockByNumber", [ - blockNumberOrHash, - false, - ]); - } - const [_rawBlock, _rawIssuance, _rawReceipts] = await Promise.all([ - blockPromise, - provider.send("erigon_issuance", [blockNumberOrHash]), - provider.send("eth_getBlockReceipts", [blockNumberOrHash]), - ]); - const receipts = (_rawReceipts as any[]).map((r) => - provider.formatter.receipt(r) - ); - const fees = receipts.reduce( - (acc, r) => acc.add(r.effectiveGasPrice.mul(r.gasUsed)), - BigNumber.from(0) - ); - - const _block = provider.formatter.block(_rawBlock); - const extBlock: ExtendedBlock = { - blockReward: provider.formatter.bigNumber( - _rawIssuance.blockReward ?? 0 - ), - unclesReward: provider.formatter.bigNumber( - _rawIssuance.uncleReward ?? 0 - ), - feeReward: fees, - size: provider.formatter.number(_rawBlock.size), - sha3Uncles: _rawBlock.sha3Uncles, - stateRoot: _rawBlock.stateRoot, - totalDifficulty: provider.formatter.bigNumber( - _rawBlock.totalDifficulty - ), - ..._block, - }; + const _readBlock = async () => { + const extBlock = await readBlock(provider, blockNumberOrHash); setBlock(extBlock); }; - readBlock(); + _readBlock(); }, [provider, blockNumberOrHash]); return block;