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 stint
import ../../common/conversion as service_conversion 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 type
LoadTransactionsTaskArg* = ref object of QObjectTaskArg LoadTransactionsTaskArg* = ref object of QObjectTaskArg
chainId: int chainId: int
@ -77,7 +82,8 @@ const getSuggestedRoutesTask*: Task = proc(argEncoded: string) {.gcsafe, nimcall
let amountAsHex = "0x" & eth_utils.stripLeadingZeros(arg.amount.toHex) 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 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 = %*{ let output = %*{
"suggestedRoutes": SuggestedRoutesDto( "suggestedRoutes": SuggestedRoutesDto(
best: bestPaths, 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 This property allows user to customize the card icon in the StatusCard
*/ */
property alias cardIcon: cardIcon 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 \qmlsignal StatusCard::clicked

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

@ -87,7 +87,7 @@ QtObject {
} }
// function to draw arrow // 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 dx = tox - fromx;
const dy = toy - fromy; const dy = toy - fromy;
const headlen = 10; // length of head in pixels const headlen = 10; // length of head in pixels
@ -99,57 +99,62 @@ QtObject {
// straight line // straight line
if(dy === 0) { if(dy === 0) {
// draw semicircle // draw semicircle
context.beginPath(); context.beginPath()
context.arc(fromx, fromy, radius, 3*Math.PI/2, Math.PI/2,false); context.arc(fromx, fromy, radius, 3*Math.PI/2, Math.PI/2,false)
context.stroke(); context.stroke()
// draw straightline // draw straightline
// context.setLineDash([5]); context.setLineDash([3])
context.beginPath(); context.beginPath()
context.moveTo(fromx + radius, fromy); context.moveTo(fromx + radius, fromy)
context.lineTo(tox, toy); context.lineTo(tox, toy)
context.stroke(); context.stroke()
// draw arrow // draw arrow
context.beginPath(); context.setLineDash([10,0])
context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6)); context.beginPath()
context.lineTo(tox, toy ); context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6))
context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6)); context.lineTo(tox, toy )
context.stroke(); 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 // connecting between 2 different y positions
else { else {
// draw semicircle // draw semicircle
context.beginPath(); context.beginPath()
context.arc(fromx, fromy, radius, 3*Math.PI/2, Math.PI/2,false); context.arc(fromx, fromy, radius, 3*Math.PI/2, Math.PI/2,false)
context.stroke(); context.stroke()
// draw bent line // draw bent line
context.beginPath(); context.setLineDash([3])
context.moveTo(fromx + radius, fromy); context.beginPath()
context.lineTo(fromx + dx / 2, fromy); context.moveTo(fromx + radius, fromy)
context.lineTo(fromx + dx / 2, toy - radius); context.lineTo(fromx + dx / 2 - offset, fromy)
context.stroke(); context.lineTo(fromx + dx / 2 - offset, toy + (dy < 0 ? radius : -radius))
context.stroke()
// draw connecting circle // draw connecting circle
context.beginPath(); context.setLineDash([10,0])
context.moveTo(fromx + dx / 2 + radius, toy); context.beginPath()
context.arc(fromx + dx / 2, toy, radius, 0, 2*Math.PI,false); context.moveTo(fromx + dx / 2 + radius - offset, toy)
context.stroke(); context.arc(fromx + dx / 2 - offset, toy, radius, 0, 2*Math.PI,false)
context.stroke()
// draw straightline // draw straightline
context.beginPath(); context.setLineDash([3])
context.moveTo(fromx + dx / 2 + radius, toy); context.beginPath()
context.lineTo(tox, toy); context.moveTo(fromx + dx / 2 + radius - offset, toy);
context.stroke(); context.lineTo(tox, toy)
context.stroke()
// draw arrow // draw arrow
context.beginPath(); context.setLineDash([10,0])
context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6)); context.beginPath()
context.lineTo(tox, toy ); context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6))
context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6)); context.lineTo(tox, toy )
context.stroke(); 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() { function resetAllSetValues() {
for(var i = 0; i<fromNetworksRepeater.count; i++) { for(var i = 0; i<fromNetworksRepeater.count; i++) {
fromNetworksRepeater.itemAt(i).amountToSend = 0 fromNetworksRepeater.itemAt(i).amountToSend = 0
fromNetworksRepeater.itemAt(i).isOnBestRoute = false fromNetworksRepeater.itemAt(i).routeOnNetwork = 0
toNetworksRepeater.itemAt(i).amountToReceive = 0 toNetworksRepeater.itemAt(i).amountToReceive = 0
toNetworksRepeater.itemAt(i).isOnBestRoute = false toNetworksRepeater.itemAt(i).routeOnNetwork = 0
} }
} }
} }
@ -78,7 +78,7 @@ Item {
id: fromNetwork id: fromNetwork
objectName: model.chainId objectName: model.chainId
property double amountToSend: 0 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 string tokenBalanceOnChain: selectedAccount && selectedAccount!== undefined && selectedAsset!== undefined ? selectedAccount.getTokenBalanceOnChain(model.chainId, selectedAsset.symbol) : ""
property var hasGas: selectedAccount.hasGas(model.chainId, model.nativeCurrencySymbol, requiredGasInEth) property var hasGas: selectedAccount.hasGas(model.chainId, model.nativeCurrencySymbol, requiredGasInEth)
primaryText: model.chainName primaryText: model.chainName
@ -95,7 +95,7 @@ Item {
onClicked: { onClicked: {
store.addRemoveDisabledFromChain(model.chainId, disabled) store.addRemoveDisabledFromChain(model.chainId, disabled)
// only recalculate if the a best route was 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() root.reCalculateSuggestedRoute()
} }
onVisibleChanged: { onVisibleChanged: {
@ -129,7 +129,7 @@ Item {
StatusCard { StatusCard {
id: toCard id: toCard
objectName: model.chainId objectName: model.chainId
property bool isOnBestRoute: false property int routeOnNetwork: 0
property double amountToReceive: 0 property double amountToReceive: 0
primaryText: model.chainName primaryText: model.chainName
secondaryText: LocaleUtils.numberToLocaleString(amountToReceive) secondaryText: LocaleUtils.numberToLocaleString(amountToReceive)
@ -146,7 +146,7 @@ Item {
onClicked: { onClicked: {
store.addRemoveDisabledToChain(model.chainId, disabled) store.addRemoveDisabledToChain(model.chainId, disabled)
// only recalculate if the a best route was 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() root.reCalculateSuggestedRoute()
} }
onVisibleChanged: { onVisibleChanged: {
@ -185,6 +185,11 @@ Item {
if(bestRoutes === undefined) if(bestRoutes === undefined)
return 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 // Get the canvas context
var ctx = getContext("2d"); var ctx = getContext("2d");
for(var i = 0; i< bestRoutes.length; i++) { for(var i = 0; i< bestRoutes.length; i++) {
@ -202,18 +207,21 @@ Item {
} }
} }
if(toN !== null && fromN !== null) { 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 amountToSend = weiToEth(bestRoutes[i].amountIn)
let amountToReceive = weiToEth(bestRoutes[i].amountOut) let amountToReceive = weiToEth(bestRoutes[i].amountOut)
fromN.amountToSend = amountToSend fromN.amountToSend = amountToSend
toN.amountToReceive += amountToReceive toN.amountToReceive += amountToReceive
fromN.isOnBestRoute = true fromN.routeOnNetwork += 1
toN.isOnBestRoute = true toN.routeOnNetwork += 1
d.thereIsApossibleRoute = true d.thereIsApossibleRoute = true
StatusQUtils.Utils.drawArrow(ctx, fromN.x + fromN.width, StatusQUtils.Utils.drawArrow(ctx, fromN.x + fromN.width,
fromN.y + fromN.height/2, fromN.y + fromN.cardIconPosition + yOffsetFrom,
toNetworksLayout.x + toN.x, toNetworksLayout.x + toN.x,
toN.y + toN.height/2, toN.y + toN.cardIconPosition + yOffsetTo,
'#627EEA') '#627EEA', xOffset)
} }
} }
} }