Merge branch 'master' into simon/angular-universal

* master:
  Tweak ASM opcode styling colors
  Add some color and styling to the Bitcoin ASM opcodes
  Correcting title text on graph invert button.
  Modify upgrade script to include "tag @ hash" in notification msg
  Adding a button to invert the graph globally.
  Display P2PK instead of OP_RETURN fixes #161
  Improved utxo script design. fixes #46
  Adding prevout script. Fixed padding. refs #46
  Correcting details button padding on mobile.
  Fix nginx.conf reverse proxy cache URL path for sponsor images
  Add missing "engines" metadata into package-lock.json
  Upgrade backend/package-lock.json to version 2
  Toggle display UTXO details and scripts for transactions fixes #46
  Axios error handle sponsor proxy requests.
  Replacing request.js with axios fixes #153
  Add basic websocket error handler as emergency fix for site crashing

# Conflicts:
#	frontend/src/app/services/storage.service.ts

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -4,6 +4,7 @@ import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
 import * as Chartist from '@mempool/chartist';
 import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
+import { StorageService } from 'src/app/services/storage.service';
 
 @Component({
   selector: 'app-mempool-graph',
@@ -21,11 +22,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   mempoolVsizeFeesData: any;
 
   isMobile = window.innerWidth <= 767.98;
+  inverted: boolean;
 
   constructor(
     private vbytesPipe: VbytesPipe,
     private stateService: StateService,
     @Inject(LOCALE_ID) private locale: string,
+    private storageService: StorageService,
   ) { }
 
   ngOnInit(): void {
@@ -62,7 +65,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
       showLine: false,
       fullWidth: true,
       showPoint: false,
-      stackedLine: true,
+      stackedLine: !this.inverted,
       low: 0,
       axisX: {
         labelInterpolationFnc: labelInterpolationFnc,
@@ -72,7 +75,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2),
         offset: showLegend ? 160 : 60,
       },
-      plugins: []
+      plugins: this.inverted ? [Chartist.plugins.ctTargetLine({ value: 1000000 })] : []
     };
 
     if (showLegend) {
@@ -97,6 +100,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges() {
+    this.inverted = this.storageService.getValue('inverted-graph') === 'true';
     this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
   }
 
@@ -131,10 +135,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
           feesArray.push(0);
         }
       });
+      if (this.inverted && finalArray.length) {
+        feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
+      }
       finalArray.push(feesArray);
     }
     finalArray.reverse();
     return finalArray;
   }
-
 }

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

@@ -40,6 +40,7 @@
                 <input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
               </label>
             </div>
+            <button (click)="invertGraph()" class="btn btn-primary btn-sm ml-2 d-none d-md-inline"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" title="Invert"></fa-icon></button>
           </form>
         </div>
         <div class="card-body">

frontend/src/app/components/statistics/statistics.component.ts

