Merge pull request #159 from mempool/simon/utxo-details

Toggle display UTXO details and scripts for transactions

frontend/src/app/components/transaction/transaction.component.html

@@ -162,9 +162,13 @@
 
     <br>
 
-    <h2>Inputs & Outputs</h2>
+    <h2 class="float-left">Inputs & Outputs</h2>
 
-    <app-transactions-list [transactions]="[tx]" [transactionPage]="true"></app-transactions-list>
+    <button type="button" class="btn btn-outline-info btn-sm float-right mr-1 mt-2" (click)="txList.toggleDetails()">Details</button>
+
+    <div class="clearfix"></div>
+
+    <app-transactions-list #txList [transactions]="[tx]" [transactionPage]="true"></app-transactions-list>
 
     <h2>Details</h2>
     <div class="box">

frontend/src/app/components/transactions-list/transactions-list.component.html

@@ -17,7 +17,8 @@
       <div class="col">
         <table class="table table-borderless smaller-text table-xs" style="margin: 0;">
           <tbody>
-            <tr *ngFor="let vin of (tx['@vinLimit'] ? tx.vin.slice(0, 10) : tx.vin); trackBy: trackByIndexFn">
+            <ng-template ngFor let-vin [ngForOf]="tx['@vinLimit'] ? tx.vin.slice(0, 10) : tx.vin" [ngForTrackBy]="trackByIndexFn">
+              <tr>
                 <td class="arrow-td">
                   <ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
                     <i class="arrow grey"></i>
@@ -61,6 +62,42 @@
                   </ng-template>
                 </td>
               </tr>
+              <tr *ngIf="displayDetails">
+                <td></td>
+                <td colspan="2">
+                  <table class="table table-striped table-borderless details-table">
+                    <tbody>
+                      <ng-template [ngIf]="vin.scriptsig">
+                        <tr>
+                          <td>ScriptSig (ASM)</td>
+                          <td class="script-details">{{ vin.scriptsig_asm }}</td>
+                        </tr>
+                        <tr>
+                          <td>ScriptSig (HEX)</td>
+                          <td class="script-details">{{ vin.scriptsig }}</td>
+                        </tr>
+                      </ng-template>
+                      <tr *ngIf="vin.witness">
+                        <td>Witness</td>
+                        <td class="script-details">{{ vin.witness.join(' ') }}</td>
+                      </tr>
+                      <tr *ngIf="vin.inner_redeemscript_asm">
+                        <td>P2SH redeem script</td>
+                        <td class="script-details">{{ vin.inner_redeemscript_asm }}</td>
+                      </tr>
+                      <tr *ngIf="vin.inner_witnessscript_asm">
+                        <td>P2WSH witness script</td>
+                        <td class="script-details">{{ vin.inner_witnessscript_asm }}</td>
+                      </tr>
+                      <tr>
+                        <td>nSequence</td>
+                        <td class="script-details">{{ formatHex(vin.sequence) }}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            </ng-template>
             <tr *ngIf="tx.vin.length > 10 && tx['@vinLimit']">
               <td colspan="3" class="text-center">
                 <button class="btn btn-sm btn-primary mt-2" (click)="tx['@vinLimit'] = false;">Load all ({{ tx.vin.length - 10 }})</button>
@@ -73,7 +110,8 @@
       <div class="col mobile-bottomcol">
         <table class="table table-borderless smaller-text table-xs"  style="margin: 0;">
           <tbody>
-            <tr *ngFor="let vout of (tx['@voutLimit'] ? tx.vout.slice(0, 10) : tx.vout); let vindex = index; trackBy: trackByIndexFn">
+            <ng-template ngFor let-vout let-vindex="index"  [ngForOf]="tx['@voutLimit'] ? tx.vout.slice(0, 10) : tx.vout" [ngForTrackBy]="trackByIndexFn">
+              <tr>
                 <td>
                   <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
                     <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
@@ -111,6 +149,31 @@
                   </ng-template>
                 </td>
               </tr>
+              <tr *ngIf="displayDetails">
+                <td colspan="2">
+                  <table class="table table-striped table-borderless details-table mb-3">
+                    <tbody>
+                      <tr *ngIf="vout.scriptpubkey_type">
+                        <td>Type</td>
+                        <td class="script-details">{{ vout.scriptpubkey_type.toUpperCase() }}</td>
+                      </tr>
+                      <tr>
+                        <td>scriptPubKey (ASM)</td>
+                        <td class="script-details">{{ vout.scriptpubkey_asm }}</td>
+                      </tr>
+                      <tr>
+                        <td>scriptPubKey (HEX)</td>
+                        <td class="script-details">{{ vout.scriptpubkey }}</td>
+                      </tr>
+                      <tr *ngIf="vout.scriptpubkey_type == 'op_return'">
+                        <td>OP_RETURN data</td>
+                        <td class="script-details">{{ vout.scriptpubkey_asm | hex2ascii }}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            </ng-template>
             <tr *ngIf="tx.vout.length > 10 && tx['@voutLimit']">
               <td colspan="3" class="text-center">
                 <button class="btn btn-sm btn-primary mt-2" (click)="tx['@voutLimit'] = false;">Load all ({{ tx.vout.length - 10 }})</button>

frontend/src/app/components/transactions-list/transactions-list.component.scss

@@ -82,3 +82,19 @@
 		max-width: 280px !important;
 	}
 }
+
+.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;
+}

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();
+  }
 }

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;