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

Merge branch 'feature/burn-chart' into feature/special-london

Browse Source
This commit is contained in:
Willian Mitsuda 2021-07-30 05:06:39 -03:00
commit 1be4d2b078
9 changed files with 244 additions and 136 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",

2
src/App.tsx
View File

@ -5,7 +5,7 @@ import Home from "./Home";
import Search from "./Search";
import Title from "./Title";
import ConnectionErrorPanel from "./ConnectionErrorPanel";
import London from "./special/London";
import London from "./special/london/London";
import Footer from "./Footer";
import { ConnectionStatus } from "./types";
import { RuntimeContext, useRuntime } from "./useRuntime";

119
src/special/Blocks.tsx
View File

@ -1,119 +0,0 @@
import React, { useState, useEffect, useContext } from "react";
import { ethers } from "ethers";
import { Transition } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faBurn,
faCoins,
faCube,
faGasPump,
} from "@fortawesome/free-solid-svg-icons";
import BlockRecord from "./BlockRecord";
import { ExtendedBlock, readBlock } from "../useErigonHooks";
import { RuntimeContext } from "../useRuntime";
const MAX_BLOCK_HISTORY = 20;
type BlocksProps = {
latestBlock: ethers.providers.Block;
};
const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
const { provider } = useContext(RuntimeContext);
const [blocks, setBlock] = useState<ExtendedBlock[]>([]);
const [now, setNow] = useState<number>(Date.now());
useEffect(() => {
if (!provider) {
return;
}
const _readBlock = async () => {
const extBlock = await readBlock(provider, latestBlock.number.toString());
setNow(Date.now());
setBlock((_blocks) => {
if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) {
return _blocks;
}
return [extBlock, ..._blocks].slice(0, MAX_BLOCK_HISTORY + 1);
});
};
_readBlock();
}, [provider, latestBlock]);
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 className="flex space-x-1 items-baseline">
<span className="text-gray-500">
<FontAwesomeIcon icon={faCube} />
</span>
<span>Block</span>
</div>
<div className="text-right flex space-x-1 justify-end items-baseline">
<span className="text-gray-500">
<FontAwesomeIcon icon={faGasPump} />
</span>
<span>Gas used</span>
</div>
<div className="text-right">Gas target</div>
<div className="text-right">Base fee</div>
<div className="text-right col-span-2 flex space-x-1 justify-end items-baseline">
<span className="text-yellow-400">
<FontAwesomeIcon icon={faCoins} />
</span>
<span>Rewards</span>
</div>
<div className="text-right flex space-x-1 justify-end items-baseline">
<span className="text-orange-500">
<FontAwesomeIcon icon={faBurn} />
</span>
<span>Burnt fees</span>
</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}
show={i < MAX_BLOCK_HISTORY}
appear
enter="transition transform ease-out duration-500"
enterFrom="opacity-0 -translate-y-10"
enterTo="opacity-100 translate-y-0"
leave="transition transform ease-out duration-1000"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-10"
>
<BlockRecord now={now} block={b} />
</Transition>
))}
</div>
</div>
);
};
export default React.memo(Blocks);

12
src/special/BlockRecord.tsx → src/special/london/BlockRow.tsx
View File

@ -1,17 +1,17 @@
import { ethers } from "ethers";
import React from "react";
import BlockLink from "../components/BlockLink";
import TimestampAge from "../components/TimestampAge";
import { ExtendedBlock } from "../useErigonHooks";
import BlockLink from "../../components/BlockLink";
import TimestampAge from "../../components/TimestampAge";
import { ExtendedBlock } from "../../useErigonHooks";
const ELASTICITY_MULTIPLIER = 2;
type BlockRecordProps = {
type BlockRowProps = {
now: number;
block: ExtendedBlock;
};
const BlockRecord: React.FC<BlockRecordProps> = ({ now, block }) => {
const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
const burntFees =
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@ -57,4 +57,4 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ now, block }) => {
);
};
export default React.memo(BlockRecord);
export default React.memo(BlockRow);

193
src/special/london/Blocks.tsx Normal file
View File

