machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: Reflect difficulty estimation into mempool blocks. (#637)

Browse Source 
* Add time until to mempool blocks.
Reflect difficulty estimate time.

* Fix estimate calculation.
Turn off the auto refresh.

* Change Math.floor to Math.round.
This commit is contained in:
Miguel Medeiros
2021-07-20 09:04:53 -03:00
committed by GitHub
parent 95436d398d
commit 1ba0075829
5 changed files with 54 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
View File

@@ -1,5 +1,5 @@
<div class="mempool-blocks-container" *ngIf="(isLoading$ | async) === false">
<div class="flashing">
<div class="flashing" *ngIf="(timeAvg$ | async) as timeAvg;">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
<a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
@@ -18,10 +18,10 @@
</div>
<div class="time-difference" *ngIf="projectedBlock.blockVSize <= 1000000; else mergedBlock">
<ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeDiffMainnet">
<ng-container *ngTemplateOutlet="1 * i + 1 === 1 ? nextBlockEta : nextBlockEtaPlural; context:{ $implicit: 1 * i + 1 }"></ng-container>
<app-time-until [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time-until>
</ng-template>
<ng-template #timeDiffMainnet>
<ng-container *ngTemplateOutlet="nextBlockEtaPlural; context:{ $implicit: 10 * i + 10 }"></ng-container>
<app-time-until [time]="(timeAvg * i) + now + timeAvg" [fastRender]="false" [fixedRender]="true"></app-time-until>
</ng-template>
</div>
<ng-template #mergedBlock>
@@ -38,10 +38,6 @@
<div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
</div>
<ng-template let-i #nextBlockEtaPlural i18n="mempool-blocks.eta-of-next-block-plural|Block Frequency (plural)">In ~{{ i }} minutes</ng-template>
<ng-template let-i #nextBlockEta i18n="mempool-blocks.eta-of-next-block|Block Frequency">In ~{{ i }} minute</ng-template>
<div class="mempool-blocks-container" *ngIf="(isLoading$ | async) === true">
<div class="flashing">
<ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks" let-i="index" [ngForTrackBy]="trackByFn">

33
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@@ -1,5 +1,5 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
import { Subscription, Observable, fromEvent, merge, of } from 'rxjs';
import { Subscription, Observable, fromEvent, merge, of, combineLatest, timer } from 'rxjs';
import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
import { StateService } from 'src/app/services/state.service';
import { Router } from '@angular/router';
@@ -17,6 +17,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
mempoolBlocks: MempoolBlock[] = this.mountEmptyBlocks();
mempoolBlocks$: Observable<MempoolBlock[]>;
timeAvg$: Observable<number>;
mempoolBlocksFull: MempoolBlock[] = this.mountEmptyBlocks();
mempoolBlockStyles = [];
@@ -24,6 +25,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
blockSubscription: Subscription;
networkSubscription: Subscription;
network = '';
now = new Date().getTime();
blockWidth = 125;
blockPadding = 30;
@@ -75,10 +77,39 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks));
this.updateMempoolBlockStyles();
this.calculateTransactionPosition();
this.now = new Date().getTime();
return this.mempoolBlocks;
})
);
this.timeAvg$ = timer(0, 1000)
.pipe(
switchMap(() => combineLatest([
this.stateService.blocks$.pipe(map(([block]) => block)),
this.stateService.lastDifficultyAdjustment$
])),
map(([block, DATime]) => {
const now = new Date().getTime() / 1000;
const diff = now - DATime;
const blocksInEpoch = block.height % 2016;
let difficultyChange = 0;
if (blocksInEpoch > 0) {
difficultyChange = (600 / (diff / blocksInEpoch ) - 1) * 100;
}
const timeAvgDiff = difficultyChange * 0.1;
let timeAvgMins = 10;
if (timeAvgDiff > 0 ){
timeAvgMins -= Math.abs(timeAvgDiff);
} else {
timeAvgMins += Math.abs(timeAvgDiff);
}
return timeAvgMins * 60 * 1000;
})
);
this.markBlocksSubscription = this.stateService.markBlock$
.subscribe((state) => {
this.markIndex = undefined;