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

Rearange network dropdown.

Browse Source 
API for Bisq block height tip.
Loading indicators on transactions/blocks view.
Total sent now correctly display burnt on Pay trade fee txs.
This commit is contained in:
softsimon
2020-07-15 13:10:13 +07:00
parent 3008f99668
commit 3333b76c98
8 changed files with 64 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html
View File

@@ -6,13 +6,13 @@
<table class="table table-borderless table-striped">
<thead>
<th>Hash</th>
<th>Total Sent (BSQ)</th>
<th>Transactions</th>
<th>Height</th>
<th>Time</th>
<th style="width: 20%;">Hash</th>
<th style="width: 20%;">Total Sent (BSQ)</th>
<th style="width: 20%;">Transactions</th>
<th style="width: 20%;">Height</th>
<th style="width: 20%;">Time</th>
</thead>
<tbody>
<tbody *ngIf="!isLoading; else loadingTmpl">
<tr *ngFor="let block of blocks; trackBy: trackByFn">
<td><a [routerLink]="['/block/' | relativeUrl, block.hash]" title="{{ block.hash }}" [state]="{ data: { block: block } }">{{ block.hash | shortenString : 13 }}</a></td>
<td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}</td>
@@ -27,4 +27,10 @@
<ngb-pagination [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
</div>
</div>
<ng-template #loadingTmpl>
<tr *ngFor="let i of loadingItems">
<td *ngFor="let j of [1, 2, 3, 4, 5]"><span class="skeleton-loader"></span></td>
</tr>
</ng-template>

7
frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { BisqApiService } from '../bisq-api.service';
import { switchMap } from 'rxjs/operators';
import { switchMap, tap } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces';
import { SeoService } from 'src/app/services/seo.service';
@@ -17,6 +17,8 @@ export class BisqBlocksComponent implements OnInit {
itemsPerPage: number;
contentSpace = window.innerHeight - (165 + 75);
fiveItemsPxSize = 250;
loadingItems: number[];
isLoading = true;
pageSubject$ = new Subject<number>();
@@ -28,12 +30,15 @@ export class BisqBlocksComponent implements OnInit {
ngOnInit(): void {
this.seoService.setTitle('Blocks', true);
this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
this.loadingItems = Array(this.itemsPerPage);
this.pageSubject$
.pipe(
tap(() => this.isLoading = true),
switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * 10, this.itemsPerPage))
)
.subscribe((response) => {
this.isLoading = false;
this.blocks = response.body;
this.totalCount = parseInt(response.headers.get('x-total-count'), 10);
}, (error) => {

31
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html
View File

@@ -6,18 +6,25 @@
<table class="table table-borderless table-striped">
<thead>
<th>Transaction</th>
<th>Type</th>
<th>Total Sent (BSQ)</th>
<th>Outputs</th>
<th>Block Height</th>
<th>Block Time</th>
<th style="width: 18%;">Transaction</th>
<th style="width: 15%;">Type</th>
<th style="width: 15%;">Total Sent (BSQ)</th>
<th style="width: 12%;">Outputs</th>
<th style="width: 15%;">Block Height</th>
<th style="width: 15%;">Block Time</th>
</thead>
<tbody>
<tbody *ngIf="!isLoading; else loadingTmpl">
<tr *ngFor="let tx of transactions; trackBy: trackByFn">
<td><a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ bsqTx: tx }">{{ tx.id | shortenString : 16 }}</a></td>
<td><app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon> {{ tx.txTypeDisplayString }}</td>
<td>{{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }}</td>
<td>
<ng-template [ngIf]="tx.txType === 'PAY_TRADE_FEE'" [ngIfElse]="defaultTxType">
{{ tx.burntFee / 100 | number: '1.2-2' }}
</ng-template>
<ng-template #defaultTxType>
{{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }}
</ng-template>
</td>
<td>{{ tx.outputs.length }}</td>
<td><a [routerLink]="['/block/' | relativeUrl, tx.blockHash]">{{ tx.blockHeight }}</a></td>
<td>{{ tx.time | date:'yyyy-MM-dd HH:mm' }}</td>
@@ -29,4 +36,10 @@
<ngb-pagination [collectionSize]="totalCount" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
</div>
</div>
<ng-template #loadingTmpl>
<tr *ngFor="let i of loadingItems">
<td *ngFor="let j of [1, 2, 3, 4, 5, 6]"><span class="skeleton-loader"></span></td>
</tr>
</ng-template>

8
frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { BisqTransaction, BisqOutput } from '../bisq.interfaces';
import { Subject } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { switchMap, tap } from 'rxjs/operators';
import { BisqApiService } from '../bisq-api.service';
import { SeoService } from 'src/app/services/seo.service';
@@ -17,7 +17,8 @@ export class BisqTransactionsComponent implements OnInit {
itemsPerPage: number;
contentSpace = window.innerHeight - (165 + 75);
fiveItemsPxSize = 250;
isLoading = true;
loadingItems: number[];
pageSubject$ = new Subject<number>();
constructor(
@@ -29,12 +30,15 @@ export class BisqTransactionsComponent implements OnInit {
this.seoService.setTitle('Transactions', true);
this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
this.loadingItems = Array(this.itemsPerPage);
this.pageSubject$
.pipe(
tap(() => this.isLoading = true),
switchMap((page) => this.bisqApiService.listTransactions$((page - 1) * 10, this.itemsPerPage))
)
.subscribe((response) => {
this.isLoading = false;
this.transactions = response.body;
this.totalCount = parseInt(response.headers.get('x-total-count'), 10);
}, (error) => {