From 0ca33f7b5bc1345406368064f8e3c222e118c913 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 17 Sep 2022 17:23:44 +0000
Subject: [PATCH] Handle special input/output types in tx diagram

---
 .../tx-bowtie-graph-tooltip.component.html    | 57 +++++++++++++------
 .../tx-bowtie-graph-tooltip.component.ts      | 14 ++++-
 .../tx-bowtie-graph.component.ts              |  9 +++
 3 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html
index d98007ae6..563e6ed00 100644
--- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.html
+++ b/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">
-    <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>
+  <ng-container *ngIf="line.rest; else coinbase">
     <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">
-    <span class="first">{{ line.address.slice(0, -4) }}</span>
-    <span class="last-four">{{ line.address.slice(-4) }}</span>
-  </p>
+  <ng-template #pegin>
+    <ng-container *ngIf="line.pegin; else pegout">
+      <p>Peg In</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>
diff --git a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts
index ab964e89a..413bb68c0 100644
--- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.ts
+++ b/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 };
diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
index 0a25a43b1..78a865b89 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
+++ b/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;
     });