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

First pass at burnt chart

This commit is contained in:
Willian Mitsuda 2021-07-30 03:26:24 -03:00
parent cfaee9ccf2
commit 1a21ef5e5a
3 changed files with 88 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
package-lock.json generated
View File

@ -29,10 +29,12 @@
"@types/react-blockies": "^1.4.1",
"@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.8",
"chart.js": "^3.5.0",
"ethers": "^5.4.1",
"query-string": "^7.0.1",
"react": "^17.0.2",
"react-blockies": "^1.4.1",
"react-chartjs-2": "^3.0.4",
"react-dom": "^17.0.2",
"react-error-boundary": "^3.1.3",
"react-image": "^4.0.3",
@ -5514,6 +5516,11 @@
"node": ">=10"
}
},
"node_modules/chart.js": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.0.tgz",
"integrity": "sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA=="
},
"node_modules/check-types": {
"version": "11.1.2",
"license": "MIT"
@ -14064,6 +14071,18 @@
"react": ">=15.0.0"
}
},
"node_modules/react-chartjs-2": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.4.tgz",
"integrity": "sha512-pcbFNpkPMTkGXXJ7k7hnukbRD0ZV01qB6JQY1ontITc2IYvhGlK6BBDy28VeydYs1Dl/c5ZpRgRVEtT5GUnxcQ==",
"dependencies": {
"lodash": "^4.17.19"
},
"peerDependencies": {
"chart.js": "^3.1.0",
"react": "^16.8.0 || ^17.0.0"
}
},
"node_modules/react-dev-utils": {
"version": "11.0.4",
"license": "MIT",
@ -22785,6 +22804,11 @@
"char-regex": {
"version": "1.0.2"
},
"chart.js": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.5.0.tgz",
"integrity": "sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA=="
},
"check-types": {
"version": "11.1.2"
},
@ -28459,6 +28483,14 @@
"prop-types": "^15.5.10"
}
},
"react-chartjs-2": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.4.tgz",
"integrity": "sha512-pcbFNpkPMTkGXXJ7k7hnukbRD0ZV01qB6JQY1ontITc2IYvhGlK6BBDy28VeydYs1Dl/c5ZpRgRVEtT5GUnxcQ==",
"requires": {
"lodash": "^4.17.19"
}
},
"react-dev-utils": {
"version": "11.0.4",
"requires": {

2
package.json
View File

@ -25,10 +25,12 @@
"@types/react-blockies": "^1.4.1",
"@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.8",
"chart.js": "^3.5.0",
"ethers": "^5.4.1",
"query-string": "^7.0.1",
"react": "^17.0.2",
"react-blockies": "^1.4.1",
"react-chartjs-2": "^3.0.4",
"react-dom": "^17.0.2",
"react-error-boundary": "^3.1.3",
"react-image": "^4.0.3",

79
src/special/Blocks.tsx
View File

@ -1,5 +1,7 @@
import React, { useState, useEffect, useContext } from "react";
import React, { useState, useEffect, useContext, useMemo } from "react";
import { ethers } from "ethers";
import { Line } from "react-chartjs-2";
import { ChartData, ChartOptions } from "chart.js";
import { Transition } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
@ -14,6 +16,35 @@ import { RuntimeContext } from "../useRuntime";
const MAX_BLOCK_HISTORY = 20;
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 = {
latestBlock: ethers.providers.Block;
};
@ -41,10 +72,31 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
_readBlock();
}, [provider, latestBlock]);
const data: ChartData = useMemo(() => {
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]);
return (
<div className="w-full mb-auto">
<div className="px-9 pt-3 pb-12 divide-y-2">
<div className="grid grid-cols-8 px-3 py-2">
<div>
<Line data={data} height={100} options={options} />
</div>
<div className="mt-5 grid grid-cols-8 px-3 py-2">
<div className="flex space-x-1 items-baseline">
<span className="text-gray-500">
<FontAwesomeIcon icon={faCube} />
@ -73,29 +125,6 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
</div>
<div className="text-right">Age</div>
</div>
<div className="grid grid-cols-8 px-3 py-3 animate-pulse items-center">
<div>
<div className="w-20 h-4 bg-gray-200 rounded-md"></div>
</div>
<div className="justify-self-end">
<div className="w-20 h-4 bg-gray-200 rounded-md"></div>
</div>
<div className="justify-self-end">
<div className="w-20 h-4 bg-gray-200 rounded-md"></div>
</div>
<div className="justify-self-end">
<div className="w-10 h-4 bg-gray-200 rounded-md"></div>
</div>
<div className="justify-self-end col-span-2">
<div className="w-56 h-4 bg-gray-200 rounded-md"></div>
</div>
<div className="justify-self-end">
<div className="w-36 h-4 bg-gray-200 rounded-md"></div>
</div>
<div className="justify-self-end">
<div className="w-36 h-4 bg-gray-200 rounded-md"></div>
</div>
</div>
{blocks.map((b, i) => (
<Transition
key={b.hash}