From 8599876b26ee2109c379d4bfd8a5ab1d720360d0 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Thu, 7 Dec 2023 08:26:32 +0000 Subject: [PATCH] Refactor accelerator dashboard --- .../acceleration-stats.component.ts | 64 -------------- .../acceleration-fees-graph.component.html | 12 +-- .../acceleration-fees-graph.component.scss | 0 .../acceleration-fees-graph.component.ts | 35 ++++---- .../acceleration-stats.component.html | 53 +++++++++++ .../acceleration-stats.component.scss | 0 .../acceleration-stats.component.ts | 46 ++++++++++ .../accelerations-list.component.html | 13 +-- .../accelerations-list.component.scss | 0 .../accelerations-list.component.ts | 18 ++-- .../accelerator-dashboard.component.html | 10 +-- .../accelerator-dashboard.component.scss | 4 + .../accelerator-dashboard.component.ts | 35 +++++--- .../pending-stats.component.html} | 26 ++---- .../pending-stats.component.scss | 88 +++++++++++++++++++ .../pending-stats/pending-stats.component.ts | 39 ++++++++ frontend/src/app/graphs/graphs.module.ts | 4 +- .../src/app/graphs/graphs.routing.module.ts | 6 +- .../shared/components/btc/btc.component.html | 8 ++ .../shared/components/btc/btc.component.scss | 0 .../shared/components/btc/btc.component.ts | 44 ++++++++++ frontend/src/app/shared/shared.module.ts | 10 ++- 22 files changed, 373 insertions(+), 142 deletions(-) delete mode 100644 frontend/src/app/components/acceleration-stats/acceleration-stats.component.ts rename frontend/src/app/components/{ => acceleration}/acceleration-fees-graph/acceleration-fees-graph.component.html (84%) rename frontend/src/app/components/{ => acceleration}/acceleration-fees-graph/acceleration-fees-graph.component.scss (100%) rename frontend/src/app/components/{ => acceleration}/acceleration-fees-graph/acceleration-fees-graph.component.ts (87%) create mode 100644 frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html rename frontend/src/app/components/{ => acceleration}/acceleration-stats/acceleration-stats.component.scss (100%) create mode 100644 frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts rename frontend/src/app/components/{ => acceleration}/accelerations-list/accelerations-list.component.html (82%) rename frontend/src/app/components/{ => acceleration}/accelerations-list/accelerations-list.component.scss (100%) rename frontend/src/app/components/{ => acceleration}/accelerations-list/accelerations-list.component.ts (68%) rename frontend/src/app/components/{ => acceleration}/accelerator-dashboard/accelerator-dashboard.component.html (92%) rename frontend/src/app/components/{ => acceleration}/accelerator-dashboard/accelerator-dashboard.component.scss (97%) rename frontend/src/app/components/{ => acceleration}/accelerator-dashboard/accelerator-dashboard.component.ts (72%) rename frontend/src/app/components/{acceleration-stats/acceleration-stats.component.html => acceleration/pending-stats/pending-stats.component.html} (60%) create mode 100644 frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss create mode 100644 frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts create mode 100644 frontend/src/app/shared/components/btc/btc.component.html create mode 100644 frontend/src/app/shared/components/btc/btc.component.scss create mode 100644 frontend/src/app/shared/components/btc/btc.component.ts diff --git a/frontend/src/app/components/acceleration-stats/acceleration-stats.component.ts b/frontend/src/app/components/acceleration-stats/acceleration-stats.component.ts deleted file mode 100644 index 4d06a31e2..000000000 --- a/frontend/src/app/components/acceleration-stats/acceleration-stats.component.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; -import { Observable, of } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; -import { ApiService } from '../../services/api.service'; - -@Component({ - selector: 'app-acceleration-stats', - templateUrl: './acceleration-stats.component.html', - styleUrls: ['./acceleration-stats.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class AccelerationStatsComponent implements OnInit { - @Input() timespan: 'now' | '24h' | '1w' = '24h'; - public accelerationStats$: Observable; - - constructor( - private apiService: ApiService, - ) { } - - ngOnInit(): void { - if (this.timespan === 'now') { - this.accelerationStats$ = this.apiService.getAccelerations$().pipe( - switchMap(accelerations => { - let totalAccelerations = 0; - let totalFeeDelta = 0; - let totalVsize = 0; - for (const acceleration of accelerations) { - totalAccelerations++; - totalFeeDelta += acceleration.feeDelta || 0; - totalVsize += acceleration.effectiveVsize || 0; - } - return of({ - count: totalAccelerations, - totalFeeDelta, - totalVsize, - }); - }) - ); - } else { - this.accelerationStats$ = this.apiService.getAccelerationHistory$(this.timespan).pipe( - switchMap(accelerations => { - let totalFeeDelta = 0; - let totalMined = 0; - let totalCanceled = 0; - for (const acceleration of accelerations) { - if (acceleration.status === 'completed') { - totalMined++; - totalFeeDelta += acceleration.feeDelta || 0; - } else if (acceleration.status === 'failed') { - totalCanceled++; - } - } - return of({ - count: totalMined, - totalFeeDelta, - successRate: (totalMined + totalCanceled > 0) ? ((totalMined / (totalMined + totalCanceled)) * 100) : 0.0, - }); - }) - ); - } - } - - -} diff --git a/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.html b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html similarity index 84% rename from frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.html rename to frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html index 6a56ac6ca..0c15f9f44 100644 --- a/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.html +++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html @@ -30,15 +30,15 @@
-
Avg Fee Delta (24h)
+
Avg Out-of-band Fees (24h)

- {{ stats.avgFeeDelta | number }} sat +

-
Avg Fee Delta (1w)
+
Avg Out-of-band Fees (1w)

- {{ stats.avgFeeDelta | number }} sat +

@@ -55,7 +55,7 @@
-
Avg Fee Delta (24h)
+
Avg Out-of-band Fees (24h)

@@ -63,7 +63,7 @@
-
Avg Fee Delta (1w)
+
Avg Out-of-band Fees (1w)

diff --git a/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.scss b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss similarity index 100% rename from frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.scss rename to frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss diff --git a/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.ts b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts similarity index 87% rename from frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.ts rename to frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts index cb14db9e8..b5dc21eb6 100644 --- a/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.ts +++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts @@ -2,14 +2,15 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, L import { EChartsOption, graphic } from 'echarts'; import { Observable, combineLatest } from 'rxjs'; import { map, startWith, switchMap, tap } from 'rxjs/operators'; -import { ApiService } from '../../services/api.service'; -import { SeoService } from '../../services/seo.service'; +import { ApiService } from '../../../services/api.service'; +import { SeoService } from '../../../services/seo.service'; import { formatNumber } from '@angular/common'; import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; -import { download, formatterXAxis } from '../../shared/graphs.utils'; -import { StorageService } from '../../services/storage.service'; -import { MiningService } from '../../services/mining.service'; +import { download, formatterXAxis } from '../../../shared/graphs.utils'; +import { StorageService } from '../../../services/storage.service'; +import { MiningService } from '../../../services/mining.service'; import { ActivatedRoute } from '@angular/router'; +import { Acceleration } from '../../../interfaces/node-api.interface'; @Component({ selector: 'app-acceleration-fees-graph', @@ -29,6 +30,7 @@ export class AccelerationFeesGraphComponent implements OnInit { @Input() widget: boolean = false; @Input() right: number | string = 45; @Input() left: number | string = 75; + @Input() accelerations$: Observable; miningWindowPreference: string; radioGroupForm: UntypedFormGroup; @@ -69,16 +71,16 @@ export class AccelerationFeesGraphComponent implements OnInit { this.isLoading = true; this.timespan = this.miningWindowPreference; - this.hrStatsObservable$ = this.apiService.getAccelerationHistory$('24h').pipe( + this.hrStatsObservable$ = (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: '24h' })).pipe( map((accelerations) => { return { - avgFeeDelta: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length + avgFeesPaid: accelerations.filter(acc => acc.status === 'completed' && acc.lastUpdated < (Date.now() - (24 * 60 * 60 * 1000))).reduce((total, acc) => total + acc.feePaid, 0) / accelerations.length }; }) ); this.statsObservable$ = combineLatest([ - this.apiService.getAccelerationHistory$(this.miningWindowPreference), + (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: this.miningWindowPreference })), this.apiService.getHistoricalBlockFees$(this.miningWindowPreference), ]).pipe( tap(([accelerations, blockFeesResponse]) => { @@ -87,7 +89,7 @@ export class AccelerationFeesGraphComponent implements OnInit { }), map(([accelerations, blockFeesResponse]) => { return { - avgFeeDelta: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length + avgFeesPaid: accelerations.filter(acc => acc.status === 'completed').reduce((total, acc) => total + acc.feePaid, 0) / accelerations.length }; }), ); @@ -107,7 +109,7 @@ export class AccelerationFeesGraphComponent implements OnInit { this.isLoading = true; this.storageService.setValue('miningWindowPreference', timespan); this.timespan = timespan; - return this.apiService.getAccelerationHistory$(); + return this.apiService.getAccelerationHistory$({}); }) ), this.radioGroupForm.get('dateSpan').valueChanges.pipe( @@ -147,15 +149,18 @@ export class AccelerationFeesGraphComponent implements OnInit { last = val.avgHeight; } let totalFeeDelta = 0; + let totalFeePaid = 0; let totalCount = 0; while (last <= val.avgHeight) { totalFeeDelta += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feeDelta, 0); + totalFeePaid += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feePaid, 0); totalCount += (blockAccelerations[last] || []).length; last++; } data.push({ ...val, feeDelta: totalFeeDelta, + feePaid: totalFeePaid, accelerations: totalCount, }); } @@ -236,7 +241,7 @@ export class AccelerationFeesGraphComponent implements OnInit { icon: 'roundRect', }, { - name: 'Total fee delta', + name: 'Out-of-band fees paid', inactiveColor: 'rgb(110, 112, 121)', textStyle: { color: 'white', @@ -251,8 +256,8 @@ export class AccelerationFeesGraphComponent implements OnInit { axisLabel: { color: 'rgb(110, 112, 121)', formatter: (val) => { - if (val >= 1_000_000) { - return `${(val / 100_000_000).toPrecision(5)} BTC`; + if (val >= 100_000) { + return `${(val / 100_000_000).toFixed(3)} BTC`; } else { return `${val} sats`; } @@ -303,8 +308,8 @@ export class AccelerationFeesGraphComponent implements OnInit { legendHoverLink: false, zlevel: 1, yAxisIndex: 0, - name: 'Total fee delta', - data: data.map(block => [block.timestamp * 1000, block.feeDelta, block.avgHeight]), + name: 'Out-of-band fees paid', + data: data.map(block => [block.timestamp * 1000, block.feePaid, block.avgHeight]), type: 'line', smooth: 0.25, symbol: 'none', diff --git a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html new file mode 100644 index 000000000..21cd57ae0 --- /dev/null +++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html @@ -0,0 +1,53 @@ +
+
+
+
Transactions
+
+
{{ stats.count }}
+
accelerated
+
+
+
+
Out-of-band Fees
+
+
{{ stats.totalFeesPaid / 100_000_000 | amountShortener: 4 }} BTC
+ + + +
+
+
+
Success rate
+
+
{{ stats.successRate.toFixed(2) }} %
+
mined
+
+
+
+
+ + +
+
+
Transactions
+
+
+
+
+
+
+
Out-of-band Fees
+
+
+
+
+
+
+
Success rate
+
+
+
+
+
+
+ diff --git a/frontend/src/app/components/acceleration-stats/acceleration-stats.component.scss b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss similarity index 100% rename from frontend/src/app/components/acceleration-stats/acceleration-stats.component.scss rename to frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss diff --git a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts new file mode 100644 index 000000000..51f7360e1 --- /dev/null +++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts @@ -0,0 +1,46 @@ +import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; +import { Observable, of } from 'rxjs'; +import { switchMap } from 'rxjs/operators'; +import { ApiService } from '../../../services/api.service'; +import { StateService } from '../../../services/state.service'; +import { Acceleration } from '../../../interfaces/node-api.interface'; + +@Component({ + selector: 'app-acceleration-stats', + templateUrl: './acceleration-stats.component.html', + styleUrls: ['./acceleration-stats.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class AccelerationStatsComponent implements OnInit { + @Input() timespan: '24h' | '1w' = '24h'; + @Input() accelerations$: Observable; + public accelerationStats$: Observable; + + constructor( + private apiService: ApiService, + private stateService: StateService, + ) { } + + ngOnInit(): void { + this.accelerationStats$ = this.accelerations$.pipe( + switchMap(accelerations => { + let totalFeesPaid = 0; + let totalSucceeded = 0; + let totalCanceled = 0; + for (const acceleration of accelerations) { + if (acceleration.status === 'completed') { + totalSucceeded++; + totalFeesPaid += acceleration.feePaid || 0; + } else if (acceleration.status === 'failed') { + totalCanceled++; + } + } + return of({ + count: totalSucceeded, + totalFeesPaid, + successRate: (totalSucceeded + totalCanceled > 0) ? ((totalSucceeded / (totalSucceeded + totalCanceled)) * 100) : 0.0, + }); + }) + ); + } +} diff --git a/frontend/src/app/components/accelerations-list/accelerations-list.component.html b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html similarity index 82% rename from frontend/src/app/components/accelerations-list/accelerations-list.component.html rename to frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html index 80f1c1dbf..0ac963446 100644 --- a/frontend/src/app/components/accelerations-list/accelerations-list.component.html +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html @@ -10,19 +10,22 @@ - - + + - + - +
TXIDFeeFee deltaFinal FeeMax Bid Status
- {{ acceleration.feePaid | number }} sat + + {{ (acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee) | number }} sat + + ~ {{ acceleration.feeDelta | number }} sat diff --git a/frontend/src/app/components/accelerations-list/accelerations-list.component.scss b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss similarity index 100% rename from frontend/src/app/components/accelerations-list/accelerations-list.component.scss rename to frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss diff --git a/frontend/src/app/components/accelerations-list/accelerations-list.component.ts b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts similarity index 68% rename from frontend/src/app/components/accelerations-list/accelerations-list.component.ts rename to frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts index efc900bd5..0c0002782 100644 --- a/frontend/src/app/components/accelerations-list/accelerations-list.component.ts +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts @@ -1,9 +1,9 @@ import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core'; -import { Observable, catchError, of, switchMap } from 'rxjs'; -import { Acceleration, BlockExtended } from '../../interfaces/node-api.interface'; -import { ApiService } from '../../services/api.service'; -import { StateService } from '../../services/state.service'; -import { WebsocketService } from '../../services/websocket.service'; +import { Observable, catchError, of, switchMap, tap } from 'rxjs'; +import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface'; +import { ApiService } from '../../../services/api.service'; +import { StateService } from '../../../services/state.service'; +import { WebsocketService } from '../../../services/websocket.service'; @Component({ selector: 'app-accelerations-list', @@ -13,8 +13,9 @@ import { WebsocketService } from '../../services/websocket.service'; }) export class AccelerationsListComponent implements OnInit { @Input() widget: boolean = false; + @Input() accelerations$: Observable; - accelerations$: Observable = undefined; + accelerationList$: Observable = undefined; isLoading = true; paginationMaxSize: number; @@ -39,7 +40,7 @@ export class AccelerationsListComponent implements OnInit { this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()]; this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5; - this.accelerations$ = this.apiService.getAccelerationHistory$().pipe( + this.accelerationList$ = (this.apiService.getAccelerationHistory$({ timeframe: '1m' }) || this.accelerations$).pipe( switchMap(accelerations => { if (this.widget) { return of(accelerations.slice(-6).reverse()); @@ -50,6 +51,9 @@ export class AccelerationsListComponent implements OnInit { catchError((err) => { this.isLoading = false; return of([]); + }), + tap(() => { + this.isLoading = false; }) ); } diff --git a/frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html similarity index 92% rename from frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.html rename to frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html index def01fc00..b43d27f05 100644 --- a/frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.html +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html @@ -4,7 +4,7 @@
- +
Pending accelerations @@ -12,7 +12,7 @@
- +
@@ -27,7 +27,7 @@
- +
@@ -37,7 +37,7 @@
- +
View more »
@@ -62,7 +62,7 @@   - +
diff --git a/frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.scss b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss similarity index 97% rename from frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.scss rename to frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss index 1171846fe..6d863fb60 100644 --- a/frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.scss +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss @@ -120,6 +120,10 @@ text-align: left; width: 30%; + @media (max-width: 875px) { + display: none; + } + .pool-name { margin-left: 1em; } diff --git a/frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts similarity index 72% rename from frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.ts rename to frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts index 3a3b3f384..00b3d303b 100644 --- a/frontend/src/app/components/accelerator-dashboard/accelerator-dashboard.component.ts +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts @@ -1,10 +1,10 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; -import { SeoService } from '../../services/seo.service'; -import { WebsocketService } from '../../services/websocket.service'; -import { Acceleration, BlockExtended } from '../../interfaces/node-api.interface'; -import { StateService } from '../../services/state.service'; -import { Observable, catchError, combineLatest, of, switchMap } from 'rxjs'; -import { ApiService } from '../../services/api.service'; +import { SeoService } from '../../../services/seo.service'; +import { WebsocketService } from '../../../services/websocket.service'; +import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface'; +import { StateService } from '../../../services/state.service'; +import { Observable, Subject, catchError, combineLatest, distinctUntilChanged, of, share, switchMap, tap } from 'rxjs'; +import { ApiService } from '../../../services/api.service'; interface AccelerationBlock extends BlockExtended { accelerationCount: number, @@ -18,7 +18,7 @@ interface AccelerationBlock extends BlockExtended { }) export class AcceleratorDashboardComponent implements OnInit { blocks$: Observable; - + accelerations$: Observable; loadingBlocks: boolean = true; constructor( @@ -33,7 +33,19 @@ export class AcceleratorDashboardComponent implements OnInit { ngOnInit(): void { this.websocketService.want(['blocks', 'mempool-blocks', 'stats']); + this.accelerations$ = this.stateService.chainTip$.pipe( + distinctUntilChanged(), + switchMap((chainTip) => { + return this.apiService.getAccelerationHistory$({ timeframe: '1w' }); + }), + catchError((e) => { + return of([]); + }), + share(), + ); + this.blocks$ = combineLatest([ + this.accelerations$, this.stateService.blocks$.pipe( switchMap((blocks) => { if (this.stateService.env.MINING_DASHBOARD === true) { @@ -44,16 +56,13 @@ export class AcceleratorDashboardComponent implements OnInit { } } return of(blocks as AccelerationBlock[]); - }) - ), - this.apiService.getAccelerationHistory$('24h').pipe( - catchError((err) => { + }), + tap(() => { this.loadingBlocks = false; - return of([]); }) ) ]).pipe( - switchMap(([blocks, accelerations]) => { + switchMap(([accelerations, blocks]) => { const blockMap = {}; for (const block of blocks) { blockMap[block.id] = block; diff --git a/frontend/src/app/components/acceleration-stats/acceleration-stats.component.html b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.html similarity index 60% rename from frontend/src/app/components/acceleration-stats/acceleration-stats.component.html rename to frontend/src/app/components/acceleration/pending-stats/pending-stats.component.html index 2180a1ad6..5b7bc356a 100644 --- a/frontend/src/app/components/acceleration-stats/acceleration-stats.component.html +++ b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.html @@ -8,22 +8,15 @@
-
Fee delta
+
Avg Max Bid
-
{{ stats.totalFeeDelta / 100_000_000 | amountShortener: 4 }} BTC
+
{{ stats.avgFeeDelta / 100_000_000 | amountShortener: 4 }} BTC
- +
-
-
Success rate
-
-
{{ stats.successRate.toFixed(2) }} %
-
mined in the next block
-
-
-
+
Total vsize
@@ -43,20 +36,13 @@
-
Fee delta
+
Avg Max Bid
-
-
Success rate
-
-
-
-
-
-
+
Total vsize
diff --git a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss new file mode 100644 index 000000000..fcc5564a8 --- /dev/null +++ b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss @@ -0,0 +1,88 @@ +.card-title { + color: #4a68b9; + font-size: 10px; + margin-bottom: 4px; + font-size: 1rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.card-text { + font-size: 22px; + span { + font-size: 11px; + position: relative; + top: -2px; + display: inline-flex; + } + .green-color { + display: block; + } +} + +.stats-container { + display: flex; + justify-content: space-between; + @media (min-width: 376px) { + flex-direction: row; + } + .item { + max-width: 150px; + margin: 0; + width: -webkit-fill-available; + @media (min-width: 376px) { + margin: 0 auto 0px; + } + &:first-child{ + display: none; + @media (min-width: 485px) { + display: block; + } + @media (min-width: 768px) { + display: none; + } + @media (min-width: 992px) { + display: block; + } + } + &:last-child { + margin-bottom: 0; + } + .card-text span { + color: #ffffff66; + font-size: 12px; + top: 0px; + } + .fee-text{ + border-bottom: 1px solid #ffffff1c; + width: fit-content; + margin: auto; + line-height: 1.45; + padding: 0px 2px; + } + .fiat { + display: block; + font-size: 14px !important; + } + } +} + +.loading-container{ + min-height: 76px; +} + +.card-text { + .skeleton-loader { + width: 100%; + display: block; + &:first-child { + max-width: 90px; + margin: 15px auto 3px; + } + &:last-child { + margin: 10px auto 3px; + max-width: 55px; + } + } +} \ No newline at end of file diff --git a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts new file mode 100644 index 000000000..dd3adacf8 --- /dev/null +++ b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts @@ -0,0 +1,39 @@ +import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; +import { Observable, of } from 'rxjs'; +import { switchMap } from 'rxjs/operators'; +import { ApiService } from '../../../services/api.service'; + +@Component({ + selector: 'app-pending-stats', + templateUrl: './pending-stats.component.html', + styleUrls: ['./pending-stats.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class PendingStatsComponent implements OnInit { + public accelerationStats$: Observable; + + constructor( + private apiService: ApiService, + ) { } + + ngOnInit(): void { + this.accelerationStats$ = this.apiService.getAccelerations$().pipe( + switchMap(accelerations => { + let totalAccelerations = 0; + let totalFeeDelta = 0; + let totalVsize = 0; + for (const acceleration of accelerations) { + totalAccelerations++; + totalFeeDelta += acceleration.feeDelta || 0; + totalVsize += acceleration.effectiveVsize || 0; + } + return of({ + count: totalAccelerations, + totalFeeDelta, + avgFeeDelta: totalAccelerations ? totalFeeDelta / totalAccelerations : 0, + totalVsize, + }); + }) + ); + } +} diff --git a/frontend/src/app/graphs/graphs.module.ts b/frontend/src/app/graphs/graphs.module.ts index 81a1f0c06..85905d1f1 100644 --- a/frontend/src/app/graphs/graphs.module.ts +++ b/frontend/src/app/graphs/graphs.module.ts @@ -3,7 +3,7 @@ import { NgxEchartsModule } from 'ngx-echarts'; import { GraphsRoutingModule } from './graphs.routing.module'; import { SharedModule } from '../shared/shared.module'; -import { AccelerationFeesGraphComponent } from '../components/acceleration-fees-graph/acceleration-fees-graph.component'; +import { AccelerationFeesGraphComponent } from '../components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component'; import { BlockFeesGraphComponent } from '../components/block-fees-graph/block-fees-graph.component'; import { BlockRewardsGraphComponent } from '../components/block-rewards-graph/block-rewards-graph.component'; import { BlockFeeRatesGraphComponent } from '../components/block-fee-rates-graph/block-fee-rates-graph.component'; @@ -20,7 +20,7 @@ import { PoolComponent } from '../components/pool/pool.component'; import { TelevisionComponent } from '../components/television/television.component'; import { DashboardComponent } from '../dashboard/dashboard.component'; import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component'; -import { AcceleratorDashboardComponent } from '../components/accelerator-dashboard/accelerator-dashboard.component'; +import { AcceleratorDashboardComponent } from '../components/acceleration/accelerator-dashboard/accelerator-dashboard.component'; import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-chart.component'; import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component'; import { BlockHealthGraphComponent } from '../components/block-health-graph/block-health-graph.component'; diff --git a/frontend/src/app/graphs/graphs.routing.module.ts b/frontend/src/app/graphs/graphs.routing.module.ts index 12eeb6e4c..0f217eb6e 100644 --- a/frontend/src/app/graphs/graphs.routing.module.ts +++ b/frontend/src/app/graphs/graphs.routing.module.ts @@ -10,15 +10,15 @@ import { HashrateChartComponent } from '../components/hashrate-chart/hashrate-ch import { HashrateChartPoolsComponent } from '../components/hashrates-chart-pools/hashrate-chart-pools.component'; import { MempoolBlockComponent } from '../components/mempool-block/mempool-block.component'; import { MiningDashboardComponent } from '../components/mining-dashboard/mining-dashboard.component'; -import { AcceleratorDashboardComponent } from '../components/accelerator-dashboard/accelerator-dashboard.component'; +import { AcceleratorDashboardComponent } from '../components/acceleration/accelerator-dashboard/accelerator-dashboard.component'; import { PoolRankingComponent } from '../components/pool-ranking/pool-ranking.component'; import { PoolComponent } from '../components/pool/pool.component'; import { StartComponent } from '../components/start/start.component'; import { StatisticsComponent } from '../components/statistics/statistics.component'; import { TelevisionComponent } from '../components/television/television.component'; import { DashboardComponent } from '../dashboard/dashboard.component'; -import { AccelerationFeesGraphComponent } from '../components/acceleration-fees-graph/acceleration-fees-graph.component'; -import { AccelerationsListComponent } from '../components/accelerations-list/accelerations-list.component'; +import { AccelerationFeesGraphComponent } from '../components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component'; +import { AccelerationsListComponent } from '../components/acceleration/accelerations-list/accelerations-list.component'; const routes: Routes = [ { diff --git a/frontend/src/app/shared/components/btc/btc.component.html b/frontend/src/app/shared/components/btc/btc.component.html new file mode 100644 index 000000000..c13a8ff31 --- /dev/null +++ b/frontend/src/app/shared/components/btc/btc.component.html @@ -0,0 +1,8 @@ +{{ valueOverride }} +‎{{ addPlus && satoshis >= 0 ? '+' : '' }}{{ value | number }} + + L- + tL- + t- + s-{{ unit }} + \ No newline at end of file diff --git a/frontend/src/app/shared/components/btc/btc.component.scss b/frontend/src/app/shared/components/btc/btc.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/app/shared/components/btc/btc.component.ts b/frontend/src/app/shared/components/btc/btc.component.ts new file mode 100644 index 000000000..4e62b07ff --- /dev/null +++ b/frontend/src/app/shared/components/btc/btc.component.ts @@ -0,0 +1,44 @@ +import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +import { Subscription } from 'rxjs'; +import { StateService } from '../../../services/state.service'; + +@Component({ + selector: 'app-btc', + templateUrl: './btc.component.html', + styleUrls: ['./btc.component.scss'] +}) +export class BtcComponent implements OnInit, OnChanges { + @Input() satoshis: number; + @Input() addPlus = false; + @Input() valueOverride: string | undefined = undefined; + + value: number; + unit: string; + + network = ''; + stateSubscription: Subscription; + + constructor( + private stateService: StateService, + ) { } + + ngOnInit() { + this.stateSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network); + } + + ngOnDestroy() { + if (this.stateSubscription) { + this.stateSubscription.unsubscribe(); + } + } + + ngOnChanges(changes: SimpleChanges): void { + if (this.satoshis >= 1_000_000) { + this.value = (this.satoshis / 100_000_000); + this.unit = 'BTC' + } else { + this.value = Math.round(this.satoshis); + this.unit = 'sats' + } + } +} diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index bd897ba99..52123f995 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -73,6 +73,7 @@ import { IndexingProgressComponent } from '../components/indexing-progress/index import { SvgImagesComponent } from '../components/svg-images/svg-images.component'; import { ChangeComponent } from '../components/change/change.component'; import { SatsComponent } from './components/sats/sats.component'; +import { BtcComponent } from './components/btc/btc.component'; import { FeeRateComponent } from './components/fee-rate/fee-rate.component'; import { TruncateComponent } from './components/truncate/truncate.component'; import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component'; @@ -85,8 +86,9 @@ import { GlobalFooterComponent } from './components/global-footer/global-footer. import { AcceleratePreviewComponent } from '../components/accelerate-preview/accelerate-preview.component'; import { AccelerateFeeGraphComponent } from '../components/accelerate-preview/accelerate-fee-graph.component'; import { MempoolErrorComponent } from './components/mempool-error/mempool-error.component'; -import { AccelerationsListComponent } from '../components/accelerations-list/accelerations-list.component'; -import { AccelerationStatsComponent } from '../components/acceleration-stats/acceleration-stats.component'; +import { AccelerationsListComponent } from '../components/acceleration/accelerations-list/accelerations-list.component'; +import { PendingStatsComponent } from '../components/acceleration/pending-stats/pending-stats.component'; +import { AccelerationStatsComponent } from '../components/acceleration/acceleration-stats/acceleration-stats.component'; import { BlockViewComponent } from '../components/block-view/block-view.component'; import { EightBlocksComponent } from '../components/eight-blocks/eight-blocks.component'; @@ -169,6 +171,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir SvgImagesComponent, ChangeComponent, SatsComponent, + BtcComponent, FeeRateComponent, TruncateComponent, SearchResultsComponent, @@ -194,6 +197,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir MempoolErrorComponent, AccelerationsListComponent, AccelerationStatsComponent, + PendingStatsComponent, ], imports: [ CommonModule, @@ -291,6 +295,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir SvgImagesComponent, ChangeComponent, SatsComponent, + BtcComponent, FeeRateComponent, TruncateComponent, SearchResultsComponent, @@ -306,6 +311,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir MempoolErrorComponent, AccelerationsListComponent, AccelerationStatsComponent, + PendingStatsComponent, MempoolBlockOverviewComponent, ClockchainComponent,