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 96f792f82..8368a62c4 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -20,7 +20,7 @@
- + inputRowLimit && tx['@vinLimit']"> + @@ -158,7 +164,7 @@
- +
- + outputRowLimit && tx['@voutLimit']"> + @@ -271,7 +283,7 @@
{{ tx.fee / (tx.weight / 4) | feeRounding }} sat/vB  – {{ tx.fee | number }} sat
-
Show all inputs to reveal fee data
+
Show more inputs to reveal fee data
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 9f1245532..b09226f33 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.ts +++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts @@ -18,6 +18,7 @@ import { ApiService } from '../../services/api.service'; export class TransactionsListComponent implements OnInit, OnChanges { network = ''; nativeAssetId = this.stateService.network === 'liquidtestnet' ? environment.nativeTestAssetId : environment.nativeAssetId; + showMoreIncrement = 1000; @Input() transactions: Transaction[]; @Input() showConfirmations = false; @@ -208,14 +209,50 @@ export class TransactionsListComponent implements OnInit, OnChanges { } loadMoreInputs(tx: Transaction): void { - tx['@vinLimit'] = false; + if (!tx['@vinLoaded']) { + this.electrsApiService.getTransaction$(tx.txid) + .subscribe((newTx) => { + tx['@vinLoaded'] = true; + tx.vin = newTx.vin; + tx.fee = newTx.fee; + this.ref.markForCheck(); + }); + } + } - this.electrsApiService.getTransaction$(tx.txid) - .subscribe((newTx) => { - tx.vin = newTx.vin; - tx.fee = newTx.fee; - this.ref.markForCheck(); - }); + showMoreInputs(tx: Transaction): void { + this.loadMoreInputs(tx); + tx['@vinLimit'] = this.getVinLimit(tx, true); + } + + showMoreOutputs(tx: Transaction): void { + tx['@voutLimit'] = this.getVoutLimit(tx, true); + } + + getVinLimit(tx: Transaction, next = false): number { + let limit; + if ((tx['@vinLimit'] || 0) > this.inputRowLimit) { + limit = Math.min(tx['@vinLimit'] + (next ? this.showMoreIncrement : 0), tx.vin.length); + } else { + limit = Math.min((next ? this.showMoreIncrement : this.inputRowLimit), tx.vin.length); + } + if (tx.vin.length - limit <= 5) { + limit = tx.vin.length; + } + return limit; + } + + getVoutLimit(tx: Transaction, next = false): number { + let limit; + if ((tx['@voutLimit'] || 0) > this.outputRowLimit) { + limit = Math.min(tx['@voutLimit'] + (next ? this.showMoreIncrement : 0), tx.vout.length); + } else { + limit = Math.min((next ? this.showMoreIncrement : this.outputRowLimit), tx.vout.length); + } + if (tx.vout.length - limit <= 5) { + limit = tx.vout.length; + } + return limit; } ngOnDestroy(): void {
- +