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

Create working template for the new blocks page

Browse Source
This commit is contained in:
nymkappa
2022-03-10 18:35:37 +01:00
parent 77334e130d
commit 0e0331d8ab
8 changed files with 248 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/src/app/components/blocks-list/blocks-list.component.html Normal file
View File

@@ -0,0 +1,100 @@
<div class="container-xl">
<h1 class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
<br>
<div class="clearfix"></div>
<table class="table table-borderless">
<thead>
<th class="height" i18n="latest-blocks.height">Height</th>
<th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
<th class="mined" i18n="latest-blocks.mined">Mined</th>
<th class="pool" i18n="latest-blocks.mined-by">Pool</th>
<th class="reward text-right" i18n="latest-blocks.reward">Reward</th>
<th class="fees text-right" i18n="latest-blocks.fees">Fees</th>
<th class="txs text-right" i18n="latest-blocks.transactions">Txs</th>
<th class="size" i18n="latest-blocks.size">Size</th>
</thead>
<tbody *ngIf="blocks$ | async as blocks">
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<td>
<a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height
}}</a>
</td>
<td class="timestamp">
&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
<td class="mined">
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
</td>
<td>
<img width="25" height="25" src="{{ block.extras.pool['logo'] }}"
onError="this.src = './resources/mining-pools/default.svg'">
<span class="pool-name"><a [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">{{
block.extras.pool.name }}</a></span>
</td>
<td class="reward text-right">
<app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount>
</td>
<td class="fees text-right">
<app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2"></app-amount>
</td>
<td class="txs text-right">
{{ block.tx_count | number }}
</td>
<td class="size">
<div class="progress">
<div class="progress-bar progress-mempool" role="progressbar"
[ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
<div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
</div>
</td>
</tr>
<ng-template [ngIf]="isLoading">
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</ng-template>
</tbody>
<tbody *ngIf="isLoading">
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11,12]">
<td>
<span class="skeleton-loader"></span>
</td>
<td class="timestamp">
<span class="skeleton-loader"></span>
</td>
<td class="mined">
<span class="skeleton-loader"></span>
</td>
<td>
<span class="skeleton-loader"></span>
</td>
<td class="reward text-right">
<span class="skeleton-loader"></span>
</td>
<td class="fees text-right">
<span class="skeleton-loader"></span>
</td>
<td class="txs text-right">
<span class="skeleton-loader"></span>
</td>
<td class="size">
<span class="skeleton-loader"></span>
</td>
</tr>
</tbody>
</table>
<!-- <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true"
[pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)"
[maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination> -->
</div>

74
frontend/src/app/components/blocks-list/blocks-list.component.scss Normal file
View File

@@ -0,0 +1,74 @@
.container-xl {
max-width: 1400px;
}
.container {
max-width: 100%;
}
.row {
padding-top: 15px;
padding-bottom: 15px;
}
.pool-name {
display: inline-block;
vertical-align: text-top;
padding-left: 10px;
}
.height {
width: 12%;
@media (max-width: 1100px) {
width: 10%;
}
}
.timestamp {
@media (max-width: 900px) {
display: none;
}
}
.mined {
@media (max-width: 576px) {
display: none;
}
}
.txs {
padding-right: 40px;
@media (max-width: 1100px) {
padding-right: 10px;
}
@media (max-width: 800px) {
display: none;
}
}
.fees {
@media (max-width: 650px) {
display: none;
}
}
.pool {
width: 12%;
}
.reward {
@media (max-width: 576px) {
width: 7%;
padding-right: 30px;
}
}
.size {
width: 12%;
@media (max-width: 1000px) {
width: 15%;
}
@media (max-width: 650px) {
width: 20%;
}
}

48
frontend/src/app/components/blocks-list/blocks-list.component.ts Normal file
View File

@@ -0,0 +1,48 @@
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs';
import { map, repeat, tap } from 'rxjs/operators';
import { BlockExtended } from 'src/app/interfaces/node-api.interface';
import { ApiService } from 'src/app/services/api.service';
import { StateService } from 'src/app/services/state.service';
@Component({
selector: 'app-blocks-list',
templateUrl: './blocks-list.component.html',
styleUrls: ['./blocks-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlocksList implements OnInit {
blocks$: Observable<BlockExtended[]> = undefined
isLoading = true;
oldestBlockHeight = undefined;
constructor(
private apiService: ApiService,
public stateService: StateService
) {
}
ngOnInit(): void {
this.blocks$ = this.apiService.getBlocks$(this.oldestBlockHeight)
.pipe(
tap(blocks => {
this.isLoading = false;
}),
map(blocks => {
for (const block of blocks) {
// @ts-ignore
block.extras.pool.logo = `./resources/mining-pools/` +
block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
this.oldestBlockHeight = block.height;
}
return blocks;
}),
repeat(2),
);
}
trackByBlock(index: number, block: BlockExtended) {
return block.height;
}
}