54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { JsonRpcProvider, Block } from "@ethersproject/providers";
|
|
import { commify } from "@ethersproject/units";
|
|
|
|
type CountdownProps = {
|
|
provider: JsonRpcProvider;
|
|
currentBlock: 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">
|
|
{commify(targetBlock - currentBlock.number)}
|
|
</h2>
|
|
<h6 className="text-sm mb-10">Blocks remaining</h6>
|
|
<h2 className="inline-flex space-x-10 text-base mb-10">
|
|
<div>Current block: {commify(currentBlock.number)}</div>
|
|
<div>Target block: {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);
|