From 13ab93297e38ff650482fd1bbe64b5c14a218ad6 Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Tue, 29 Nov 2022 22:47:26 +0100 Subject: [PATCH] fix(@desktop/wallet): Fix routing lines in SendModal Advanced view fixes #8515 --- .../service/transaction/async_tasks.nim | 8 +- .../src/StatusQ/Components/StatusCard.qml | 5 ++ ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml | 75 ++++++++++--------- .../shared/views/NetworkCardsComponent.qml | 30 +++++--- 4 files changed, 71 insertions(+), 47 deletions(-) diff --git a/src/app_service/service/transaction/async_tasks.nim b/src/app_service/service/transaction/async_tasks.nim index eceedf5b35..5af37887f6 100644 --- a/src/app_service/service/transaction/async_tasks.nim +++ b/src/app_service/service/transaction/async_tasks.nim @@ -5,6 +5,11 @@ import stint import ../../common/conversion as service_conversion +proc sortAsc[T](t1, t2: T): int = + if (t1.fromNetwork.chainId > t2.fromNetwork.chainId): return 1 + elif (t1.fromNetwork.chainId < t2.fromNetwork.chainId): return -1 + else: return 0 + type LoadTransactionsTaskArg* = ref object of QObjectTaskArg chainId: int @@ -77,7 +82,8 @@ const getSuggestedRoutesTask*: Task = proc(argEncoded: string) {.gcsafe, nimcall let amountAsHex = "0x" & eth_utils.stripLeadingZeros(arg.amount.toHex) let response = eth.suggestedRoutes(arg.account, amountAsHex, arg.token, arg.disabledFromChainIDs, arg.disabledToChainIDs, arg.preferredChainIDs, arg.priority, arg.sendType).result - let bestPaths = response["Best"].getElems().map(x => x.toTransactionPathDto()) + var bestPaths = response["Best"].getElems().map(x => x.toTransactionPathDto()) + bestPaths.sort(sortAsc[TransactionPathDto]) let output = %*{ "suggestedRoutes": SuggestedRoutesDto( best: bestPaths, diff --git a/ui/StatusQ/src/StatusQ/Components/StatusCard.qml b/ui/StatusQ/src/StatusQ/Components/StatusCard.qml index 57652a0ae4..7c87098bd8 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusCard.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusCard.qml @@ -124,6 +124,11 @@ Rectangle { This property allows user to customize the card icon in the StatusCard */ property alias cardIcon: cardIcon + /*! + \qmlproperty real StatusCard::cardIconPosition + This property exposes the card icon posistion to help draw the network routes + */ + property real cardIconPosition: layout.y + cardIcon.y + cardIcon.height/2 /*! \qmlsignal StatusCard::clicked diff --git a/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml b/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml index 143f0e5f35..9668d1c606 100644 --- a/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml +++ b/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml @@ -87,7 +87,7 @@ QtObject { } // function to draw arrow - function drawArrow(context, fromx, fromy, tox, toy, color) { + function drawArrow(context, fromx, fromy, tox, toy, color, offset) { const dx = tox - fromx; const dy = toy - fromy; const headlen = 10; // length of head in pixels @@ -99,57 +99,62 @@ QtObject { // straight line if(dy === 0) { // draw semicircle - context.beginPath(); - context.arc(fromx, fromy, radius, 3*Math.PI/2, Math.PI/2,false); - context.stroke(); + context.beginPath() + context.arc(fromx, fromy, radius, 3*Math.PI/2, Math.PI/2,false) + context.stroke() // draw straightline - // context.setLineDash([5]); - context.beginPath(); - context.moveTo(fromx + radius, fromy); - context.lineTo(tox, toy); - context.stroke(); + context.setLineDash([3]) + context.beginPath() + context.moveTo(fromx + radius, fromy) + context.lineTo(tox, toy) + context.stroke() // draw arrow - context.beginPath(); - context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6)); - context.lineTo(tox, toy ); - context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6)); - context.stroke(); + context.setLineDash([10,0]) + context.beginPath() + context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6)) + context.lineTo(tox, toy ) + context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6)) + context.stroke() } // connecting between 2 different y positions else { // draw semicircle - context.beginPath(); - context.arc(fromx, fromy, radius, 3*Math.PI/2, Math.PI/2,false); - context.stroke(); + context.beginPath() + context.arc(fromx, fromy, radius, 3*Math.PI/2, Math.PI/2,false) + context.stroke() // draw bent line - context.beginPath(); - context.moveTo(fromx + radius, fromy); - context.lineTo(fromx + dx / 2, fromy); - context.lineTo(fromx + dx / 2, toy - radius); - context.stroke(); + context.setLineDash([3]) + context.beginPath() + context.moveTo(fromx + radius, fromy) + context.lineTo(fromx + dx / 2 - offset, fromy) + context.lineTo(fromx + dx / 2 - offset, toy + (dy < 0 ? radius : -radius)) + context.stroke() // draw connecting circle - context.beginPath(); - context.moveTo(fromx + dx / 2 + radius, toy); - context.arc(fromx + dx / 2, toy, radius, 0, 2*Math.PI,false); - context.stroke(); + context.setLineDash([10,0]) + context.beginPath() + context.moveTo(fromx + dx / 2 + radius - offset, toy) + context.arc(fromx + dx / 2 - offset, toy, radius, 0, 2*Math.PI,false) + context.stroke() // draw straightline - context.beginPath(); - context.moveTo(fromx + dx / 2 + radius, toy); - context.lineTo(tox, toy); - context.stroke(); + context.setLineDash([3]) + context.beginPath() + context.moveTo(fromx + dx / 2 + radius - offset, toy); + context.lineTo(tox, toy) + context.stroke() // draw arrow - context.beginPath(); - context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6)); - context.lineTo(tox, toy ); - context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6)); - context.stroke(); + context.setLineDash([10,0]) + context.beginPath() + context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6)) + context.lineTo(tox, toy ) + context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6)) + context.stroke() } } diff --git a/ui/imports/shared/views/NetworkCardsComponent.qml b/ui/imports/shared/views/NetworkCardsComponent.qml index be3f6a5f74..6b766f7fc0 100644 --- a/ui/imports/shared/views/NetworkCardsComponent.qml +++ b/ui/imports/shared/views/NetworkCardsComponent.qml @@ -44,9 +44,9 @@ Item { function resetAllSetValues() { for(var i = 0; i