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,158 +10,149 @@ import StatusQ.Components 0.1
 
 Item {
     id: root
+
     property var assets
     property var selectedAsset
-    property string defaultToken
-    property string userSelectedToken
+    property string defaultToken: ""
+    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())
-            selectedTextField.text = selectedAsset.symbol.toUpperCase()
+            d.iconSource = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
+            d.text = selectedAsset.symbol.toUpperCase()
         }
     }
 
-    StatusSelect {
-        id: select
-        width: visualRect.width
+    QtObject {
+        id: d
+        property string iconSource: ""
+        property string text: ""
+    }
+
+    StatusComboBox {
+        id: comboBox
+
+        width: parent.width
+        height: parent.height
+
+        control.padding: 4
+        control.popup.width: 342
+        control.popup.x: width - control.popup.width
+
         model: root.assets
-        caretVisible: false
-        caretRightMargin: 0
-        bgColor: Style.current.transparent
-        bgColorHover: Theme.palette.directColor8
-        select.radius: 16
-        select.height: root.height
-        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
-            border.color: Theme.palette.directColor8
-            radius: 16
-            Row {
-                id: row
-                anchors.left: parent.left
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.margins: Style.current.halfPadding
-                spacing: Style.current.halfPadding
-                StatusBaseText {
-                    id: selectedTextField
-                    anchors.verticalCenter: parent.verticalCenter
-                    font.pixelSize: 15
-                    width: Math.min(50, implicitWidth)
-                    elide: Text.ElideRight
-                    verticalAlignment: Text.AlignVCenter
-                    color: Theme.palette.directColor1
-                    font.weight: Font.Medium
-                }
-                StatusRoundedImage {
-                    id: iconImg
-                    width: 40
-                    height: 40
-                    image.onStatusChanged: {
-                        if (iconImg.image.status === Image.Error) {
-                            iconImg.image.source = defaultToken
-                        }
+
+        control.background: Rectangle {
+            color: comboBox.control.hovered ? Theme.palette.directColor8 : "transparent"
+            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 {
+                font.pixelSize: 15
+                Layout.maximumWidth: 50
+                Layout.alignment: Qt.AlignVCenter
+                elide: Text.ElideRight
+                verticalAlignment: Text.AlignVCenter
+                color: Theme.palette.directColor1
+                text: d.text
+            }
         }
-        selectMenu.delegate: menuItem
-    }
 
-    Component {
-        id: menuItem
-        MenuItem {
-            id: itemContainer
-            property bool isFirstItem: index === 0
-            property bool isLastItem: index === assets.rowCount() - 1
+        delegate: StatusItemDelegate {
+            width: comboBox.control.popup.width
+            highlighted: index === comboBox.control.highlightedIndex
+            padding: 16
+
+            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) {
-                            iconImg.image.source = defaultToken
+                        if (image.status === Image.Error) {
+                            image.source = defaultToken
                         }
                     }
                 }
-                Column {
-                    anchors.left: iconImg.right
-                    anchors.leftMargin: 12
-                    anchors.verticalCenter: parent.verticalCenter
 
-                    StatusBaseText {
-                        text: symbol.toUpperCase()
-                        font.pixelSize: 15
-                        color: Theme.palette.directColor1
-                    }
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    Layout.leftMargin: 12
+                    spacing: 0
 
-                    StatusBaseText {
-                        text: name
-                        color: Theme.palette.baseColor1
-                        font.pixelSize: 15
+                    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)
+                        }
                     }
-                }
-                Column {
-                    anchors.right: parent.right
-                    anchors.rightMargin: 16
-                    anchors.verticalCenter: parent.verticalCenter
-                    StatusBaseText {
-                        font.pixelSize: 15
-                        text: parseFloat(totalBalance).toFixed(4) + " " + symbol
+                    RowLayout {
+                        Layout.fillWidth: true
+                        StatusBaseText {
+                            Layout.fillWidth: true
+                            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
+                        }
                     }
-                    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()
                 }
             }
         }