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

Adding "load more" for large input/output sets.

Browse Source
This commit is contained in:
softsimon 2020-03-27 02:34:09 +07:00
parent af86956836
commit 294e6d1667
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
2 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@ -16,7 +16,7 @@
<div class="col">
<table class="table table-borderless smaller-text table-xs" style="margin: 0;">
<tbody>
<tr *ngFor="let vin of tx.vin">
<tr *ngFor="let vin of getFilteredTxVin(tx)">
<td class="arrow-td">
<ng-template [ngIf]="vin.prevout === null" [ngIfElse]="hasPrevout">
<i class="arrow grey"></i>
@ -47,6 +47,11 @@
<app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
</td>
</tr>
<tr *ngIf="tx.vin.length > tx['@vinLength']">
<td colspan="3" class="text-center">
<button class="btn btn-sm btn-primary" (click)="loadMoreVin(tx)">Load more</button>
</td>
</tr>
</tbody>
</table>
@ -54,7 +59,7 @@
<div class="col mobile-bottomcol">
<table class="table table-borderless smaller-text table-xs" style="margin: 0;">
<tbody>
<tr *ngFor="let vout of tx.vout; let vindex = index;">
<tr *ngFor="let vout of getFilteredTxVout(tx); let vindex = index;">
<td>
<a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/', vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
<span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
@ -77,6 +82,11 @@
</ng-template>
</td>
</tr>
<tr *ngIf="tx.vout.length > tx['@voutLength']">
<td colspan="3" class="text-center">
<button class="btn btn-sm btn-primary" (click)="loadMoreVout(tx)">Load more</button>
</td>
</tr>
<tr>
<td class="text-right" colspan="4" style="vertical-align: bottom;">
<span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">

26
frontend/src/app/components/transactions-list/transactions-list.component.ts
View File

@ -36,13 +36,11 @@ export class TransactionsListComponent implements OnInit, OnChanges {
}
const observableObject = {};
this.transactions.forEach((tx, i) => {
tx['@voutLength'] = 10;
tx['@vinLength'] = 10;
if (this.outspends[i]) {
return;
}
if (tx.vin.length + tx.vout.length > 50) {
console.log('Too many outspends on transaction: ', tx.txid);
return;
}
observableObject[i] = this.electrsApiService.getOutspends$(tx.txid);
});
@ -63,7 +61,7 @@ export class TransactionsListComponent implements OnInit, OnChanges {
this.loadMore.emit();
}
getTotalTxOutput(tx: any) {
getTotalTxOutput(tx: Transaction) {
return tx.vout.map((v: any) => v.value || 0).reduce((a: number, b: number) => a + b);
}
@ -75,4 +73,22 @@ export class TransactionsListComponent implements OnInit, OnChanges {
trackByFn(index: number, tx: Transaction) {
return tx.txid + tx.status.confirmed;
}
loadMoreVin(tx: Transaction) {
tx['@vinLength'] += 10;
this.ref.markForCheck();
}
loadMoreVout(tx: Transaction) {
tx['@voutLength'] += 10;
this.ref.markForCheck();
}
getFilteredTxVin(tx: Transaction) {
return tx.vin.slice(0, tx['@vinLength']);
}
getFilteredTxVout(tx: Transaction) {
return tx.vout.slice(0, tx['@voutLength']);
}
}