diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html index edfb7bcdf..6fb27f39c 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -16,7 +16,7 @@
- + + + +
@@ -47,6 +47,11 @@
+ +
@@ -54,7 +59,7 @@
- + + + +
{{ vout.scriptpubkey_address | shortenString : 16 }} @@ -77,6 +82,11 @@
+ +
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.ts b/frontend/src/app/components/transactions-list/transactions-list.component.ts index 242bf9102..f2bf48af5 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.ts +++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts @@ -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']); + } }