From cb7e25d6461461accaccdf1746e6ec818d50b0bf Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 20 Nov 2022 11:32:03 +0900
Subject: [PATCH 1/5] disconnect zero value outputs from flow diagram

---
 .../tx-bowtie-graph.component.html            | 23 ++++++++-
 .../tx-bowtie-graph.component.scss            | 10 ++++
 .../tx-bowtie-graph.component.ts              | 47 +++++++++++++++----
 3 files changed, 69 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
index 23346f405..18b2b0eb2 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
@@ -21,6 +21,15 @@
           markerWidth="1.5" markerHeight="1"
           orient="auto">
       </marker>
+      <radialGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop [attr.stop-color]="gradient[0]" />
+      </radialGradient>
+      <radialGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop [attr.stop-color]="gradient[1]" />
+      </radialGradient>
+      <radialGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop [attr.stop-color]="gradient[2]" />
+      </radialGradient>
       <linearGradient id="input-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0%" [attr.stop-color]="gradient[0]" />
         <stop offset="100%" [attr.stop-color]="gradient[1]" />
@@ -117,7 +126,7 @@
         (pointerout)="onBlur($event, 'output-connector', i);"
         (click)="onClick($event, 'output-connector', outputData[i].index);"
       />
-      <path
+      <path *ngIf="!output.zeroValue"
         [attr.d]="output.markerPath"
         class="output marker-target {{output.class}}"
         [class.highlight]="outputData[i].index === outputIndex"
@@ -125,7 +134,7 @@
         (pointerout)="onBlur($event, 'output', i);"
         (click)="onClick($event, 'output', outputData[i].index);"
       />
-      <path
+      <path *ngIf="!output.zeroValue"
         [attr.d]="output.path"
         class="line {{output.class}}"
         [class.highlight]="outputIndex != null && outputData[i].index === outputIndex"
@@ -135,6 +144,16 @@
         (pointerout)="onBlur($event, 'output', i);"
         (click)="onClick($event, 'output', outputData[i].index);"
       />
+      <path *ngIf="output.zeroValue"
+        [attr.d]="output.path"
+        class="line {{output.class}} zerovalue"
+        [class.highlight]="outputIndex != null && outputData[i].index === outputIndex"
+        [class.zerovalue]="output.zeroValue"
+        [style]="output.style"
+        (pointerover)="onHover($event, 'output', i);"
+        (pointerout)="onBlur($event, 'output', i);"
+        (click)="onClick($event, 'output', outputData[i].index);"
+      />
     </ng-container>
   </svg>
 
diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
index 7c9ecf0ce..6ba76d5de 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
@@ -11,6 +11,10 @@
     &.fee {
       stroke: url(#fee-gradient);
     }
+    &.zerovalue {
+      stroke: url(#gradient0);
+      stroke-linecap: round;
+    }
 
     &.highlight {
       z-index: 8;
@@ -21,6 +25,9 @@
       &.output {
         stroke: url(#output-highlight-gradient);
       }
+      &.zerovalue {
+        stroke: #1bd8f4;
+      }
     }
   }
 
@@ -36,6 +43,9 @@
     &.fee {
       stroke: url(#fee-hover-gradient);
     }
+    &.zerovalue {
+      stroke: white;
+    }
   }
 
   .connector {
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 39164314a..2802b4a45 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,7 @@ interface SvgLine {
   class?: string;
   connectorPath?: string;
   markerPath?: string;
+  zeroValue?: boolean;
 }
 
 interface Xput {
@@ -63,6 +64,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   hoverConnector: boolean = false;
   tooltipPosition = { x: 0, y: 0 };
   outspends: Outspend[] = [];
+  zeroValueWidth = 60;
+  zeroValueThickness = 20;
 
   outspendsSubscription: Subscription;
   refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
@@ -130,6 +133,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     this.txWidth = this.connectors ? Math.max(this.width - 200, this.width * 0.8) : this.width - 20;
     this.combinedWeight = Math.min(this.maxCombinedWeight, Math.floor((this.txWidth - (2 * this.midWidth)) / 6));
     this.connectorWidth = (this.width - this.txWidth) / 2;
+    this.zeroValueWidth = Math.max(20, Math.min((this.txWidth / 2) - this.midWidth - 110, 60));
 
     const totalValue = this.calcTotalValue(this.tx);
     let voutWithFee = this.tx.vout.map((v, i) => {
@@ -236,10 +240,10 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   }
 
   linesFromWeights(side: 'in' | 'out', xputs: Xput[], weights: number[], maxVisibleStrands: number): SvgLine[] {
-    const lineParams = weights.map((w) => {
+    const lineParams = weights.map((w, i) => {
       return {
         weight: w,
-        thickness: Math.max(this.minWeight - 1, w) + 1,
+        thickness: xputs[i].value === 0 ? this.zeroValueThickness : Math.max(this.minWeight - 1, w) + 1,
         offset: 0,
         innerY: 0,
         outerY: 0,
@@ -265,6 +269,12 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     let lastWeight = 0;
     let pad = 0;
     lineParams.forEach((line, i) => {
+      if (xputs[i].value === 0) {
+        line.outerY = lastOuter + this.zeroValueThickness / 2;
+        lastOuter += this.zeroValueThickness + spacing;
+        return;
+      }
+
       // set the vertical position of the (center of the) outer side of the line
       line.outerY = lastOuter + (line.thickness / 2);
       line.innerY = Math.min(innerBottom + (line.thickness / 2), Math.max(innerTop + (line.thickness / 2), lastInner + (line.weight / 2)));
@@ -318,13 +328,22 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     maxOffset -= minOffset;
 
     return lineParams.map((line, i) => {
-      return {
-        path: this.makePath(side, line.outerY, line.innerY, line.thickness, line.offset, pad + maxOffset),
-        style: this.makeStyle(line.thickness, xputs[i].type),
-        class: xputs[i].type,
-        connectorPath: this.connectors ? this.makeConnectorPath(side, line.outerY, line.innerY, line.thickness): null,
-        markerPath: this.makeMarkerPath(side, line.outerY, line.innerY, line.thickness),
-      };
+      if (xputs[i].value === 0) {
+        return {
+          path: this.makeZeroValuePath(side, line.outerY),
+          style: this.makeStyle(this.zeroValueThickness, xputs[i].type),
+          class: xputs[i].type,
+          zeroValue: true,
+        };
+      } else {
+        return {
+          path: this.makePath(side, line.outerY, line.innerY, line.thickness, line.offset, pad + maxOffset),
+          style: this.makeStyle(line.thickness, xputs[i].type),
+          class: xputs[i].type,
+          connectorPath: this.connectors ? this.makeConnectorPath(side, line.outerY, line.innerY, line.thickness): null,
+          markerPath: this.makeMarkerPath(side, line.outerY, line.innerY, line.thickness),
+        };
+      }
     });
   }
 
@@ -347,6 +366,16 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     }
   }
 
+  makeZeroValuePath(side: 'in' | 'out', y: number): string {
+    const offset = this.zeroValueThickness / 2;
+    const start = this.connectorWidth + 10;
+    if (side === 'in') {
+      return `M ${start + offset} ${y} L ${start + this.zeroValueWidth + offset} ${y + 1}`;
+    } else { // mirrored in y-axis for the right hand side
+      return `M ${this.width - start - offset} ${y} L ${this.width - start - this.zeroValueWidth - offset} ${y + 1}`;
+    }
+  }
+
   makeConnectorPath(side: 'in' | 'out', y: number, inner, weight: number): string {
     const halfWidth = weight * 0.5;
     const offset = 10; //Math.max(2, halfWidth * 0.2);

From 7e01a22265f6157782acc2ea02f226c96ff09987 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 22 Nov 2022 15:54:26 +0900
Subject: [PATCH 2/5] fix rendering of many zero value outputs

---
 .../tx-bowtie-graph/tx-bowtie-graph.component.html   |  6 +++---
 .../tx-bowtie-graph/tx-bowtie-graph.component.ts     | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
index 18b2b0eb2..c58e77335 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
@@ -21,13 +21,13 @@
           markerWidth="1.5" markerHeight="1"
           orient="auto">
       </marker>
-      <radialGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="100%">
+      <radialGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
         <stop [attr.stop-color]="gradient[0]" />
       </radialGradient>
-      <radialGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <radialGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
         <stop [attr.stop-color]="gradient[1]" />
       </radialGradient>
-      <radialGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <radialGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
         <stop [attr.stop-color]="gradient[2]" />
       </radialGradient>
       <linearGradient id="input-gradient" x1="0%" y1="0%" x2="100%" y2="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 2802b4a45..1f9602512 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
@@ -260,7 +260,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     let lastOuter = 0;
     let lastInner = innerTop;
     // gap between strands
-    const spacing = (this.height - visibleWeight) / gaps;
+    const spacing = Math.max(4, (this.height - visibleWeight) / gaps);
 
     // curve adjustments to prevent overlaps
     let offset = 0;
@@ -270,7 +270,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     let pad = 0;
     lineParams.forEach((line, i) => {
       if (xputs[i].value === 0) {
-        line.outerY = lastOuter + this.zeroValueThickness / 2;
+        line.outerY = lastOuter + (this.zeroValueThickness / 2);
         lastOuter += this.zeroValueThickness + spacing;
         return;
       }
@@ -349,7 +349,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
 
   makePath(side: 'in' | 'out', outer: number, inner: number, weight: number, offset: number, pad: number): string {
     const start = (weight * 0.5) + this.connectorWidth;
-    const curveStart = Math.max(start + 1, pad - offset);
+    const curveStart = Math.max(start + 5, pad - offset);
     const end =  this.width / 2 - (this.midWidth * 0.9) + 1;
     const curveEnd = end - offset - 10;
     const midpoint = (curveStart + curveEnd) / 2;
@@ -368,11 +368,11 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
 
   makeZeroValuePath(side: 'in' | 'out', y: number): string {
     const offset = this.zeroValueThickness / 2;
-    const start = this.connectorWidth + 10;
+    const start = (this.connectorWidth / 2) + 10;
     if (side === 'in') {
-      return `M ${start + offset} ${y} L ${start + this.zeroValueWidth + offset} ${y + 1}`;
+      return `M ${start + offset} ${y} L ${start + this.zeroValueWidth + offset} ${y}`;
     } else { // mirrored in y-axis for the right hand side
-      return `M ${this.width - start - offset} ${y} L ${this.width - start - this.zeroValueWidth - offset} ${y + 1}`;
+      return `M ${this.width - start - offset} ${y} L ${this.width - start - this.zeroValueWidth - offset} ${y}`;
     }
   }
 

From 6c1457e2574fda7ad7f75e7be333e8f5686a4e2e Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 21 Nov 2022 11:59:45 +0900
Subject: [PATCH 3/5] Reverse tx flow diagram for RTL locales

---
 .../tx-bowtie-graph.component.html              |  2 +-
 .../tx-bowtie-graph.component.scss              |  4 ++++
 .../tx-bowtie-graph.component.ts                | 17 ++++++++++++++---
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
index c58e77335..f7484fb70 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
@@ -1,5 +1,5 @@
 <div class="bowtie-graph">
-  <svg *ngIf="inputs && outputs" class="bowtie" [attr.height]="(height + 10) + 'px'" [attr.width]="width + 'px'">
+  <svg *ngIf="inputs && outputs" class="bowtie" [class.rtl]="dir === 'rtl'" [attr.height]="(height + 10) + 'px'" [attr.width]="width + 'px'">
     <defs>
       <marker id="input-arrow" viewBox="-5 -5 10 10"
           refX="0" refY="0"
diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
index 6ba76d5de..454d92bbf 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
@@ -1,4 +1,8 @@
 .bowtie {
+  &.rtl {
+    transform: scale(-1, 1);
+  }
+
   .line {
     fill: none;
 
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 1f9602512..3e4c87678 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
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnChanges, HostListener } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, HostListener, Inject, LOCALE_ID } from '@angular/core';
 import { StateService } from '../../services/state.service';
 import { Outspend, Transaction } from '../../interfaces/electrs.interface';
 import { Router } from '@angular/router';
@@ -50,6 +50,8 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   @Input() inputIndex: number;
   @Input() outputIndex: number;
 
+  dir: 'rtl' | 'ltr' = 'ltr';
+
   inputData: Xput[];
   outputData: Xput[];
   inputs: SvgLine[];
@@ -90,7 +92,12 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     private relativeUrlPipe: RelativeUrlPipe,
     private stateService: StateService,
     private apiService: ApiService,
-  ) { }
+    @Inject(LOCALE_ID) private locale: string,
+  ) {
+    if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
+      this.dir = 'rtl';
+    }
+  }
 
   ngOnInit(): void {
     this.initGraph();
@@ -420,7 +427,11 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
 
   @HostListener('pointermove', ['$event'])
   onPointerMove(event) {
-    this.tooltipPosition = { x: event.offsetX, y: event.offsetY };
+    if (this.dir === 'rtl') {
+      this.tooltipPosition = { x: this.width - event.offsetX, y: event.offsetY };
+    } else {
+     this.tooltipPosition = { x: event.offsetX, y: event.offsetY };
+    }
   }
 
   onHover(event, side, index): void {

From 5198cc51dce519d22fe4803d92db622439f709bf Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 19 Nov 2022 20:27:39 +0900
Subject: [PATCH 4/5] ellipsis for long op_return messages in tx preview

---
 .../transaction-preview.component.html        | 28 +++++++----------
 .../transaction-preview.component.scss        | 31 +++++++++++++------
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction-preview.component.html b/frontend/src/app/components/transaction/transaction-preview.component.html
index cb273b16c..40ef94dde 100644
--- a/frontend/src/app/components/transaction/transaction-preview.component.html
+++ b/frontend/src/app/components/transaction/transaction-preview.component.html
@@ -41,24 +41,20 @@
     </div>
     <div class="overlaid">
       <ng-container [ngSwitch]="extraData">
-        <table class="opreturns" *ngSwitchCase="'coinbase'">
-          <tbody>
-            <tr>
-              <td class="label">Coinbase</td>
-              <td class="message">{{ tx.vin[0].scriptsig | hex2ascii }}</td>
-            </tr>
-          </tbody>
-        </table>
-        <table class="opreturns" *ngSwitchCase="'opreturn'">
-          <tbody>
+        <div class="opreturns" *ngSwitchCase="'coinbase'">
+            <div class="opreturn-row">
+              <span class="label">Coinbase</span>
+              <span class="message">{{ tx.vin[0].scriptsig | hex2ascii }}</span>
+            </div>
+        </div>
+        <div class="opreturns" *ngSwitchCase="'opreturn'">
             <ng-container *ngFor="let vout of opReturns.slice(0,3)">
-              <tr>
-                <td class="label">OP_RETURN</td>
-                <td *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="message">{{ vout.scriptpubkey_asm | hex2ascii }}</td>
-              </tr>
+              <div class="opreturn-row">
+                <span class="label">OP_RETURN</span>
+                <span *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="message">{{ vout.scriptpubkey_asm | hex2ascii }}</span>
+              </div>
             </ng-container>
-          </tbody>
-        </table>
+        </div>
       </ng-container>
     </div>
   </div>
diff --git a/frontend/src/app/components/transaction/transaction-preview.component.scss b/frontend/src/app/components/transaction/transaction-preview.component.scss
index 75eceb99e..9c0d75c2a 100644
--- a/frontend/src/app/components/transaction/transaction-preview.component.scss
+++ b/frontend/src/app/components/transaction/transaction-preview.component.scss
@@ -92,26 +92,37 @@
     max-width: 90%;
     margin: auto;
     overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
 
     .opreturns {
+      display: inline-block;
       width: auto;
+      max-width: 100%;
       margin: auto;
       table-layout: auto;
       background: #2d3348af;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
 
-      td {
-        padding: 10px 10px;
+      .opreturn-row {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        padding: 0 10px;
+      }
 
-        &.message {
-          overflow: hidden;
-          display: inline-block;
-          vertical-align: bottom;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          text-align: left;
-        }
+      .label {
+        margin-right: 1em;
+      }
+
+      .message {
+        flex-shrink: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }

From 43bb3aa50be27e4d4998b641f21ccf60c5bace56 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 19 Nov 2022 20:27:44 +0900
Subject: [PATCH 5/5] align elements of tx preview

---
 .../transaction/transaction-preview.component.scss    | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/src/app/components/transaction/transaction-preview.component.scss b/frontend/src/app/components/transaction/transaction-preview.component.scss
index 9c0d75c2a..4fa8b661a 100644
--- a/frontend/src/app/components/transaction/transaction-preview.component.scss
+++ b/frontend/src/app/components/transaction/transaction-preview.component.scss
@@ -29,6 +29,8 @@
 .features {
   font-size: 24px;
   margin-left: 1em;
+  margin-top: 0.5em;
+  margin-right: -4px;
 }
 
 .top-data {
@@ -60,6 +62,15 @@
   }
 }
 
+.top-data .field {
+  &:first-child {
+    padding-left: 0;
+  }
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
 .tx-link {
   display: inline;
   font-size: 28px;