Handle special input/output types in tx diagram

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

@@ -6,28 +6,51 @@
   [style.left]="tooltipPosition.x + 'px'"
   [style.top]="tooltipPosition.y + 'px'"
 >
-  <ng-container *ngIf="!line.rest; else restMsg">
+  <ng-container *ngIf="line.rest; else coinbase">
-    <p>
-      <ng-container [ngSwitch]="line.type">
-        <span *ngSwitchCase="'input'" i18n="transaction.input">Input</span>
-        <span *ngSwitchCase="'output'" i18n="transaction.output">Output</span>
-        <span *ngSwitchCase="'fee'" i18n="transaction.fee">Fee</span>
-      </ng-container>
-      <span *ngIf="line.type !== 'fee'"> #{{ line.index }}</span>
-    </p>
-    <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
-  </ng-container>
-
-  <ng-template #restMsg>
     <span>{{ line.rest }} </span>
     <ng-container [ngSwitch]="line.type">
       <span *ngSwitchCase="'input'" i18n="transaction.other-inputs">other inputs</span>
       <span *ngSwitchCase="'output'" i18n="transaction.other-outputs">other outputs</span>
     </ng-container>
+  </ng-container>
+
+  <ng-template #coinbase>
+    <ng-container *ngIf="line.coinbase; else pegin">
+      <p>Coinbase</p>
+    </ng-container>
   </ng-template>
 
-  <p *ngIf="line.type !== 'fee' && line.address" class="address">
+  <ng-template #pegin>
-    <span class="first">{{ line.address.slice(0, -4) }}</span>
+    <ng-container *ngIf="line.pegin; else pegout">
-    <span class="last-four">{{ line.address.slice(-4) }}</span>
+      <p>Peg In</p>
-  </p>
+    </ng-container>
+  </ng-template>
+
+  <ng-template #pegout>
+    <ng-container *ngIf="line.pegout; else normal">
+      <p>Peg Out</p>
+      <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
+      <p class="address">
+        <span class="first">{{ line.pegout.slice(0, -4) }}</span>
+        <span class="last-four">{{ line.pegout.slice(-4) }}</span>
+      </p>
+    </ng-container>
+  </ng-template>
+
+  <ng-template #normal>
+      <p>
+        <ng-container [ngSwitch]="line.type">
+          <span *ngSwitchCase="'input'" i18n="transaction.input">Input</span>
+          <span *ngSwitchCase="'output'" i18n="transaction.output">Output</span>
+          <span *ngSwitchCase="'fee'" i18n="transaction.fee">Fee</span>
+        </ng-container>
+        <span *ngIf="line.type !== 'fee'"> #{{ line.index }}</span>
+      </p>
+      <p *ngIf="line.value == null && line.confidential" i18n="shared.confidential">Confidential</p>
+      <p *ngIf="line.value != null"><app-amount [satoshis]="line.value"></app-amount></p>
+      <p *ngIf="line.type !== 'fee' && line.address" class="address">
+        <span class="first">{{ line.address.slice(0, -4) }}</span>
+        <span class="last-four">{{ line.address.slice(-4) }}</span>
+      </p>
+  </ng-template>
 </div>

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

@@ -1,13 +1,25 @@
 import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
 import { TransactionStripped } from 'src/app/interfaces/websocket.interface';
 
+interface Xput {
+  type: 'input' | 'output' | 'fee';
+  value?: number;
+  index?: number;
+  address?: string;
+  rest?: number;
+  coinbase?: boolean;
+  pegin?: boolean;
+  pegout?: string;
+  confidential?: boolean;
+}
+
 @Component({
   selector: 'app-tx-bowtie-graph-tooltip',
   templateUrl: './tx-bowtie-graph-tooltip.component.html',
   styleUrls: ['./tx-bowtie-graph-tooltip.component.scss'],
 })
 export class TxBowtieGraphTooltipComponent implements OnChanges {
-  @Input() line: { type: string, value?: number, index?: number, address?: string, rest?: number } | void;
+  @Input() line: Xput | void;
   @Input() cursorPosition: { x: number, y: number };
 
   tooltipPosition = { x: 0, y: 0 };

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

@@ -13,6 +13,10 @@ interface Xput {
   index?: number;
   address?: string;
   rest?: number;
+  coinbase?: boolean;
+  pegin?: boolean;
+  pegout?: string;
+  confidential?: boolean;
 }
 
 const lineLimit = 250;
@@ -78,6 +82,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
         type: v.scriptpubkey_type === 'fee' ? 'fee' : 'output',
         value: v?.value,
         address: v?.scriptpubkey_address || v?.scriptpubkey_type?.toUpperCase(),
+        pegout: v?.pegout?.scriptpubkey_address,
+        confidential: (this.isLiquid && v?.value === undefined),
       } as Xput;
     });
 
@@ -91,6 +97,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
         type: 'input',
         value: v?.prevout?.value,
         address: v?.prevout?.scriptpubkey_address || v?.prevout?.scriptpubkey_type?.toUpperCase(),
+        coinbase: v?.is_coinbase,
+        pegin: v?.is_pegin,
+        confidential: (this.isLiquid && v?.prevout?.value === undefined),
       } as Xput;
     });