status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(@desktop/wallet): Fix routing lines in SendModal Advanced view 

fixes #8515
This commit is contained in:
Khushboo Mehta 2022-11-29 22:47:26 +01:00 committed by Khushboo-dev-cpp
parent d5db1e6356
commit 13ab93297e
4 changed files with 71 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app_service/service/transaction/async_tasks.nim
View File

@ -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,

5
ui/StatusQ/src/StatusQ/Components/StatusCard.qml
View File

@ -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

75
ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml
View File

@ -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()
}
}

30
ui/imports/shared/views/NetworkCardsComponent.qml
View File

@ -44,9 +44,9 @@ Item {
function resetAllSetValues() {
for(var i = 0; i<fromNetworksRepeater.count; i++) {
fromNetworksRepeater.itemAt(i).amountToSend = 0
fromNetworksRepeater.itemAt(i).isOnBestRoute = false
fromNetworksRepeater.itemAt(i).routeOnNetwork = 0
toNetworksRepeater.itemAt(i).amountToReceive = 0
toNetworksRepeater.itemAt(i).isOnBestRoute = false
toNetworksRepeater.itemAt(i).routeOnNetwork = 0
}
}
}
@ -78,7 +78,7 @@ Item {
id: fromNetwork
objectName: model.chainId
property double amountToSend: 0
property bool isOnBestRoute: false
property int routeOnNetwork: 0
property string tokenBalanceOnChain: selectedAccount && selectedAccount!== undefined && selectedAsset!== undefined ? selectedAccount.getTokenBalanceOnChain(model.chainId, selectedAsset.symbol) : ""
property var hasGas: selectedAccount.hasGas(model.chainId, model.nativeCurrencySymbol, requiredGasInEth)
primaryText: model.chainName
@ -95,7 +95,7 @@ Item {
onClicked: {
store.addRemoveDisabledFromChain(model.chainId, disabled)
// only recalculate if the a best route was disabled
if(root.bestRoutes.length === 0 || isOnBestRoute)
if(root.bestRoutes.length === 0 || routeOnNetwork !== 0 || !disabled)
root.reCalculateSuggestedRoute()
}
onVisibleChanged: {
@ -129,7 +129,7 @@ Item {
StatusCard {
id: toCard
objectName: model.chainId
property bool isOnBestRoute: false
property int routeOnNetwork: 0
property double amountToReceive: 0
primaryText: model.chainName
secondaryText: LocaleUtils.numberToLocaleString(amountToReceive)
@ -146,7 +146,7 @@ Item {
onClicked: {
store.addRemoveDisabledToChain(model.chainId, disabled)
// only recalculate if the a best route was disabled
if(root.bestRoutes.length === 0 || isOnBestRoute)
if(root.bestRoutes.length === 0 || routeOnNetwork !== 0 || !disabled)
root.reCalculateSuggestedRoute()
}
onVisibleChanged: {
@ -185,6 +185,11 @@ Item {
if(bestRoutes === undefined)
return
// in case you are drwaing multiple routes we need an offset so that the lines dont overlap
let yOffsetFrom = 0
let yOffsetTo = 0
let xOffset = 0
// Get the canvas context
var ctx = getContext("2d");
for(var i = 0; i< bestRoutes.length; i++) {
@ -202,18 +207,21 @@ Item {
}
}
if(toN !== null && fromN !== null) {
yOffsetFrom = toN.objectName === fromN.objectName && toN.routeOnNetwork !== 0 ? toN.routeOnNetwork * 10 : 0
yOffsetTo = toN.routeOnNetwork * 10
xOffset = toN.routeOnNetwork * 10
let amountToSend = weiToEth(bestRoutes[i].amountIn)
let amountToReceive = weiToEth(bestRoutes[i].amountOut)
fromN.amountToSend = amountToSend
toN.amountToReceive += amountToReceive
fromN.isOnBestRoute = true
toN.isOnBestRoute = true
fromN.routeOnNetwork += 1
toN.routeOnNetwork += 1
d.thereIsApossibleRoute = true
StatusQUtils.Utils.drawArrow(ctx, fromN.x + fromN.width,
fromN.y + fromN.height/2,
fromN.y + fromN.cardIconPosition + yOffsetFrom,
toNetworksLayout.x + toN.x,
toN.y + toN.height/2,
'#627EEA')
toN.y + toN.cardIconPosition + yOffsetTo,
'#627EEA', xOffset)
}
}
}