From ddea10b160464068bdd2eb0515eee313115b9719 Mon Sep 17 00:00:00 2001 From: softsimon Date: Sun, 15 Nov 2020 17:58:38 +0700 Subject: [PATCH] Toggle display UTXO details and scripts for transactions fixes #46 --- .../transaction/transaction.component.html | 8 +- .../transactions-list.component.html | 213 ++++++++++++------ .../transactions-list.component.scss | 18 +- .../transactions-list.component.ts | 11 + frontend/src/styles.scss | 1 + 5 files changed, 173 insertions(+), 78 deletions(-) diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index 723d7e952..94c6e4d76 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -162,9 +162,13 @@
-

Inputs & Outputs

+

Inputs & Outputs

- + + +
+ +

Details

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 5a5fbac13..04ab6ac0a 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -17,50 +17,87 @@
- - + - - + - + + + + + + + +
- - - - - - - - - + +
+ + + + + + + + + + - - - - - -
- +
+ - - - - -
+ +
+ +
+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ScriptSig (ASM){{ vin.scriptsig_asm }}
ScriptSig (HEX){{ vin.scriptsig }}
Witness{{ vin.witness.join(' ') }}
P2SH redeem script{{ vin.inner_redeemscript_asm }}
P2WSH witness script{{ vin.inner_witnessscript_asm }}
nSequence{{ formatHex(vin.sequence) }}
+
@@ -73,44 +110,70 @@
- - + + - - - + + + + + + +
- - {{ vout.scriptpubkey_address | shortenString : 16 }} - {{ vout.scriptpubkey_address | shortenString : 35 }} - - - - Peg-out to - {{ vout.pegout.scriptpubkey_address | shortenString : 16 }} - {{ vout.pegout.scriptpubkey_address | shortenString : 35 }} - + +
+ + {{ vout.scriptpubkey_address | shortenString : 16 }} + {{ vout.scriptpubkey_address | shortenString : 35 }} + + + + Peg-out to + {{ vout.pegout.scriptpubkey_address | shortenString : 16 }} + {{ vout.pegout.scriptpubkey_address | shortenString : 35 }} + + + + {{ vout.scriptpubkey_type | scriptpubkeyType }} {{ vout.scriptpubkey_asm | hex2ascii }} + - - {{ vout.scriptpubkey_type | scriptpubkeyType }} {{ vout.scriptpubkey_asm | hex2ascii }} + + +
+ +
- -
- -
- -
-
- - - -
- - - - - + + - -
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + +
Type{{ vout.scriptpubkey_type.toUpperCase() }}
scriptPubKey (ASM){{ vout.scriptpubkey_asm }}
scriptPubKey (HEX){{ vout.scriptpubkey }}
OP_RETURN data{{ vout.scriptpubkey_asm | hex2ascii }}
+
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 3f78768ca..8cfc8212a 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.scss +++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss @@ -81,4 +81,20 @@ .scriptmessage.longer { max-width: 280px !important; } -} \ No newline at end of file +} + +.details-table { + margin-top: 5px; + max-width: 500px; +} + +.details-table td { + padding: 0.75rem; +} + +.script-details { + word-break: break-all; + white-space: normal; + font-family: "Courier New", Courier, monospace; + font-size: 12px; +} 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 adc33e8b4..cce2cee20 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.ts +++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts @@ -16,6 +16,7 @@ import { map } from 'rxjs/operators'; export class TransactionsListComponent implements OnInit, OnChanges { network = ''; nativeAssetId = environment.nativeAssetId; + displayDetails = false; @Input() transactions: Transaction[]; @Input() showConfirmations = false; @@ -95,4 +96,14 @@ export class TransactionsListComponent implements OnInit, OnChanges { trackByIndexFn(index: number) { return index; } + + formatHex(num: number): string { + const str = num.toString(16); + return '0x' + (str.length % 2 ? '0' : '') + str; + } + + toggleDetails() { + this.displayDetails = !this.displayDetails; + this.ref.markForCheck(); + } } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 45769be32..ac02e49bf 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -10,6 +10,7 @@ $nav-tabs-link-active-bg: #11131f; $primary: #105fb0; $secondary: #2d3348; $success: #1a9436; +$info: #1bd8f4; $pagination-bg: $body-bg; $pagination-border-color: $gray-800;