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 index 5e8aa729a..fef91acc0 100644 --- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html +++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html @@ -3,16 +3,16 @@
Requests
-
{{ stats.count }}
+
{{ stats.totalRequested }}
accelerated
Total Bid Boost
-
{{ stats.totalFeesPaid / 100_000_000 | amountShortener: 4 }} BTC
+
{{ stats.totalBidBoost / 100_000_000 | amountShortener: 4 }} BTC
- +
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 index 0a6ef065c..29909ff39 100644 --- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts +++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts @@ -1,9 +1,12 @@ -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'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs'; +import { ServicesApiServices } from '../../../services/services-api.service'; + +export type AccelerationStats = { + totalRequested: number; + totalBidBoost: number; + successRate: number; +} @Component({ selector: 'app-acceleration-stats', @@ -12,35 +15,13 @@ import { Acceleration } from '../../../interfaces/node-api.interface'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class AccelerationStatsComponent implements OnInit { - @Input() timespan: '24h' | '1w' | '1m' = '24h'; - @Input() accelerations$: Observable; - public accelerationStats$: Observable; + accelerationStats$: Observable; constructor( - private apiService: ApiService, - private stateService: StateService, + private servicesApiService: ServicesApiServices ) { } ngOnInit(): void { - this.accelerationStats$ = this.accelerations$.pipe( - switchMap(accelerations => { - let totalFeesPaid = 0; - let totalSucceeded = 0; - let totalCanceled = 0; - for (const acc of accelerations) { - if (acc.status === 'completed') { - totalSucceeded++; - totalFeesPaid += (acc.feePaid - acc.baseFee - acc.vsizeFee) || 0; - } else if (acc.status === 'failed') { - totalCanceled++; - } - } - return of({ - count: totalSucceeded, - totalFeesPaid, - successRate: (totalSucceeded + totalCanceled > 0) ? ((totalSucceeded / (totalSucceeded + totalCanceled)) * 100) : 0.0, - }); - }) - ); + this.accelerationStats$ = this.servicesApiService.getAccelerationStats$(); } } diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html index 9a919ca54..177eee973 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html @@ -1,4 +1,4 @@ -
+

Accelerations

@@ -17,6 +17,7 @@ Bid Boost Block Status + Requested @@ -49,9 +50,13 @@ Pending - Mined + Mined + Completed Canceled + + + @@ -75,6 +80,11 @@ + + +

diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss index 110ff033c..85e655b25 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss @@ -63,16 +63,28 @@ tr, td, th { } .txid { - @media (max-width: 500px) { + width: 20%; +} + +.fee { + width: 15%; +} + +.block { + width: 15%; + @media (max-width: 700px) { display: none; } } -.fee, .block, .status { - width: 15%; +.status { + width: 13%; +} - @media (max-width: 720px) { - width: 20%; +.date { + width: 20%; + @media (max-width: 600px) { + display: none; } } @@ -83,23 +95,12 @@ tr, td, th { text-overflow: ellipsis; white-space: nowrap; max-width: 30%; - @media (max-width: 1060px) and (min-width: 768px) { - display: none; - } - @media (max-width: 500px) { - display: none; - } } .fee-rate { width: 20%; - @media (max-width: 1060px) and (min-width: 768px) { - text-align: start !important; - } - @media (max-width: 500px) { - text-align: start !important; - } - @media (max-width: 840px) and (min-width: 768px) { + text-align: end !important; + @media (max-width: 975px) and (min-width: 768px) { display: none; } @media (max-width: 410px) { @@ -108,32 +109,31 @@ tr, td, th { } .bid { + text-align: end !important; width: 30%; min-width: 150px; - @media (max-width: 840px) and (min-width: 768px) { - text-align: start !important; - } - @media (max-width: 410px) { - text-align: start !important; - } } .time { width: 25%; + @media (max-width: 600px) { + display: none; + } + @media (max-width: 1200px) and (min-width: 768px) { + display: none; + } } .fee { width: 30%; - @media (max-width: 1060px) and (min-width: 768px) { - text-align: start !important; - } - @media (max-width: 500px) { - text-align: start !important; - } + text-align: end !important; } .block { width: 20%; + @media (max-width: 1200px) and (min-width: 768px) { + display: none; + } } .status { diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts index c1ab011ea..a04e45150 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core'; -import { Observable, catchError, of, switchMap, tap } from 'rxjs'; +import { combineLatest, BehaviorSubject, Observable, catchError, of, switchMap, tap } from 'rxjs'; import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface'; import { StateService } from '../../../services/state.service'; import { WebsocketService } from '../../../services/websocket.service'; @@ -21,9 +21,10 @@ export class AccelerationsListComponent implements OnInit { isLoading = true; paginationMaxSize: number; page = 1; - lastPage = 1; + accelerationCount: number; maxSize = window.innerWidth <= 767.98 ? 3 : 5; skeletonLines: number[] = []; + pageSubject: BehaviorSubject = new BehaviorSubject(this.page); constructor( private servicesApiService: ServicesApiServices, @@ -40,34 +41,47 @@ 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; - - const accelerationObservable$ = this.accelerations$ || (this.pending ? this.servicesApiService.getAccelerations$() : this.servicesApiService.getAccelerationHistory$({ timeframe: '1m' })); - this.accelerationList$ = accelerationObservable$.pipe( - switchMap(accelerations => { - if (this.pending) { - for (const acceleration of accelerations) { - acceleration.status = acceleration.status || 'accelerating'; - } - } - for (const acc of accelerations) { - acc.boost = acc.feePaid - acc.baseFee - acc.vsizeFee; - } - if (this.widget) { - return of(accelerations.slice(-6).reverse()); - } else { - return of(accelerations.reverse()); - } - }), - catchError((err) => { - this.isLoading = false; - return of([]); - }), - tap(() => { - this.isLoading = false; + + this.accelerationList$ = this.pageSubject.pipe( + switchMap((page) => { + const accelerationObservable$ = this.accelerations$ || (this.pending ? this.servicesApiService.getAccelerations$() : this.servicesApiService.getAccelerationHistoryObserveResponse$({ timeframe: '1m', page: page })); + return accelerationObservable$.pipe( + switchMap(response => { + let accelerations = response; + if (response.body) { + accelerations = response.body; + this.accelerationCount = parseInt(response.headers.get('x-total-count'), 10); + } + if (this.pending) { + for (const acceleration of accelerations) { + acceleration.status = acceleration.status || 'accelerating'; + } + } + for (const acc of accelerations) { + acc.boost = acc.feePaid - acc.baseFee - acc.vsizeFee; + } + if (this.widget) { + return of(accelerations.slice(0, 6)); + } else { + return of(accelerations); + } + }), + catchError((err) => { + this.isLoading = false; + return of([]); + }), + tap(() => { + this.isLoading = false; + }) + ); }) ); } + pageChange(page: number): void { + this.pageSubject.next(page); + } + trackByBlock(index: number, block: BlockExtended): number { return block.height; } diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html index 6d9e49265..0afae6e7b 100644 --- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html @@ -27,7 +27,7 @@
- +
@@ -84,7 +84,7 @@
Active Accelerations
- +
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts index a2abc657a..57cb605ca 100644 --- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts @@ -60,7 +60,7 @@ export class AcceleratorDashboardComponent implements OnInit { this.accelerations$ = this.stateService.chainTip$.pipe( distinctUntilChanged(), switchMap(() => { - return this.serviceApiServices.getAccelerationHistory$({ timeframe: '1m' }).pipe( + return this.serviceApiServices.getAccelerationHistory$({ timeframe: '1m', page: 1, pageLength: 100}).pipe( catchError(() => { return of([]); }), @@ -71,7 +71,7 @@ export class AcceleratorDashboardComponent implements OnInit { this.minedAccelerations$ = this.accelerations$.pipe( map(accelerations => { - return accelerations.filter(acc => ['mined', 'completed', 'failed'].includes(acc.status)); + return accelerations.filter(acc => ['mined', 'completed'].includes(acc.status)); }) ); diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts index 6ef650e32..e5764e785 100644 --- a/frontend/src/app/interfaces/node-api.interface.ts +++ b/frontend/src/app/interfaces/node-api.interface.ts @@ -393,8 +393,11 @@ export interface Acceleration { } export interface AccelerationHistoryParams { - timeframe?: string, - status?: string, - pool?: string, - blockHash?: string, + status?: string; + timeframe?: string; + poolUniqueId?: number; + blockHash?: string; + blockHeight?: number; + page?: number; + pageLength?: number; } \ No newline at end of file diff --git a/frontend/src/app/services/services-api.service.ts b/frontend/src/app/services/services-api.service.ts index f11b3460c..5ec1e4240 100644 --- a/frontend/src/app/services/services-api.service.ts +++ b/frontend/src/app/services/services-api.service.ts @@ -7,6 +7,7 @@ import { MenuGroup } from '../interfaces/services.interface'; import { Observable, of, ReplaySubject, tap, catchError, share, filter, switchMap } from 'rxjs'; import { IBackendInfo } from '../interfaces/websocket.interface'; import { Acceleration, AccelerationHistoryParams } from '../interfaces/node-api.interface'; +import { AccelerationStats } from '../components/acceleration/acceleration-stats/acceleration-stats.component'; export type ProductType = 'enterprise' | 'community' | 'mining_pool' | 'custom'; export interface IUser { @@ -147,4 +148,12 @@ export class ServicesApiServices { getAccelerationHistory$(params: AccelerationHistoryParams): Observable { return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/accelerations/history`, { params: { ...params } }); } + + getAccelerationHistoryObserveResponse$(params: AccelerationHistoryParams): Observable { + return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/accelerations/history`, { params: { ...params }, observe: 'response'}); + } + + getAccelerationStats$(): Observable { + return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/accelerations/stats`); + } }