@@ -12,6 +12,7 @@ import { ApiService } from '../../services/api.service';
 import * as Chartist from '@mempool/chartist';
 import { StateService } from 'src/app/services/state.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { StorageService } from 'src/app/services/storage.service';
 
 @Component({
   selector: 'app-statistics',
@@ -33,6 +34,7 @@ export class StatisticsComponent implements OnInit {
   transactionsWeightPerSecondOptions: any;
 
   radioGroupForm: FormGroup;
+  inverted: boolean;
 
   constructor(
     @Inject(LOCALE_ID) private locale: string,
@@ -42,6 +44,7 @@ export class StatisticsComponent implements OnInit {
     private apiService: ApiService,
     private stateService: StateService,
     private seoService: SeoService,
+    private storageService: StorageService,
   ) {
     this.radioGroupForm = this.formBuilder.group({
       dateSpan: '2h'
@@ -51,6 +54,7 @@ export class StatisticsComponent implements OnInit {
   ngOnInit() {
     this.seoService.setTitle('Graphs');
     this.stateService.networkChanged$.subscribe((network) => this.network = network);
+    this.inverted = this.storageService.getValue('inverted-graph') === 'true';
     const isMobile = window.innerWidth <= 767.98;
     let labelHops = isMobile ? 48 : 24;
 
@@ -157,4 +161,9 @@ export class StatisticsComponent implements OnInit {
       series: [mempoolStats.map((stats) => stats.vbytes_per_second)],
     };
   }
+
+  invertGraph() {
+    this.storageService.setValue('inverted-graph', !this.inverted);
+    document.location.reload();
+  }
 }

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-0 mt-md-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,50 +17,90 @@
       <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">
-              <td class="arrow-td">
-                <ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
-                  <i class="arrow grey"></i>
-                </ng-template>
-                <ng-template #hasPrevout>
-                  <a *ngIf="vin.is_pegin; else defaultPrevout" [routerLink]="['/tx/', vin.txid]">
-                    <i class="arrow red"></i>
-                  </a>
-                  <ng-template #defaultPrevout>
-                    <a [routerLink]="['/tx/' | relativeUrl, vin.txid]">
+            <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>
+                  </ng-template>
+                  <ng-template #hasPrevout>
+                    <a *ngIf="vin.is_pegin; else defaultPrevout" [routerLink]="['/tx/', vin.txid]">
                       <i class="arrow red"></i>
                     </a>
+                    <ng-template #defaultPrevout>
+                      <a [routerLink]="['/tx/' | relativeUrl, vin.txid]">
+                        <i class="arrow red"></i>
+                      </a>
+                    </ng-template>
                   </ng-template>
-                </ng-template>
-              </td>
-              <td>
-                <div [ngSwitch]="true">
-                  <ng-container *ngSwitchCase="vin.is_coinbase"><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii">Coinbase<ng-template [ngIf]="network !== 'liquid'"> (Newly Generated Coins)</ng-template></a><br><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></ng-container>
-                  <ng-container *ngSwitchCase="vin.is_pegin">
-                    Peg-in
-                  </ng-container>
-                  <ng-container *ngSwitchDefault>
-                    <a [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
-                      <span class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
-                      <span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 35 }}</span>
-                    </a>
-                    <div>
-                      <app-address-labels [vin]="vin"></app-address-labels>
-                    </div>
-                  </ng-container>
-                </div>
-              </td>
-              <td class="text-right nowrap">
-                <ng-template [ngIf]="vin.prevout && vin.prevout.asset && vin.prevout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
-                  <div *ngIf="assetsMinimal && assetsMinimal[vin.prevout.asset]">
-                    <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vin.prevout }"></ng-container>
+                </td>
+                <td>
+                  <div [ngSwitch]="true">
+                    <ng-container *ngSwitchCase="vin.is_coinbase"><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii">Coinbase<ng-template [ngIf]="network !== 'liquid'"> (Newly Generated Coins)</ng-template></a><br><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></ng-container>
+                    <ng-container *ngSwitchCase="vin.is_pegin">
+                      Peg-in
+                    </ng-container>
+                    <ng-container *ngSwitchDefault>
+                      <a [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
+                        <span class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
+                        <span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 35 }}</span>
+                      </a>
+                      <div>
+                        <app-address-labels [vin]="vin"></app-address-labels>
+                      </div>
+                    </ng-container>
                   </div>
-                </ng-template>
-                <ng-template #defaultOutput>
-                  <app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
-                </ng-template>
-              </td>
-            </tr>
+                </td>
+                <td class="text-right nowrap">
+                  <ng-template [ngIf]="vin.prevout && vin.prevout.asset && vin.prevout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
+                    <div *ngIf="assetsMinimal && assetsMinimal[vin.prevout.asset]">
+                      <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vin.prevout }"></ng-container>
+                    </div>
+                  </ng-template>
+                  <ng-template #defaultOutput>
+                    <app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
+                  </ng-template>
+                </td>
+              </tr>
+              <tr *ngIf="displayDetails">
+                <td colspan="3">
+                  <table class="table table-striped table-borderless details-table mb-3">
+                    <tbody>
+                      <ng-template [ngIf]="vin.scriptsig">
+                        <tr>
+                          <td>ScriptSig (ASM)</td>
+                          <td [innerHTML]="vin.scriptsig_asm | asmStyler"></td>
+                        </tr>
+                        <tr>
+                          <td>ScriptSig (HEX)</td>
+                          <td>{{ vin.scriptsig }}</td>
+                        </tr>
+                      </ng-template>
+                      <tr *ngIf="vin.witness">
+                        <td>Witness</td>
+                        <td>{{ vin.witness.join(' ') }}</td>
+                      </tr>
+                      <tr *ngIf="vin.inner_redeemscript_asm">
+                        <td>P2SH redeem script</td>
+                        <td [innerHTML]="vin.inner_redeemscript_asm | asmStyler"></td>
+                      </tr>
+                      <tr *ngIf="vin.inner_witnessscript_asm">
+                        <td>P2WSH witness script</td>
+                        <td [innerHTML]="vin.inner_witnessscript_asm | asmStyler"></td>
+                      </tr>
+                      <tr>
+                        <td>nSequence</td>
+                        <td>{{ formatHex(vin.sequence) }}</td>
+                      </tr>
+                      <tr *ngIf="vin.prevout">
+                        <td>Previous output script</td>
+                        <td [innerHTML]="vin.prevout.scriptpubkey_asm | asmStyler">{{ vin.prevout.scriptpubkey_type ? ('(' + vin.prevout.scriptpubkey_type + ')') : '' }}"</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,44 +113,73 @@
       <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">
-              <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>
-                  <span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 35 }}</span>
-                </a>
-                <ng-template #scriptpubkey_type>
-                  <ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
-                    Peg-out to <a [routerLink]="['/address/', vout.pegout.scriptpubkey_address]" title="{{ vout.pegout.scriptpubkey_address }}">
-                      <span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
-                      <span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 35 }}</span>
-                    </a>
+            <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>
+                    <span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 35 }}</span>
+                  </a>
+                  <ng-template #scriptpubkey_type>
+                    <ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
+                      Peg-out to <a [routerLink]="['/address/', vout.pegout.scriptpubkey_address]" title="{{ vout.pegout.scriptpubkey_address }}">
+                        <span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
+                        <span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 35 }}</span>
+                      </a>
+                    </ng-template>
+                    <ng-template #defaultscriptpubkey_type>
+                      <ng-template [ngIf]="vout.scriptpubkey_type === 'op_return'" [ngIfElse]="otherPubkeyType">
+                        <a placement="bottom" [ngbTooltip]="vout.scriptpubkey | hex2ascii">OP_RETURN</a>&nbsp;<span class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | hex2ascii }}</span>
+                      </ng-template>
+                      <ng-template #otherPubkeyType>{{ vout.scriptpubkey_type | scriptpubkeyType }}</ng-template>
+                    </ng-template>
                   </ng-template>
