Merge branch 'feature/special-london' into develop

This commit is contained in:
Willian Mitsuda 2021-07-30 05:33:28 -03:00
commit dc07704721
12 changed files with 493 additions and 50 deletions

51
package-lock.json generated
View File

@ -19,6 +19,7 @@
"@fortawesome/free-regular-svg-icons": "^5.15.3", "@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14", "@fortawesome/react-fontawesome": "^0.1.14",
"@headlessui/react": "^1.4.0",
"@testing-library/jest-dom": "^5.14.1", "@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
@ -28,10 +29,12 @@
"@types/react-blockies": "^1.4.1", "@types/react-blockies": "^1.4.1",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.8", "@types/react-router-dom": "^5.1.8",
"chart.js": "^3.5.0",
"ethers": "^5.4.1", "ethers": "^5.4.1",
"query-string": "^7.0.1", "query-string": "^7.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-blockies": "^1.4.1", "react-blockies": "^1.4.1",
"react-chartjs-2": "^3.0.4",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-error-boundary": "^3.1.3", "react-error-boundary": "^3.1.3",
"react-image": "^4.0.3", "react-image": "^4.0.3",
@ -2106,6 +2109,18 @@
"@hapi/hoek": "^8.3.0" "@hapi/hoek": "^8.3.0"
} }
}, },
"node_modules/@headlessui/react": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz",
"integrity": "sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==",
"engines": {
"node": ">=10"
},
"peerDependencies": {
"react": "^16 || ^17 || ^18",
"react-dom": "^16 || ^17 || ^18"
}
},
"node_modules/@istanbuljs/load-nyc-config": { "node_modules/@istanbuljs/load-nyc-config": {
"version": "1.1.0", "version": "1.1.0",
"license": "ISC", "license": "ISC",
@ -5501,6 +5516,11 @@
"node": ">=10" "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": { "node_modules/check-types": {
"version": "11.1.2", "version": "11.1.2",
"license": "MIT" "license": "MIT"
@ -14051,6 +14071,18 @@
"react": ">=15.0.0" "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": { "node_modules/react-dev-utils": {
"version": "11.0.4", "version": "11.0.4",
"license": "MIT", "license": "MIT",
@ -20444,6 +20476,12 @@
"@hapi/hoek": "^8.3.0" "@hapi/hoek": "^8.3.0"
} }
}, },
"@headlessui/react": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz",
"integrity": "sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==",
"requires": {}
},
"@istanbuljs/load-nyc-config": { "@istanbuljs/load-nyc-config": {
"version": "1.1.0", "version": "1.1.0",
"requires": { "requires": {
@ -22766,6 +22804,11 @@
"char-regex": { "char-regex": {
"version": "1.0.2" "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": { "check-types": {
"version": "11.1.2" "version": "11.1.2"
}, },
@ -28440,6 +28483,14 @@
"prop-types": "^15.5.10" "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": { "react-dev-utils": {
"version": "11.0.4", "version": "11.0.4",
"requires": { "requires": {

View File

@ -15,6 +15,7 @@
"@fortawesome/free-regular-svg-icons": "^5.15.3", "@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14", "@fortawesome/react-fontawesome": "^0.1.14",
"@headlessui/react": "^1.4.0",
"@testing-library/jest-dom": "^5.14.1", "@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
@ -24,10 +25,12 @@
"@types/react-blockies": "^1.4.1", "@types/react-blockies": "^1.4.1",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.8", "@types/react-router-dom": "^5.1.8",
"chart.js": "^3.5.0",
"ethers": "^5.4.1", "ethers": "^5.4.1",
"query-string": "^7.0.1", "query-string": "^7.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-blockies": "^1.4.1", "react-blockies": "^1.4.1",
"react-chartjs-2": "^3.0.4",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-error-boundary": "^3.1.3", "react-error-boundary": "^3.1.3",
"react-image": "^4.0.3", "react-image": "^4.0.3",

View File

@ -5,6 +5,7 @@ import Home from "./Home";
import Search from "./Search"; import Search from "./Search";
import Title from "./Title"; import Title from "./Title";
import ConnectionErrorPanel from "./ConnectionErrorPanel"; import ConnectionErrorPanel from "./ConnectionErrorPanel";
import London from "./special/london/London";
import Footer from "./Footer"; import Footer from "./Footer";
import { ConnectionStatus } from "./types"; import { ConnectionStatus } from "./types";
import { RuntimeContext, useRuntime } from "./useRuntime"; import { RuntimeContext, useRuntime } from "./useRuntime";
@ -36,6 +37,9 @@ const App = () => {
<Route path="/search" exact> <Route path="/search" exact>
<Search /> <Search />
</Route> </Route>
<Route path="/special/london" exact>
<London />
</Route>
<Route> <Route>
<div className="mb-auto"> <div className="mb-auto">
<Title /> <Title />

View File

@ -63,10 +63,18 @@ const BlockTransactions: React.FC = () => {
to: t.to, to: t.to,
createdContractAddress: _receipts[i].contractAddress, createdContractAddress: _receipts[i].contractAddress,
value: t.value, value: t.value,
fee: provider.formatter fee:
t.type !== 2
? provider.formatter
.bigNumber(_receipts[i].gasUsed) .bigNumber(_receipts[i].gasUsed)
.mul(t.gasPrice!), .mul(t.gasPrice!)
gasPrice: t.gasPrice!, : provider.formatter
.bigNumber(_receipts[i].gasUsed)
.mul(t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!)),
gasPrice:
t.type !== 2
? t.gasPrice!
: t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!),
data: t.data, data: t.data,
status: provider.formatter.number(_receipts[i].status), status: provider.formatter.number(_receipts[i].status),
}; };

View File

@ -1,6 +1,8 @@
import React, { useState, useContext } from "react"; import React, { useState, useContext } from "react";
import { NavLink, useHistory } from "react-router-dom"; import { NavLink, useHistory } from "react-router-dom";
import { ethers } from "ethers"; import { ethers } from "ethers";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBurn } from "@fortawesome/free-solid-svg-icons";
import Logo from "./Logo"; import Logo from "./Logo";
import Timestamp from "./components/Timestamp"; import Timestamp from "./components/Timestamp";
import { RuntimeContext } from "./useRuntime"; import { RuntimeContext } from "./useRuntime";
@ -54,6 +56,19 @@ const Home: React.FC = () => {
> >
Search Search
</button> </button>
<div className="mx-auto mt-5 mb-5 text-lg text-link-blue hover:text-link-blue-hover font-bold">
<NavLink to="/special/london">
<div className="flex space-x-2 items-baseline text-orange-500 hover:text-orange-700 hover:underline">
<span>
<FontAwesomeIcon icon={faBurn} />
</span>
<span>Check the special dashboard for EIP-1559</span>
<span>
<FontAwesomeIcon icon={faBurn} />
</span>
</div>
</NavLink>
</div>
{latestBlock && ( {latestBlock && (
<NavLink <NavLink
className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue" className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"

View File

@ -1,11 +1,14 @@
import React from "react"; import React from "react";
type TimestampAgeProps = { type TimestampAgeProps = {
now?: number | undefined;
timestamp: number; timestamp: number;
}; };
const TimestampAge: React.FC<TimestampAgeProps> = ({ timestamp }) => { const TimestampAge: React.FC<TimestampAgeProps> = ({ now, timestamp }) => {
const now = Date.now() / 1000; if (now === undefined) {
now = Date.now() / 1000;
}
let diff = now - timestamp; let diff = now - timestamp;
let desc = ""; let desc = "";

View File

@ -0,0 +1,60 @@
import { ethers } from "ethers";
import React from "react";
import BlockLink from "../../components/BlockLink";
import TimestampAge from "../../components/TimestampAge";
import { ExtendedBlock } from "../../useErigonHooks";
const ELASTICITY_MULTIPLIER = 2;
type BlockRowProps = {
now: number;
block: ExtendedBlock;
};
const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
const burntFees =
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
const netFeeReward = block && block.feeReward.sub(burntFees ?? 0);
const totalReward = block.blockReward.add(netFeeReward ?? 0);
return (
<div className="grid grid-cols-8 px-3 py-2 hover:bg-gray-100">
<div>
<BlockLink blockTag={block.number} />
</div>
<div
className={`text-right ${
block.gasUsed.gt(gasTarget)
? "text-green-500"
: block.gasUsed.lt(gasTarget)
? "text-red-500"
: ""
}`}
>
{ethers.utils.commify(block.gasUsed.toString())}
</div>
<div className="text-right text-gray-400">
{ethers.utils.commify(gasTarget.toString())}
</div>
<div className="text-right">{block.baseFeePerGas?.toString()} wei</div>
<div className="text-right col-span-2">
{ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
</div>
<div className="text-right line-through text-orange-500">
{ethers.utils.commify(
ethers.utils.formatUnits(
block.gasUsed.mul(block.baseFeePerGas!).toString(),
9
)
)}{" "}
Gwei
</div>
<div className="text-right text-gray-400">
<TimestampAge now={now / 1000} timestamp={block.timestamp} />
</div>
</div>
);
};
export default React.memo(BlockRow);

View File

@ -0,0 +1,208 @@
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,
faHistory,
} 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 className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 ">
<span>
<FontAwesomeIcon icon={faBurn} />
</span>
<span>London Hardfork is here. Watch the base fees burn.</span>
<span>
<FontAwesomeIcon icon={faBurn} />
</span>
</div>
<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 flex space-x-1 justify-end items-baseline">
<span className="text-gray-500">
<FontAwesomeIcon icon={faHistory} />
</span>
<span>Age</span>
</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);

View File

@ -0,0 +1,52 @@
import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
type CountdownProps = {
provider: ethers.providers.JsonRpcProvider;
currentBlock: ethers.providers.Block;
targetBlock: number;
};
const Countdown: React.FC<CountdownProps> = ({
provider,
currentBlock,
targetBlock,
}) => {
const [targetTimestamp, setTargetTimestamp] = useState<number>();
useEffect(() => {
const calcTime = async () => {
const diff = targetBlock - currentBlock.number;
const _prevBlock = await provider.getBlock(currentBlock.number - diff);
const _targetTimestamp =
currentBlock.timestamp +
(currentBlock.timestamp - _prevBlock.timestamp);
setTargetTimestamp(_targetTimestamp);
};
calcTime();
}, [provider, currentBlock, targetBlock]);
return (
<div className="w-full h-full flex">
<div className="m-auto text-center">
<h1 className="text-6xl mb-10">London Network Upgrade</h1>
<h2 className="text-5xl">
{ethers.utils.commify(targetBlock - currentBlock.number)}
</h2>
<h6 className="text-sm mb-10">Block remaining</h6>
<h2 className="inline-flex space-x-10 text-base mb-10">
<div>Current block: {ethers.utils.commify(currentBlock.number)}</div>
<div>Target block: {ethers.utils.commify(targetBlock)}</div>
</h2>
{targetTimestamp && (
<div className="text-lg">
{new Date(targetTimestamp * 1000).toLocaleDateString()} @{" "}
{new Date(targetTimestamp * 1000).toLocaleTimeString()} (Estimative)
</div>
)}
</div>
</div>
);
};
export default React.memo(Countdown);

View File

@ -0,0 +1,31 @@
import React, { useContext } from "react";
import { useLatestBlock } from "../../useLatestBlock";
import { RuntimeContext } from "../../useRuntime";
import Countdown from "./Countdown";
import Blocks from "./Blocks";
import { londonBlockNumber } from "./params";
const London: React.FC = () => {
const { provider } = useContext(RuntimeContext);
const block = useLatestBlock(provider);
if (!provider || !block) {
return <></>;
}
// Display countdown
const targetBlockNumber =
londonBlockNumber[provider.network.chainId.toString()];
if (block.number < targetBlockNumber) {
return (
<Countdown
provider={provider}
currentBlock={block}
targetBlock={targetBlockNumber}
/>
);
}
return <Blocks latestBlock={block} targetBlockNumber={targetBlockNumber} />;
};
export default React.memo(London);

View File

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

View File

@ -13,17 +13,10 @@ export interface ExtendedBlock extends ethers.providers.Block {
totalDifficulty: BigNumber; totalDifficulty: BigNumber;
} }
export const useBlockData = ( export const readBlock = async (
provider: ethers.providers.JsonRpcProvider | undefined, provider: ethers.providers.JsonRpcProvider,
blockNumberOrHash: string blockNumberOrHash: string
) => { ) => {
const [block, setBlock] = useState<ExtendedBlock>();
useEffect(() => {
if (!provider) {
return;
}
const readBlock = async () => {
let blockPromise: Promise<any>; let blockPromise: Promise<any>;
if (ethers.utils.isHexString(blockNumberOrHash, 32)) { if (ethers.utils.isHexString(blockNumberOrHash, 32)) {
blockPromise = provider.send("eth_getBlockByHash", [ blockPromise = provider.send("eth_getBlockByHash", [
@ -51,24 +44,33 @@ export const useBlockData = (
const _block = provider.formatter.block(_rawBlock); const _block = provider.formatter.block(_rawBlock);
const extBlock: ExtendedBlock = { const extBlock: ExtendedBlock = {
blockReward: provider.formatter.bigNumber( blockReward: provider.formatter.bigNumber(_rawIssuance.blockReward ?? 0),
_rawIssuance.blockReward ?? 0 unclesReward: provider.formatter.bigNumber(_rawIssuance.uncleReward ?? 0),
),
unclesReward: provider.formatter.bigNumber(
_rawIssuance.uncleReward ?? 0
),
feeReward: fees, feeReward: fees,
size: provider.formatter.number(_rawBlock.size), size: provider.formatter.number(_rawBlock.size),
sha3Uncles: _rawBlock.sha3Uncles, sha3Uncles: _rawBlock.sha3Uncles,
stateRoot: _rawBlock.stateRoot, stateRoot: _rawBlock.stateRoot,
totalDifficulty: provider.formatter.bigNumber( totalDifficulty: provider.formatter.bigNumber(_rawBlock.totalDifficulty),
_rawBlock.totalDifficulty
),
..._block, ..._block,
}; };
return extBlock;
};
export const useBlockData = (
provider: ethers.providers.JsonRpcProvider | undefined,
blockNumberOrHash: string
) => {
const [block, setBlock] = useState<ExtendedBlock>();
useEffect(() => {
if (!provider) {
return;
}
const _readBlock = async () => {
const extBlock = await readBlock(provider, blockNumberOrHash);
setBlock(extBlock); setBlock(extBlock);
}; };
readBlock(); _readBlock();
}, [provider, blockNumberOrHash]); }, [provider, blockNumberOrHash]);
return block; return block;