Small refactorings

This commit is contained in:
Willian Mitsuda 2021-07-30 04:55:21 -03:00
parent 15cbd39445
commit 81a2771f38
3 changed files with 32 additions and 21 deletions

View File

@ -1,4 +1,10 @@
import React, { useState, useEffect, useContext, useMemo } from "react";
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";
@ -47,23 +53,24 @@ const options: ChartOptions = {
type BlocksProps = {
latestBlock: ethers.providers.Block;
targetBlockNumber: number;
};
const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
const { provider } = useContext(RuntimeContext);
const [blocks, setBlock] = useState<ExtendedBlock[]>([]);
const [now, setNow] = useState<number>(Date.now());
useEffect(() => {
if (!provider) {
return;
}
const addBlock = useCallback(
async (blockNumber: number) => {
if (!provider) {
return;
}
const _readBlock = async () => {
const extBlock = await readBlock(provider, latestBlock.number.toString());
const extBlock = await readBlock(provider, blockNumber.toString());
setNow(Date.now());
setBlock((_blocks) => {
if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) {
if (_blocks.length > 0 && blockNumber === _blocks[0].number) {
return _blocks;
}
@ -74,12 +81,16 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
);
// Little hack to fix out of order block notifications
newBlocks.sort((a, b) => a.number - b.number);
newBlocks.sort((a, b) => b.number - a.number);
return newBlocks;
});
};
_readBlock();
}, [provider, latestBlock]);
},
[provider]
);
useEffect(() => {
addBlock(latestBlock.number);
}, [addBlock, latestBlock]);
const data: ChartData = useMemo(() => {
return {

View File

@ -3,13 +3,7 @@ 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);

View File

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