Add shapes to flow diagram to indicate spent txos

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

@@ -29,7 +29,7 @@
 
 
   <div class="row graph-wrapper">
-    <tx-bowtie-graph [tx]="tx" [width]="1112" [height]="346" [network]="network"></tx-bowtie-graph>
+    <tx-bowtie-graph [tx]="tx" [width]="1132" [height]="346" [network]="network"></tx-bowtie-graph>
     <div class="above-bow">
       <p class="field pair">
         <span [innerHTML]="'&lrm;' + (tx.size | bytes: 2)"></span>

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

@@ -69,7 +69,7 @@
 .graph-wrapper {
   position: relative;
   background: #181b2d;
-  padding: 10px;
+  padding: 10px 0;
   padding-bottom: 0;
 
   .above-bow {

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

@@ -209,6 +209,7 @@
             [maxStrands]="graphExpanded ? maxInOut : 24"
             [network]="network"
             [tooltip]="true"
+            [connectors]="true"
             [inputIndex]="inputIndex" [outputIndex]="outputIndex"
           >
           </tx-bowtie-graph>

frontend/src/app/components/transaction/transaction.component.scss

@@ -86,7 +86,7 @@
   position: relative;
   width: 100%;
   background: #181b2d;
-  padding: 10px;
+  padding: 10px 0;
   padding-bottom: 0;
 }
 

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

@@ -402,7 +402,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
   @HostListener('window:resize', ['$event'])
   setGraphSize(): void {
     if (this.graphContainer) {
-      this.graphWidth = this.graphContainer.nativeElement.clientWidth - 24;
+      this.graphWidth = this.graphContainer.nativeElement.clientWidth;
     }
   }
 

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

@@ -29,6 +29,14 @@
         <stop offset="0%" [attr.stop-color]="gradient[1]" />
         <stop offset="100%" [attr.stop-color]="gradient[0]" />
       </linearGradient>
+      <linearGradient id="input-connector-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" [attr.stop-color]="gradient[2]" />
+        <stop offset="80%" [attr.stop-color]="gradient[0]" />
+      </linearGradient>
+      <linearGradient id="output-connector-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="20%" [attr.stop-color]="gradient[0]" />
+        <stop offset="100%" [attr.stop-color]="gradient[2]" />
+      </linearGradient>
       <linearGradient id="input-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" [attr.stop-color]="gradient[0]" />
       <stop offset="2%" [attr.stop-color]="gradient[0]" />
@@ -65,6 +73,14 @@
     </defs>
     <path [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"
+        class="input connector {{input.class}}"
+        [class.highlight]="inputData[i].index === inputIndex"
+        (pointerover)="onHover($event, 'input', i);"
+        (pointerout)="onBlur($event, 'input', i);"
+        (click)="onClick($event, 'input', inputData[i].index);"
+      />
       <path
         [attr.d]="input.path"
         class="line {{input.class}}"
@@ -77,6 +93,14 @@
       />
     </ng-container>
     <ng-container *ngFor="let output of outputs; let i = index">
+      <path *ngIf="connectors && outspends[outputData[i].index]?.spent"
+        [attr.d]="output.connectorPath"
+        class="output connector {{output.class}}"
+        [class.highlight]="outputData[i].index === outputIndex"
+        (pointerover)="onHover($event, 'output', i);"
+        (pointerout)="onBlur($event, 'output', i);"
+        (click)="onClick($event, 'output', outputData[i].index);"
+      />
       <path
         [attr.d]="output.path"
         class="line {{output.class}}"

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

@@ -37,4 +37,15 @@
       }
     }
   }
+
+  .connector {
+    stroke: none;
+    opacity: 0.75;
+    &.input {
+      fill: url(#input-connector-gradient);
+    }
+    &.output {
+      fill: url(#output-connector-gradient);
+    }
+  }
 }

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

@@ -11,6 +11,7 @@ interface SvgLine {
   path: string;
   style: string;
   class?: string;
+  connectorPath?: string;
 }
 
 interface Xput {
@@ -40,6 +41,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   @Input() minWeight = 2; //
   @Input() maxStrands = 24; // number of inputs/outputs to keep fully on-screen.
   @Input() tooltip = false;
+  @Input() connectors = false;
   @Input() inputIndex: number;
   @Input() outputIndex: number;
 
@@ -59,16 +61,16 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
 
   gradientColors = {
-    '': ['#9339f4', '#105fb0'],
+    '': ['#9339f4', '#105fb0', '#9339f433'],
-    bisq: ['#9339f4', '#105fb0'],
+    bisq: ['#9339f4', '#105fb0', '#9339f433'],
     // liquid: ['#116761', '#183550'],
-    liquid: ['#09a197', '#0f62af'],
+    liquid: ['#09a197', '#0f62af', '#09a19733'],
     // 'liquidtestnet': ['#494a4a', '#272e46'],
-    'liquidtestnet': ['#d2d2d2', '#979797'],
+    'liquidtestnet': ['#d2d2d2', '#979797', '#d2d2d233'],
     // testnet: ['#1d486f', '#183550'],
-    testnet: ['#4edf77', '#10a0af'],
+    testnet: ['#4edf77', '#10a0af', '#4edf7733'],
     // signet: ['#6f1d5d', '#471850'],
-    signet: ['#d24fc8', '#a84fd2'],
+    signet: ['#d24fc8', '#a84fd2', '#d24fc833'],
   };
 
   gradient: string[] = ['#105fb0', '#105fb0'];
@@ -308,13 +310,14 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
       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
+        class: xputs[i].type,
+        connectorPath: this.connectors ? this.makeConnectorPath(side, line.outerY, line.innerY, line.thickness): null,
       };
     });
   }
 
   makePath(side: 'in' | 'out', outer: number, inner: number, weight: number, offset: number, pad: number): string {
-    const start = (weight * 0.5);
+    const start = (weight * 0.5) + 10;
     const curveStart = Math.max(start + 1, pad - offset);
     const end =  this.width / 2 - (this.midWidth * 0.9) + 1;
     const curveEnd = end - offset - 10;
@@ -332,6 +335,22 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     }
   }
 
+  makeConnectorPath(side: 'in' | 'out', y: number, inner, weight: number): string {
+    const halfWidth = weight * 0.5;
+    const offset = Math.max(2, halfWidth * 0.2);
+
+    // align with for svg horizontal gradient bug correction
+    if (Math.round(y) === Math.round(inner)) {
+      y -= 1;
+    }
+
+    if (side === 'in') {
+      return `M ${10 - offset} ${y - halfWidth} L ${halfWidth + 10 - offset} ${y} L ${10 - offset} ${y + halfWidth} L -10 ${ y + halfWidth} L -10 ${y - halfWidth}`;
+    } else {
+      return `M ${this.width - halfWidth - 10 + offset} ${y - halfWidth} L ${this.width - 10 + offset} ${y} L ${this.width - halfWidth - 10 + offset} ${y + halfWidth} L ${this.width + 10} ${ y + halfWidth} L ${this.width + 10} ${y - halfWidth}`;
+    }
+  }
+
   makeStyle(minWeight, type): string {
     if (type === 'fee') {
       return `stroke-width: ${minWeight}`;