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;
     }
   }