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..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 |
-
- 1000">
-
+
+ @if (witness.length > 1000) {
+ @if (!showFullWitness[vindex][i]) {
+ {{ witness | slice:0:1000 }}
+ } @else {
+ {{ witness }}
+ }
+ } @else if (witness) {
{{ witness }}
-
-
+ } @else {
<empty>
-
+ }
- 1000">
- ...
-
-
+ @if (witness.length > 1000) {
+
+ @if (!showFullWitness[vindex][i]) {
+ ...
+ }
+
+
+ }
|
@@ -142,7 +153,16 @@
P2WSH witness script |
- |
+
+
+ 1000" style="display: flex;">
+ ...
+
+
+ |
nSequence |
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 127f2dfe1..688c941b0 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,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();
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;