From f840ac951b36f710b8529d9b20878d627a8869dd Mon Sep 17 00:00:00 2001 From: natsoni Date: Thu, 6 Jun 2024 11:43:21 +0200 Subject: [PATCH 1/2] Add show all toggle for redeem scripts --- .../transactions-list.component.html | 11 ++++++++++- .../transactions-list/transactions-list.component.ts | 7 +++++++ .../app/shared/pipes/asm-styler/asm-styler.pipe.ts | 7 ++++++- 3 files changed, 23 insertions(+), 2 deletions(-) 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 1b3cc82eb..27c2150a7 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -142,7 +142,16 @@ P2WSH witness script - + +
+
+ ... + +
+ nSequence 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 127f2dfe1..f0b1f34e3 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.ts +++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts @@ -48,6 +48,7 @@ export class TransactionsListComponent implements OnInit, OnChanges { transactionsLength: number = 0; inputRowLimit: number = 12; outputRowLimit: number = 12; + showFullScript: { [vinIndex: number]: boolean } = {}; constructor( public stateService: StateService, @@ -300,7 +301,9 @@ export class TransactionsListComponent implements OnInit, OnChanges { toggleDetails(): void { if (this.showDetails$.value === true) { this.showDetails$.next(false); + this.showFullScript = {}; } else { + this.showFullScript = this.transactions[0] ? this.transactions[0].vin.reduce((acc, _, i) => ({...acc, [i]: false}), {}) : {}; this.showDetails$.next(true); } } @@ -352,6 +355,10 @@ export class TransactionsListComponent implements OnInit, OnChanges { return limit; } + toggleShowFullScript(vinIndex: number): void { + this.showFullScript[vinIndex] = !this.showFullScript[vinIndex]; + } + ngOnDestroy(): void { this.outspendsSubscription.unsubscribe(); this.currencyChangeSubscription?.unsubscribe(); diff --git a/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts b/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts index 54a02e405..f152f2f54 100644 --- a/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts +++ b/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts @@ -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; From 77d42bfdbbe023eb3b1162de40621a272b790143 Mon Sep 17 00:00:00 2001 From: natsoni Date: Thu, 6 Jun 2024 17:53:20 +0200 Subject: [PATCH 2/2] Don't render full input witness if user does not press "show all" --- .../transactions-list.component.html | 37 +++++++++++------- .../transactions-list.component.scss | 39 +------------------ .../transactions-list.component.ts | 13 +++++++ 3 files changed, 39 insertions(+), 50 deletions(-) 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 27c2150a7..f57b221f3 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -114,22 +114,33 @@ Witness - -

- +

+ @if (witness.length > 1000) { + @if (!showFullWitness[vindex][i]) { + {{ witness | slice:0:1000 }} + } @else { + {{ witness }} + } + } @else if (witness) { {{ witness }} - - + } @else { <empty> - + }

-
- ... - -
+ @if (witness.length > 1000) { +
+ @if (!showFullWitness[vindex][i]) { + ... + } + +
+ } diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss index 7efe0ef11..280e36b0f 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.scss +++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss @@ -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; } } \ No newline at end of file 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 f0b1f34e3..688c941b0 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.ts +++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts @@ -49,6 +49,7 @@ export class TransactionsListComponent implements OnInit, OnChanges { inputRowLimit: number = 12; outputRowLimit: number = 12; showFullScript: { [vinIndex: number]: boolean } = {}; + showFullWitness: { [vinIndex: number]: { [witnessIndex: number]: boolean } } = {}; constructor( public stateService: StateService, @@ -302,8 +303,16 @@ export class TransactionsListComponent implements OnInit, OnChanges { 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); } } @@ -359,6 +368,10 @@ export class TransactionsListComponent implements OnInit, OnChanges { 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();