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

Add accelerator dashboard

Browse Source
This commit is contained in:
Mononaut
2023-07-20 16:26:42 +09:00
parent 42a3a380d5
commit 6f97a2ef74
12 changed files with 624 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/app/components/accelerations-list/accelerations-list.component.html Normal file
View File

@@ -0,0 +1,62 @@
<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
<div class="container-xl" style="min-height: 335px" [class.widget]="widget" [class.full-height]="!widget">
<h1 *ngIf="!widget" class="float-left" i18n="master-page.blocks">Accelerations</h1>
<div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
<div class="clearfix"></div>
<div style="min-height: 295px">
<table class="table table-borderless table-fixed">
<thead>
<th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
<th class="fee" i18n="transaction.fee|Transaction fee">Fee</th>
<th class="fee-delta text-right" i18n="accelerator.fee-delta">Fee delta</th>
<th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
</thead>
<tbody *ngIf="accelerations$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let acceleration of accelerations; let i= index;">
<td class="txid text-left">
<a [routerLink]="['/tx' | relativeUrl, acceleration.txid]">
<app-truncate [text]="acceleration.txid" [lastChars]="5"></app-truncate>
</a>
</td>
<td class="fee text-right">
{{ acceleration.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
</td>
<td class="fee-delta text-right">
{{ acceleration.feeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
</td>
<td class="status text-right">
<span *ngIf="acceleration.mined" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
<span *ngIf="acceleration.canceled" class="badge badge-danger" i18n="accelerator.canceled">Canceled</span>
</td>
</tr>
</tbody>
<ng-template #skeleton>
<tbody>
<tr *ngFor="let item of skeletonLines">
<td class="txid text-left">
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>
<td class="fee text-right">
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>
<td class="fee-delta text-right">
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>
<td class="status text-right">
<span class="skeleton-loader" style="max-width: 75px"></span>
</td>
</tr>
</tbody>
</ng-template>
</table>
<ng-template [ngIf]="!widget">
<div class="clearfix"></div>
<br>
</ng-template>
</div>
</div>

107
frontend/src/app/components/accelerations-list/accelerations-list.component.scss Normal file
View File

@@ -0,0 +1,107 @@
.spinner-border {
height: 25px;
width: 25px;
margin-top: 13px;
}
.container-xl {
max-width: 1400px;
}
.container-xl.widget {
padding-left: 0px;
padding-bottom: 0px;
}
.container-xl.legacy {
max-width: 1140px;
}
.container {
max-width: 100%;
}
tr, td, th {
border: 0px;
padding-top: 0.65rem !important;
padding-bottom: 0.7rem !important;
.difference {
margin-left: 0.5em;
&.positive {
color: rgb(66, 183, 71);
}
&.negative {
color: rgb(183, 66, 66);
}
}
}
.clear-link {
color: white;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}
.progress {
background-color: #2d3348;
}
.txid {
width: 30%;
@media (max-width: 1100px) {
padding-right: 10px;
}
@media (max-width: 875px) {
display: none;
}
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 30%;
}
.fee {
width: 25%;
}
.fee-delta {
width: 25%;
}
.status {
width: 20%
}
/* Tooltip text */
.tooltip-custom {
position: relative;
}
.tooltip-custom .tooltiptext {
visibility: hidden;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
top: -40px;
left: 0;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip-custom:hover .tooltiptext {
visibility: visible;
}
.scriptmessage {
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 50vw;
text-align: left;
}

53
frontend/src/app/components/accelerations-list/accelerations-list.component.ts Normal file
View File

@@ -0,0 +1,53 @@
import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
import { Observable, catchError, of } 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',
templateUrl: './accelerations-list.component.html',
styleUrls: ['./accelerations-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AccelerationsListComponent implements OnInit {
@Input() widget: boolean = false;
accelerations$: Observable<Acceleration[]> = undefined;
isLoading = true;
paginationMaxSize: number;
page = 1;
lastPage = 1;
maxSize = window.innerWidth <= 767.98 ? 3 : 5;
skeletonLines: number[] = [];
constructor(
private apiService: ApiService,
private websocketService: WebsocketService,
public stateService: StateService,
private cd: ChangeDetectorRef,
) {
}
ngOnInit(): void {
if (!this.widget) {
this.websocketService.want(['blocks']);
}
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.getAccelerations$().pipe(
catchError((err) => {
this.isLoading = false;
return of([]);
})
);
}
trackByBlock(index: number, block: BlockExtended): number {
return block.height;
}
}