From eb2abefabc4673b2fbacfd23427bd04f526a5000 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Mon, 21 Nov 2022 12:28:26 +0900 Subject: [PATCH] Add shapes to flow diagram to indicate spent txos --- .../transaction-preview.component.html | 2 +- .../transaction-preview.component.scss | 2 +- .../transaction/transaction.component.html | 1 + .../transaction/transaction.component.scss | 2 +- .../transaction/transaction.component.ts | 2 +- .../tx-bowtie-graph.component.html | 24 +++++++++++++ .../tx-bowtie-graph.component.scss | 11 ++++++ .../tx-bowtie-graph.component.ts | 35 ++++++++++++++----- 8 files changed, 67 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/components/transaction/transaction-preview.component.html b/frontend/src/app/components/transaction/transaction-preview.component.html index f023a77b1..cb273b16c 100644 --- a/frontend/src/app/components/transaction/transaction-preview.component.html +++ b/frontend/src/app/components/transaction/transaction-preview.component.html @@ -29,7 +29,7 @@
- +

diff --git a/frontend/src/app/components/transaction/transaction-preview.component.scss b/frontend/src/app/components/transaction/transaction-preview.component.scss index 65c0ca75e..75eceb99e 100644 --- a/frontend/src/app/components/transaction/transaction-preview.component.scss +++ b/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 { diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index ec0e824c8..2f4fb7ba2 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/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" > diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss index 7127a898a..619cac89a 100644 --- a/frontend/src/app/components/transaction/transaction.component.scss +++ b/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; } diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts index 0235dd887..787abe935 100644 --- a/frontend/src/app/components/transaction/transaction.component.ts +++ b/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; } } 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 a85f62c65..c09064201 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 @@ -29,6 +29,14 @@ + + + + + + + + @@ -65,6 +73,14 @@ + + = new ReplaySubject(); gradientColors = { - '': ['#9339f4', '#105fb0'], - bisq: ['#9339f4', '#105fb0'], + '': ['#9339f4', '#105fb0', '#9339f433'], + 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}`;