@ -0,0 +1,193 @@
import React, {
useState,
useEffect,
useContext,
useMemo,
useCallback,
} 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 {
faBurn,
faCoins,
faCube,
faGasPump,
} from "@fortawesome/free-solid-svg-icons";
import BlockRow from "./BlockRow";
import { ExtendedBlock, readBlock } from "../../useErigonHooks";
import { RuntimeContext } from "../../useRuntime";
const MAX_BLOCK_HISTORY = 20;
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 = {
latestBlock: ethers.providers.Block;
targetBlockNumber: number;
};
const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
const { provider } = useContext(RuntimeContext);
const [blocks, setBlock] = useState<ExtendedBlock[]>([]);
const [now, setNow] = useState<number>(Date.now());
const addBlock = useCallback(
async (blockNumber: number) => {
if (!provider) {
return;
}
// Skip blocks before the hard fork during the transition
if (blockNumber < targetBlockNumber) {
return;
}
const extBlock = await readBlock(provider, blockNumber.toString());
setNow(Date.now());
setBlock((_blocks) => {
if (_blocks.length > 0 && blockNumber === _blocks[0].number) {
return _blocks;
}
// Leave the last block because of transition animation
const newBlocks = [extBlock, ..._blocks].slice(
0,
MAX_BLOCK_HISTORY + 1
);
// Little hack to fix out of order block notifications
newBlocks.sort((a, b) => b.number - a.number);
return newBlocks;
});
},
[provider, targetBlockNumber]
);
useEffect(() => {
addBlock(latestBlock.number);
}, [addBlock, 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]);
// On page reload, pre-populate the last N blocks
useEffect(
() => {
const addPreviousBlocks = async () => {
for (
let i = latestBlock.number - PREV_BLOCK_COUNT;
i < latestBlock.number;
i++
) {
await addBlock(i);
}
};
addPreviousBlocks();
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
return (
<div className="w-full mb-auto">
<div className="px-9 pt-3 pb-12 divide-y-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} />
</span>
<span>Block</span>
</div>
<div className="text-right flex space-x-1 justify-end items-baseline">
<span className="text-gray-500">
<FontAwesomeIcon icon={faGasPump} />
</span>
<span>Gas used</span>
</div>
<div className="text-right">Gas target</div>
<div className="text-right">Base fee</div>
<div className="text-right col-span-2 flex space-x-1 justify-end items-baseline">
<span className="text-yellow-400">
<FontAwesomeIcon icon={faCoins} />
</span>
<span>Rewards</span>
</div>
<div className="text-right flex space-x-1 justify-end items-baseline">
<span className="text-orange-500">
<FontAwesomeIcon icon={faBurn} />
</span>
<span>Burnt fees</span>
</div>
<div className="text-right">Age</div>
</div>
{blocks.map((b, i) => (
<Transition
key={b.hash}
show={i < MAX_BLOCK_HISTORY}
appear
enter="transition transform ease-out duration-500"
enterFrom="opacity-0 -translate-y-10"
enterTo="opacity-100 translate-y-0"
leave="transition transform ease-out duration-1000"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-10"
>
<BlockRow now={now} block={b} />
</Transition>
))}
</div>
</div>
);
};
export default React.memo(Blocks);

0
src/special/Countdown.tsx → src/special/london/Countdown.tsx
View File

14
src/special/London.tsx → src/special/london/London.tsx
View File

@ -1,15 +1,9 @@
import React, { useContext } from "react";
import { useLatestBlock } from "../useLatestBlock";
import { RuntimeContext } from "../useRuntime";
import { useLatestBlock } from "../../useLatestBlock";
import { RuntimeContext } from "../../useRuntime";
import Countdown from "./Countdown";
import Blocks from "./Blocks";
const londonBlockNumber: { [chainId: string]: number } = {
"1": 12965000,
"3": 10499401,
"4": 8897988,
"5": 5062605,
};
import { londonBlockNumber } from "./params";
const London: React.FC = () => {
const { provider } = useContext(RuntimeContext);
@ -31,7 +25,7 @@ const London: React.FC = () => {
);
}
return <Blocks latestBlock={block} />;
return <Blocks latestBlock={block} targetBlockNumber={targetBlockNumber} />;
};
export default React.memo(London);

6
src/special/london/params.ts Normal file
View File

@ -0,0 +1,6 @@
export const londonBlockNumber: { [chainId: string]: number } = {
"1": 12965000,
"3": 10499401,
"4": 8897988,
"5": 5062605,
};