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

Extract chart settings

This commit is contained in:
Willian Mitsuda 2021-08-03 22:49:42 -03:00
parent e05d6afea8
commit e7bbf5dce5
2 changed files with 50 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(

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

@ -0,0 +1,48 @@
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`,
},
},
},
};
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,
},
],
});