From f9e3f711153ba58659e0108867c8cf291d2169ee Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Wed, 4 Aug 2021 04:49:00 -0300 Subject: [PATCH 1/3] Gas used/target chart; chart ui improvements --- src/special/london/Blocks.tsx | 18 +++++- src/special/london/chart.ts | 114 +++++++++++++++++++++++++++++++--- 2 files changed, 121 insertions(+), 11 deletions(-) diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx index 570703b..ec65d85 100644 --- a/src/special/london/Blocks.tsx +++ b/src/special/london/Blocks.tsx @@ -19,7 +19,12 @@ import { import BlockRow from "./BlockRow"; import { ExtendedBlock, readBlock } from "../../useErigonHooks"; import { RuntimeContext } from "../../useRuntime"; -import { options, toChartData } from "./chart"; +import { + burntFeesChartOptions, + burntFeesChartData, + gasChartOptions, + gasChartData, +} from "./chart"; const MAX_BLOCK_HISTORY = 20; @@ -34,6 +39,7 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => { const { provider } = useContext(RuntimeContext); const [blocks, setBlocks] = useState([]); const [now, setNow] = useState(Date.now()); + const [toggleChart, setToggleChart] = useState(false); const addBlock = useCallback( async (blockNumber: number) => { @@ -71,7 +77,11 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => { addBlock(latestBlock.number); }, [addBlock, latestBlock]); - const data = useMemo(() => toChartData(blocks), [blocks]); + const data = useMemo( + () => (toggleChart ? gasChartData(blocks) : burntFeesChartData(blocks)), + [toggleChart, blocks] + ); + const chartOptions = toggleChart ? gasChartOptions : burntFeesChartOptions; // On page reload, pre-populate the last N blocks useEffect( @@ -85,6 +95,8 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => { await addBlock(i); } }; + + setBlocks([]); addPreviousBlocks(); }, // eslint-disable-next-line react-hooks/exhaustive-deps @@ -104,7 +116,7 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => {
- +
diff --git a/src/special/london/chart.ts b/src/special/london/chart.ts index 6997cd9..ee97326 100644 --- a/src/special/london/chart.ts +++ b/src/special/london/chart.ts @@ -2,7 +2,7 @@ import { ethers } from "ethers"; import { ChartData, ChartOptions } from "chart.js"; import { ExtendedBlock } from "../../useErigonHooks"; -export const options: ChartOptions = { +export const burntFeesChartOptions: ChartOptions = { animation: false, plugins: { legend: { @@ -35,14 +35,17 @@ export const options: ChartOptions = { display: true, text: "Base fee", }, + ticks: { + callback: (v) => `${v} wei`, + }, grid: { - drawOnChartArea: false - } + drawOnChartArea: false, + }, }, }, }; -export const toChartData = (blocks: ExtendedBlock[]): ChartData => ({ +export const burntFeesChartData = (blocks: ExtendedBlock[]): ChartData => ({ labels: blocks.map((b) => b.number.toString()).reverse(), datasets: [ { @@ -56,11 +59,106 @@ export const toChartData = (blocks: ExtendedBlock[]): ChartData => ({ tension: 0.2, }, { - label: "Base fee (Gwei)", - data: blocks.map(b => b.baseFeePerGas!.toNumber()).reverse(), + label: "Base fee (wei)", + data: blocks.map((b) => b.baseFeePerGas!.toNumber()).reverse(), yAxisID: "yBaseFee", borderColor: "#38BDF8", - tension: 0.2 - } + tension: 0.2, + }, + ], +}); + +export const gasChartOptions: ChartOptions = { + animation: false, + interaction: { + mode: "index", + intersect: 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: "Gas", + }, + ticks: { + callback: (v) => `${v} Gwei`, + }, + }, + yBaseFee: { + position: "right", + beginAtZero: true, + title: { + display: true, + text: "Base fee", + }, + ticks: { + callback: (v) => `${v} wei`, + }, + grid: { + drawOnChartArea: false, + }, + }, + }, +}; + +export const gasChartData = (blocks: ExtendedBlock[]): ChartData => ({ + labels: blocks.map((b) => b.number.toString()).reverse(), + datasets: [ + { + label: "Gas used", + data: blocks.map((b) => b.gasUsed.toNumber()).reverse(), + fill: true, + segment: { + backgroundColor: (ctx, x) => + ctx.p1.parsed.y > + Math.round(blocks[ctx.p1DataIndex].gasLimit.toNumber() / 2) + ? "#22C55E70" + : "#EF444470", + borderColor: (ctx) => + ctx.p1.parsed.y > + Math.round(blocks[ctx.p1DataIndex].gasLimit.toNumber() / 2) + ? "#22C55E" + : "#EF4444", + }, + tension: 0.2, + }, + { + label: "Gas target", + data: blocks.map((b) => Math.round(b.gasLimit.toNumber() / 2)).reverse(), + borderColor: "#FCA5A5", + borderDash: [5, 5], + borderWidth: 2, + tension: 0.2, + pointStyle: "dash", + }, + { + label: "Gas limit", + data: blocks.map((b) => b.gasLimit.toNumber()).reverse(), + borderColor: "#B91C1C", + tension: 0.2, + pointStyle: "crossRot", + radius: 5, + }, + { + label: "Base fee (wei)", + data: blocks.map((b) => b.baseFeePerGas!.toNumber()).reverse(), + yAxisID: "yBaseFee", + borderColor: "#38BDF8", + tension: 0.2, + }, ], }); From d6fed2fa4b8338f762577a6a49caea40efa9e7c6 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Wed, 4 Aug 2021 16:05:22 -0300 Subject: [PATCH 2/3] Add chart toggle button --- src/special/london/Blocks.tsx | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx index ec65d85..7d580d9 100644 --- a/src/special/london/Blocks.tsx +++ b/src/special/london/Blocks.tsx @@ -39,7 +39,7 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => { const { provider } = useContext(RuntimeContext); const [blocks, setBlocks] = useState([]); const [now, setNow] = useState(Date.now()); - const [toggleChart, setToggleChart] = useState(false); + const [toggleChart, setToggleChart] = useState(true); const addBlock = useCallback( async (blockNumber: number) => { @@ -106,14 +106,21 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => { return (
-
- - - - EIP-1559 is activated. Watch the fees burn. - - - +
+
+ + + + EIP-1559 is activated. Watch the fees burn. + + + +
+
+ +
From de8087cfca30a0851a53e4c92dd735c1a21c0697 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Wed, 4 Aug 2021 16:07:45 -0300 Subject: [PATCH 3/3] Add some opacity to gas limit dataset to minimize overlap blindness with base fee dataset --- src/special/london/chart.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/special/london/chart.ts b/src/special/london/chart.ts index ee97326..f95a052 100644 --- a/src/special/london/chart.ts +++ b/src/special/london/chart.ts @@ -148,7 +148,7 @@ export const gasChartData = (blocks: ExtendedBlock[]): ChartData => ({ { label: "Gas limit", data: blocks.map((b) => b.gasLimit.toNumber()).reverse(), - borderColor: "#B91C1C", + borderColor: "#B91C1CF0", tension: 0.2, pointStyle: "crossRot", radius: 5,