feat(@desktop/wallet): Update the token selector in SendModal

fixes #8713

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -77,6 +77,7 @@ Rectangle {
     property alias statusListItemComponentsSlot: statusListItemComponentsSlot
     property alias statusListItemTagsSlot: statusListItemTagsSlot
     property alias statusListItemInlineTagsSlot: statusListItemTagsSlotInline
+    property alias statusListItemLabel: statusListItemLabel
 
     signal clicked(string itemId, var mouse)
     signal titleClicked(string titleId)
@@ -361,16 +362,16 @@ Rectangle {
             ScrollView {
                 visible: tagsRepeater.count > 0
                 anchors.top: statusListItemTertiaryTitle.bottom
-                anchors.topMargin: visible? 8 : 0
+                anchors.topMargin: visible ? 8 : 0
                 width: parent.width
-                height: visible? contentHeight + 12 : contentHeight
+                height: visible ? contentHeight : 0
                 clip: true
 
                 ScrollBar.vertical.policy: ScrollBar.AlwaysOff
 
                 Row {
                     id: statusListItemTagsSlotInline
-                    spacing: 10
+                    spacing: tagsRepeater.count > 0 ? 10 : 0
 
                     Repeater {
                         id: tagsRepeater

ui/imports/shared/controls/AssetAndAmountInput.qml

@@ -30,6 +30,7 @@ Item {
     property bool isValid: false
     property string validationError
     property var formattedInputValue
+    property var getNetworkIcon: function(chainId){ return ""}
 
     height: inputAmount.height + (inputAmount.validationError ? -16 - inputAmount.validationErrorTopMargin : 0) + txtFiatBalance.height + txtFiatBalance.anchors.topMargin
     anchors.right: parent.right
@@ -166,9 +167,6 @@ Item {
          anchors.right: parent.right
          anchors.rightMargin: Style.current.smallPadding
          defaultToken: Style.png("tokens/DEFAULT-TOKEN@3x")
-         getCurrencyBalanceString: function (currencyBalance) {
-             return Utils.toLocaleString(currencyBalance.toFixed(2), RootStore.locale, {"currency": true}) + " " + root.currentCurrency.toUpperCase()
-         }
          tokenAssetSourceFn: function (symbol) {
              return symbol ? Style.png("tokens/" + symbol) : defaultToken
          }
@@ -178,6 +176,7 @@ Item {
              }
              return ""
          }
+         getNetworkIcon: root.getNetworkIcon
          onSelectedAssetChanged: {
              if (!selectAsset.selectedAsset) {
                  return

ui/imports/shared/controls/TokenBalancePerChainDelegate.qml

@@ -0,0 +1,55 @@
+import QtQuick 2.13
+
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+
+import utils 1.0
+
+StatusListItem {
+    id: root
+
+    property string currentCurrencySymbol
+    property var getNetworkIcon: function(chainId){
+        return ""
+    }
+    signal tokenSelected(var selectedToken)
+
+    title: name
+    label: enabledNetworkCurrencyBalance.toLocaleCurrencyString(Qt.locale(), root.currentCurrencySymbol)
+    asset.name: symbol ? Style.png("tokens/" + symbol) : ""
+    asset.isImage: true
+    asset.width: 32
+    asset.height: 32
+    statusListItemLabel.color: Theme.palette.directColor1
+    statusListItemInlineTagsSlot.spacing: sensor.containsMouse ? 0 :  -8
+    tagsModel: balances.count > 0 ? balances : []
+    tagsDelegate: sensor.containsMouse ? expandedItem : compactItem
+
+    onClicked: tokenSelected({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals})
+
+    Component {
+        id: compactItem
+        StatusRoundedImage {
+            z: index + 1
+            width: 16
+            height: 16
+            image.source: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId)))
+            visible: balance > 0
+        }
+    }
+    Component {
+        id: expandedItem
+        StatusListItemTag {
+            height: 16
+            title: balance
+            titleText.font.pixelSize: 12
+            closeButtonVisible: false
+            bgColor: "transparent"
+            asset.width: 16
+            asset.height: 16
+            asset.isImage: true
+            asset.name: Style.svg("tiny/%1".arg(root.getNetworkIcon(chainId)))
+            visible: balance > 0
+        }
+    }
+}

ui/imports/shared/panels/StatusAssetSelector.qml

@@ -14,23 +14,29 @@ import StatusQ.Core.Backpressure 1.0
 import shared.controls 1.0
 import utils 1.0
 
+import utils 1.0
+
+import "../controls"
+
 Item {
     id: root
 
     property var assets
     property var selectedAsset
-    property string defaultToken: ""
+    property string defaultToken
-    property string userSelectedToken: ""
+    property string userSelectedToken
+    property string currentCurrencySymbol
+    property string placeholderText
+
     property var tokenAssetSourceFn: function (symbol) {
         return ""
     }
     property var searchTokenSymbolByAddressFn: function (address) {
         return ""
     }
-
+    property var getNetworkIcon: function(chainId){
-    // Define this in the usage to get balance in currency selected by user
+        return ""
-    property var getCurrencyBalanceString: function (currencyBalance) { return "" }
+    }
-    property string placeholderText
 
     function resetInternal() {
         assets = null
@@ -66,9 +72,9 @@ Item {
         height: 34
 
         control.padding: 4
-        control.popup.width: 342
+        control.popup.width: 492
         control.popup.height: 416
-        control.popup.x: width - control.popup.width
+        control.popup.x: -root.x
         
         popupContentItemObjectName: "assetSelectorList"
 
@@ -140,74 +146,15 @@ Item {
 
         control.indicator: null
 
-        delegate: StatusItemDelegate {
+        delegate: TokenBalancePerChainDelegate {
-            width: comboBox.control.popup.width
-            highlighted: index === comboBox.control.highlightedIndex
-            padding: 16
             objectName: "AssetSelector_ItemDelegate_" + symbol
-            onClicked: {
+            width: comboBox.control.popup.width
-                // WARNING: Wrong ComboBox value processing. Check `StatusAccountSelector` for more info.
+            currentCurrencySymbol: root.currentCurrencySymbol
-                root.userSelectedToken = symbol
+            getNetworkIcon: root.getNetworkIcon
-                root.selectedAsset = {name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances, decimals: decimals}
+            onTokenSelected: {
-            }
+                userSelectedToken = selectedToken.symbol
-
+                selectedAsset = selectedToken
-            // WARNING: Wrong ComboBox value processing. Check `StatusAccountSelector` for more info.
+                comboBox.control.popup.close()
-            Component.onCompleted: {
-                if (symbol === userSelectedToken)
-                    root.selectedAsset = { name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances, decimals: decimals}
-            }
-
-            contentItem: RowLayout {
-                spacing: 0
-
-                StatusRoundedImage {
-                    image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
-                    image.onStatusChanged: {
-                        if (image.status === Image.Error) {
-                            image.source = defaultToken
-                        }
-                    }
-                }
-
-                ColumnLayout {
-                    Layout.fillWidth: true
-                    Layout.leftMargin: 12
-                    spacing: 0
-
-                    RowLayout {
-                        Layout.fillWidth: true
-
-                        StatusBaseText {
-                            Layout.fillWidth: true
-                            text: symbol.toUpperCase()
-                            font.pixelSize: 15
-                            color: Theme.palette.directColor1
-                        }
-                        StatusBaseText {
-                            Layout.fillWidth: true
-                            horizontalAlignment: Text.AlignRight
-                            font.pixelSize: 15
-                            text: parseFloat(totalBalance).toLocaleCurrencyString(Qt.locale(), symbol)
-                        }
-                    }
-                    RowLayout {
-                        Layout.fillWidth: true
-                        StatusBaseText {
-                            Layout.fillWidth: true
-                            elide: Text.ElideRight
-                            text: name
-                            color: Theme.palette.baseColor1
-                            font.pixelSize: 15
-                        }
-                        StatusBaseText {
-                            Layout.fillWidth: true
-                            horizontalAlignment: Text.AlignRight
-                            font.pixelSize: 15
-                            text: getCurrencyBalanceString(totalCurrencyBalance)
-                            color: Theme.palette.baseColor1
-                        }
-                    }
-                }
             }
         }
 

ui/imports/shared/popups/SendModal.qml

@@ -220,9 +220,7 @@ StatusDialog {
                             assets: popup.selectedAccount && popup.selectedAccount.assets ? popup.selectedAccount.assets : []
                             defaultToken: Style.png("tokens/DEFAULT-TOKEN@3x")
                             placeholderText: qsTr("Select token")
-                            getCurrencyBalanceString: function (currencyBalance) {
+                            currentCurrencySymbol: RootStore.currencyStore.currentCurrencySymbol
-                                return "%1 %2".arg(Utils.toLocaleString(currencyBalance.toFixed(2), popup.store.locale, {"currency": true})).arg(popup.store.currentCurrency.toUpperCase())
-                            }
                             tokenAssetSourceFn: function (symbol) {
                                 return symbol ? Style.png("tokens/%1".arg(symbol)) : defaultToken
                             }
@@ -232,6 +230,9 @@ StatusDialog {
                                 }
                                 return ""
                             }
+                            getNetworkIcon: function(chainId){
+                                return RootStore.getNetworkIcon(chainId)
+                            }
                             onSelectedAssetChanged: {
                                 if (!assetSelector.selectedAsset || !amountToSendInput.input.text || isNaN(amountToSendInput.input.text)) {
                                     return
@@ -293,6 +294,9 @@ StatusDialog {
                             }
                             return ""
                         }
+                        getNetworkIcon: function(chainId){
+                            return RootStore.getNetworkIcon(chainId)
+                        }
                         onTokenSelected: {
                             assetSelector.userSelectedToken = selectedToken.symbol
                             assetSelector.selectedAsset = selectedToken

ui/imports/shared/views/TokenListView.qml

@@ -5,6 +5,7 @@ import SortFilterProxyModel 0.2
 import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
 
 import utils 1.0
 
@@ -19,6 +20,7 @@ Rectangle {
     property var searchTokenSymbolByAddressFn: function (address) {
         return ""
     }
+    property var getNetworkIcon: function(chainId){}
 
     QtObject {
         id: d
@@ -52,15 +54,11 @@ Rectangle {
                 }
             ]
         }
-        delegate: TokenDelegate {
+        delegate: TokenBalancePerChainDelegate {
-            objectName: "SendModal_AssetView_TokenListItem_" + symbol
-            readonly property string balance: enabledNetworkBalance // Needed for the tests
-            currentCurrencySymbol: root.currentCurrencySymbol
             width: ListView.view.width
-            onClicked: {
+            currentCurrencySymbol: root.currentCurrencySymbol
-                tokenSelected({name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances, decimals: decimals})
+            getNetworkIcon: root.getNetworkIcon
-            }
+            onTokenSelected: root.tokenSelected(selectedToken)
-            color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
         }
         headerPositioning: ListView.OverlayHeader
         header: Rectangle {