Merge branch 'master' into mononaut/block-health-ux

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -77,6 +77,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       cancelAnimationFrame(this.animationFrameRequest);
       clearTimeout(this.animationHeartBeat);
     }
+    this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
+    this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
   }
 
   clear(direction): void {

frontend/src/app/components/block/block-preview.component.html

@@ -53,13 +53,13 @@
             <td i18n="block.miner">Miner</td>
             <td *ngIf="stateService.env.MINING_DASHBOARD">
               <a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
-                [class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+                [class]="!block?.extras.pool.name || block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
                 {{ block?.extras.pool.name }}
               </a>
             </td>
             <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
               <span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
-                [class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+                [class]="!block?.extras.pool.name || block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
                 {{ block?.extras.pool.name }}
             </span>
             </td>

frontend/src/app/components/block/block-preview.component.scss

@@ -56,3 +56,7 @@
 ::ng-deep .symbol {
   font-size: 24px;
 }
+
+.badge {
+  transition: none;
+}

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

@@ -91,6 +91,9 @@ export class TransactionsListComponent implements OnInit, OnChanges {
             filter(() => this.stateService.env.LIGHTNING),
             switchMap((txIds) => this.apiService.getChannelByTxIds$(txIds)),
             tap((channels) => {
+              if (!this.transactions) {
+                return;
+              }
               const transactions = this.transactions.filter((tx) => !tx._channels);
               channels.forEach((channel, i) => {
                 transactions[i]._channels = channel;

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html

@@ -88,7 +88,7 @@
         <stop offset="100%" stop-color="transparent" />
       </linearGradient>
     </defs>
-    <path [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
+    <path *ngIf="hasLine" [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
     <ng-container *ngFor="let input of inputs; let i = index">
       <path *ngIf="connectors && !inputData[i].coinbase && !inputData[i].pegin"
         [attr.d]="input.connectorPath"
@@ -106,7 +106,7 @@
         (pointerout)="onBlur($event, 'input', i);"
         (click)="onClick($event, 'input', inputData[i].index);"
       />
-      <path
+      <path *ngIf="!input.zeroValue"
         [attr.d]="input.path"
         class="line {{input.class}}"
         [class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
@@ -116,6 +116,16 @@
         (pointerout)="onBlur($event, 'input', i);"
         (click)="onClick($event, 'input', inputData[i].index);"
       />
+      <path *ngIf="input.zeroValue"
+        [attr.d]="input.path"
+        class="line {{input.class}} zerovalue"
+        [class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
+        [class.zerovalue]="input.zeroValue"
+        [style]="input.style"
+        (pointerover)="onHover($event, 'input', i);"
+        (pointerout)="onBlur($event, 'input', i);"
+        (click)="onClick($event, 'input', inputData[i].index);"
+      />
     </ng-container>
     <ng-container *ngFor="let output of outputs; let i = index">
       <path *ngIf="connectors && outspends[outputData[i].index]?.spent"

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts

@@ -68,6 +68,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   outspends: Outspend[] = [];
   zeroValueWidth = 60;
   zeroValueThickness = 20;
+  hasLine: boolean;
 
   outspendsSubscription: Subscription;
   refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
@@ -162,7 +163,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     let truncatedInputs = this.tx.vin.map((v, i) => {
       return {
         type: 'input',
-        value: v?.prevout?.value,
+        value: v?.prevout?.value || (v?.is_coinbase && !totalValue ? 0 : undefined),
         txid: v.txid,
         vout: v.vout,
         address: v?.prevout?.scriptpubkey_address || v?.prevout?.scriptpubkey_type?.toUpperCase(),
@@ -198,6 +199,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
       path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.5} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.5}`,
       style: `stroke-width: ${this.combinedWeight + 1}; stroke: ${this.gradient[1]}`
     };
+
+    this.hasLine = this.inputs.reduce((line, put) => line || !put.zeroValue, false)
+      && this.outputs.reduce((line, put) => line || !put.zeroValue, false);
   }
 
   calcTotalValue(tx: Transaction): number {
@@ -278,6 +282,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     lineParams.forEach((line, i) => {
       if (xputs[i].value === 0) {
         line.outerY = lastOuter + (this.zeroValueThickness / 2);
+        if (xputs.length === 1) {
+          line.outerY = (this.height / 2);
+        }
         lastOuter += this.zeroValueThickness + spacing;
         return;
       }

frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts

@@ -118,7 +118,7 @@ export class NodesNetworksChartComponent implements OnInit {
           color: 'grey',
           fontSize: 15
         },
-        text: $localize`Indexing in progess`,
+        text: $localize`Indexing in progress`,
         left: 'center',
         top: 'center',
       };

frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts

@@ -109,7 +109,7 @@ export class LightningStatisticsChartComponent implements OnInit {
           color: 'grey',
           fontSize: 15
         },
-        text: $localize`Indexing in progess`,
+        text: $localize`Indexing in progress`,
         left: 'center',
         top: 'center'
       };