Merge branch 'feature/gas-chart' into develop

This commit is contained in:
Willian Mitsuda 2021-08-04 16:07:58 -03:00
commit 79f4cff8a1
2 changed files with 136 additions and 19 deletions

View File

@ -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<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
const { provider } = useContext(RuntimeContext);
const [blocks, setBlocks] = useState<ExtendedBlock[]>([]);
const [now, setNow] = useState<number>(Date.now());
const [toggleChart, setToggleChart] = useState<boolean>(true);
const addBlock = useCallback(
async (blockNumber: number) => {
@ -71,7 +77,11 @@ const Blocks: React.FC<BlocksProps> = ({ 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<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
await addBlock(i);
}
};
setBlocks([]);
addPreviousBlocks();
},
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -94,6 +106,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
return (
<div className="w-full mb-auto">
<div className="px-9 pt-3 pb-12 divide-y-2">
<div className="relative">
<div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 ">
<span>
<FontAwesomeIcon icon={faBurn} />
@ -103,8 +116,14 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
<FontAwesomeIcon icon={faBurn} />
</span>
</div>
<div className="absolute right-0 top-0 border rounded shadow-md px-2 py-1 text-sm text-link-blue hover:bg-gray-50 hover:text-link-blue-hover">
<button onClick={() => setToggleChart(!toggleChart)}>
{toggleChart ? "Gas usage" : "Burnt fees"}
</button>
</div>
</div>
<div>
<Line data={data} height={100} options={options} />
<Line data={data} height={100} options={chartOptions} />
</div>
<div className="mt-5 grid grid-cols-8 gap-x-2 px-3 py-2">
<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 { 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: "#B91C1CF0",
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,
},
],
});