Add dynamic refresh of age column

This commit is contained in:
Willian Mitsuda 2021-07-29 23:46:59 -03:00
parent a30498cf1d
commit cfaee9ccf2
2 changed files with 6 additions and 3 deletions

View File

@ -7,10 +7,11 @@ import { ExtendedBlock } from "../useErigonHooks";
const ELASTICITY_MULTIPLIER = 2; const ELASTICITY_MULTIPLIER = 2;
type BlockRecordProps = { type BlockRecordProps = {
now: number;
block: ExtendedBlock; block: ExtendedBlock;
}; };
const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => { const BlockRecord: React.FC<BlockRecordProps> = ({ now, block }) => {
const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER); const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
const burntFees = const burntFees =
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed); block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@ -50,7 +51,7 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
Gwei Gwei
</div> </div>
<div className="text-right"> <div className="text-right">
<TimestampAge timestamp={block.timestamp} /> <TimestampAge now={now / 1000} timestamp={block.timestamp} />
</div> </div>
</div> </div>
); );

View File

@ -21,6 +21,7 @@ type BlocksProps = {
const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => { const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
const { provider } = useContext(RuntimeContext); const { provider } = useContext(RuntimeContext);
const [blocks, setBlock] = useState<ExtendedBlock[]>([]); const [blocks, setBlock] = useState<ExtendedBlock[]>([]);
const [now, setNow] = useState<number>(Date.now());
useEffect(() => { useEffect(() => {
if (!provider) { if (!provider) {
@ -29,6 +30,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
const _readBlock = async () => { const _readBlock = async () => {
const extBlock = await readBlock(provider, latestBlock.number.toString()); const extBlock = await readBlock(provider, latestBlock.number.toString());
setNow(Date.now());
setBlock((_blocks) => { setBlock((_blocks) => {
if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) { if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) {
return _blocks; return _blocks;
@ -106,7 +108,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-10" leaveTo="opacity-0 translate-y-10"
> >
<BlockRecord block={b} /> <BlockRecord now={now} block={b} />
</Transition> </Transition>
))} ))}
</div> </div>