Gas used/target chart; chart ui improvements

This commit is contained in:
Willian Mitsuda 2021-08-04 04:49:00 -03:00
parent 03b1fb0efb
commit f9e3f71115
2 changed files with 121 additions and 11 deletions

View File

@ -19,7 +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"; import {
burntFeesChartOptions,
burntFeesChartData,
gasChartOptions,
gasChartData,
} from "./chart";
const MAX_BLOCK_HISTORY = 20; const MAX_BLOCK_HISTORY = 20;
@ -34,6 +39,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
const { provider } = useContext(RuntimeContext); const { provider } = useContext(RuntimeContext);
const [blocks, setBlocks] = useState<ExtendedBlock[]>([]); const [blocks, setBlocks] = useState<ExtendedBlock[]>([]);
const [now, setNow] = useState<number>(Date.now()); const [now, setNow] = useState<number>(Date.now());
const [toggleChart, setToggleChart] = useState<boolean>(false);
const addBlock = useCallback( const addBlock = useCallback(
async (blockNumber: number) => { async (blockNumber: number) => {
@ -71,7 +77,11 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
addBlock(latestBlock.number); addBlock(latestBlock.number);
}, [addBlock, latestBlock]); }, [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 // On page reload, pre-populate the last N blocks
useEffect( useEffect(
@ -85,6 +95,8 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
await addBlock(i); await addBlock(i);
} }
}; };
setBlocks([]);
addPreviousBlocks(); addPreviousBlocks();
}, },
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@ -104,7 +116,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
</span> </span>
</div> </div>
<div> <div>
<Line data={data} height={100} options={options} /> <Line data={data} height={100} options={chartOptions} />
</div> </div>
<div className="mt-5 grid grid-cols-8 gap-x-2 px-3 py-2"> <div className="mt-5 grid grid-cols-8 gap-x-2 px-3 py-2">
<div className="flex space-x-1 items-baseline"> <div className="flex space-x-1 items-baseline">

View File

@ -2,7 +2,7 @@ import { ethers } from "ethers";
import { ChartData, ChartOptions } from "chart.js"; import { ChartData, ChartOptions } from "chart.js";
import { ExtendedBlock } from "../../useErigonHooks"; import { ExtendedBlock } from "../../useErigonHooks";
export const options: ChartOptions = { export const burntFeesChartOptions: ChartOptions = {
animation: false, animation: false,
plugins: { plugins: {
legend: { legend: {
@ -35,14 +35,17 @@ export const options: ChartOptions = {
display: true, display: true,
text: "Base fee", text: "Base fee",
}, },
ticks: {
callback: (v) => `${v} wei`,
},
grid: { 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(), labels: blocks.map((b) => b.number.toString()).reverse(),
datasets: [ datasets: [
{ {
@ -56,11 +59,106 @@ export const toChartData = (blocks: ExtendedBlock[]): ChartData => ({
tension: 0.2, tension: 0.2,
}, },
{ {
label: "Base fee (Gwei)", label: "Base fee (wei)",
data: blocks.map(b => b.baseFeePerGas!.toNumber()).reverse(), data: blocks.map((b) => b.baseFeePerGas!.toNumber()).reverse(),
yAxisID: "yBaseFee", yAxisID: "yBaseFee",
borderColor: "#38BDF8", 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,
},
], ],
}); });