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

Merge pull request #2679 from mononaut/limit-transaction-list-rows

Browse Source 
"show more" instead of "show all"  button for transaction inputs/outputs
This commit is contained in:
wiz 2022-11-22 18:39:42 +09:00 committed by GitHub
commit e72cdb42e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,7 @@
<div class="col">
<table class="table table-borderless smaller-text table-sm table-tx-vin">
<tbody>
<ng-template ngFor let-vin let-vindex="index" [ngForOf]="tx['@vinLimit'] ? ((tx.vin.length > inputRowLimit) ? tx.vin.slice(0, inputRowLimit - 2) : tx.vin.slice(0, inputRowLimit)) : tx.vin" [ngForTrackBy]="trackByIndexFn">
<ng-template ngFor let-vin let-vindex="index" [ngForOf]="tx.vin.slice(0, getVinLimit(tx))" [ngForTrackBy]="trackByIndexFn">
<tr [ngClass]="{
'assetBox': (assetsMinimal && vin.prevout && assetsMinimal[vin.prevout.asset] && !vin.is_coinbase && vin.prevout.scriptpubkey_address && tx._unblinded) || inputIndex === vindex,
'highlight': vin.prevout?.scriptpubkey_address === this.address && this.address !== ''
@ -146,9 +146,15 @@
</td>
</tr>
</ng-template>
<tr *ngIf="tx.vin.length > inputRowLimit && tx['@vinLimit']">
<tr *ngIf="tx.vin.length > getVinLimit(tx)">
<td colspan="3" class="text-center">
<button class="btn btn-sm btn-primary mt-2" (click)="loadMoreInputs(tx);"><span i18n="show-all">Show all</span> ({{ tx.vin.length }})</button>
<button class="btn btn-sm btn-primary mt-2" (click)="showMoreInputs(tx)">
<span *ngIf="getVinLimit(tx, true) >= tx.vin.length; else showMoreInputsLabel" i18n="show-all">Show all</span>
<ng-template #showMoreInputsLabel>
<span i18n="show-more">Show more</span>
</ng-template>
({{ tx.vin.length - getVinLimit(tx) }} <span i18n="inputs-remaining">remaining</span>)
</button>
</td>
</tr>
</tbody>
@ -158,7 +164,7 @@
<div class="col mobile-bottomcol">
<table class="table table-borderless smaller-text table-sm table-tx-vout">
<tbody>
<ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx['@voutLimit'] ? ((tx.vout.length > outputRowLimit) ? tx.vout.slice(0, outputRowLimit - 2) : tx.vout.slice(0, outputRowLimit)) : tx.vout" [ngForTrackBy]="trackByIndexFn">
<ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx.vout.slice(0, getVoutLimit(tx))" [ngForTrackBy]="trackByIndexFn">
<tr [ngClass]="{
'assetBox': assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase && tx._unblinded || outputIndex === vindex,
'highlight': vout.scriptpubkey_address === this.address && this.address !== ''
@ -257,9 +263,15 @@
</td>
</tr>
</ng-template>
<tr *ngIf="tx.vout.length > outputRowLimit && tx['@voutLimit']">
<tr *ngIf="tx.vout.length > getVoutLimit(tx)">
<td colspan="3" class="text-center">
<button class="btn btn-sm btn-primary mt-2" (click)="tx['@voutLimit'] = false;"><span i18n="show-all">Show all</span> ({{ tx.vout.length }})</button>
<button class="btn btn-sm btn-primary mt-2" (click)="showMoreOutputs(tx)">
<span *ngIf="getVoutLimit(tx, true) >= tx.vout.length; else showMoreOutputsLabel" i18n="show-all">Show all</span>
<ng-template #showMoreOutputsLabel>
<span i18n="show-more">Show more</span>
</ng-template>
({{ tx.vout.length - getVoutLimit(tx) }} <span i18n="outputs-remaining">remaining</span>)
</button>
</td>
</tr>
</tbody>
@ -271,7 +283,7 @@
<div class="float-left mt-2-5" *ngIf="!transactionPage && !tx.vin[0].is_coinbase && tx.fee !== -1">
{{ tx.fee / (tx.weight / 4) | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="d-none d-sm-inline-block">&nbsp;&ndash; {{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [value]="tx.fee"></app-fiat></span></span>
</div>
<div class="float-left mt-2-5 grey-info-text" *ngIf="tx.fee === -1" i18n="transactions-list.load-to-reveal-fee-info">Show all inputs to reveal fee data</div>
<div class="float-left mt-2-5 grey-info-text" *ngIf="tx.fee === -1" i18n="transactions-list.load-to-reveal-fee-info">Show more inputs to reveal fee data</div>
<div class="float-right">
<ng-container *ngIf="showConfirmations && latestBlock$ | async as latestBlock">

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

@ -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,15 +209,51 @@ 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();
});
}
}
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 {
this.outspendsSubscription.unsubscribe();