highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-04-08 03:48:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5145 from mempool/natsoni/tapscript-toggle-show-more

Browse Source 
Refactor "show all" toggle for long witnesses and witness scripts
This commit is contained in:
softsimon 2024-06-10 00:11:26 +04:00 committed by GitHub
commit b7d96a2a26
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 62 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -114,22 +114,33 @@
<td i18n="transactions-list.witness">Witness</td>
<td style="text-align: left;">
<ng-container *ngFor="let witness of vin.witness; index as i">
<input type="checkbox" [id]="'tx' + vindex + 'witness' + i" style="display: none;">
<p class="witness-item" [class.accordioned]="witness.length > 1000">
<ng-template [ngIf]="witness" [ngIfElse]="emptyWitnessItem">
<p class="witness-item">
@if (witness.length > 1000) {
@if (!showFullWitness[vindex][i]) {
{{ witness | slice:0:1000 }}
} @else {
{{ witness }}
}
} @else if (witness) {
{{ witness }}
</ng-template>
<ng-template #emptyWitnessItem>
} @else {
&lt;empty&gt;
</ng-template>
}
</p>
<div class="witness-toggle" *ngIf="witness.length > 1000">
<span class="ellipsis">...</span>
<label [for]="'tx' + vindex + 'witness' + i" class="btn btn-sm btn-primary mt-2">
<span class="show-all" i18n="show-all">Show all</span>
<span class="show-less" i18n="show-less">Show less</span>
</label>
</div>
@if (witness.length > 1000) {
<div style="display: flex;">
@if (!showFullWitness[vindex][i]) {
<span>...</span>
}
<label class="btn btn-sm btn-primary mt-2" (click)="toggleShowFullWitness(vindex, i)" style="margin-left: auto;">
@if (!showFullWitness[vindex][i]) {
<span i18n="show-all">Show all</span>
} @else {
<span i18n="show-less">Show less</span>
}
</label>
</div>
}
</ng-container>
</td>
</tr>
@ -142,7 +153,16 @@
<ng-template #p2wsh>
<td i18n="transactions-list.p2wsh-witness-script">P2WSH witness script</td>
</ng-template>
<td style="text-align: left;" [innerHTML]="vin.inner_witnessscript_asm | asmStyler"></td>
<td style="text-align: left;">
<div [innerHTML]="vin.inner_witnessscript_asm | asmStyler:showFullScript[vindex]"></div>
<div *ngIf="vin.inner_witnessscript_asm.length > 1000" style="display: flex;">
<span *ngIf="!showFullScript[vindex]">...</span>
<label class="btn btn-sm btn-primary mt-2" (click)="toggleShowFullScript(vindex)" style="margin-left: auto;">
<span *ngIf="!showFullScript[vindex]" i18n="show-all">Show all</span>
<span *ngIf="showFullScript[vindex]" i18n="show-less">Show less</span>
</label>
</div>
</td>
</tr>
<tr>
<td i18n="transactions-list.nsequence">nSequence</td>

39
frontend/src/app/components/transactions-list/transactions-list.component.scss
View File

@ -172,42 +172,7 @@ h2 {
}
.vin-witness {
.witness-item.accordioned {
max-height: 300px;
overflow: hidden;
}
input:checked + .witness-item.accordioned {
max-height: none;
}
.witness-toggle {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1em;
.show-all {
display: inline;
}
.show-less {
display: none;
}
.ellipsis {
visibility: visible;
}
}
input:checked ~ .witness-toggle {
.show-all {
display: none;
}
.show-less {
display: inline;
}
.ellipsis {
visibility: hidden;
}
.witness-item {
overflow: hidden;
}
}

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

@ -48,6 +48,8 @@ export class TransactionsListComponent implements OnInit, OnChanges {
transactionsLength: number = 0;
inputRowLimit: number = 12;
outputRowLimit: number = 12;
showFullScript: { [vinIndex: number]: boolean } = {};
showFullWitness: { [vinIndex: number]: { [witnessIndex: number]: boolean } } = {};
constructor(
public stateService: StateService,
@ -300,7 +302,17 @@ export class TransactionsListComponent implements OnInit, OnChanges {
toggleDetails(): void {
if (this.showDetails$.value === true) {
this.showDetails$.next(false);
this.showFullScript = {};
this.showFullWitness = {};
} else {
this.showFullScript = this.transactions[0] ? this.transactions[0].vin.reduce((acc, _, i) => ({...acc, [i]: false}), {}) : {};
this.showFullWitness = this.transactions[0] ? this.transactions[0].vin.reduce((acc, vin, vinIndex) => {
acc[vinIndex] = vin.witness ? vin.witness.reduce((witnessAcc, _, witnessIndex) => {
witnessAcc[witnessIndex] = false;
return witnessAcc;
}, {}) : {};
return acc;
}, {}) : {};
this.showDetails$.next(true);
}
}
@ -352,6 +364,14 @@ export class TransactionsListComponent implements OnInit, OnChanges {
return limit;
}
toggleShowFullScript(vinIndex: number): void {
this.showFullScript[vinIndex] = !this.showFullScript[vinIndex];
}
toggleShowFullWitness(vinIndex: number, witnessIndex: number): void {
this.showFullWitness[vinIndex][witnessIndex] = !this.showFullWitness[vinIndex][witnessIndex];
}
ngOnDestroy(): void {
this.outspendsSubscription.unsubscribe();
this.currencyChangeSubscription?.unsubscribe();

7
frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts
View File

@ -5,13 +5,18 @@ import { Pipe, PipeTransform } from '@angular/core';
})
export class AsmStylerPipe implements PipeTransform {
transform(asm: string): string {
transform(asm: string, showAll = true): string {
const instructions = asm.split('OP_');
let out = '';
let chars = -3;
for (const instruction of instructions) {
if (instruction === '') {
continue;
}
if (!showAll && chars > 1000) {
break;
}
chars += instruction.length + 3;
out += this.addStyling(instruction);
}
return out;