From 9e0097e7b69fa226e0ea94e8d1fa1cd402677805 Mon Sep 17 00:00:00 2001 From: softsimon Date: Wed, 29 Jul 2020 15:16:09 +0700 Subject: [PATCH 1/4] Adding fee estimation component to front page fixes #98 --- frontend/src/app/app.module.ts | 2 + .../fees-box/fees-box.component.html | 19 ++++++++ .../fees-box/fees-box.component.scss | 0 .../components/fees-box/fees-box.component.ts | 47 +++++++++++++++++++ .../latest-blocks.component.html | 3 +- 5 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 frontend/src/app/components/fees-box/fees-box.component.html create mode 100644 frontend/src/app/components/fees-box/fees-box.component.scss create mode 100644 frontend/src/app/components/fees-box/fees-box.component.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 1b88951f4..8f8afd176 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -40,6 +40,7 @@ import { StatusViewComponent } from './components/status-view/status-view.compon import { MinerComponent } from './components/miner/miner.component'; import { SharedModule } from './shared/shared.module'; import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap'; +import { FeesBoxComponent } from './components/fees-box/fees-box.component'; @NgModule({ declarations: [ @@ -70,6 +71,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap'; AssetsComponent, MinerComponent, StatusViewComponent, + FeesBoxComponent, ], imports: [ BrowserModule, diff --git a/frontend/src/app/components/fees-box/fees-box.component.html b/frontend/src/app/components/fees-box/fees-box.component.html new file mode 100644 index 000000000..b93b16e70 --- /dev/null +++ b/frontend/src/app/components/fees-box/fees-box.component.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + +
1 hour30 minutesNext block
{{ feeEstimations.fastestFee }} sat/vB (){{ feeEstimations.halfHourFee }} sat/vB (){{ feeEstimations.hourFee }} sat/vB ()
diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/app/components/fees-box/fees-box.component.ts b/frontend/src/app/components/fees-box/fees-box.component.ts new file mode 100644 index 000000000..67c5daff3 --- /dev/null +++ b/frontend/src/app/components/fees-box/fees-box.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { StateService } from 'src/app/services/state.service'; +import { map } from 'rxjs/operators'; +import { Observable } from 'rxjs'; + +interface FeeEstimations { + fastestFee: number; + halfHourFee: number; + hourFee: number; +} + +@Component({ + selector: 'app-fees-box', + templateUrl: './fees-box.component.html', + styleUrls: ['./fees-box.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FeesBoxComponent implements OnInit { + feeEstimations$: Observable; + + constructor( + private stateService: StateService, + ) { } + + ngOnInit(): void { + this.feeEstimations$ = this.stateService.mempoolBlocks$ + .pipe( + map((pBlocks) => { + let firstMedianFee = Math.ceil(pBlocks[0].medianFee); + + if (pBlocks.length === 1 && pBlocks[0].blockVSize <= 500000) { + firstMedianFee = 1; + } + + const secondMedianFee = pBlocks[1] ? Math.ceil(pBlocks[1].medianFee) : firstMedianFee; + const thirdMedianFee = pBlocks[2] ? Math.ceil(pBlocks[2].medianFee) : secondMedianFee; + + return { + 'fastestFee': firstMedianFee, + 'halfHourFee': secondMedianFee, + 'hourFee': thirdMedianFee, + }; + }) + ); + } + +} diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.html b/frontend/src/app/components/latest-blocks/latest-blocks.component.html index e22fc04db..72659cf0b 100644 --- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html +++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html @@ -1,5 +1,6 @@ -
+ +
From 266c347292ffc43b86209be85d9043b69c01a609 Mon Sep 17 00:00:00 2001 From: softsimon Date: Wed, 29 Jul 2020 15:20:23 +0700 Subject: [PATCH 2/4] Fee box: Handle empty mempool. --- frontend/src/app/components/fees-box/fees-box.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/components/fees-box/fees-box.component.ts b/frontend/src/app/components/fees-box/fees-box.component.ts index 67c5daff3..c55c164a8 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.ts +++ b/frontend/src/app/components/fees-box/fees-box.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { StateService } from 'src/app/services/state.service'; -import { map } from 'rxjs/operators'; +import { map, filter } from 'rxjs/operators'; import { Observable } from 'rxjs'; interface FeeEstimations { @@ -25,6 +25,7 @@ export class FeesBoxComponent implements OnInit { ngOnInit(): void { this.feeEstimations$ = this.stateService.mempoolBlocks$ .pipe( + filter((blocks) => !!blocks.length), map((pBlocks) => { let firstMedianFee = Math.ceil(pBlocks[0].medianFee); From 36d952b5032d87f9ba793e5e4da42eebab18421c Mon Sep 17 00:00:00 2001 From: softsimon Date: Wed, 29 Jul 2020 16:54:08 +0700 Subject: [PATCH 3/4] Fee block: Fees order fix. --- frontend/src/app/components/fees-box/fees-box.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/fees-box/fees-box.component.html b/frontend/src/app/components/fees-box/fees-box.component.html index b93b16e70..db58b4ab3 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.html +++ b/frontend/src/app/components/fees-box/fees-box.component.html @@ -5,9 +5,9 @@ - - + + From 81d7072a951306efd710b6811dee4f98bfc81690 Mon Sep 17 00:00:00 2001 From: softsimon Date: Wed, 29 Jul 2020 17:30:30 +0700 Subject: [PATCH 4/4] Fee box: Mobile view --- .../app/components/fees-box/fees-box.component.html | 12 ++++++------ .../app/components/fees-box/fees-box.component.scss | 9 +++++++++ .../latest-blocks/latest-blocks.component.html | 2 +- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/components/fees-box/fees-box.component.html b/frontend/src/app/components/fees-box/fees-box.component.html index db58b4ab3..d2f9e0ba9 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.html +++ b/frontend/src/app/components/fees-box/fees-box.component.html @@ -1,17 +1,17 @@ -
Next block
{{ feeEstimations.fastestFee }} sat/vB (){{ feeEstimations.halfHourFee }} sat/vB () {{ feeEstimations.hourFee }} sat/vB (){{ feeEstimations.halfHourFee }} sat/vB (){{ feeEstimations.fastestFee }} sat/vB ()
+
- - - + + + - + - + diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss index e69de29bb..ab8257f06 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.scss +++ b/frontend/src/app/components/fees-box/fees-box.component.scss @@ -0,0 +1,9 @@ +td { + width: 33%; +} + +@media (max-width: 767.98px) { + td { + width: 50%; + } +} diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.html b/frontend/src/app/components/latest-blocks/latest-blocks.component.html index 72659cf0b..fd077080e 100644 --- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html +++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html @@ -1,4 +1,4 @@ - +
1 hour30 minutesNext block1 hour30 minutesNext block
{{ feeEstimations.hourFee }} sat/vB (){{ feeEstimations.hourFee }} sat/vB () {{ feeEstimations.halfHourFee }} sat/vB () {{ feeEstimations.fastestFee }} sat/vB ()