Add dynamic refresh of age column
This commit is contained in:
parent
a30498cf1d
commit
cfaee9ccf2
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue