From 1a21ef5e5abbc19131cfc11e8b0cb8b820772a9f Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Fri, 30 Jul 2021 03:26:24 -0300 Subject: [PATCH 1/6] First pass at burnt chart --- package-lock.json | 32 +++++++++++++++++ package.json | 2 ++ src/special/Blocks.tsx | 79 +++++++++++++++++++++++++++++------------- 3 files changed, 88 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index c007f44..c192693 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,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", @@ -5514,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" @@ -14064,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", @@ -22785,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" }, @@ -28459,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 ba22ba7..6392c67 100644 --- a/package.json +++ b/package.json @@ -25,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/special/Blocks.tsx b/src/special/Blocks.tsx index 04828c9..188873b 100644 --- a/src/special/Blocks.tsx +++ b/src/special/Blocks.tsx @@ -1,5 +1,7 @@ -import React, { useState, useEffect, useContext } from "react"; +import React, { useState, useEffect, useContext, useMemo } 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 { @@ -14,6 +16,35 @@ import { RuntimeContext } from "../useRuntime"; const MAX_BLOCK_HISTORY = 20; +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; }; @@ -41,10 +72,31 @@ const Blocks: React.FC = ({ latestBlock }) => { _readBlock(); }, [provider, 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]); + return (
-
+
+ +
+
@@ -73,29 +125,6 @@ const Blocks: React.FC = ({ latestBlock }) => {
Age
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{blocks.map((b, i) => ( Date: Fri, 30 Jul 2021 04:41:29 -0300 Subject: [PATCH 2/6] Move refactoring --- src/App.tsx | 2 +- src/special/{ => london}/BlockRecord.tsx | 6 +++--- src/special/{ => london}/Blocks.tsx | 4 ++-- src/special/{ => london}/Countdown.tsx | 0 src/special/{ => london}/London.tsx | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) rename src/special/{ => london}/BlockRecord.tsx (91%) rename src/special/{ => london}/Blocks.tsx (97%) rename src/special/{ => london}/Countdown.tsx (100%) rename src/special/{ => london}/London.tsx (88%) diff --git a/src/App.tsx b/src/App.tsx index b7f3620..4f1333d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ import Home from "./Home"; import Search from "./Search"; import Title from "./Title"; import ConnectionErrorPanel from "./ConnectionErrorPanel"; -import London from "./special/London"; +import London from "./special/london/London"; import Footer from "./Footer"; import { ConnectionStatus } from "./types"; import { RuntimeContext, useRuntime } from "./useRuntime"; diff --git a/src/special/BlockRecord.tsx b/src/special/london/BlockRecord.tsx similarity index 91% rename from src/special/BlockRecord.tsx rename to src/special/london/BlockRecord.tsx index da8ec3f..1b23e65 100644 --- a/src/special/BlockRecord.tsx +++ b/src/special/london/BlockRecord.tsx @@ -1,8 +1,8 @@ import { ethers } from "ethers"; import React from "react"; -import BlockLink from "../components/BlockLink"; -import TimestampAge from "../components/TimestampAge"; -import { ExtendedBlock } from "../useErigonHooks"; +import BlockLink from "../../components/BlockLink"; +import TimestampAge from "../../components/TimestampAge"; +import { ExtendedBlock } from "../../useErigonHooks"; const ELASTICITY_MULTIPLIER = 2; diff --git a/src/special/Blocks.tsx b/src/special/london/Blocks.tsx similarity index 97% rename from src/special/Blocks.tsx rename to src/special/london/Blocks.tsx index 188873b..c7f5bb5 100644 --- a/src/special/Blocks.tsx +++ b/src/special/london/Blocks.tsx @@ -11,8 +11,8 @@ import { faGasPump, } from "@fortawesome/free-solid-svg-icons"; import BlockRecord from "./BlockRecord"; -import { ExtendedBlock, readBlock } from "../useErigonHooks"; -import { RuntimeContext } from "../useRuntime"; +import { ExtendedBlock, readBlock } from "../../useErigonHooks"; +import { RuntimeContext } from "../../useRuntime"; const MAX_BLOCK_HISTORY = 20; diff --git a/src/special/Countdown.tsx b/src/special/london/Countdown.tsx similarity index 100% rename from src/special/Countdown.tsx rename to src/special/london/Countdown.tsx diff --git a/src/special/London.tsx b/src/special/london/London.tsx similarity index 88% rename from src/special/London.tsx rename to src/special/london/London.tsx index b4d211c..965d05c 100644 --- a/src/special/London.tsx +++ b/src/special/london/London.tsx @@ -1,6 +1,6 @@ import React, { useContext } from "react"; -import { useLatestBlock } from "../useLatestBlock"; -import { RuntimeContext } from "../useRuntime"; +import { useLatestBlock } from "../../useLatestBlock"; +import { RuntimeContext } from "../../useRuntime"; import Countdown from "./Countdown"; import Blocks from "./Blocks"; From ba91e640fee0e05c05749de4a215575f7cc291ab Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Fri, 30 Jul 2021 04:42:39 -0300 Subject: [PATCH 3/6] Renames --- src/special/london/{BlockRecord.tsx => BlockRow.tsx} | 6 +++--- src/special/london/Blocks.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) rename src/special/london/{BlockRecord.tsx => BlockRow.tsx} (92%) diff --git a/src/special/london/BlockRecord.tsx b/src/special/london/BlockRow.tsx similarity index 92% rename from src/special/london/BlockRecord.tsx rename to src/special/london/BlockRow.tsx index 1b23e65..890446c 100644 --- a/src/special/london/BlockRecord.tsx +++ b/src/special/london/BlockRow.tsx @@ -6,12 +6,12 @@ import { ExtendedBlock } from "../../useErigonHooks"; const ELASTICITY_MULTIPLIER = 2; -type BlockRecordProps = { +type BlockRowProps = { now: number; block: ExtendedBlock; }; -const BlockRecord: React.FC = ({ now, block }) => { +const BlockRow: React.FC = ({ now, block }) => { const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER); const burntFees = block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed); @@ -57,4 +57,4 @@ const BlockRecord: React.FC = ({ now, block }) => { ); }; -export default React.memo(BlockRecord); +export default React.memo(BlockRow); diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx index c7f5bb5..3e9732f 100644 --- a/src/special/london/Blocks.tsx +++ b/src/special/london/Blocks.tsx @@ -10,7 +10,7 @@ import { faCube, faGasPump, } from "@fortawesome/free-solid-svg-icons"; -import BlockRecord from "./BlockRecord"; +import BlockRow from "./BlockRow"; import { ExtendedBlock, readBlock } from "../../useErigonHooks"; import { RuntimeContext } from "../../useRuntime"; @@ -137,7 +137,7 @@ const Blocks: React.FC = ({ latestBlock }) => { leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 translate-y-10" > - + ))}
From 15cbd3944587c095e8d894ebb866e7b2ee3a6b8f Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Fri, 30 Jul 2021 04:46:39 -0300 Subject: [PATCH 4/6] Small fixes --- src/special/london/Blocks.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx index 3e9732f..1cbead2 100644 --- a/src/special/london/Blocks.tsx +++ b/src/special/london/Blocks.tsx @@ -66,7 +66,16 @@ const Blocks: React.FC = ({ latestBlock }) => { if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) { return _blocks; } - return [extBlock, ..._blocks].slice(0, MAX_BLOCK_HISTORY + 1); + + // 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) => a.number - b.number); + return newBlocks; }); }; _readBlock(); From 81a2771f38ea6b462092e2ac7f318082eea37bf5 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Fri, 30 Jul 2021 04:55:21 -0300 Subject: [PATCH 5/6] Small refactorings --- src/special/london/Blocks.tsx | 37 +++++++++++++++++++++++------------ src/special/london/London.tsx | 10 ++-------- src/special/london/params.ts | 6 ++++++ 3 files changed, 32 insertions(+), 21 deletions(-) create mode 100644 src/special/london/params.ts diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx index 1cbead2..e510d5d 100644 --- a/src/special/london/Blocks.tsx +++ b/src/special/london/Blocks.tsx @@ -1,4 +1,10 @@ -import React, { useState, useEffect, useContext, useMemo } from "react"; +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"; @@ -47,23 +53,24 @@ const options: ChartOptions = { type BlocksProps = { latestBlock: ethers.providers.Block; + targetBlockNumber: number; }; -const Blocks: React.FC = ({ latestBlock }) => { +const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => { const { provider } = useContext(RuntimeContext); const [blocks, setBlock] = useState([]); const [now, setNow] = useState(Date.now()); - useEffect(() => { - if (!provider) { - return; - } + const addBlock = useCallback( + async (blockNumber: number) => { + if (!provider) { + return; + } - const _readBlock = async () => { - const extBlock = await readBlock(provider, latestBlock.number.toString()); + const extBlock = await readBlock(provider, blockNumber.toString()); setNow(Date.now()); setBlock((_blocks) => { - if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) { + if (_blocks.length > 0 && blockNumber === _blocks[0].number) { return _blocks; } @@ -74,12 +81,16 @@ const Blocks: React.FC = ({ latestBlock }) => { ); // Little hack to fix out of order block notifications - newBlocks.sort((a, b) => a.number - b.number); + newBlocks.sort((a, b) => b.number - a.number); return newBlocks; }); - }; - _readBlock(); - }, [provider, latestBlock]); + }, + [provider] + ); + + useEffect(() => { + addBlock(latestBlock.number); + }, [addBlock, latestBlock]); const data: ChartData = useMemo(() => { return { diff --git a/src/special/london/London.tsx b/src/special/london/London.tsx index 965d05c..0663796 100644 --- a/src/special/london/London.tsx +++ b/src/special/london/London.tsx @@ -3,13 +3,7 @@ import { useLatestBlock } from "../../useLatestBlock"; import { RuntimeContext } from "../../useRuntime"; import Countdown from "./Countdown"; import Blocks from "./Blocks"; - -const londonBlockNumber: { [chainId: string]: number } = { - "1": 12965000, - "3": 10499401, - "4": 8897988, - "5": 5062605, -}; +import { londonBlockNumber } from "./params"; const London: React.FC = () => { const { provider } = useContext(RuntimeContext); @@ -31,7 +25,7 @@ const London: React.FC = () => { ); } - return ; + return ; }; 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, +}; From ba2bfb12ee1dd2ef2f41a4369dbccdc177dce4b3 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Fri, 30 Jul 2021 05:05:31 -0300 Subject: [PATCH 6/6] Preload prev blocks on page reload --- src/special/london/Blocks.tsx | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx index e510d5d..e94f01e 100644 --- a/src/special/london/Blocks.tsx +++ b/src/special/london/Blocks.tsx @@ -22,6 +22,8 @@ import { RuntimeContext } from "../../useRuntime"; const MAX_BLOCK_HISTORY = 20; +const PREV_BLOCK_COUNT = 15; + const options: ChartOptions = { animation: false, plugins: { @@ -67,6 +69,11 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => { 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) => { @@ -85,7 +92,7 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => { return newBlocks; }); }, - [provider] + [provider, targetBlockNumber] ); useEffect(() => { @@ -110,6 +117,24 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => { }; }, [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 (