Merge branch 'feature/special-london' into develop
This commit is contained in:
Willian Mitsuda
commit
dc07704721
|
|
@ -19,6 +19,7 @@
|
|||
"@fortawesome/free-regular-svg-icons": "^5.15.3",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||
"@headlessui/react": "^1.4.0",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
|
|
@ -28,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",
|
||||
|
|
@ -2106,6 +2109,18 @@
|
|||
"@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": {
|
||||
"version": "1.1.0",
|
||||
"license": "ISC",
|
||||
|
|
@ -5501,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"
|
||||
|
|
@ -14051,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",
|
||||
|
|
@ -20444,6 +20476,12 @@
|
|||
"@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": {
|
||||
"version": "1.1.0",
|
||||
"requires": {
|
||||
|
|
@ -22766,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"
|
||||
},
|
||||
|
|
@ -28440,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": {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"@fortawesome/free-regular-svg-icons": "^5.15.3",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||
"@headlessui/react": "^1.4.0",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
|
|
@ -24,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",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import Home from "./Home";
|
|||
import Search from "./Search";
|
||||
import Title from "./Title";
|
||||
import ConnectionErrorPanel from "./ConnectionErrorPanel";
|
||||
import London from "./special/london/London";
|
||||
import Footer from "./Footer";
|
||||
import { ConnectionStatus } from "./types";
|
||||
import { RuntimeContext, useRuntime } from "./useRuntime";
|
||||
|
|
@ -36,6 +37,9 @@ const App = () => {
|
|||
<Route path="/search" exact>
|
||||
<Search />
|
||||
</Route>
|
||||
<Route path="/special/london" exact>
|
||||
<London />
|
||||
</Route>
|
||||
<Route>
|
||||
<div className="mb-auto">
|
||||
<Title />
|
||||
|
|
|
|||
|
|
@ -63,10 +63,18 @@ const BlockTransactions: React.FC = () => {
|
|||
to: t.to,
|
||||
createdContractAddress: _receipts[i].contractAddress,
|
||||
value: t.value,
|
||||
fee: provider.formatter
|
||||
fee:
|
||||
t.type !== 2
|
||||
? provider.formatter
|
||||
.bigNumber(_receipts[i].gasUsed)
|
||||
.mul(t.gasPrice!),
|
||||
gasPrice: t.gasPrice!,
|
||||
.mul(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,
|
||||
status: provider.formatter.number(_receipts[i].status),
|
||||
};
|
||||
|
|
|
|||
15
src/Home.tsx
15
src/Home.tsx
|
|
@ -1,6 +1,8 @@
|
|||
import React, { useState, useContext } from "react";
|
||||
import { NavLink, useHistory } from "react-router-dom";
|
||||
import { ethers } from "ethers";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faBurn } from "@fortawesome/free-solid-svg-icons";
|
||||
import Logo from "./Logo";
|
||||
import Timestamp from "./components/Timestamp";
|
||||
import { RuntimeContext } from "./useRuntime";
|
||||
|
|
@ -54,6 +56,19 @@ const Home: React.FC = () => {
|
|||
>
|
||||
Search
|
||||
</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 && (
|
||||
<NavLink
|
||||
className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import React from "react";
|
||||
|
||||
type TimestampAgeProps = {
|
||||
now?: number | undefined;
|
||||
timestamp: number;
|
||||
};
|
||||
|
||||
const TimestampAge: React.FC<TimestampAgeProps> = ({ timestamp }) => {
|
||||
const now = Date.now() / 1000;
|
||||
const TimestampAge: React.FC<TimestampAgeProps> = ({ now, timestamp }) => {
|
||||
if (now === undefined) {
|
||||
now = Date.now() / 1000;
|
||||
}
|
||||
let diff = now - timestamp;
|
||||
|
||||
let desc = "";
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export const londonBlockNumber: { [chainId: string]: number } = {
|
||||
"1": 12965000,
|
||||
"3": 10499401,
|
||||
"4": 8897988,
|
||||
"5": 5062605,
|
||||
};
|
||||
|
|
@ -13,17 +13,10 @@ export interface ExtendedBlock extends ethers.providers.Block {
|
|||
totalDifficulty: BigNumber;
|
||||
}
|
||||
|
||||
export const useBlockData = (
|
||||
provider: ethers.providers.JsonRpcProvider | undefined,
|
||||
export const readBlock = async (
|
||||
provider: ethers.providers.JsonRpcProvider,
|
||||
blockNumberOrHash: string
|
||||
) => {
|
||||
const [block, setBlock] = useState<ExtendedBlock>();
|
||||
useEffect(() => {
|
||||
if (!provider) {
|
||||
return;
|
||||
}
|
||||
|
||||
const readBlock = async () => {
|
||||
let blockPromise: Promise<any>;
|
||||
if (ethers.utils.isHexString(blockNumberOrHash, 32)) {
|
||||
blockPromise = provider.send("eth_getBlockByHash", [
|
||||
|
|
@ -51,24 +44,33 @@ export const useBlockData = (
|
|||
|
||||
const _block = provider.formatter.block(_rawBlock);
|
||||
const extBlock: ExtendedBlock = {
|
||||
blockReward: provider.formatter.bigNumber(
|
||||
_rawIssuance.blockReward ?? 0
|
||||
),
|
||||
unclesReward: provider.formatter.bigNumber(
|
||||
_rawIssuance.uncleReward ?? 0
|
||||
),
|
||||
blockReward: provider.formatter.bigNumber(_rawIssuance.blockReward ?? 0),
|
||||
unclesReward: provider.formatter.bigNumber(_rawIssuance.uncleReward ?? 0),
|
||||
feeReward: fees,
|
||||
size: provider.formatter.number(_rawBlock.size),
|
||||
sha3Uncles: _rawBlock.sha3Uncles,
|
||||
stateRoot: _rawBlock.stateRoot,
|
||||
totalDifficulty: provider.formatter.bigNumber(
|
||||
_rawBlock.totalDifficulty
|
||||
),
|
||||
totalDifficulty: provider.formatter.bigNumber(_rawBlock.totalDifficulty),
|
||||
..._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);
|
||||
};
|
||||
readBlock();
|
||||
_readBlock();
|
||||
}, [provider, blockNumberOrHash]);
|
||||
|
||||
return block;
|
||||
|
|
|
|||
Loading…
Reference in New Issue