-                  <ng-template #defaultscriptpubkey_type>
-                    <a placement="bottom" [ngbTooltip]="vout.scriptpubkey | hex2ascii">{{ vout.scriptpubkey_type | scriptpubkeyType }}</a>&nbsp;<span class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | hex2ascii }}</span>
+                </td>
+                <td class="text-right nowrap">
+                  <ng-template [ngIf]="vout.asset && vout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
+                    <div *ngIf="assetsMinimal && assetsMinimal[vout.asset]">
+                      <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vout }"></ng-container>
+                  </div>
                   </ng-template>
-                </ng-template>
-              </td>
-              <td class="text-right nowrap">
-                <ng-template [ngIf]="vout.asset && vout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
-                  <div *ngIf="assetsMinimal && assetsMinimal[vout.asset]">
-                    <ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vout }"></ng-container>
-                </div>
-                </ng-template>
-                <ng-template #defaultOutput>
-                  <app-amount [satoshis]="vout.value"></app-amount>
-                </ng-template>
-              </td>
-              <td class="pl-1 arrow-td">
-                <i *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="arrow grey"></i>
-                <ng-template #outspend>
-                  <i *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="arrow green"></i>
-                  <ng-template #spent>
-                    <a [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]"><i class="arrow red"></i></a>
+                  <ng-template #defaultOutput>
+                    <app-amount [satoshis]="vout.value"></app-amount>
                   </ng-template>
-                </ng-template>
-              </td>
-            </tr>
+                </td>
+                <td class="pl-1 arrow-td">
+                  <i *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="arrow grey"></i>
+                  <ng-template #outspend>
+                    <i *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="arrow green"></i>
+                    <ng-template #spent>
+                      <a [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]"><i class="arrow red"></i></a>
+                    </ng-template>
+                  </ng-template>
+                </td>
+              </tr>
+              <tr *ngIf="displayDetails">
+                <td colspan="3">
+                  <table class="table table-striped table-borderless details-table mb-3">
+                    <tbody>
+                      <tr *ngIf="vout.scriptpubkey_type">
+                        <td>Type</td>
+                        <td>{{ vout.scriptpubkey_type.toUpperCase() }}</td>
+                      </tr>
+                      <tr>
+                        <td>scriptPubKey (ASM)</td>
+                        <td [innerHTML]="vout.scriptpubkey_asm | asmStyler"></td>
+                      </tr>
+                      <tr>
+                        <td>scriptPubKey (HEX)</td>
+                        <td>{{ vout.scriptpubkey }}</td>
+                      </tr>
+                      <tr *ngIf="vout.scriptpubkey_type == 'op_return'">
+                        <td>OP_RETURN data</td>
+                        <td>{{ 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

@@ -81,4 +81,23 @@
 	.scriptmessage.longer {
 		max-width: 280px !important;
 	}
-}
+
+	.details-table td:first-child {
+		white-space: pre-wrap;
+	}
+}
+
+.details-table {
+	margin-top: 5px;
+}
+
+.details-table td {
+	padding: 0.75rem;
+}
+
+.details-table td:nth-child(2) {
+	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();
+  }
 }