feat(@desktop/wallet): Send modal update

fixes #8609

src/app/modules/main/profile_section/ens_usernames/io_interface.nim

@@ -85,6 +85,10 @@ method getFiatValue*(self: AccessInterface, cryptoBalance: string, cryptoSymbol:
   {.base.} =
   raise newException(ValueError, "No implementation available")
 
+method getCryptoValue*(self: AccessInterface, fiatAmount: string, cryptoSymbol: string, fiatSymbol: string): string
+  {.base.} =
+  raise newException(ValueError, "No implementation available")
+
 method getGasEthValue*(self: AccessInterface, gweiValue: string, gasLimit: string): string {.base.} =
   raise newException(ValueError, "No implementation available")
 

src/app/modules/main/profile_section/ens_usernames/module.nim

@@ -339,6 +339,20 @@ method getFiatValue*(self: Module, cryptoBalance: string, cryptoSymbol: string,
   let value = floatCryptoBalance * price
   return fmt"{value}"
 
+method getCryptoValue*(self: Module, fiatAmount: string, cryptoSymbol: string, fiatSymbol: string): string =
+  var fiatAmountBalance: float = 0
+  try:
+    fiatAmountBalance = parseFloat(fiatAmount)
+  except ValueError:
+    return "0.00"
+
+  if (fiatAmount == "" or cryptoSymbol == "" or fiatSymbol == ""):
+    return "0.00"
+
+  let price = self.controller.getPrice(cryptoSymbol, fiatSymbol)
+  let value = fiatAmountBalance / price
+  return fmt"{value}"
+
 method getGasEthValue*(self: Module, gweiValue: string, gasLimit: string): string {.slot.} =
   var gasLimitInt:int
 

src/app/modules/main/profile_section/ens_usernames/view.nim

@@ -126,6 +126,9 @@ QtObject:
   proc getFiatValue*(self: View, cryptoBalance: string, cryptoSymbol: string, fiatSymbol: string): string {.slot.} =
     return self.delegate.getFiatValue(cryptoBalance, cryptoSymbol, fiatSymbol)
 
+  proc getCryptoValue*(self: View, fiatAmount: string, cryptoSymbol: string, fiatSymbol: string): string {.slot.} =
+    return self.delegate.getCryptoValue(fiatAmount, cryptoSymbol, fiatSymbol)
+
   proc getGasEthValue*(self: View, gweiValue: string, gasLimit: string): string {.slot.} =
     return self.delegate.getGasEthValue(gweiValue, gasLimit)
 

src/app_service/service/transaction/async_tasks.nim

@@ -62,6 +62,39 @@ proc getFeesTotal*(paths: seq[TransactionPathDto]): Fees =
     fees.totalTime += path.estimatedTime
   return fees
 
+proc getTotalAmountToReceive*(paths: seq[TransactionPathDto]): UInt256 =
+  var totalAmountToReceive: UInt256 = stint.u256(0)
+  for path in paths:
+    totalAmountToReceive += path.amountOut
+
+  return totalAmountToReceive
+
+proc getToNetworksList*(paths: seq[TransactionPathDto]): seq[SendToNetwork] =
+  var networkMap: Table[int, SendToNetwork] = initTable[int, SendToNetwork]()
+  for path in paths:
+    if(networkMap.hasKey(path.toNetwork.chainId)):
+      networkMap[path.toNetwork.chainId].amountOut = networkMap[path.toNetwork.chainId].amountOut + path.amountOut
+    else:
+      networkMap[path.toNetwork.chainId] = SendToNetwork(chainId: path.toNetwork.chainId, chainName: path.toNetwork.chainName, iconUrl: path.toNetwork.iconURL, amountOut: path.amountOut)
+  return toSeq(networkMap.values)
+
+proc addFirstSimpleBridgeTxFlag(paths: seq[TransactionPathDto]) : seq[TransactionPathDto] =
+  let txPaths = paths
+  var firstSimplePath: bool = false
+  var firstBridgePath: bool = false
+
+  for path in txPaths:
+    if path.bridgeName == "Simple":
+      if not firstSimplePath:
+        firstSimplePath = true
+        path.isFirstSimpleTx = true
+    else:
+      if not firstBridgePath:
+        firstBridgePath = false
+        path.isFirstBridgeTx = true
+
+  return txPaths
+
 const getSuggestedRoutesTask*: Task = proc(argEncoded: string) {.gcsafe, nimcall.} =
   let arg = decode[GetSuggestedRoutesTaskArg](argEncoded)
 
@@ -86,16 +119,17 @@ const getSuggestedRoutesTask*: Task = proc(argEncoded: string) {.gcsafe, nimcall
     bestPaths.sort(sortAsc[TransactionPathDto])
     let output = %*{
       "suggestedRoutes": SuggestedRoutesDto(
-        best: bestPaths,
-        candidates: response["Candidates"].getElems().map(x => x.toTransactionPathDto()),
-        gasTimeEstimate: getFeesTotal(bestPaths)),
+        best: addFirstSimpleBridgeTxFlag(bestPaths),
+        gasTimeEstimate: getFeesTotal(bestPaths),
+        amountToReceive: getTotalAmountToReceive(bestPaths),
+        toNetworks: getToNetworksList(bestPaths)),
       "error": ""
     }
     arg.finish(output)
 
   except Exception as e:
     let output = %* {
-     "suggestedRoutes": SuggestedRoutesDto(best: @[], candidates: @[], gasTimeEstimate:  Fees()),
+     "suggestedRoutes": SuggestedRoutesDto(best: @[], gasTimeEstimate:  Fees(), amountToReceive: stint.u256(0), toNetworks: @[]),
       "error": fmt"Error getting suggested routes: {e.msg}"
     }
     arg.finish(output)

src/app_service/service/transaction/dto.nim

@@ -164,7 +164,8 @@ type
     cost*: float
     estimatedTime*: int
     amountInLocked*: bool
-
+    isFirstSimpleTx*: bool
+    isFirstBridgeTx*: bool
 
 proc `$`*(self: TransactionPathDto): string =
   return fmt"""TransactionPath(
@@ -179,7 +180,9 @@ proc `$`*(self: TransactionPathDto): string =
     bonderFees:{self.bonderFees},
     cost:{self.cost},
     estimatedTime:{self.estimatedTime},
-    amountInLocked:{self.amountInLocked}
+    amountInLocked:{self.amountInLocked},
+    isFirstSimpleTx:{self.isFirstSimpleTx},
+    isFirstBridgeTx:{self.isFirstBridgeTx}
   )"""
 
 proc toTransactionPathDto*(jsonObj: JsonNode): TransactionPathDto =
@@ -197,6 +200,8 @@ proc toTransactionPathDto*(jsonObj: JsonNode): TransactionPathDto =
   result.estimatedTime = jsonObj{"EstimatedTime"}.getInt
   discard jsonObj.getProp("GasAmount", result.gasAmount)
   discard jsonObj.getProp("AmountInLocked", result.amountInLocked)
+  result.isFirstSimpleTx = false
+  result.isFirstBridgeTx = false
 
 proc convertToTransactionPathDto*(jsonObj: JsonNode): TransactionPathDto =
   result = TransactionPathDto()
@@ -219,8 +224,16 @@ type
     totalTokenFees*: float
     totalTime*: int
 
+type
+  SendToNetwork* = ref object
+    chainId*: int
+    chainName*: string
+    iconUrl*: string
+    amountOut*: UInt256
+
 type
   SuggestedRoutesDto* = ref object
     best*: seq[TransactionPathDto]
-    candidates*: seq[TransactionPathDto]
     gasTimeEstimate*: Fees
+    amountToReceive*: UInt256
+    toNetworks*: seq[SendToNetwork]

ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml

@@ -157,7 +157,7 @@ Item {
         \qmlproperty real StatusBaseInput::leftPadding
         This property sets the leftComponentLoader's left padding.
     */
-    property real leftPadding: leftComponentLoader.item ? 8 : 16
+    property real leftPadding: leftComponentLoader.item ? 6 : 16
     /*!
         \qmlproperty real StatusBaseInput::rightPadding
         This property sets the right padding.
@@ -308,7 +308,7 @@ Item {
                 spacing: 2
                 anchors {
                     fill: parent
-                    leftMargin: root.leftPadding ? root.leftPadding : leftComponentLoader.item ? 6 : 16
+                    leftMargin: root.leftPadding
                     rightMargin: root.rightPadding
                 }
 

ui/app/AppLayouts/Profile/stores/EnsUsernamesStore.qml

@@ -122,6 +122,12 @@ QtObject {
         return ensUsernamesModule.getFiatValue(balance, cryptoSymbol, fiatSymbol)
     }
 
+    function getCryptoValue(balance, cryptoSymbol, fiatSymbol) {
+        if(!root.ensUsernamesModule)
+            return ""
+        return ensUsernamesModule.getCryptoValue(balance, cryptoSymbol, fiatSymbol)
+    }
+
     function getGasEthValue(gweiValue, gasLimit) {
         if(!root.ensUsernamesModule)
             return ""

ui/imports/shared/controls/AmountInputWithCursor.qml

@@ -5,6 +5,8 @@ import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
+import utils 1.0
+
 StatusInput {
     id: cursorInput
 
@@ -16,8 +18,8 @@ StatusInput {
     placeholderText: ""
     input.edit.objectName: "amountInput"
     input.edit.cursorVisible: true
-    input.edit.font.pixelSize: 32
-    input.placeholderFont.pixelSize: 32
+    input.edit.font.pixelSize: Utils.getFontSizeBasedOnLetterCount(text)
+    input.placeholderFont.pixelSize: 34
     input.leftPadding: 0
     input.rightPadding: 0
     input.topPadding: 0

ui/imports/shared/controls/GasSelector.qml

@@ -43,7 +43,10 @@ Item {
                 id: listItem
                 color: Theme.palette.statusListItem.backgroundColor
                 width: parent.width
-                asset.name: index == 0 ? "tiny/gas" : ""
+                asset.name: "tiny/gas"
+                asset.color: Theme.palette.directColor1
+                statusListItemIcon.active: true
+                statusListItemIcon.opacity: modelData.isFirstSimpleTx
                 title: qsTr("%1 transaction fee").arg(modelData.fromNetwork.chainName)
                 subTitle: "%1 eth".arg(LocaleUtils.numberToLocaleString(parseFloat(totalGasAmount)))
                 property string totalGasAmount : {
@@ -69,12 +72,16 @@ Item {
 
         // Bridge
         Repeater {
+            id: bridgeRepeater
             model: root.bestRoutes
-            StatusListItem {
+            delegate: StatusListItem {
                 id: listItem2
                 color: Theme.palette.statusListItem.backgroundColor
                 width: parent.width
-                asset.name: index == 0 ? "tiny/bridge" : ""
+                asset.name: "tiny/bridge"
+                asset.color: Theme.palette.directColor1
+                statusListItemIcon.active: true
+                statusListItemIcon.opacity: modelData.isFirstBridgeTx
                 title: qsTr("%1 -> %2 bridge").arg(modelData.fromNetwork.chainName).arg(modelData.toNetwork.chainName)
                 subTitle: "%1 %2".arg(LocaleUtils.numberToLocaleString(modelData.tokenFees)).arg(root.selectedTokenSymbol)
                 visible: modelData.bridgeName !== "Simple"

ui/imports/shared/panels/StatusAssetSelector.qml

@@ -12,6 +12,7 @@ import StatusQ.Components 0.1
 import StatusQ.Core.Backpressure 1.0
 
 import shared.controls 1.0
+import utils 1.0
 
 Item {
     id: root
@@ -51,6 +52,7 @@ Item {
         property string iconSource: ""
         property string text: ""
         property string searchString
+        property bool isTokenSelected: !!root.selectedAsset
 
         readonly property var updateSearchText: Backpressure.debounce(root, 1000, function(inputText) {
             d.searchString = inputText
@@ -60,8 +62,8 @@ Item {
     StatusComboBox {
         id: comboBox
         objectName: "assetSelectorButton"
-        width: control.width
-        height: parent.height
+        width: d.isTokenSelected ? rowLayout.implicitWidth : 116
+        height: 34
 
         control.padding: 4
         control.popup.width: 342
@@ -86,30 +88,17 @@ Item {
 
         control.background: Rectangle {
             color: "transparent"
-            border.width: 1
-            border.color: comboBox.control.hovered ? Theme.palette.primaryColor2 : Theme.palette.directColor8
-            radius: 16
-            width: rowLayout.width
-            implicitHeight: 48
+            border.width: d.isTokenSelected ? 0 : 1
+            border.color: d.isTokenSelected ? "transparent" : Theme.palette.directColor7
+            radius: 12
         }
 
         contentItem: RowLayout {
             id: rowLayout
-            spacing: 8
-            StatusBaseText {
-                Layout.leftMargin: 8
-                Layout.alignment: Qt.AlignVCenter
-                font.pixelSize: 15
-                elide: Text.ElideRight
-                verticalAlignment: Text.AlignVCenter
-                color: !!root.selectedAsset ? Theme.palette.directColor1: Theme.palette.baseColor1
-                font.weight: Font.Medium
-                text: !!root.selectedAsset ? d.text : placeholderText
-            }
             StatusRoundedImage {
-                Layout.preferredWidth: 40
-                Layout.preferredHeight: 40
-                Layout.alignment: Qt.AlignVCenter
+                Layout.preferredWidth: 21
+                Layout.preferredHeight: 21
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
                 visible: !!d.iconSource
                 image.source: d.iconSource
                 image.onStatusChanged: {
@@ -118,9 +107,34 @@ Item {
                     }
                 }
             }
-            Item {
-                width: 8
-                height: 0
+            StatusBaseText {
+                Layout.alignment: Qt.AlignVCenter
+                font.pixelSize: 28
+                elide: Text.ElideRight
+                verticalAlignment: Text.AlignVCenter
+                color: Theme.palette.miscColor1
+                text: d.text
+                visible: d.isTokenSelected
+            }
+            StatusIcon {
+                Layout.leftMargin: -3
+                Layout.alignment: Qt.AlignVCenter
+                icon: "chevron-down"
+                width: 16
+                height: 16
+                color: Theme.palette.miscColor1
+                visible: d.isTokenSelected
+            }
+            StatusBaseText {
+                Layout.maximumWidth: comboBox.width - Style.current.padding
+                Layout.alignment: Qt.AlignCenter
+                visible: !d.isTokenSelected
+                font.pixelSize: 15
+                font.weight: Font.Medium
+                verticalAlignment: Text.AlignVCenter
+                color: Theme.palette.baseColor1
+                elide: Qt.ElideRight
+                text: placeholderText
             }
         }
 
@@ -215,11 +229,9 @@ Item {
             placeholderText: qsTr("Search for token or enter token address")
             onTextChanged: Qt.callLater(d.updateSearchText, text)
             input.clearable: true
-            leftPadding: 0
-            rightPadding: 0
             input.rightComponent: StatusIcon {
-                width: 24
-                height: 24
+                width: 16
+                height: 16
                 color: Theme.palette.baseColor1
                 icon: "search"
             }