a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/chart-improvements' into develop

This commit is contained in:
Willian Mitsuda 2021-08-03 23:32:48 -03:00
parent e05d6afea8 b5e16dd410
commit 031d09c32d
2 changed files with 68 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/special/london/Blocks.tsx
View File

@ -7,7 +7,6 @@ import React, {
} from "react"; } from "react";
import { ethers } from "ethers"; import { ethers } from "ethers";
import { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import { ChartData, ChartOptions } from "chart.js";
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { import {
@ -20,40 +19,12 @@ import {
import BlockRow from "./BlockRow"; import BlockRow from "./BlockRow";
import { ExtendedBlock, readBlock } from "../../useErigonHooks"; import { ExtendedBlock, readBlock } from "../../useErigonHooks";
import { RuntimeContext } from "../../useRuntime"; import { RuntimeContext } from "../../useRuntime";
import { options, toChartData } from "./chart";
const MAX_BLOCK_HISTORY = 20; const MAX_BLOCK_HISTORY = 20;
const PREV_BLOCK_COUNT = 15; 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 = { type BlocksProps = {
latestBlock: ethers.providers.Block; latestBlock: ethers.providers.Block;
targetBlockNumber: number; targetBlockNumber: number;
@ -100,23 +71,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
addBlock(latestBlock.number); addBlock(latestBlock.number);
}, [addBlock, latestBlock]); }, [addBlock, latestBlock]);
const data: ChartData = useMemo(() => { const data = useMemo(() => toChartData(blocks), [blocks]);
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 // On page reload, pre-populate the last N blocks
useEffect( useEffect(

66
src/special/london/chart.ts Normal file
View File

@ -0,0 +1,66 @@
import { ethers } from "ethers";
import { ChartData, ChartOptions } from "chart.js";
import { ExtendedBlock } from "../../useErigonHooks";
export 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`,
},
},
yBaseFee: {
position: "right",
beginAtZero: true,
title: {
display: true,
text: "Base fee",
},
grid: {
drawOnChartArea: false
}
},
},
};
export const toChartData = (blocks: ExtendedBlock[]): ChartData => ({
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,
},
{
label: "Base fee (Gwei)",
data: blocks.map(b => b.baseFeePerGas!.toNumber()).reverse(),
yAxisID: "yBaseFee",
borderColor: "#FCA5A5",
tension: 0.2
}
],
});