Revert "chore: Remove StatusAssetSelector from StatusQ (#792)" (#805)

This reverts commit 3954d49266.

sandbox/main.qml

@@ -207,6 +207,11 @@ StatusWindow {
                         selected: viewLoader.source.toString().includes(title)
                         onClicked: mainPageView.page(title);
                     }
+                    StatusNavigationListItem {
+                        title: "StatusAssetSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
                     StatusNavigationListItem {
                         title: "StatusColorSelector"
                         selected: viewLoader.source.toString().includes(title)

sandbox/pages/StatusAssetSelectorPage.qml

@@ -0,0 +1,50 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusAssetSelector {
+        getCurrencyBalanceString: function (currencyBalance) {
+            return currencyBalance.toFixed(2) + " USD"
+        }
+        tokenAssetSourceFn: function (symbol) {
+            return "../../assets/img/icons/snt.svg"
+        }
+        assets: ListModel {
+            ListElement {
+                address: "0x1234"
+                name: "Status Network Token"
+                balance: "20"
+                symbol: "SNT"
+                totalCurrencyBalance: 9992.01
+                totalBalance: 9992.01
+            }
+            ListElement {
+                address: "0x1234"
+                name: "DAI Token"
+                balance: "15"
+                symbol: "DAI"
+                totalCurrencyBalance: 20.00001
+                totalBalance: 20.00001
+            }
+            ListElement {
+                address: "0x1234"
+                name: "ABYSS Token"
+                balance: "25"
+                symbol: "ABYSS"
+                totalCurrencyBalance: 24.1
+                totalBalance: 24.1
+            }
+        }
+    }
+}
+

src/StatusQ/Controls/StatusAssetSelector.qml

@@ -0,0 +1,158 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+Item {
+    id: root
+    property var assets
+    property var selectedAsset
+    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: 106
+    implicitHeight: 32
+
+    function resetInternal() {
+        assets = null
+        selectedAsset = null
+    }
+
+    onSelectedAssetChanged: {
+        if (selectedAsset && selectedAsset.symbol) {
+            iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
+            selectedTextField.text = selectedAsset.symbol.toUpperCase()
+        }
+    }
+
+    StatusSelect {
+        id: select
+        width: parent.width
+        bgColor: "transparent"
+        bgColorHover: Theme.palette.directColor8
+        model: root.assets
+        caretRightMargin: 0
+        select.radius: 6
+        select.height: root.height
+        selectMenu.width: 342
+        selectedItemComponent: Item {
+            anchors.fill: parent
+            StatusRoundedImage {
+                id: iconImg
+                anchors.left: parent.left
+                anchors.leftMargin: 4
+                width: 24
+                height: 24
+                anchors.verticalCenter: parent.verticalCenter
+                image.onStatusChanged: {
+                    if (iconImg.image.status === Image.Error) {
+                        iconImg.image.source = defaultToken
+                    }
+                }
+            }
+            StatusBaseText {
+                id: selectedTextField
+                anchors.left: iconImg.right
+                anchors.leftMargin: 4
+                anchors.verticalCenter: parent.verticalCenter
+                font.pixelSize: 15
+                height: 22
+                width: 50
+                elide: Text.ElideRight
+                verticalAlignment: Text.AlignVCenter
+                color: Theme.palette.directColor1
+            }
+        }
+        selectMenu.delegate: menuItem
+    }
+
+    Component {
+        id: menuItem
+        MenuItem {
+            id: itemContainer
+            property bool isFirstItem: index === 0
+            property bool isLastItem: index === assets.rowCount() - 1
+
+            width: parent.width
+            height: 72
+            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
+                    }
+                }
+            }
+            Column {
+                anchors.left: iconImg.right
+                anchors.leftMargin: 12
+                anchors.verticalCenter: parent.verticalCenter
+
+                StatusBaseText {
+                    text: symbol.toUpperCase()
+                    font.pixelSize: 15
+                    color: Theme.palette.directColor1
+                }
+
+                StatusBaseText {
+                    text: name
+                    color: Theme.palette.baseColor1
+                    font.pixelSize: 15
+                }
+            }
+            Column {
+                anchors.right: parent.right
+                anchors.rightMargin: 16
+                anchors.verticalCenter: parent.verticalCenter
+                StatusBaseText {
+                    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
+            }
+            // To-do move this out of StatusQ, this involves dependency on BE code
+            Component.onCompleted: {
+                if(userSelectedToken === "") {
+                    if(index === 0) {
+                        selectedAsset = { name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances}
+                    }
+                } else {
+                    if(symbol === userSelectedToken) {
+                        selectedAsset = { name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances}
+                    }
+                }
+            }
+            MouseArea {
+                cursorShape: Qt.PointingHandCursor
+                anchors.fill: itemContainer
+                onClicked: {
+                    userSelectedToken = symbol
+                    // To-do move this out of StatusQ, this involves dependency on BE code
+                    selectedAsset = {name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances}
+                    select.selectMenu.close()
+                }
+            }
+        }
+    }
+}

src/StatusQ/Controls/StatusSelect.qml

@@ -21,7 +21,6 @@ Item {
     property alias selectMenu: selectMenu
     property color bgColorHover: bgColor
     property alias selectedItemComponent: selectedItemContainer.children
-    property bool caretVisible: true
     property int caretRightMargin: 16
     property alias select: inputRectangle
     property int menuAlignment: StatusSelect.MenuAlignment.Right
@@ -73,7 +72,6 @@ Item {
             height: 24
             icon: "chevron-down"
             color: Theme.palette.baseColor1
-            visible: caretVisible
         }
     }
 

src/StatusQ/Controls/qmldir

@@ -1,6 +1,7 @@
 module StatusQ.Controls
 
 StatusAccountSelector 0.1 StatusAccountSelector.qml
+StatusAssetSelector 0.1 StatusAssetSelector.qml
 StatusBanner 0.1 StatusBanner.qml
 StatusChatCommandButton 0.1 StatusChatCommandButton.qml
 StatusChatInfoButton 0.1 StatusChatInfoButton.qml