fix(StatusAssetSelector): Reimplemented using `StatusComboBox`

ui/StatusQ

@@ -1 +1 @@
-Subproject commit 63ff9b82d1f13c063dddbb244a255a9886705fc7
+Subproject commit cff836280f3b9e1671518568fe1884f286b36054

ui/imports/shared/panels/StatusAssetSelector.qml

@@ -2,8 +2,6 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
-import utils 1.0
-
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1
@@ -12,159 +10,150 @@ import StatusQ.Components 0.1
 
 Item {
     id: root
+
     property var assets
     property var selectedAsset
-    property string defaultToken
+    property string defaultToken: ""
-    property string userSelectedToken
+    property string userSelectedToken: ""
     property var tokenAssetSourceFn: function (symbol) {
         return ""
     }
+
     // Define this in the usage to get balance in currency selected by user
     property var getCurrencyBalanceString: function (currencyBalance) { return "" }
-    implicitWidth: select.width
-    implicitHeight: 48
 
     function resetInternal() {
         assets = null
         selectedAsset = null
     }
 
+    implicitWidth: 106
+    implicitHeight: comboBox.implicitHeight
+
     onSelectedAssetChanged: {
         if (selectedAsset && selectedAsset.symbol) {
-            iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
+            d.iconSource = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
-            selectedTextField.text = selectedAsset.symbol.toUpperCase()
+            d.text = selectedAsset.symbol.toUpperCase()
         }
     }
 
-    StatusSelect {
+    QtObject {
-        id: select
+        id: d
-        width: visualRect.width
+        property string iconSource: ""
-        model: root.assets
+        property string text: ""
-        caretVisible: false
+    }
-        caretRightMargin: 0
+
-        bgColor: Style.current.transparent
+    StatusComboBox {
-        bgColorHover: Theme.palette.directColor8
+        id: comboBox
-        select.radius: 16
+
-        select.height: root.height
+        width: parent.width
-        selectMenu.width: 342
-        selectMenu.height: 416
-        selectedItemComponent: Rectangle {
-            id: visualRect
-            width: row.width + Style.current.padding
         height: parent.height
-            color: Style.current.transparent
+
-            border.width: 1
+        control.padding: 4
-            border.color: Theme.palette.directColor8
+        control.popup.width: 342
-            radius: 16
+        control.popup.x: width - control.popup.width
-            Row {
+
-                id: row
+        model: root.assets
-                anchors.left: parent.left
+
-                anchors.verticalCenter: parent.verticalCenter
+        control.background: Rectangle {
-                anchors.margins: Style.current.halfPadding
+            color: comboBox.control.hovered ? Theme.palette.directColor8 : "transparent"
-                spacing: Style.current.halfPadding
+            radius: 6
+        }
+
+        contentItem: RowLayout {
+            spacing: 4
+
+            StatusRoundedImage {
+                Layout.preferredWidth: 24
+                Layout.preferredHeight: 24
+                Layout.alignment: Qt.AlignVCenter
+                image.source: d.iconSource
+                image.onStatusChanged: {
+                    if (image.status === Image.Error) {
+                        image.source = defaultToken
+                    }
+                }
+            }
             StatusBaseText {
-                    id: selectedTextField
-                    anchors.verticalCenter: parent.verticalCenter
                 font.pixelSize: 15
-                    width: Math.min(50, implicitWidth)
+                Layout.maximumWidth: 50
+                Layout.alignment: Qt.AlignVCenter
                 elide: Text.ElideRight
                 verticalAlignment: Text.AlignVCenter
                 color: Theme.palette.directColor1
-                    font.weight: Font.Medium
+                text: d.text
             }
-                StatusRoundedImage {
-                    id: iconImg
-                    width: 40
-                    height: 40
-                    image.onStatusChanged: {
-                        if (iconImg.image.status === Image.Error) {
-                            iconImg.image.source = defaultToken
-                        }
-                    }
-                }
-            }
-        }
-        selectMenu.delegate: menuItem
         }
 
-    Component {
+        delegate: StatusItemDelegate {
-        id: menuItem
+            width: comboBox.control.popup.width
-        MenuItem {
+            highlighted: index === comboBox.control.highlightedIndex
-            id: itemContainer
+            padding: 16
-            property bool isFirstItem: index === 0
+
-            property bool isLastItem: index === assets.rowCount() - 1
+            onClicked: {
+                // TODO: move this out of StatusQ, this involves dependency on BE code
+                // WARNING: Wrong ComboBox value processing. Check `StatusAccountSelector` for more info.
+                root.userSelectedToken = symbol
+                root.selectedAsset = {name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances}
+            }
+
+            // TODO: move this out of StatusQ, this involves dependency on BE code
+            // WARNING: Wrong ComboBox value processing. Check `StatusAccountSelector` for more info.
+            Component.onCompleted: {
+                if ((userSelectedToken === "" && index === 0) || symbol === userSelectedToken)
+                    root.selectedAsset = { name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances}
+            }
+
+            contentItem: RowLayout {
+                spacing: 0
 
-            width: parent.width
-            height: 72
-            contentItem: Item {
-                anchors.fill: parent
                 StatusRoundedImage {
-                    id: iconImg
-                    anchors.left: parent.left
-                    anchors.leftMargin: 16
-                    anchors.verticalCenter: parent.verticalCenter
                     image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
                     image.onStatusChanged: {
-                        if (iconImg.image.status === Image.Error) {
+                        if (image.status === Image.Error) {
-                            iconImg.image.source = defaultToken
+                            image.source = defaultToken
                         }
                     }
                 }
-                Column {
+
-                    anchors.left: iconImg.right
+                ColumnLayout {
-                    anchors.leftMargin: 12
+                    Layout.fillWidth: true
-                    anchors.verticalCenter: parent.verticalCenter
+                    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
                             text: name
                             color: Theme.palette.baseColor1
                             font.pixelSize: 15
                         }
-                }
-                Column {
-                    anchors.right: parent.right
-                    anchors.rightMargin: 16
-                    anchors.verticalCenter: parent.verticalCenter
                         StatusBaseText {
+                            Layout.fillWidth: true
+                            horizontalAlignment: Text.AlignRight
                             font.pixelSize: 15
-                        text: parseFloat(totalBalance).toFixed(4) + " " + symbol
-                    }
-                    StatusBaseText {
-                        font.pixelSize: 15
-                        anchors.right: parent.right
                             text: getCurrencyBalanceString(totalCurrencyBalance)
                             color: Theme.palette.baseColor1
                         }
                     }
                 }
-            background: Rectangle {
-                color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
-            }
-            Component.onCompleted: {
-                if(userSelectedToken === "") {
-                    if(index === 0) {
-                        selectedAsset = model
-                    }
-                } else {
-                    if(symbol === userSelectedToken) {
-                        selectedAsset = model
-                    }
-                }
-            }
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: itemContainer
-                onClicked: {
-                    userSelectedToken = symbol
-                    selectedAsset = model
-                    select.selectMenu.close()
-                }
             }
         }
     }